情報の優先順位と色とは?色の強弱で伝わりやすさを高める方法

基本の理解

まずはこの考え方が何を指しているのか、そしてなぜ必要なのかを押さえましょう。

情報の優先順位と色とは何か

情報の優先順位と色とは、何が一番重要な情報かを、文字サイズだけでなく色の強弱によっても表現するという考え方のことです。

ここでいう色の強弱とは、鮮やかで目立つ色を使うか、グレーなど控えめな色を使うか、という「主張の強さ」の違いを指します。

色の強弱があることで、文字を読まなくても、ぱっと見でどの情報が重要かが伝わるようになります。

重要な情報とそうでない情報にメリハリがつき、情報が整理されて見えるのが大きな効果です。

なぜ色で優先順位を表現する必要があるのか

すべての文字・要素を同じ色の強さで表示すると、どこから見ればよいか分からず、情報量が多いページほど混乱を招いてしまいます。

色は文字サイズと並んで、優先順位を伝えるための強力な手段であり、両方を組み合わせるとより効果的に伝えられます。

中でも、一番強い色を使うべきなのがCTAです。

CTAとはCall To Action(行動喚起)の略で、「今すぐ購入」「資料請求」など、ユーザーに取ってほしい行動へ促すボタンやリンクのことです。

Webサイトの多くは、商品を買ってもらう、問い合わせてもらうといった「ゴール」のために作られています。

CTAはそのゴールへの入り口なので、ページの中で一番見落とされてはいけない要素として、最も強い色で目立たせるのです(詳しくはCTAボタンとは?で解説しています)。

「最重要・重要・補足」の3段階で色を使い分ける

実践では、情報を「最重要」「重要」「補足」の3段階に分け、段階ごとに色の役割を決めておくと迷わずに済みます。

白い背景のページなら、たとえば次のような使い分けが基本です。

段階	使う要素の例	色の例
最重要	購入・申し込みなどのボタン	オレンジなど、ページで一番目立つアクセントカラー
重要	見出し・価格・主要な説明文	濃い紺や黒に近いグレー
補足	※印の注釈・利用規約・日付など	中くらいのグレー

最重要(ボタン)=オレンジ/重要(見出し・価格・説明)=紺と濃いグレー/補足(注釈)=中くらいのグレー

ここで大切なのは、「最重要」の強さは、明るさの差ではなく、色みの鮮やかさと、色を使う面積(塗りつぶすかどうか)で出している点です。

白い背景との明るさの差(コントラスト)だけで比べると、実は黒に近い文字のほうがオレンジより差は大きくなります。

それでもボタンが一番目立つのは、周りが紺やグレーなど落ち着いた色でまとまっている中で、ボタンだけが鮮やかな色で塗りつぶされているからです。

なお、補足のグレーは「目立たせない」ための色ですが、薄くしすぎると読めなくなってしまいます。

白い背景なら#666666程度にとどめ、文字として読める濃さを保ちましょう(読みやすさの目安は背景色と文字色の組み合わせとは?で解説しています)。

無彩色で「色を引く」ことも優先順位づけ

初心者のうちは「デザイン=色をつけること」と考えがちですが、色を使わないことにも大切な役割があります。

白・グレー・黒のように色みを持たない色を「無彩色」と呼びます。

重要でない部分をあえて無彩色にして色を引くことで、色のついた部分がより一層引き立ちます。

いわば「引き算のデザイン」で、何にでも色をつけるより、色を使う場所を絞ったほうが、伝えたいことがはっきり伝わります(無彩色については有彩色・無彩色とは?で解説しています)。

アクセントカラーを使う量の目安としては、配色の基本比率「ベースカラー70%・メインカラー25%・アクセントカラー5%」が参考になります。

一番目立たせる色は、画面全体のほんの5%程度にとどめるイメージです(詳しくは色の割合とは?で解説しています)。

実践のポイント

色で優先順位を伝えるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 「大事だから」という理由で、多くの要素に強い色を使ってしまい、結局どれが一番重要か分からなくなることがあります。
  強調は本当に重要な1〜2箇所に絞りましょう。
• 色の強弱だけで優先順位を表現しようとし、文字サイズや配置など他の要素との整合性を欠いてしまうことがあります。
  色・サイズ・配置は連動させて考えることが大切です(具体例は下記)。

「連動させる」とは、色・サイズ・配置の「強さ」の順番を揃えることです。

一番伝えたい要素は、色・サイズ・配置のすべてを「最重要」に揃え、補足の要素はすべてを控えめに揃えましょう。

よくある質問

• Q. 優先順位は何段階くらいに分けるのがいい?
  A. 上で紹介した「最重要」「重要」「補足」の3段階程度に分けると、色の使い分けも管理しやすくなります。
  段階を増やしすぎると、逆に判断が難しくなるので注意しましょう。
• Q. 補足情報にも色をつけたほうがいい?
  A. 補足情報は、あえて目立たない無彩色やグレーにすることで、重要な情報との差がはっきりします。
  すべてに色をつけるのではなく、あえて色を抑える箇所を作ることも優先順位づけの一つです。
• Q. 一番重要なボタンは赤にすればいい?
  A. 赤は目立ちますが、Webサイトではエラー表示や警告にもよく使われるため、申し込みボタンなどにはオレンジ系を使うと誤解を招きにくくなります(状態色とは?)。
  ボタンの色選びはCTAを目立たせるカラーとは?、ボタンが複数あるときの強弱のつけ方は視線を誘導する色の使い方とは?で詳しく解説しています。

まとめ

情報の優先順位と色とは、色の強弱を使って情報の重要度を伝える考え方です。

「最重要」にはアクセントカラー、「重要」には濃い紺や黒に近いグレー、「補足」には読める濃さのグレーを使い分け、色・サイズ・配置の強さの順番を揃えることで、ぱっと見で伝わるページになります。

まずは自分のページの要素を「最重要・重要・補足」に分けて書き出し、最重要に使っている色がページの中で一番目立っているかを確認してみてください。