カラフルでオシャレ、デザイン性の高いWebサイトデザイン24個まとめ

24colorful_website_top1

 

Webサイトやブログなどを制作しているときに、デザインアイデアに悩むことありませんか。

そんなとき頭をリフレッシュさせてくれる、カラフルなWebサイトデザインを集めてみました。

 

海外デザインブログWeb Design Ledgerで、カラフルでオシャレなレイアウトが印象的なWebサイトデザインを20個まとめたエントリー「20 Inspiring Examples of Colorful Web Designs」が公開されていたので、今回はご紹介します。

 

Webデザインアイデアの参考にしてみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

カラフルでオシャレ、クリエイティブなWebサイトデザインまとめ

 

The Neighbourhood

ヘタウマなイラストをヘッダー全体に使ったWebサイトデザイン。余白スペースの取り方なども参考になりそうです。

colorful01

 

 

 

Small Studio

オーストラリアにあるデザイン事務所のWebサイト、水平方向にコンテンツをスライドさせる、シングルページ完結型となっています。

colorful14

 

 

 

Superawesome

画像とテキストをうまく組み合わせた参考サイト、それぞれのコンテンツも工夫いっぱいで飽きさせないデザインとなっています。

design11

 

 

 

Athletic Sport Sunglass & Technology

最近よく見かけるようになったパララックスエフェクトを利用したWebサイトデザイン、遊びのあるコンテンツ切替が素敵。

colorful17

 

 

 

Henrotte Julien

三角形の使い方が面白い、水平方向に移動するWebサイトデザイン。使いやすさは?ですが、インパクトありますね。

best_creative_websites_2011_da-ha.be

 

 

 

Formfett

トップページにキラキラ感のある写真を大胆に使ったWebサイトデザイン。クリエイティブなアイデアに脱帽です。

colorful18

 

 

 

Campfire

背景全体にさまざまな写真を貼付け、コンテンツを移動するたびに写真も切り替わるWebサイト。説明になっていませんね、。

best_creative_websites_2011_campfirenyc.com

 

 

 

Deux Huit Huit

トップページのタイポグラフィーデザインもオシャレですが、使われている配色がどれも参考になりすぎたのでメモとして。

design16

 

 

 

Craftsmanship

背景全体にウッドテクスチャを利用したWebサイトデザイン、スクロールするとロゴがじわじわ消えていきます。

design05

 

 

 

Espacio Creativo

クリエイティブでかわいいイラストを使ったWebサイトデザイン、背景テクスチャの質感もばっちりです。

colorful09

 

 

 

AwesomeVille

ヘタウマなイラストのみでデザインされたWebサイトデザイン、左上にあるメニューをクリックするとアニメーションでコンテンツが移動します。

best_creative_websites_2011_awesomeville.com(2)

 

 

 

La Maddalena

ポーランドにあるレストランのWebサイトデザイン。パララックスエフェクトを利用して、次々にお皿のメニューが切り替わります。

colorful11

 

 

 

Social Forces

パステルカラーを使ったやさしい色使いと、巨大なタイポグラフィーが印象的なWebデザイン。

Webトレンドを多数盛り込んだデザインとなっています。

design06

 

 

 

Slavery Footprint

矢印を追っていくことで、コンテンツがアニメーションで移動するユニークなWebサイトデザイン。

best_creative_websites_2011_slaveryfootprint.org

 

 

 

Design by Rolf

スライダーからはみ出したようなデザインを使った、インパクトのあるWebサイトデザイン。特にシングルページの作りはユニークですよ。

design15

 

 

 

10 Years in Type

あるデザイン事務所の10年間の歩みを本にして、スライドショーで閲覧できるWebサイトデザイン。インターフェースもオシャレです。

colorful05

 

 

 

Animade

シンプルなグリッドレイアウトで組まれたポートフォリオサイトですが、実はロゴにトリックが隠されていました。

design18

 

 

 

Protest

グリッドを活用したレスポンシブデザインのWebサイトデザイン、配色もとてもきれいで参考になるかもしれません。

colorful20

 

 

 

Pioneer STEEZ

音楽プレイヤーの商品紹介ページですが、コンテンツの切替がユニークなパララックスエフェクト。左側のボタンでコンテンツ移動が可能となっています。

colorful13

 

 

 

 Shoppub

ユニークなフルスクリーンスライドショーをヘッダーにデザインしたWebデザイン、レトロなイラストがうまくマッチしています。

colorful07

 

 

 

Life in My Shoes

ロゴを真ん中に配置した、シンプルでモダンなWebサイトデザイン。ページの移動にはユニークなアニメーションが取り入れられています。

lifeinmyshoes_big

 

 

 

Grayden Poper

デザイナーさんの夢の職業をそのままレイアウトでデザインしたポートフォリオサイト。アイデアが面白すぎます。

best_creative_websites_2011_graydenpoper.com

 

[参照元 : 20 Inspiring Examples of Colorful Web Designs – Web Design Ledger]