西智子 
最近ルシダスの本棚にデザイン関連の本が増えてうれしい西です。
突然ですが、みなさんはLP（ランディングページ）やプレゼン資料などのコンテンツを作成するときに、配色は気にしていますか？
私はウェブ制作会社に勤めていた頃、配色に悩んでなかなか作業が進まなかった経験があります。メールにしてもLPにしてもそうですが、配色で決まるそのページの印象などによって、読んでもらえるかどうかも変わってくることも。非常に大事な部分でもあるんです。
どうすればセンスが良くなるのかと試行錯誤をしていましたが、当時の先輩がデザインの本を貸してくれてから、私は色に迷うことが少なくなりました。
その本を読んで知ったのは、配色は単にかっこよさとか、センスとかだけではなく理論的なコツがあるということ！
というわけで、「配色に苦手意識があった私でもできた！ 少し気にするだけでグッとセンスが良くなる法則」についてご紹介します。
難しく思われるかもしれませんが、画面上でリズムをつけるには色の比率が重要だということだけ、頭の片隅に置いていただけたらと思います。
なお今回はウェブページを題材にして説明しますが、基本概念はメールでもプレゼン資料でも変わりません。
まとまりに必要な色は最低3色
ウェブページを制作するにあたって、色は3色程でまとめるのが一般的です。
なぜかというと、多くの色を使用すればするほど、視線が散らばってまとまりのない印象をユーザーに与えてしまうからです。
配色比率は70：25：5が一般的
ウェブページに使用する色の割合は一般的にベースカラー70％、メインカラー25％。アクセントカラー5％が美しいとされています。
これは「70：25：5の法則」といい、それぞれの色には役割があります。
色の役割
ベースカラー
背景や余白として使用される色。
ウェブページの中で大きな面積を占めるため他のカラーを邪魔しない色を選ぶ。
- メインカラーを薄めた色、もしくはグレーなどを使用します。
今回はメインカラーの濃いブルーを薄めた、淡い水色を選びました。
メインカラー
ロゴの色など、メインコンテンツに使用されている色。
視覚的に「ここが大事な要素だよ！」というのをアピール。
印象を左右する重要な役割を担っています。
- 作りたいイメージによって決定されることが多いです。
アクセントカラー
注目を集めるために使用する色。
視線を誘導して、「ここを見て！」というときに使います。
高彩度の色を使用すると、その箇所が引き立ちます。
- メインカラーの補色（反対色）付近の色を使用することが多いです。
今回は、濃いブルーの反対色に近い、鮮やかなオレンジ色を選びました。
色を選ぶ際の「色相」についてはこちらの記事をどうぞ。
Web上で補色や配色を選択してくれるサービスもあるので、そういったサービスを利用するのも良いかもしれません。
実際に見てみよう
では、「読者にボタンをクリックしてもらうこと」を目標にして具体的な配置を見てみましょう。
違うカラーパターンでの例で、具体的な使い方を考えます。
- メインカラーが緑だとします。ヘッダーに緑を持ってきましょう。
- 文字などを邪魔しないようにグレーをベースカラーにします。
- 目立たせたい箇所（今回はボタンを目立たせます）にメインカラーの反対色の赤を配置します。
お問い合わせのボタンが際立って見えませんか？
このように「70：25：5」の配色比率を意識することで、目立たせたい箇所への視線誘導ができ、情報を見てもらいやすくなります！ これを応用すればメールデザインやプレゼン資料、インテリアなど、さまざまな場面で配色がしやすくなるはずですよ。
今回ご紹介した法則はデザインのほんの一例に過ぎませんが、ぜひ活用していただけるとうれしいです！
執筆者プロフィール
- 東京で生まれ、3歳から小学3年生までを旭川で過ごし、その後また東京へ戻り、大学卒業と同時に旭川に戻ってきました。大学卒業後は旭川で会計事務や営業事務を経験。その中でチラシのデザインやホームページ関連の…［続きを読む］
最新の投稿
ビジネススキル2024年8月30日やった方がいいけどやりたくない！そんなときは
デザイン2024年3月22日見て読んでもらえる！配色でできる視線誘導法！
メルマガ登録
マーケターやマーケティングにご興味のある方へ。些細なことから「おっ」と思う注目の事柄まで、読んでお得な情報をメールで配信中！気になる方は今すぐご登録を！
