WEBメディアの配色はどう決める？記事を邪魔しない色選び
WEBメディア（記事を継続的に公開するサイト）では、写真や特集の見せ方を工夫しながらも、読者が本文を落ち着いて読めることが大切です。見出し、カテゴリー、連載、関連記事のすべてを色で目立たせると、肝心の記事が埋もれてしまう場合があります。今回は暮らしと手仕事を紹介する架空の編集メディアを例に、記事の外側では情報を探しやすく、記事の中では読むことに集中できる配色を考えます。
記事本文を基準にし、特集や関連記事には控えめな色を使う
最初に、記事の本文・見出し・写真の説明に共通で使う背景と文字色を決めます。長い記事を読む面を白にし、見出しと本文を濃い文字色でそろえると、特集ごとに写真が変わっても読み進める位置を保ちやすくなります。文字の大きさ、行間、段落の余白も合わせて調整し、色だけで読みやすさが決まると考えないようにします。
トップページや記事末尾の記事カード（別の記事へ進むための、見出しと画像などをまとめた領域）は、本文より少し淡い面にまとめられます。ただし「特集」「連載」「新着」を全部別の鮮やかな色にせず、区分名を文字で示します。「連載の一覧を見る」のようなリンクにも下線を付け、どこを操作できるか分かるようにします。
執筆者名、公開日、更新日などのメタ情報（記事に付随する補足情報）は主な文章より控えめな色でよいものの、薄くしすぎないようにします。記事の信頼性に関わる表示なので、本文との明るさの差だけでなく、項目名や掲載場所も統一することが重要です。
暮らしを紹介する編集メディアの6色配色例
架空のWEBメディア「まちと手仕事」で、特集「小さな工房を訪ねる」と連載「週末の台所」を紹介するページを想定します。HEXコードとは、WEBの色を「#」と6桁の英数字で指定する表記です。ここでは6色に役割を固定します。
- サイトの外側・記事一覧：薄い青みのオフホワイト #F7F8F6 ― 一覧・検索結果の背景。
- 本文を読む面：白 #FFFFFF ― 長文記事、写真の説明、引用の本文。
- 見出し・本文：濃い青灰 #273840 ― 記事タイトル、本文、見出し。
- 日付・著者名・必要な枠線：落ち着いた青灰 #536571 ― メタ情報、記事カードの輪郭。
- 特集・連載の案内面：淡いグリーングレー #E7EFEA ― 特集と連載の入口をまとめる面。
- リンク・主要ボタン：深い青緑 #1D5C66 ― 下線付きリンクと「連載の一覧を見る」ボタン。
記事一覧は#F7F8F6を背景にし、本文ページでは#FFFFFFの面へ切り替えます。見出しと本文は#273840でそろえ、著者名や更新日は#536571で整理します。特集「小さな工房を訪ねる」の紹介と連載「週末の台所」の入口は#E7EFEAに置き、名前と短い説明を#273840で表示します。メディア名・記事名・連載は配色を説明するための架空の例です。
「連載の一覧を見る」のボタンは背景#1D5C66と文字#FFFFFFで構成します。通常の記事リンクには#1D5C66の文字と下線を使い、塗りつぶしボタンと区別します。写真は記事ごとに色が異なるため、写真の上へ日付やタイトルを直接重ねるより、単色の面に分けて文字を配置する方法が安定します。
コントラスト比は、隣り合う色の相対的な明るさの差です。見出し#273840と一覧背景#F7F8F6は約11.42:1、同じ文字と白い本文面#FFFFFFは約12.17:1、メタ情報#536571と白い面は約6.06:1です。特集面#E7EFEAの見出し#273840は約10.39:1、青緑のボタン#1D5C66と白文字#FFFFFFは約7.57:1です。いずれもWCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）のレベルAAで通常サイズの文字に必要な4.5:1以上を満たします。
広告の区別・記事カードの境界・スマホで調整する
広告やPRは色だけで区別しません。記事一覧に広告などの宣伝内容が掲載される場合は、「広告」「PR」といった分かる言葉で明示し、編集記事の見出しやカードと混同しない配置を検討します。色の違いだけに頼らず、表示内容と掲載先を正確に案内してください。存在しない協賛や取材実績を例として作らないようにします。
淡い案内面の輪郭は必要な場所だけ補います。特集面#E7EFEAと一覧背景#F7F8F6の比は約1.10:1で、色だけでは境目が弱い場合があります。カード全体がクリックでき、輪郭が操作の識別に必要なら#536571の線を使うと、特集面との比は約5.17:1です。これは操作部品を認識するための重要な視覚情報に求められる3:1を上回ります。
小さな画面でも読む流れを守ります。スマートフォンでは、記事タイトル、執筆者と更新日、本文、連載や関連記事の順序を整理し、途中に強い色の案内を増やしすぎないようにします。リンクの下線を残し、キーボード操作で選択中の位置を示す枠（フォーカス表示）が周囲の背景と区別できるかも確認しましょう。記事ごとの写真やテーマが変わっても、読む色と操作する色を一貫させることが基本です。