Advertisement

 

 

Webサイトデザインにおいて青色はよく利用されている配色のひとつで、ブログから企業用ウェブサイトまで幅広く活用されています。

青色には、信頼やいきいきとした活力、また同様に穏やかに落ち着いた、リフレッシュした印象を与えてくれる効果があります。

 

海外デザインブログDesign Instructで、「青色」をテーマにデザインされたWebサイトデザインを30個まとめたエントリー「30 Beautifully Blue Web Designs for Inspiration」が公開されていたので、今回はご紹介します。

Webサイト制作の配色やデザインのインスピレーションの参考にいかがでしょう。

 

 

詳細は以下から。

 

 

青色をテーマにデザインされたWebサイトデザインまとめ

 

Rockstar Business

紺色と赤いろのストライプが印象的なミニマルなWebサイトデザインで、筆記体を利用したロゴデザインが印象的。テキスト色なども統一することで一体感を表現しています。

 

 

Shaping the Page

水彩絵具でペイントしたような淡い色使いが魅力的なWebサイトデザインで、手作り感のある温もりを感じることができそうです。

 

 

FeedStitch

青色を利用したWebサイトデザインの中でも特にお気に入りのデザイン。グランジテイストのやさしい背景画像に、カラフルなイラストを加え、ロゴとの相性もばっちりです。

 

 

Foundation Six Web Design Studio

カナダにあるデザイン事務所の公式ホームページで、レタープレスデザインを利用したエレガントな印象を表現しています。

 

 

Capo

ザラザラとしたノイズテクスチャを利用したウェブサイトで、1px単位までこだわった高品質なデザインが魅力的。

 

 

Welcome to Marie Catribs

アメリカにあるオーガニック食品のレストランのウェブサイト、手書きイラスト風デザインをメインに利用することであそび心のあふれる印象に仕上げています。

 

 

Sketchnotes

かわいいイラストデザインをあしらった背景デザインと全体の配色を合わせることですっきりとした印象に。

 

 

DrupalCon Denver 2012

シングルページのみでデザインされたスライドアニメーションがユニークなWebサイト。

 

 

Boheimia

キッズ関連のアパレル、おもちゃなどを販売しているイギリスのWebサイトで、かわいらしい花柄デザインを利用した背景デザインがお店のイメージとぴったりです。

 

 

Blue Sky Resumes

ボックス枠から飛び出したようなデザインパーツをレイアウトすることで、ユーザーの注目を惹くことができるユニークなテクニック。

 

 

Carbonmade

イラストを利用したウェブサイトをデザインすることで、オリジナル性、アート性の高いWebサイトを表現することができます。

 

 

Shelly Cooper Design

落ち着いた色使いの紙テクスチャパターンを利用し、レタープレス加工を加えたタイポグラフィーとの組み合わせがナイス。

レトロがかったピンク色がよいアクセントカラーになっているのではないでしょうか。

 

 

Love of My Life

巨大なタイポグラフィーが印象的なロゴデザインを使ったWebサイトで、シンプルですっきりとしたデザインとなっており、配色の参考にしたいのでメモとしてエントリー。

 

 

Bestwork Consulting Inc.

背景全体に淡い青色グラデーションを利用したシンプルなデザインで、ピンク色をアクセントカラーに使用。

 

 

Hull Digital Live 10

ザラザラとしたノイズテクスチャを利用したウェブサイトデザインで、青色のコントラストを利用することでデザインを引き立てています。

 

 

Optus Whale Song

くじらの鳴き声をたのしむことができるWebサイトで、タイピングするとそれぞれ異なるくじらの声を聞くことができます。

※ 音がでますのでご注意ください。

 

 

We Choose the Moon: Pre-Launch

こちらは宇宙をテーマにしたロケットの打ち上げから月着陸までを体感することができるすごいデザイン、実際にいじってみると面白いかもしれません。

Launchボタンを押すとロケット発射となりますよ。

※ 音がでますのでご注意ください。

 

 

Recycled Lifeforms

読み込み時間がかかりますが、想像力満点でデザインされたクリエイティブなデザインをフルスクリーンで利用したFlashサイト。

※ 音がでますのでご注意ください。

 

 

Jeremy Church

 

 

Bounty Bev.

 

 

Vegas Uncork’d

 

 

Carla Ferolja

 

 

Aboard Entrepreneurship

 

 

Mail Chimp

 

多くのウェブサイトではタイポグラフィーをデザインパーツとして利用しているケースをよくみかけました、またグリッドレイアウトを利用質感の高いテクスチャ素材を利用することですっきりと、シンプルにレイアウトしています。

 

[参照元 : 30 Beautifully Blue Web Designs for Inspiration – Design Instruct]

[参照元 : Examples of Blue in Web Design – DesignM.ag]