参考書籍:ノンデザイナーズ・デザインブック [第4版] 

 

カラーホイールとは
さまざまな色を色相環に沿って並べたものが「カラーホイール」です。色の組み合わせを考えるときに役に立ちます。

世界で初めての色相ダイアグラムは、1666年にアイザック・ニュートンによって開発されました。このダイアグラムを使用することで、相性の良い色の組み合わせが一目でわかるようになっています。

カラーホイール

カラーホイールのなかで隣同士に並んでいるものが「類似色」です。類似色を使用すると、調和があり目に優しいデザインを作れます。

類似色は自然のなかで見ることができる組み合わせでもあり、アプリやWebデザインを作っている場合は類似色を考慮すると良いでしょう。

コントラストとの利用を考える場合は反対側の色を使うことでコントラストがでる。

 

*サイトデザインの場合は
色数を3色に制限する
デザインは色数が増えるほどバランスをとるのが難しくなります。色同士の相性や配分など、色数を増やすほど複雑になりまとまりずらくなります。無限にあるカラーパレットから自由に色を選ぼうとすると次々と色が追加されてしまいますので、あらかじめ使用するのは3色と制限してみましょう。
数を制限することで、まとまりのあるデザインになります

そのときに使えるのがトライアド配色
トライアド配色は、色相環の正三角形の位置にくる3つの色を選択した配色タイプです。
どの2色を組み合わせても色相環の120度の位置の組み合わせになるので、安定した色の組み合わせが保たれる配色タイプです。補色よりも馴染みやすく、類似色ほど偏った印象にもならないので、バランスよく複数の色を主張させたい時にはトライアド配色がおすすめです。

トライアド ど

 

*シェードとチント

「明度」が低くなれば黒っぽく、高くなれば白っぽくなります。
配色_明度

図のように、ヒュー(純色)を基準として、そこに黒を加えるとシェード、白を加えるとチントとなります。
Photoshopのカラーピッカーでもヒュー(右上)シェード(上下)とチント(左右)を確認してみましょう。
配色_カラーホイール完全

 

 

「色相」の項目で見たカラーホイールには純粋な色「純色」しか使われていませんでしたが、シェードとチントを加えると図のようになります。

説明の都合上ブロック分けをして色をつけていますが、実際はグラデーションで色が変化します。

同一の色の中でシェードとチントを使って、デザインをつくるのも良い訓練となる。

 

強調をするときの基本理解として 暖色は背景に前に出る 寒色は背景に引っ込む

 

*カラーを選択するときの実務

コーポレートカラーが選択されている場合は、シェードとチントをつかって色を選ぶ。
ロゴ等から選ぶ場合は、対象色を決めてスプリットコンプリメンタリーをつかってもよい。下参照

イメージ写真等がある場合は、その写真からスポイトツール等でカラーコードを抜き取りその色を基準にする。

 

スプリットコンプリメンタリーとは?
ずらす色の色相差は補色から1~2になります。8:Yを基準にした補色は20:V、その左右両隣かまたその隣を組み合わせた3色の組み合わせです。
スプリットコンプリメンタリーの色相の組み合わせ

Tags:

No responses yet

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です