ニュースサイトの配色はどう決める？大量の記事を読みやすくする方法
ニュースサイトには新着記事、分野別の話題、重要なお知らせなどが並びます。記事数が多いからといって見出しやカテゴリーをすべて別の色にすると、どこから読めばよいか迷うことがあります。必要なのは色数を増やすことではなく、「見出しを読む」「更新時刻を確かめる」「重要な情報を見つける」という役割を整理することです。架空の地域ニュースサイトを例に、一覧を読み進めやすい配色を考えます。
見出しと更新情報を共通の色にし、重要なお知らせだけ区別する
まず記事一覧を「新着記事」「分野から探す」「重要なお知らせ」に分け、項目の並び方を決めます。多くの記事が集まる場所では、見出しの文字色を統一し、本文へ進む手がかりとなるカテゴリー名・公開日時・更新日時を同じ位置に置きます。見出しごとに色を変えるより、文字の大きさや余白、記事間の区切りをそろえた方が内容を比較しやすくなります。
公開日時と更新日時は別の意味を持つため、「公開」「更新」のように言葉で区別します。補足文字も薄くしすぎず、見出しとは文字の太さや位置でも差を付けましょう。長い記事名が2行以上になっても、時刻表示や次の記事の見出しに重ならない配置を優先します。
「速報」や「重要」という文字は、注目を集める飾りではなく、実際に編集側で重要性や最新情報を確認した場合の案内です。赤みのある色を用いても、その色だけで緊急性を伝えず、具体的なラベルと更新時刻を必ず添えます。大きな見出し画像や派手な帯を増やしすぎないようにし、ニュースの内容そのものを主役にします。
記事が多い地域ニュースサイトの7色配色例
架空の地域ニュースサイト「まちの記録室」に、暮らし・文化・地域情報の記事が多数並ぶ画面を想定します。HEXコードは色を「#」と6桁の英数字で示す表記です。次の7色に役割を固定します。
- サイトの背景：淡い青灰 #F4F6F9 ― 記事一覧の周囲、検索結果の土台。
- 各記事の面：白 #FFFFFF ― 見出し、日時、短い説明をまとめる領域。
- 記事見出し・主な文字：濃い紺色 #203449 ― 記事名、各セクションの見出し。
- 公開日・更新日・必要な枠線：落ち着いた青灰 #506273 ― 日時と分類の補足、操作できる記事カードの輪郭。
- 分野別の案内面：淡い水色 #E6F0F8 ― 「暮らし」「文化」「地域」をまとめる場所。
- リンク・検索ボタン：深い青 #145C87 ― 下線付き記事リンク、「記事を探す」のボタン。
- 確認済みの重要表示：深い赤紫 #873643 ― 重要な告知のラベル背景。
例えば一覧全体を#F4F6F9にし、各記事を#FFFFFFの面でまとめます。見出しは#203449で統一し、「公開」「更新」を付けた日時を#506273で並べます。分野別の入口には#E6F0F8を使いますが、分類は必ず「暮らし」「文化」などの文字でも示します。「まちの記録室」とそこで紹介する記事は説明のための架空の例で、実際の報道内容や更新情報ではありません。
「記事を探す」ボタンを置くなら、背景#145C87と白文字#FFFFFFを組み合わせます。普通の記事へのリンクは#145C87の文字に下線を付けます。重要な告知には、背景#873643と白文字#FFFFFFで「重要」と表示し、確認済みの対象・日時・出典を文章で添えます。確認していない出来事を「速報」として作り出したり、通常の記事に重要ラベルを付けて目立たせたりしません。
コントラスト比は隣り合う色の相対的な明るさの差です。見出し#203449と白い記事面#FFFFFFは約12.74:1、日時などの補足文字#506273と白い記事面は約6.30:1です。青いボタン#145C87と白文字#FFFFFFは約7.22:1、赤紫の重要表示#873643と白文字は約7.96:1です。いずれもWCAG 2.2（WEBコンテンツを利用しやすくするための指針）のレベルAAで、通常サイズの文字に求められる4.5:1以上を満たします。
記事カード・更新状態・小さな画面を仕上げる
淡い色だけで操作できる範囲を示さない。白い記事面#FFFFFFとサイト背景#F4F6F9は約1.08:1、水色の分野案内#E6F0F8とサイト背景は約1.07:1で、背景色の違いだけでは境目が弱い組み合わせです。カード全体がクリックでき、輪郭が必要なら#506273の枠線を加えます。白い面との比は約6.30:1、水色の面との比も約5.45:1です。操作部品を見分けるために必要な枠線の3:1の基準を上回ります。
重要度と新しさは事実に合わせる。更新した記事には実際の更新日時を明記し、訂正があった場合は「訂正」などの言葉で説明します。赤紫の表示面を使うかどうかも記事の内容と編集方針に合わせ、色だけで内容の正確さや緊急性を判断させないようにします。未確認の災害情報や現在の状況を例示のために断定しないことが大切です。
スマートフォンでは見出しと日時のまとまりを保つ。記事一覧が1列になっても、カテゴリー、見出し、公開・更新日時、記事へのリンクが対応するように配置します。画像を加える場合は、写真の上に小さい文字を直接重ねず、必要な説明を単色の面へ分けます。リンクの下線と、キーボード操作時の選択位置を示す枠（フォーカス表示）も残しましょう。記事数が多いほど、色よりも情報の順序と一貫した表示が役立ちます。