見て読んでもらえる！配色でできる視線誘導法！

最近ルシダスの本棚にデザイン関連の本が増えてうれしい西です。

突然ですが、みなさんはLP（ランディングページ）やプレゼン資料などのコンテンツを作成するときに、配色は気にしていますか？

私はウェブ制作会社に勤めていた頃、配色に悩んでなかなか作業が進まなかった経験があります。メールにしてもLPにしてもそうですが、配色で決まるそのページの印象などによって、読んでもらえるかどうかも変わってくることも。非常に大事な部分でもあるんです。
どうすればセンスが良くなるのかと試行錯誤をしていましたが、当時の先輩がデザインの本を貸してくれてから、私は色に迷うことが少なくなりました。

その本を読んで知ったのは、配色は単にかっこよさとか、センスとかだけではなく理論的なコツがあるということ！

というわけで、「配色に苦手意識があった私でもできた！　少し気にするだけでグッとセンスが良くなる法則」についてご紹介します。
難しく思われるかもしれませんが、画面上でリズムをつけるには色の比率が重要だということだけ、頭の片隅に置いていただけたらと思います。
なお今回はウェブページを題材にして説明しますが、基本概念はメールでもプレゼン資料でも変わりません。

まとまりに必要な色は最低3色

ウェブページを制作するにあたって、色は3色程でまとめるのが一般的です。
なぜかというと、多くの色を使用すればするほど、視線が散らばってまとまりのない印象をユーザーに与えてしまうからです。

配色比率は70：25：5が一般的

ウェブページに使用する色の割合は一般的にベースカラー70％、メインカラー25％。アクセントカラー5％が美しいとされています。

これは「70：25：5の法則」といい、それぞれの色には役割があります。

色の役割

色を選ぶ際の「色相」についてはこちらの記事をどうぞ。
Web上で補色や配色を選択してくれるサービスもあるので、そういったサービスを利用するのも良いかもしれません。

実際に見てみよう

では、「読者にボタンをクリックしてもらうこと」を目標にして具体的な配置を見てみましょう。
違うカラーパターンでの例で、具体的な使い方を考えます。

お問い合わせのボタンが際立って見えませんか？

このように「70：25：5」の配色比率を意識することで、目立たせたい箇所への視線誘導ができ、情報を見てもらいやすくなります！　これを応用すればメールデザインやプレゼン資料、インテリアなど、さまざまな場面で配色がしやすくなるはずですよ。

今回ご紹介した法則はデザインのほんの一例に過ぎませんが、ぜひ活用していただけるとうれしいです！