見出し帯に色を付ける方法｜記事ページを読み進めやすくする配色
WEB記事で「道具をそろえる」「予定を書き込む」「一か月を振り返る」のように話題を切り替えるとき、見出しの一行だけに背景色を付けた「見出し帯」を使う方法があります。ただし、すべての小見出しを濃い色で囲むと、ページが細かく区切られて読みにくくなることもあります。ここでは架空の手帳整理の記事を例に、淡い帯と濃い帯を比較し、文章の続きを追いやすくする配色と余白を考えます。
見出し帯は、記事の大きな話題が変わる場所に使う
見出し帯とは、見出し文字の背後だけを横長の色面にするデザインです。本文を含むセクション全体の背景色を変える方法とは異なり、見出しの行だけが帯になります。例えば手帳整理の記事なら、「道具をそろえる」「一週間の予定を書く」「月末に見直す」の3つを同じ形式の帯付き見出しにすると、途中から読み始めた人も今どの話題にいるのか探しやすくなります。
色を付ける前に、見出しの階層を決めましょう。HTML（WEBページの内容の役割を示す記述方法）のh2を大見出し、h3をその中の小見出しに使い、h2だけを帯付きにする案があります。小見出しは文字の太さや上下の余白で区別すれば、すべての見出しを強い色面で囲まずに済みます。見た目だけ帯を付けた普通の段落を、見出しの代わりにはしません。
見出し帯を入れる目的は、帯自体を目立たせることではなく、話の切り替わりを明確にすることです。数行ごとに帯を置くより、記事の中で内容が大きく変わる場所に絞ります。「一週間の予定を書く」のような具体的な見出しにすれば、色の違いが分かりにくくても構成が伝わります。
淡い見出し帯と濃い見出し帯の配色を比較する
以下の色はHEX（「#」の後に0～9とA～Fの6桁を並べて表す色コード）です。コントラスト比は、文字などの前景色と背景色の相対的な明るさの差を示します。記事全体の背景は白#FFFFFF、本文の文字色は濃い青灰色#283946に統一します。この文字と背景の比は約11.91:1です。
案A：淡い緑灰色の帯で穏やかに区切る
- 大見出しの帯の背景には淡い緑灰色#EAF3EFを使い、見出し文字には深い青緑#1E5148を選びます。文字と帯のコントラスト比は約7.98:1です。
- 帯の直後の本文は白#FFFFFFに戻し、濃い青灰色#283946で表示します。小見出しの
h3を深い青緑#1E5148の文字だけにするなら、白#FFFFFFに対して約9.03:1です。 - 白#FFFFFFと淡い帯#EAF3EFの背景同士は約1.13:1と差が小さめです。帯の輪郭を補いたいなら、左側に青緑灰色#527568の線を付ける方法があります。この線と淡い帯#EAF3EFの比は約4.52:1です。
例えば「一週間の予定を書く」の帯の下に「予定とメモを分ける」という小見出しを置きます。小見出しには帯を付けず、文字の大きさや余白だけを変えます。背景を淡くして区切りが弱く感じられるときも、帯の前後の余白を調整してから色の強さを見直しましょう。
案B：濃い帯と白文字で大きな区切りを示す
大見出しの数が少なく、節の始まりをはっきり示したい場合は、帯を深い緑#205549にし、見出し文字を白#FFFFFFにする案もあります。文字と背景のコントラスト比は約8.55:1です。本文の背景は帯の下で白#FFFFFFに戻し、通常の濃い青灰色#283946で読み進められるようにします。
濃い帯は3つの大見出しに同じ形で使い、小見出しには増やさない方が階層を示しやすくなります。帯が連続して暗い面積が増えたら、淡い帯の案と比較してください。また、淡い緑灰色の帯#EAF3EFに薄い灰緑色#A7B6ADの文字を置くと約1.87:1となり、通常サイズの文字として必要な4.5:1を下回るため避けます。
帯の横幅と余白を整え、スマホでも読みやすくする
帯の中では文字と端を密着させず、内側の余白を上下12px・左右16px程度から試せます。px（ピクセル）はWEBで文字や余白の寸法を指定する単位で、ここでの数字は一例です。帯の幅は本文幅にそろえると、左右への飛び出しを抑えられます。背景色を指定するときはCSS（見た目を指定する仕組み）のbackground-colorを使い、文字色のcolorと対で確認します。
スマートフォンでは長い見出しが2行に折り返す場合があります。行間と左右の余白を確保し、帯の下の文章との距離が詰まりすぎないか確かめます。PCとスマートフォンで同じ見出し階層を保ち、小見出しも帯にしてしまわないことが大切です。文字色を変えるだけで階層を示さず、見出し要素自体を正しく使いましょう。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字と背景に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。今回の見出し文字は、いずれも4.5:1以上になる組み合わせを選びました。数値は不透明な単色同士の計算結果なので、実際のテーマで透明度や色を変更する際には再確認してください。見出し帯は、記事を読み進める目印として必要な範囲に使うのがポイントです。