ブログの配色はどう決める？長い文章を読みやすくするWEBデザイン
ブログの配色では、トップページの印象だけでなく、読者が長い記事を最後まで追いやすいことが大切です。背景や見出しを明るい色で飾っても、本文やリンクが見つけにくければ読みにくくなります。まず本文の文字と背景を決め、見出し・目次・補足欄へ順番に色を割り当てる方法を紹介します。
ブログの配色は本文と背景の組み合わせから決める
ブログの中心は文章なので、最初に記事本文の背景と文字色を組み合わせます。淡い背景に十分濃い文字を使うと、段落が長く続いても文字の輪郭を確保しやすくなります。真っ白な背景が必要とは限らず、外側をわずかに色づけして記事領域を白く保つ方法もあります。
見出しは本文と違う濃色を使い、文字の大きさや余白と合わせて段落の区切りを示します。リンクは見出しと同系色でも構いませんが、色の違いだけに頼らず下線を付けます。日付や著者名などの補助情報は少し控えめな文字色にしつつ、薄すぎる色は避けましょう。
色数を増やす前に、読者が記事の途中で「どこを読んでいるか」「次に何を開けるか」を判断できるか確かめます。背景、文字、見出し、リンクの役割を固定すると、記事ごとに写真や図表の色が違ってもページ全体が散らかりにくくなります。
本文・見出し・目次を整理する具体的な配色例
長めの解説記事を掲載する個人ブログを想定します。HEX（ヘックス）は、WEB上の色を16進数で表すカラーコードです。
- 記事の外側：淡いグレー #F7F8F6。本文の周囲を控えめな色にして、記事領域とサイドバーを分けます。
- 本文の背景：白 #FFFFFF。外側のグレー #F7F8F6 とのコントラスト比は約1.07:1と小さいため、余白や枠線で記事の位置を示します。
- 本文の文字：濃いチャコール #28343A。白 #FFFFFF の上で約12.79:1、淡いグレー #F7F8F6 の上でも約12.00:1です。
- 見出し・文字リンク：深い青緑 #23565F。白 #FFFFFF の上で約8.18:1、後述する目次の背景 #ECF3EF の上で約7.26:1です。リンクには下線も付けます。
- 日付・著者名：ブルーグレー #55676E。白 #FFFFFF の上で約5.91:1。本文より控えめでも、小さな文字を判別できる差を残します。
- 目次・補足欄：ごく淡いグリーングレー #ECF3EF。濃いチャコール #28343A の文字なら約11.34:1で、長い説明から補足を区別できます。
- 記事枠・目次の境界線：落ち着いたグレー #71868A。白 #FFFFFF に対して約3.83:1、目次の背景 #ECF3EF に対して約3.40:1です。境界が必要な場所に限って使います。
- 「記事一覧を見る」ボタン：深い青緑 #23565F の背景に白 #FFFFFF の文字。約8.18:1の組み合わせです。
見出し・リンク・ボタンに共通の青緑を使い、記事の写真や図の色はそのまま残します。本文に使う面を明るく保ち、視線を止めたい場所だけ違う背景を使う構成です。
長文を読む画面で確認したい注意点
まず、目次や引用・補足欄を増やしすぎないことが大切です。淡い色の囲みが連続すると、本文の流れが細切れに見える場合があります。目次や重要な補足だけ背景色を使い、通常の段落は同じ文字色と背景にそろえます。
次に、スマートフォンでは一度に見える文章が少ないため、本文と見出しの区切り、リンクの下線、背景色の切替位置を確認します。文字色だけでなく、行間や一行の長さ、見出し前後の余白も一緒に調整します。背景を変えた場合は、同じ文字色が新しい背景でも十分に見えるか再計算してください。
WCAG（WEBコンテンツを利用しやすくするためのガイドライン）2.2のレベルAAでは、通常サイズの文字と背景は4.5:1以上、大きな文字は3:1以上が基準です。操作や情報の理解に必要な枠線などの非テキスト要素には、隣接色との3:1以上が求められます。上記の数値は記載した色の組み合わせについての計算結果であり、サイト全体の適合を保証するものではありません。