WEBデザインでの配色方法

WEBデザインでの配色方法

WEBサイトを作る最初の方の段階でコンセプトやテーマを考えると共に、配色も大事な要素の一つです。

ここではあるサイトを作っていてメインカラーが青に決定した場合の例を使って見ていきます。

 

色の三属性

まず色の基本について。学校の勉強みたいですが、

下図はそれぞれ一番左側の青を基本色として考えた場合の、

彩度(鮮やかさ)、明度(明るさ)、色相(色の種類、赤、黄、緑など)

の違いを表しています。

 

これら3つの要素で色は成り立っていて、

これを色の三属性といいます。

色の三属性

色の三属性

 

Photoshopで色の三属性を操作する際は、下図の部分を操作するとその属性のみを調整ができます。

Photoshopパネル

Photoshopパネル

基本の色はありつつ彩度だけ調整したいとか、明度だけ調整したいなど。

 

配色

配色をする際は、基本的には、類似色や1つの色を明度差違いなどで2つ3つに抑えて組み合わせれば、無難に配色はできると思います。(色をゴチャゴチャ使いすぎなければ)

 

Media Loot

Media Loot

Media Loot

 

Bohemia Design

Bohemia Design

Bohemia Design

 

The Destination

The Destination

The Destination

 

その上でリンクや目立たせたい部分に使う色(補色など)を入れるなど、そのサイトの配色が決まってくると思います。

(補色:WEBデザインでもバッチリ使える補色について)

 

たくさん色相を使うと楽しいイメージになりやすく、使う色を押さえると落ち着いたシンプルなイメージになり易いです。

全てサイトのコンセプトやイメージに合っていれば成功です。

 

上記の配色については他の有名なサイトさんでも、ご説明されています。

WEBクリエイターボックス | 配色パターンからWebデザインを考える

 

あとがき

上記は配色についての学術的よりの内容でした。

基本を知った上で、色々なモノをみて配色の参考にしていくのが一番いいんじゃないかと思います。

上記のようにコンセプトからメインカラーが決まる→彩度・明度など変える→…。

これらをもちろん礎にしつつも、その先はひたすら配色パターンを他のサイトさんから盗んだりw はたまた道を歩いててたまたま見つけた自然やモノの配色だとかから参考にしてみたり。

デザインとは一見関係ないようなところからも何か引き出せたらいいなと思います。

ひっかかったら参考にしていく。

と、自分に言い聞かせています。

下記のように世の中には楽しいデザインがいっぱいあります。

刺激されますホント

 

「nine inch nails | with teeth」(CD)

「FRAME Art of The interior」(建築雑誌)

 

 


このエントリーをはてなブックマークに追加