配色に迷ったときの決めかた

先に結論を書くと、配色で迷うのは選択肢が多すぎるからで、使う色の数と役割を先に決めてしまうとほとんど解決します。何色でも使える状態から「いい色」を探すのは難しいのですが、「3つだけ」「ベースはこれ」と決めてから探すと、判断がぐっと軽くなります。

センスの問題に見えて、実際は手順の問題であることが多い、というのが色選びの厄介なところです。前回の見やすいデザインの基本。4つの原則から始めるで書いた整理の話と同じで、ここでも先に枠を決めるのが近道になります。

使う色は3つに絞り、役割を決める

まず色を役割で分けます。よく使われるのは次の3つです。

• ベース：面積のいちばん広い色。背景に使う、白や薄いグレーのような色
• メイン：見出しやボタンなど、そのページの印象を決める色
• アクセント：ここだけ見てほしい、という場所に少しだけ使う色

面積の目安として、ベース7割・メイン2.5割・アクセント0.5割くらいの比率がよく紹介されます。数字そのものより、アクセントは驚くほど少なくていいという感覚のほうが役に立ちます。目立たせたい色を広く使うと、逆にどこも目立たなくなるためです。

黒や白、グレーは基本的にこの3色とは別枠と考えて構いません。文字色や罫線として使う分には、色数のカウントに入れなくても散らかりません。

1色決めれば、残りは決めやすくなる

3つを同時に考えると難しいので、メインを1色だけ先に決めます。ロゴの色、扱う題材のイメージ、写真の中にある色。決め方はなんでも構いません。

そこから残りを決めるとき、よく使われる考えかたが2つあります。

ひとつは同系色でまとめるやりかたです。決めた色の明るさや鮮やかさだけを変えて、濃い版・薄い版を作る。まとまりが出やすく、失敗しにくい方法とされています。

もうひとつは反対側の色を1つだけ足すやりかたです。色相環（色を円状に並べた図）で向かい合う位置にある色をアクセントに使うと、メリハリが出ます。ただし強く効くので、面積は小さくしておくほうが扱いやすくなります。

読みやすさは「明るさの差」で確かめる

配色でいちばん見落とされやすいのが、文字が読めるかどうかです。好きな色どうしを組み合わせても、明るさが近いと文字がぼやけて見えます。

Webのアクセシビリティ指針であるWCAG 2.1では、通常サイズの文字は背景とのコントラスト比（明るさの差）が4.5:1以上であることが、達成基準AAとして示されています。大きめの文字ではもう少しゆるい基準になります。

比率は感覚では測れないので、色の組み合わせを入れると数値を出してくれるコントラストチェッカーを使うのが手軽です。「contrast checker」で検索すると無料で使えるものが見つかります。淡いグレーの文字や、彩度の高い色の上に白文字を置く組み合わせは、思ったより数値が足りないことがあります。

迷ったら、既にあるものから借りる

ゼロから作らなくても構いません。好きな写真を1枚選んで、その中から色を3つ拾う。自然の風景や、印刷物の写真は、色の関係がすでに整っていることが多いので、そのまま使える組み合わせが見つかります。

配色パターンを集めたサイトを参考にするのも同じことです。大事なのは、拾った色をそのままカラーコードで書き留めておくこと。あとから「あの色なんだっけ」と探し直すのがいちばん時間を溶かします。

決めた色は、HTMLとCSSで何ができるのか、最初の全体像で触れたCSSの中に、変数としてまとめて書いておくと後が楽になります。色を変えたくなったとき、1か所直すだけで済むようになります。

まとめ

• 使う色は3つ。ベース・メイン・アクセントの役割を先に決める
• メインを1色決めてから、同系色でまとめるか、反対側の色を少しだけ足す
• 読めるかどうかはコントラスト比で確かめる
• ゼロから作らず、写真や既存の配色から借りてよい

配色は正解を当てるものではなく、条件を減らしていく作業に近いものです。手を動かしながらのほうが身につきやすいので、実際に作ったものを見せ合える場があると進みが早くなります。デジタルラボ金沢では初心者からOKのワークショップや勉強会を定期的に開いているので、気になったときはお問い合わせからのぞいてみてください。