記事一覧のカテゴリ色を使い分ける方法｜色が増えすぎない設計

TIPS

記事一覧で「観察会」「観察記録」「初心者ガイド」のようなカテゴリを色分けすると、目的の記事を探しやすくなることがあります。ただし、カテゴリが増えるたびに新しい色を付けると、一覧全体が散らかって見える場合があります。ここでは架空の植物観察ブログを例に、全カテゴリを同じ色にする方法と、一部だけ色を分ける方法を比較します。記事カードのタイトル色ではなく、カテゴリ名を載せる小さなラベルの配色に絞って考えます。

カテゴリの色は種類を整理するために使い、増やしすぎない

カテゴリラベルとは、記事が属するテーマを「観察会」などの短い言葉で示す表示です。例えば「春の公園観察会のお知らせ」は観察会、「河川敷で見つけた草花の記録」は観察記録、「観察ノートの書き方」は初心者ガイドに分類します。いずれも説明用の架空の記事です。ラベルがあれば、色が見分けられなくても分類が伝わります。

最初から3つのカテゴリをすべて別の色にする必要はありません。共通の色を使い、カテゴリ名の言葉だけで区別するのが最も簡単な出発点です。記事数が増え、一覧を見たときに特定の種類を探しにくくなった場合だけ、色分けを追加すると判断しやすくなります。

分類を表す色と「受付中」「募集終了」のような状態を表す色は混同しないようにします。例えば観察会のカテゴリを緑にしても、その色は開催中や空きがあることを意味しません。また、カテゴリ名をリンクにする場合は、ラベルをただの飾りと区別できるように下線などを使います。

共通色と限定的な色分けを2つの配色例で比較する

以下はHEX（「#」に続けて0～9とA～Fの6桁で指定する色コード）を使った設計例です。コントラスト比は、文字と背景などの相対的な明るさの差を示します。どちらの案もページ背景は白#FFFFFF、記事タイトルは濃い青灰色#263846で約12.09:1、紹介文は青灰色#41505Aで約8.33:1です。カテゴリの配色だけを変えて比較します。

案A：すべてのカテゴリラベルを同じ色にする

「観察会」「観察記録」「初心者ガイド」を、共通の薄い青灰色#EEF2F4のラベルに載せ、文字は濃い青灰色#405463にします。文字とラベル背景のコントラスト比は約6.99:1です。3種類とも同じ配色にすることで、色を増やさずにカテゴリの位置と役割を統一できます。

薄い青灰色#EEF2F4とページの白#FFFFFFは約1.13:1と近い色です。境界が必要なら、ラベルの周囲に共通の灰緑色#61776Fの線を使う案があります。線とラベル背景#EEF2F4は約4.26:1です。枠線や背景色がなくてもカテゴリ名を読めることを優先します。

案B：2種類だけ色を分け、残りを共通色にする

「観察会」には淡い緑#E8F2EBの背景と深緑#275A43の文字を組み合わせます。コントラスト比は約6.97:1です。
「観察記録」には淡い青#EAF0F9の背景と濃い青#354F79の文字を組み合わせます。コントラスト比は約7.20:1です。
「初心者ガイド」は案Aと同じ薄い青灰色#EEF2F4の背景と濃い青灰色#405463の文字を使い、約6.99:1を保ちます。

この配分なら、記事一覧でよく探される2種類を色でも探しやすくし、残りのカテゴリには共通色を使い回せます。ただし色分けによる効果はサイトの内容次第です。色相の差だけに頼らず、3つともカテゴリ名を必ず文字で表示します。各ラベル背景と白いページの差は小さく、淡い緑#E8F2EBと白#FFFFFFは約1.15:1、淡い青#EAF0F9と白#FFFFFFは約1.15:1です。区切りを強める必要があれば、案Aと同じ灰緑色#61776Fの線をすべてのラベルに共通で使えます。線と淡い緑#E8F2EBは約4.19:1、淡い青#EAF0F9は約4.19:1です。

カテゴリが増えたときとスマホ表示で確認すること

新しいカテゴリが増えても、毎回専用の色を作らず、まず共通色に入れます。利用者が明確に探し分ける必要のある分類だけ、既存の色を再利用するか、分類の見せ方そのものを見直しましょう。1つのカテゴリ名に対して色を途中で変えないことも、一覧の一貫性につながります。

ラベルの文字を薄い灰青色#A3B2B8にすると、共通の背景#EEF2F4では約1.94:1しかありません。小さい文字でも読みやすさを犠牲にしないようにします。スマートフォンではカテゴリ名が長くなっても途中で切り落とさず、記事タイトルとの位置関係を保ちます。カテゴリ名がリンクなら下線やキーボード操作時のフォーカス表示を付け、選択状態を色だけで表さないようにします。

WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。今回のカテゴリ名は小さい通常文字を想定し、各背景との組み合わせを4.5:1以上で確認しています。上記の数値は不透明な単色同士の計算値なので、実際のデザインで透明度や状態によって色が変わる場合は再計算してください。色分けはカテゴリを増やすためではなく、一覧の中から読みたい内容を迷わず選ぶために使います。