Webサイトデザインにおいて青色はよく利用されている配色のひとつで、ブログから企業用ウェブサイトまで幅広く活用されています。
青色には、信頼やいきいきとした活力、また同様に穏やかに落ち着いた、リフレッシュした印象を与えてくれる効果があります。
海外デザインブログDesign Instructで、「青色」をテーマにデザインされたWebサイトデザインを30個まとめたエントリー「30 Beautifully Blue Web Designs for Inspiration」が公開されていたので、今回はご紹介します。
Webサイト制作の配色やデザインのインスピレーションの参考にいかがでしょう。
詳細は以下から。
青色をテーマにデザインされたWebサイトデザインまとめ
紺色と赤いろのストライプが印象的なミニマルなWebサイトデザインで、筆記体を利用したロゴデザインが印象的。テキスト色なども統一することで一体感を表現しています。
水彩絵具でペイントしたような淡い色使いが魅力的なWebサイトデザインで、手作り感のある温もりを感じることができそうです。
青色を利用したWebサイトデザインの中でも特にお気に入りのデザイン。グランジテイストのやさしい背景画像に、カラフルなイラストを加え、ロゴとの相性もばっちりです。
Foundation Six Web Design Studio
カナダにあるデザイン事務所の公式ホームページで、レタープレスデザインを利用したエレガントな印象を表現しています。
ザラザラとしたノイズテクスチャを利用したウェブサイトで、1px単位までこだわった高品質なデザインが魅力的。
アメリカにあるオーガニック食品のレストランのウェブサイト、手書きイラスト風デザインをメインに利用することであそび心のあふれる印象に仕上げています。
かわいいイラストデザインをあしらった背景デザインと全体の配色を合わせることですっきりとした印象に。
シングルページのみでデザインされたスライドアニメーションがユニークなWebサイト。
キッズ関連のアパレル、おもちゃなどを販売しているイギリスのWebサイトで、かわいらしい花柄デザインを利用した背景デザインがお店のイメージとぴったりです。
ボックス枠から飛び出したようなデザインパーツをレイアウトすることで、ユーザーの注目を惹くことができるユニークなテクニック。
イラストを利用したウェブサイトをデザインすることで、オリジナル性、アート性の高いWebサイトを表現することができます。
落ち着いた色使いの紙テクスチャパターンを利用し、レタープレス加工を加えたタイポグラフィーとの組み合わせがナイス。
レトロがかったピンク色がよいアクセントカラーになっているのではないでしょうか。
巨大なタイポグラフィーが印象的なロゴデザインを使ったWebサイトで、シンプルですっきりとしたデザインとなっており、配色の参考にしたいのでメモとしてエントリー。
背景全体に淡い青色グラデーションを利用したシンプルなデザインで、ピンク色をアクセントカラーに使用。
ザラザラとしたノイズテクスチャを利用したウェブサイトデザインで、青色のコントラストを利用することでデザインを引き立てています。
くじらの鳴き声をたのしむことができるWebサイトで、タイピングするとそれぞれ異なるくじらの声を聞くことができます。
※ 音がでますのでご注意ください。
We Choose the Moon: Pre-Launch
こちらは宇宙をテーマにしたロケットの打ち上げから月着陸までを体感することができるすごいデザイン、実際にいじってみると面白いかもしれません。
Launchボタンを押すとロケット発射となりますよ。
※ 音がでますのでご注意ください。
読み込み時間がかかりますが、想像力満点でデザインされたクリエイティブなデザインをフルスクリーンで利用したFlashサイト。
※ 音がでますのでご注意ください。
多くのウェブサイトではタイポグラフィーをデザインパーツとして利用しているケースをよくみかけました、またグリッドレイアウトを利用、質感の高いテクスチャ素材を利用することですっきりと、シンプルにレイアウトしています。
[参照元 : 30 Beautifully Blue Web Designs for Inspiration – Design Instruct]
[参照元 : Examples of Blue in Web Design – DesignM.ag]
