Webサイトの印象に大きな影響を与える「配色」、色による具体的なイメージの違いについても以前触れています。
そうは言ってもなかなか難しい色の組み合わせ方には頭を悩まされます。
海外デザインブログWeb Design Ledgerで、Webデザインの参考にしたい色使いが魅力的なサイトを27個まとめたエントリー「27 Examples of Color Usage in Web Design」が公開されていたので、今回はご紹介します。
デザインアイデアの参考に利用できそうな印象的な色使いのWebサイトがまとめられています。
詳細は以下から。
配色のお手本にしたい、色使いのきれいなWebデザインまとめ
オレンジ色と濃い紺色の組み合わせがオシャレなWebサイトで、コンテンツの切り替え方やアニメーションなど見ているだけでワクワクします。
水平方向にスライドする不思議なレイアウトのWebデザイン、カラフルなサムネイル画像もデザインアクセントに。
かわいい小物や雑貨を販売しているショッピングサイト。余白スペースをたっぷりと使い、高画質な商品サムネイルが印象的。
フリーランスのWebデザイナーさんのポートフォリオサイト、フルサイズで表示したアニメーションGIFとタイポグラフィーの使い方がナイス。
黄色をアクセントカラーにデザインされたWebサイトで、さまざまな仕掛けを組み込んだ遊び心たっぷりな作りとなっていますよ。
親しみやすい印象を与えてくれる青色をうまく利用したWebデザイン。
ヘッダー部分にレイアウトされたダイナミックなスライダーやアート性の高い背景パターンなどオシャレな仕上がりが印象的。
視差エフェクトを利用したシングルページのWebデザイン、製品のコンセプトカラーで統一しています。
気づかないほどに淡いグラデーションを背景に利用した透明感たっぷりに表現されたWebデザイン。
デザイナー用ポートフォリオサイトで、これまでの実績をサムネイル画像付で効果的に紹介しています。
カラフルな配色で描かれたイラストをグリッドレイアウトですっきりと表示されたWebデザイン。
グリッドを利用したシンプルで分かりやすいレイアウトとサムネイル画像がオシャレにマッチ、レイアウトの参考にメモとして。
ロシアのWebデザイナーさんのポートフォリオサイト、配色の参考になりそうな美しい色使い。
レトロな色使いとイラストを利用したWebデザイン、コンテンツを読み進めると同時にイラストにも変化が、。
迫力のあるマスコットキャラクターデザインを全面に押し出したWebデザイン、色をテキスト色がよいアクセントになっています。
やや読み込みに時間がかかりますが、圧倒的なグラフィックで魅せるWebサイト。（音がでますので、ご注意ください。）
こちらも視差エフェクトを利用してコンテンツを切り替える動きたっぷりのWebサイト、触れてたのしむことができるブラジルのサイトです。
フルスクリーンでスライド表示され、ユニークなアニメーションを加えてさらにサイトの質感を高めています。
フルサイズでイメージ画像を表示し、コンテンツ部分のみ半透明のピンク色を使ってレイアウト。
色の組み合わせが特にかっこいいWebデザイン、若干コンテンツが分かりにくいかもしれません、。
手描きスケッチしたようなかわいいデザインが魅力的なダーク系Webデザイン、タイポグラフィーがいい味を出しています。
[fancy_box][参照元 : 27 Examples of Color Usage in Web Design – Speckyboy.com]
[参照元 : CSS Awards – 15 Awesome Websites – Inspired Magazine][/fancy_box]
