「作ってみたけれど、なんだかごちゃごちゃして見える」——この記事は、HTMLとCSSでページを組めるようになった方が、次に進む「Webデザイン」の1本目です。読み終わる頃には、色を選ぶときの基準ができ、自分の画面のどこを直せばまとまるかが分かります。

先に結論から。色は3色までに絞ると、それだけで整って見えます。センスの問題ではありません。ベース・メイン・アクセントという3つの役割を決めて、面積をおよそ70：25：5で配る——このルールを守るだけです。

お弁当の彩りと、同じ考え方

お弁当を思い浮かべてください。いちばん面積が大きいのは白いごはん。次に大きいのが主菜のから揚げや焼き魚。そして最後に、ミニトマトや枝豆が少しだけ入ります。もし全部が赤いおかずだったら、おいしそうには見えません。少ないからこそ、赤が効きます。

Webの配色もこれとまったく同じです。広い背景があり、その上に会社らしさの色があり、最後に「ここを押してほしい」という一点だけ強い色を置く。色を選ぶ前に、面積の配分から決める——これが遠回りに見えて一番早い道です。

3色の役割を、先に決める

ベースカラーは背景に広く敷く色です。白か、ごく薄いグレーや水色が基本。ここに濃い色を敷くと、文章を読むのがつらい画面になります。メインカラーは見出しの帯やロゴに使う、その会社らしさの色。アクセントカラーは、応募ボタンや購入ボタンのような押してほしい場所1つだけに使います。

CSSでは、この3色を#f7f8fa、#2f8fc3、#e2703aのような色コードで指定します。数字の羅列に見えますが、覚える必要はありません。使う3色をメモに書いておき、そこからコピーして貼るだけです。

「3色では足りない」と感じたときは、4色目を足すのではなく、同じ色の濃さを変えて使います。青1色でも、濃い青・中くらいの青・ごく薄い青と3段に分ければ、表の見出し行や補足の囲みまで作れます。色数は増えていないので、まとまりは崩れません。

アクセントは、増やした瞬間に効かなくなる

新人がいちばんやりがちなのが、「大事だからここも赤くしよう」を繰り返して、画面じゅうが強い色になることです。全部を目立たせると、どれも目立たなくなります。目立つとは、まわりが静かだから成り立つ状態のことだからです。

迷ったときの判断はかんたんです。「このページで、訪問者に最後に押してほしいものは何か」を1つだけ答える。その1つにアクセントを使い、それ以外はメインかベースで済ませます。

薄い色は、おしゃれに見えて読めない

もう1つ、色選びで見落とされるのが明るさの差です。薄いグレーの文字は、作っているパソコンの画面では上品に見えます。ところが同じ画面を、日差しの下のスマートフォンで開くと、文字はほとんど消えます。年齢が上がるほど、この差はさらに開きます。

私たちは本文の文字色に#1f2a3aのような濃い色を使い、薄いグレーは補足の一行までにとどめています。読めない上品さは、上品ではありません。

CCの制作現場で、実際にあった話

私たちCCコミュニケーションズがある企業サイトを制作したとき、確認のたびに「ここも目立たせてください」というご要望をいただきました。1回ごとに1色ずつ足していった結果、トップページには赤・オレンジ・黄・ピンクと、強い色が5つ並びました。全部が目立つ画面になり、依頼主からも「なんだか落ち着かない」というお声が返ってきました。

そこで私たちは色を並べたシートをお持ちして、「このページで、いちばん押してほしいボタンはどれですか」と1つだけ質問しました。答えは「お問い合わせ」。それ以外の強い色をすべて外し、オレンジをお問い合わせボタン1つに戻したところ、その場で「これです」とご納得いただけました。

色は、画面の向こうの人が迷わないための道具

配色はデザイナーの好みを見せる場所ではありません。初めて来た人が、探しているものに何秒でたどり着けるかを決める道具です。依頼主のサイトの先には、資料がほしい人、応募したい人、電話番号を探している人がいます。その人の目を、色で正しい場所へ運ぶ。だから私たちは、色を減らす提案をします。

今日からできる、たった1つのこと

まとめ

配色は、ベース70・メイン25・アクセント5の3役に絞るだけで整います。強い色は押してほしい1か所に限り、文字と背景の明るさははっきり離す。センスではなく、役割と面積で決められる作業です。私たちCCコミュニケーションズは、依頼主と一緒に色を決める場面まで新人が同席できる環境で、Webデザインを学びたい仲間を探しています。