Advertisement

 

配色はどんなデザインにも大切な要素のひとつです。

イメージに沿った色を選ぶことではっきりと、わかりやすく情報を伝えることができます。

 

海外デザインブログCodropsで、コントラストのある配色を利用したWebサイトデザインを25個まとめたエントリー「Minimal and Contrasty Color Schemes in Web Design」が公開されていたので、今回はご紹介します。

 

Webデザイン制作において配色の参考にしてみてはいかがでしょう。

 

 

詳細は以下から。

 

 

カラフルな色合いが魅力的なWebサイトデザインまとめ

 

Into Brazil

ブラジルの観光スポットを紹介したフルフラッシュのWebサイトデザイン。

20曲のボサノバが自動再生するのですが、暑い日のBGMに◎。今回はこれを紹介したかっただけなのかも、、。

colorsites03

 

 

CAU

背景全体に芝生や青空など自然を感じるイメージ写真をスライドさせたレストランのWebサイトデザイン。

colorsites05

 

 

Kettle

黒と黄色の組み合わせがシンプルでインパクトのあるダーク系ウェブサイトデザイン、タイポグラフィーがアクセントになっています。

Kettle-User-focused-Design-and-Technology

 

 

Yurbuds 

赤と黒のコントラストを利用してデザインされたWebサイトデザイン、商品にうまく視点をあつめています。

colorsites16

 

 

5emegauche

コミカルなアート写真を背景にポップなカラーリングでデザインされたタイポグラフィーが重なります。どれもテキスト表記で表現しているようです。

colorsites13

 

 

Illustration Screendesign Code

ドット画デザインを専門にデザインするアーティストさんのWebサイト、さすがポップなカラーリングです。

colorsites12

 

 

More Hazards More Heroes

視差アニメーションエフェクトを利用したこれまでの概念にとらわれないレイアウトのWebサイトでざいんのひとつ。

colorsites02

 

 

The Big Top

歴史を感じるビンテージテイストのオレンジ色を中心とした配色がかわいいWebサイト、ロゴデザインもレトロ風。

Tech-Jobs-Under-The-Big-Top

 

 

Newswordy

毎日ひとつずつ単語の意味を解説しているユニークなコンセプト、毎日背景の色も一緒に変更されています。

Newswordy-Word-of-the-day

 

 

Zeitgeistbot

百聞は一見にしかず、360度縦横無尽にコンテンツが切り替わります。

colorsites17

 

 

Solo

オレンジ色の紙テクスチャを大胆に利用したWebサイトデザイン、タイポグラフィーをうまく利用することでとても読みやすくなっています。

Solo-Project-management-for-the-modern-freelancer

 

 

Fonts & Chaos

グリッドレイアウトを斜め45度でデザインしたユニークですがすっきりとしたレイアウトが魅力的。

FONTS-of-CHAOS

 

 

1minus1

手書きされたかわいいヘッダーデザインが特長的で、みどりと水色のコントラストをうまく利用しています。

colorsites15

 

 

Benny Roth 2011

写真とテキストがレイアウトされただけのシンプルなコンテンツですが、紙テクスチャを使った背景と水色のバランスが◎。

Benny-Roth-2011

 

 

Linda Dong

できるだけ画像を利用しないでデザインされたミニマルなWebサイトデザイン。

Linda-Dong

 

 

Syropia

レトロ、ビンテージデザインがトレンドのひとつになっています、こちらはグランジテイストのロゴとポップなカラーリングが魅力的。

Syropia

 

 

Cabedge

ビンテージな風合いを表現したレトロテイストなウェブサイトデザイン、ヘッダー部分にタイトル、イメージを挿入することで視覚的に訴求。

cabedge.com_

 

 

Made by Vadim

こちらもタイポグラフィーを利用することでシンプルでオシャレなデザインに仕上げています。色使いも参考になりそうです。

Made-by-Vadim-

 

 

Eddie Diaz Design

1色で利用すると目がいたくなるような色はパターンを組み合わせると良さそうです、網目パターンが良い味をだしています。

Eddie-Diaz-Design-954-600-0015-Graphic-Web-Design-Fort-Lauderdale-Florida

 

 

Design Wise

ピンク色を使ったポップな配色で、背景にはダーク系テキスタイルパターンを使用したWebサイトデザイン。

DesignWise-Virginia-Peninsula-Web-and-Graphic-Design-Studio

 

 

Red Pop

少しだけコントラスの低い赤色を利用することで、グリッドデザインがさらにオシャレに表現されています。

colorsites20

 

 

Sylvain Toulouse

グリッドレイアウトで整列されたコンテンツの上に半透明のみどり色を重ねたインパクトのあるWebデザインのひとつ。

Sylvain-Toulouse-Art-director-Graphic-designer

 

 

Type]Media

オシャレなフォントデザインと発色のよいカラーリングを合わせることで、さらにユニークなデザインで表現します。

colorsites01

 

 

Jim Hoskins

白と青、たった2色の配色だけを利用することでまとまりのあるすっきりとしたWebデザインに仕上げることができます。

Jim-Hoskins

 

[参照元 : Minimal and Contrasty Color Schemes in Web Design – Codrops]

[参照元 : 20 Fresh Examples of Color Usage in Web Design – Web Design Ledger]