ドキュメントサイトの配色はどうする？長時間読みやすいWEBデザイン
ドキュメントサイトでは、最初の説明だけでなく、手順や注意点を何ページも読み進めることがあります。色が多すぎると本文より装飾が気になり、反対に文字や目次が薄すぎると現在地を見失いやすくなります。ここでは、業務管理サービスのヘルプセンターを例に、長い説明を読む面と探すための案内を分ける配色を考えます。
長い説明では本文の色を固定し、強弱は構成で付ける
まず、手順を読む本文の背景と文字色を決めます。本文・見出し・番号付きの説明に共通の濃い文字色を使い、見出しの大きさ、段落間の余白、手順の番号で読み進める順序を示します。見出しごとに別の色を割り当てる必要はありません。
所要時間や更新日などの補足情報は本文より少し控えめな文字色にしても構いませんが、薄さだけを優先しないようにします。また、文章中のリンクは単に青くするだけでなく下線も付け、操作できる箇所を色以外でも分かるようにします。
左側の目次は読む文章とは役割が違います。「はじめに」「通知設定」「トラブル対応」のように項目を並べ、現在読んでいるページには左線や太字、「現在のページ」という補足などを加えます。目次の背景色を変えるだけでは周囲との差が小さい場合があるため、色と文字・形の両方で位置を伝えます。
ヘルプセンターの本文・目次・注意書きを6色で整理する
架空の業務管理サービスで「通知メールの設定方法」を説明するページを想定します。HEXコードは「#」と6桁の英数字で画面上の色を指定する表記です。次の6色に役割を固定します。
- ページ全体：薄い青灰 #F5F7F9 ― 説明の外側と左側の目次の土台。
- 本文の面：白 #FFFFFF ― 手順や説明を載せる領域。
- 本文・見出し：濃い青灰 #263645 ― 説明、手順番号、見出し。
- 補足文字：落ち着いた青灰 #526273 ― 更新日、所要時間、補足情報。
- リンク・現在地の目印：深い青 #145A83 ― 文章中の下線付きリンク、目次の左線、フォーカスの輪郭。
- 注意書きの面：淡い青 #E7F0F5 ― 操作前に確認する注意事項の背景。
本文は#FFFFFFの上に#263645の文字で「1. 通知設定を開く」「2. 受け取る通知を選ぶ」「3. 変更を保存する」と順番に書きます。更新日には#526273を使用し、詳しい設定へ移るリンクは#145A83の文字に下線を付けます。これは画面の組み立て方を示す架空の説明で、特定サービスの実際の操作手順ではありません。
「注意：通知をオフにするとメールが届かなくなります」のような補足は#E7F0F5の面に#263645で書き、必ず「注意」と文字でも示します。淡い青の面と白い本文面のコントラスト比は約1.16:1しかないため、明確な区切りが必要なら#145A83の左線と余白を併用します。現在地の目次項目にも、同じ深い青の左線と文字による目印を付けられます。
コントラスト比は隣り合う色の相対的な明るさの差です。本文#263645と白い面#FFFFFFは約12.38:1、補足文字#526273と白い面は約6.26:1、リンク#145A83と白い面は約7.45:1、注意書きの文字#263645と淡い面#E7F0F5は約10.72:1です。いずれもWCAG 2.2（WEBコンテンツを利用しやすくするための指針）のレベルAAで通常サイズの文字に求める4.5:1以上を満たします。青い左線と淡い面の比も約6.45:1あります。
目次・注記・画面幅を変えて最終確認する
注意書きは色だけで種類を伝えない。「注意」「補足」「操作できません」などを見出しや文章で区別し、必要ならアイコンの形も使います。色の付いた囲みを増やしすぎず、手順の理解に必要な場所へ絞ります。
長いページの現在地を確認する。目次に選択中の項目が表示されても、ページをスクロールした後に内容と一致しているかを見ます。リンクの下線やキーボード操作時のフォーカス表示（操作対象を示す輪郭）は残し、線やアイコンを含む操作上必要な表示は隣接する背景との3:1以上も目安に確認します。
スマートフォンでは文字を薄くせず、配置を変える。左の目次を折りたたむ場合も、ページ名と目次を開く操作を見つけられるようにします。長文の折り返し、見出しと本文の間隔、表示倍率を変えたときの読みやすさも点検しましょう。背景色を増やすより、読む場所・探す場所・注意する場所の役割を一定に保つことが、継続して参照しやすいドキュメントにつながります。