見出しごとに色を変えてもいい？記事デザインを散らからせないコツ

WEB記事の見出しは、章ごとに違う色を付けた方が分かりやすいのでしょうか。色を変えると話題の切り替わりを示せますが、見出しが増えるたびに色も増やすと、かえって記事の構造を追いにくくなることがあります。見出しの色は、章の内容ごとではなく、まず見出しの階層ごとに決めるのが実用的です。ここでは架空の写真整理ガイドを例に、1色で統一する方法と、見出しの階層で2色を使い分ける方法を比較します。

見出しの色は章ごとではなく、階層ごとにルールを作る

例えば写真整理の記事に「写真を取り込む」「重複した写真を整理する」「バックアップを確認する」という3つの大見出しがあるとします。その中に「撮影日で並べる」「保存先を確かめる」といった小見出しを置きます。記事は架空の例ですが、この構造ならどの章でも大見出しは同じ役割、小見出しも同じ役割です。

HTML（WEBページの文章構造を表す記述方法）では、大きな章にh2、その内側の小さな節にh3を使えます。見出しの順序は内容のまとまりに合わせ、文字色だけで階層を表したつもりにならないことが大切です。記事の見出しが増えても、同じ階層なら同じ見た目を保ちます。

「写真を取り込む」は緑、「重複した写真を整理する」はオレンジ、「バックアップを確認する」は紫という具合に章ごとに色を変えると、分類の意味があるように見える場合があります。特別な理由がなければ、新しい章のたびに別の色を作らず、文字サイズ・太さ・見出し前後の余白を優先しましょう。

同じ記事を1色と2色の見出しで比較する

以下の色はHEX（「#」に続く0〜9とA〜Fの6桁で表す色コード）です。コントラスト比は、文字と背景の相対的な明るさの差を表す数値です。2案とも背景を白■#FFFFFF、本文を濃い青灰色■#263846に固定します。本文と背景の比は約12.09:1です。

案A：H2とH3を同じ文字色で統一する

大見出しにも小見出しにも濃い青灰色■#263846を使い、白■#FFFFFFとのコントラスト比を約12.09:1に保ちます。例えばh2を28px程度の太字、h3を20px程度の太字、本文を16px程度として、見出しの大きさで順序を付けます。px（ピクセル）はWEBで文字や余白の大きさを指定する単位です。これらのサイズは設計例であり、すべてのサイトに必要な寸法ではありません。

「重複した写真を整理する」の下に「似た写真を比較する」という小見出しを置く場合も、色を変える必要はありません。大見出しの上の余白を広めに、小見出しの下の余白を本文とつながるように整えると、色が同じでも階層をたどれます。記事全体の色数を少なくしたいときの出発点として使えます。

案B：H2とH3で2色を使い分ける

見出しの階層をもう少しはっきり見せたい場合は、大見出しのh2だけを深い青緑■#155C60にします。白■#FFFFFFとのコントラスト比は約7.69:1です。小見出しのh3には落ち着いた青灰色■#45596Bを使い、白■#FFFFFFに対して約7.26:1です。本文は引き続き濃い青灰色■#263846にそろえます。

「写真を取り込む」「重複した写真を整理する」「バックアップを確認する」の3つには、同じ深い青緑■#155C60を使います。「撮影日で並べる」など小見出しはすべて青灰色■#45596Bです。章の内容に合わせて色を次々に追加するのではなく、見出しの役割によって色を固定します。もちろん、色の違いだけに頼らず、案Aと同じようにサイズ・太さ・余白でも区別します。

短い「整理のメモ」を淡い緑灰色■#EEF4F2の面に置くときは、深い青緑の見出し■#155C60との比が約6.90:1、青灰色の見出し■#45596Bとの比が約6.52:1、本文色■#263846との比が約10.86:1です。背景が白から変わっても、実際に隣接する面とのコントラストを確認します。

色を増やさずに見出しを読み分けるための確認点

実際の見出しがリンクでないなら、リンクと同じ下線を安易に付けないようにします。例えば「一覧へ戻る」というリンクには深い青■#195B83と下線を使い、白■#FFFFFFの背景に対して約7.33:1、淡い緑灰色■#EEF4F2の上では約6.58:1です。クリックできる文字と記事の見出しを色以外でも区別します。

見出しを淡い灰青色■#A9B8BAにすると、白■#FFFFFFとの比は約2.05:1に下がります。通常サイズの文字に必要な4.5:1を下回るため、小さな見出しに使う色としては勧めません。WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字は原則4.5:1以上、規定の大きな文字は3:1以上のコントラスト比が求められます。ここで提案した見出し色は、通常文字の4.5:1以上も確保する組み合わせを選びました。

スマートフォンでは長い見出しが2行になっても、大見出しと小見出しの違いが分かるか確認します。色の見え方だけでなく、見出しの順序、文字の太さ、前後の余白が一貫しているかを確かめてください。上の数値は不透明な単色同士の計算値なので、写真の上や透明な背景では再確認が必要です。見出しの配色を整理するなら、新しい章のたびに色を選ぶより、階層ごとの共通ルールを決める方が扱いやすくなります。