コラムColumn

配色の考え方について

明けましておめでとうございます。今年もよろしくお願いします!

 

皆様お久しぶりです。ふくです!

年末年始、皆様はどの様に過ごされたのでしょうか?

 

私は家にこもってひたすらペンを動かしていました。

ペンを動かしていつも思うのが、斜めの机が欲しい…と思うこと。

 

目線と同じじゃないと、どうしても綺麗に描けなく、

今はトレース台の角度を調整して作業しています。

斜めにはなるけど…不便!良い机があったら即効購入したいです;

 

今回はウェブデザインの配色に関して書いて行きたいと思います。

配色がいつも上手く行かずに周りにアドバイスを頂いています。

もっと自立しなければ…!と思い調べてみました。

 

 Webサイトの基本配色の決め方

gazou1

同系色

◆同一色相

色相が全く同じで、明度、彩度などの要素を変化させた色との組み合わせ。
例:青と薄い青、緑と薄い緑

 

◆隣接色相

色相が隣り合っているもの同志の組み合わせ。
例:赤とオレンジ、水色と青

 

◆類似色相

色相は少し遠いが、似ている色同志の組み合わせ。
例:黄色と緑、青とシアン

 

反対色

◆補色色相

色相環で、反対側に位置しているもの同志の組み合わせ。
例:赤とシアン、青と黄色

 

◆対照色相

色相環で正三角形を置いた時に、2点に位置するもの同士の組み合わせ。
例:青と緑、緑とシアン

 

◆中差色相

色相環で直角に位置するもの同士の組み合わせ。
例:赤と紫、青とシアン

 

トーンでまとめる

◆類似トーン

トーン(明るさや鮮やかさなど)が同じ、または似たもの同士の組み合わせ。

色の印象を揃えるため、おさまりの良い配色となる。

 

◆対象トーン

トーンが異なるもの同士の組み合わせ。

色相が近いもの同士が組み合わさった時のアクセントとして有効。

 

使う色は3色をベースにする

gazou2

・ベースカラー 70%

・メインカラー 25%

・アクセントカラー 5%

 

ベースカラーとは、背景や余白部分に当てはまるケースが多い。

背景などになる部分の為、白や薄い色が扱いやすい。

無彩色・メインカラーの明度を上げた色をベースにしてしまうのが早い。

 

メインカラーとは、

雰囲気の方向性の色(青=爽やかに)イメージカラーが既にある場合はそちらを優先。

ある程度「明度の低い」色が扱いやすい。

 

アクセントカラーとは、

雰囲気を引き締める役割。メインカラーの補色に使うと良い。

メインカラーから離れた色相にすると鮮やか。

 

4色以降は…?

 

gazou3

カラーを分割する!

例)メインカラーを分割・アクセントカラーの分割。

では、何色を足せば良いのか。

「色相」が同じで「トーン」

→水色だったら青

 

「トーン」が同じで「色相」が違う色

→水色だったら緑や黄緑

 

色相の比率に注意

色を追加したときに、メインカラーの比率、アクセントカラーの比率が増えすぎるとバランスが崩れる。

 

参考サイト様

Web配色で変わる!誰もが興味をもつ見本となる4つのパターンとテクニック!

Handy Web Design

配色に関する書籍

基礎の基礎ですが、配色に関して改めて理解が出来ました。

ネットに様々な情報がありますが良い本がありましたのでご紹介させていただきます。

7日間でマスターする配色基礎講座 (Design beginner series)

アマゾン

サイタ photoshop講座

 

レビューを見て評価が良かったので試しに購入してみました。

丁寧に紹介してあり、私みたいに配色がいまいち分らない…という方にはとても親切な本になっています。

 

まとめ

色を無意識に多用していましたが、それではまとまりが出来るはず無いですよね。

ベースをしっかりと固め、応用が効くように配色に関して知識をつけて行きたいと思います。

 

配色 / WEBデザイン / WEB制作

執筆者:ブログ担当

お問い合わせフォーム