WEBページの重要度を色で表す方法｜情報の優先順位を分かりやすくする配色
WEBページに「重要なお知らせ」がいくつも並ぶと、どれを先に確認すればよいのか迷いやすくなります。赤やオレンジを増やすだけでは、すべてが同じ重要度に見えてしまうこともあります。情報の優先順位を伝えるには、色を決める前に「今、対応が必要か」「確認しておくべきか」「後で参照すればよいか」を分けることが大切です。オンライン講座の受講ページを例に、3段階の具体的な配色を紹介します。
対応の必要性を基準に、情報を3段階に分類する
最優先は、期限までに行動しないと手続きに影響する案内です。次は、授業の日時など、見落とさず確認してほしい情報です。最後は、復習用の資料など、必要なときに見ればよい情報です。これは重要度の分類であり、読者の視線が必ず上から順に動くという意味ではありません。
重要度を決めるときは、運営側が目立たせたいかどうかだけでなく、利用者が何をしないと困るかを基準にします。「要対応」「要確認」「参考」といった見出しを先に付ければ、色が見分けにくい環境でも意味を伝えられます。単に色の濃い順に並べるより、内容に合った強調の強さを選びやすくなります。
オンライン講座の受講ページに優先順位を付ける配色例
ページ全体の背景には淡いグレー#F8FAFC、本文には濃いグレー#1F2937を使います。この組み合わせのコントラスト比は約14.03:1です。HEXは、#に続く6桁の数字と英字A〜FでWEBの色を表す書き方です。コントラスト比は、文字と背景など隣り合う色の明るさの差を表します。
- 最優先・要対応：「課題の提出期限」を淡いオレンジ#FFF7EDの案内面に載せ、見出しを赤茶#9A3412、説明文を濃いグレー#1F2937にします。背景との比は見出しが約6.88:1、説明文が約13.83:1です。左側に濃いオレンジ#C2410Cの線を添えると、案内面との比は約4.88:1になります。「課題を提出する」ボタンは赤茶#9A3412に白文字#FFFFFFを組み合わせ、約7.31:1です。
- 中程度・要確認：「次回のライブ授業」を淡い青#EFF6FFの案内面にまとめます。見出しは深い青#1E40AFで背景との比が約8.01:1、説明文は濃いグレー#1F2937で約13.49:1です。左側の青い線#1D4ED8は案内面#EFF6FFに対して約6.16:1。開催日時と参加方法を文字で示し、最優先の案内ほど強いボタンは置きません。
- 低い優先度・参考：「復習用の資料一覧」は薄いグレー#F1F5F9の領域に置き、見出しに青みのあるグレー#475569、本文に濃いグレー#1F2937を使います。背景との比はそれぞれ約6.92:1と約13.40:1です。「参考資料」のラベルと通常の下線付きリンクで示し、色付きの大きなボタンを増やさないようにします。
この例では、強調する理由が「期限内の行動」「予定の確認」「任意の参照」で異なります。すべてを同じ警告色にするのではなく、対応が必要な案内にだけ明確な枠とボタンを与えるのがポイントです。期限が過ぎた案内は、放置せず内容や重要度を更新しましょう。
色だけで判断させず、コントラストと表示の変化を確認する
WCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字と背景には4.5:1以上、規定の大きな文字には3:1以上が求められます。操作に必要な枠線など、文字以外の視覚情報にも隣接色との3:1以上が必要な場合があります。ここで挙げた色の組み合わせは数値を確認していますが、ページ全体のアクセシビリティへの適合を保証するものではありません。
参考資料の背景#F1F5F9とページ背景#F8FAFCの差は約1.05:1しかありません。独立した操作部品の境界としては弱いため、クリックできる場所には下線や十分な余白、必要に応じて明確な枠線を使います。スマートフォンでは案内面が縦に続くため、各段階のラベルが埋もれていないかも見直しましょう。重要度が変わる運用では、色だけでなく文言も同時に更新してください。
HueRollではHEXコードから関連色や濃淡の候補を確認し、選択した色と白・黒とのコントラストを調べられます。ただし任意の2色の比較やAA・AAAの自動判定には対応していません。この記事にある白・黒以外の組み合わせは別途計算しました。重要度の分類と、実際の背景に対する文字・枠線の確認をセットで進めましょう。