ホームページの配色は3色で足りる。パターンを集める前に、面積から決める

色を選び直しても印象が変わらない。そういう相談をよく受けます。青を紺に替え、紺を黒に替え、それでも安っぽさが消えない。原因は色の選択ではなく、色の量にあることがほとんどです。

同じ紺でも、画面の八割を占めれば重く沈み、線一本ぶんだけ使えば緊張になります。色は、選ばれた瞬間ではなく、置かれた面積で意味を変えます。

配色パターンを集めるほど、ホームページは決まらなくなる

配色パターンの見本を並べて選ぶと、たいてい選べません。

見本は、正方形の色面が三つか四つ並んだ状態で美しく見えるように作られています。ところが実際のホームページは、余白と文字と写真でできています。色そのものが見えている面積は、想像よりはるかに小さい。見本の中で成立していた比率は、実際の画面には一度も現れません。

もう一つの理由は、見本には順位が書かれていないことです。どれが背景で、どれが文字で、どれが一度だけ使う色なのか。その順位が抜けたまま色だけを持ち込むと、全部を同じくらい使ってしまいます。

同じ強さの色が三つ並ぶと、画面は必ず散らかります。 散らかった画面を整えようとして、また新しい見本を探しに行く。これが、配色が決まらないときに起きている循環です。

配色で失敗するとき、選んだ色が間違っていることは、ほとんどありません。
間違っているのは、その色に与えた面積です。

三色を選ぶのではなく、95・4・1に配る

決める順番はこうです。色を三つ選んでから配るのではなく、配る場所を三つ決めてから、色を入れます。

一つ目は、画面のほとんどを占める地の色。白か、生成りか、ごく暗い墨か。ここが全体の九割以上を占めます。

二つ目は、文字と線の色。読むための色です。ここが四パーセントほど。

三つ目が、一度だけ使う色。ボタン、あるいは見出しの一語、あるいは罫線の一本。全体の一パーセントで足ります。

九十五、四、一。この比率で置くと、三色でも画面は成立します。逆に、六割・三割・一割で配ると、どの色も主役にならず、全体が模様のように見え始めます。

一パーセントの色が効くのは、ほかが静かだからです。静けさは、色を我慢した結果ではなく、面積を配った結果として生まれます。

実際の画面で数えてみると、この比率は極端に見えません。トップページを一枚の紙として見たとき、色が付いているのはボタンが一つ、見出しの上の細い線が一本、それだけです。残りは地の色と文字と写真で埋まっています。派手に見えるサイトと静かに見えるサイトの差は、この「一つと一本」が三つと五本になっているかどうかだけ、ということが少なくありません。

もし迷ったら、いま作っている画面から色を一つずつ抜いてみてください。抜いても困らなかった色は、最初から要らなかった色です。困った色だけを残すと、たいてい二色か三色になります。

おしゃれに見える配色は、たいてい色が少ない

おしゃれな配色を探している方に、いつも同じことをお伝えします。足すのではなく、減らしてください。

印象の強いサイトを開いて、使われている色を数えてみると、たいてい二色です。地の色と、文字の色。それに加えて、写真の中の色。写真が色を持ち込んでくれるので、画面設計の側で色を足す必要がありません。

ここが見落とされがちな点です。ホームページの色は、配色で決めた色だけではありません。商品写真、人物の肌、料理、パッケージ。写真が入った瞬間に、画面の色数は倍になります。

だから、写真の多いサイトほど画面設計の色は少なくてよい。逆に、写真がほとんどないサイトでは、地の色の質感で持たせる必要があります。

写真を選び終える前に配色を確定させると、この計算が合わなくなります。順番としては、写真の傾向が見えてから、それを邪魔しない地の色を決める。この順に置くだけで、色の相談は半分に減ります。

見やすい配色は、色相ではなく明度でつくる

見やすい配色にしたい、という要望の多くは、色の組み合わせの問題ではありません。明るさの差の問題です。

灰色の文字を薄い灰色の背景に置けば、どんなに上品な灰でも読めません。文字と背景の明るさの差が足りないからです。読むための文字は、背景との明るさの比が四・五対一以上あることを一つの目安にします。

このとき、色の名前で判断しないでください。「濃い青だから読めるはず」ではなく、実際の明るさの差で判断する。同じ濃紺でも、背景が黒なら読めず、白なら読めます。

判断を狂わせるのは、たいてい環境のほうです。制作している画面は、暗い部屋で、明るさを上げたパソコンで見ています。実際に読まれるのは、昼の屋外で、明るさを落としたスマートフォンです。手元では上品に見えた薄い灰色が、屋外では消えます。作りかけの画面をスマートフォンに送って、一度外に持って出るだけで、この判断は変わります。

もう一つ、押せる場所の色だけは例外にしてください。リンクとボタンは、周囲の文字と明るさで区別が付く必要があります。色を淡くして揃えると、画面はきれいになりますが、押せる場所が消えます。整った画面から問い合わせが減るときの原因は、たいていここにあります。

そして、明るさの差を確かめるいちばん簡単な方法があります。

画面を白黒にする。それで読めなければ、色を足しても読めません。

配色ツールを開く前に、一度だけ白黒で見る

配色ツールは便利ですが、開く順番を間違えると迷いが増えます。

ツールが返してくるのは、色相の組み合わせです。組み合わせとしては正しくても、その色をどの面積で使うかは教えてくれません。面積が決まっていない状態で候補を眺めても、選ぶ根拠がないまま好みで選ぶことになります。

先にやることは一つです。作りかけの画面を白黒にして、見出し・本文・ボタンの三つが、明るさだけで区別できているかを確かめる。

やり方は簡単です。画面を撮って、写真アプリで彩度をゼロまで落とす。それだけで、色に頼っていた部分が全部見えます。見出しと本文が同じ濃さになっていないか。ボタンが背景に沈んでいないか。写真と文字が重なった場所で、文字が消えていないか。

白黒で成立している画面は、色を載せると良くなります。白黒で潰れている画面は、色を載せると、潰れたまま賑やかになります。

順番はいつも同じです。構造、明度、そして最後に色。

最後に足す一色が、ブランドの記憶になる

一パーセントの色は、ブランドの色です。

ここに置くのは、ロゴから取った色でなくてかまいません。商品に使われている素材の色、店の壁の色、包む紙の色。実物の中にすでにある色を持ち込むと、画面と実物が繋がります。

避けたいのは、鮮やかさだけで選んだ色です。彩度の高い色は目を引きますが、そのぶん写真から浮きます。少し濁った色、少し暗い色のほうが、写真と並んだときに馴染みます。

そして、その一色は一箇所にだけ置いてください。ボタンにも、見出しにも、罫線にも使ってしまえば、それはもう一パーセントの色ではありません。

一箇所に置かれた色は覚えられます。三箇所に置かれた色は、模様になります。

決める順番だけ、持ち帰ってください

配色に迷ったときは、この順番に戻れば足ります。

写真の傾向を見る。地の色を決める。文字の明るさの差を決める。白黒で確かめる。最後に、一箇所だけ色を置く。

色は最後です。最初に色から入ると、いつまでも決まりません。

そして決まった配色は、増やさないでください。ページが増えるたびに一色ずつ足していくと、三年後には十色のサイトになります。色を足したくなったときに足すべきなのは、たいてい色ではなく余白のほうです。