見出しデザインで目を引くには？装飾のパターンと使い分け

見出しのデザインを考えるとき、多くの場合「どう装飾するか」から入ります。下線を引く、背景色を敷く、左に縦線を置く、といった選択です。

ただし装飾を増やしても、読まれ方は良くなりません。見出しの役割は目を引くことではなく、拾い読みしている読者に記事の構造を伝えることだからです。装飾を足すほど見出し同士の上下関係が曖昧になり、どこが大きな区切りでどこが小さな区切りなのかが分からなくなります。

この記事では、装飾のパターンとそれぞれが向く場面、選ぶ基準、決める順序、そして更新運用で崩れないようにする方法を整理します。

見出しの役割は、目を引くことではない

Webの記事は、最初から順に読まれるとは限りません。多くの読者は見出しだけを拾って、自分の知りたい箇所を探します。このとき見出しに求められるのは、視線を止めることではなく、記事全体のどのあたりにいるのかを示すことです。

この前提を外すと、判断を誤ります。「もっと目立たせたい」という要望に応えて装飾を強くしても、すべての見出しが同じだけ目立てば、結局どれも目立ちません。

表のとおり、装飾が効くのは「視線を止める」という一点だけです。それ以外は文言と、大きさと、余白の問題になります。装飾から入ると、解決すべきでない問題を装飾で解こうとすることになります。

装飾のパターンと、それぞれが向く場面

実務で使われる装飾は、おおむね次の6種類に整理できます。強さの順に並べており、下にいくほど主張が強くなります。

選ぶ基準は好みではありません。記事の性質と、見出しが何行になるかで決まります。たとえば見出しが長くなりがちな記事で背景色の帯を使うと、1行の見出しと2行の見出しで帯の高さが変わり、統一感が崩れます。この場合は左の縦線か、装飾なしのほうが安定します。

また、下線と左の縦線を同時に使う、背景色の上にさらに囲み枠を重ねるといった組み合わせは避けてください。装飾は1つの見出しにつき1種類が原則です。

装飾を足すほど、階層が壊れる

これが見出しデザインで最も見落とされる論点です。装飾は段の差を伝えるのが苦手で、足すほど上下関係が曖昧になります。

大きさであれば、大きいほうが上位だと直感的に分かります。ところが装飾には順序がありません。背景色の帯と左の縦線を比べたとき、どちらが上位かを判断する手がかりは存在しないためです。

• H2に背景色、H3に左の縦線を使うと、どちらが上位か伝わらない
• H3にだけ強い装飾を付けると、H2より目立って階層が逆転する
• 段ごとに違う装飾を割り当てると、装飾の意味を読者が覚える必要が生じる
• 装飾が増えるほど、記事全体の見た目が散らかる

対処は単純です。装飾を付けるのは最上位の段だけにして、下位の段は大きさと余白で区別します。H2に下線を引くのであれば、H3は装飾なしで、サイズを一段落とすだけにします。これで上下関係が保たれます。

要素どうしの差をどれくらい付けるかという考え方はデザインのジャンプ率とは｜差をつける幅で印象と伝わり方が変わるで扱っています。

大きさと余白は、装飾より先に決める

順序を守るだけで、装飾に頼らずに読める記事になります。本文の文字サイズを基準に、各段の大きさを数値で決めてください。

比率に幅があるのは、書体によって同じ数値でも見え方が変わるためです。数値をそのまま採用せず、実際の記事に流し込んで確認してください。本文の文字サイズや行間の決め方は読みやすい文字サイズの決め方｜サイズ・行間・1行の文字数を数値で揃えるを参照してください。

余白はさらに重要です。見出しの上の余白を広く、下の余白を狭くします。こうすると見出しが直後の本文と一体に見え、前の章から切り離されます。上下を同じ余白にすると、見出しがどちらの文章に属しているのか分からなくなります。

目安として、上の余白は下の余白の2倍から3倍を取ります。この差が付いていれば、装飾がなくても区切りは伝わります。余白の考え方はWebデザインにおける余白の効果で詳しく扱っています。

見出しタグと、見た目の装飾を混同しない

実装面で最も事故が起きるのがここです。見出しのタグは文書の構造を示すものであり、文字を大きくするための指定ではありません。

• 大きく見せたいという理由でH2を使うと、構造が壊れる
• 見た目を小さくしたいという理由でH3を先に使うと、段が飛ぶ
• 装飾された文字をタグ無しで置くと、見出しとして認識されない
• H1は原則としてページに1つ

検索エンジンは見出しのタグから記事の構成を読み取ります。見た目が見出しらしくても、タグが付いていなければ構造としては存在しません。逆に、タグを見た目のために使うと、実際とは違う構成が伝わります。

順序としては、先に文書の構造としてH2とH3を決め、その後に見た目を割り当てます。「この見出しは目立たせたいからH2にする」という判断が出た時点で、順序が逆になっています。

なお装飾に色を使う場合は、文字と背景のコントラストを確認してください。背景色の帯に白い文字を置く構成は、色の選び方によっては基準を下回ります。判断の基準は配色のコントラスト比の基準｜WCAGの数値と、実務での使い方にまとめています。

運用で崩れないようにする

公開時点で整っていても、更新を重ねると見出しは崩れます。原因は、担当者に装飾の選択肢が残っていることです。

CMSの編集画面で文字色や背景色を自由に変えられる状態にしておくと、記事ごとに違う装飾が使われ始めます。悪意ではなく、その記事だけを見て良かれと思って調整した結果です。1本ずつでは問題に見えず、数十本たまった時点で統一感が失われていることに気づきます。

1. 見出しの装飾は、記事ごとではなくサイト全体で1か所にまとめて指定する
2. 編集画面から、見出しの色・サイズ・装飾を個別に変える手段を外す
3. 編集者が選べるのは「H2かH3か」だけにする
4. 例外を作りたい場合は、その形式自体を選択肢として用意する

4番目が実務上の要点です。選択肢を減らすと「どうしても目立たせたい」という要望が個別対応として発生します。そのたびに手を入れると結局は崩れるため、必要な形式はあらかじめ用意しておき、そこから選ばせる形にします。

更新しやすさを保つCMSの設計は更新しやすい企業サイトの作り方｜CMS選定と運用設計のポイントで扱っています。デザイン要素をどの順で決めるかの全体像はWebデザインの構成要素はどの順で決めるか｜好みの議論にしないための順序を参照してください。

よくある失敗

すべての見出しを目立たせる

全部が同じだけ目立てば、どれも目立ちません。強調するのは最上位の段だけにして、下位は大きさと余白で区別してください。

段ごとに違う装飾を割り当てる

装飾に順序は無いため、どちらが上位かが伝わりません。装飾は最上位の段のみに使ってください。

H3のほうがH2より目立っている

階層が逆転しています。装飾を強くする前に、サイズの比率が確保できているかを確認してください。

見た目の理由で見出しタグを選ぶ

文書の構造が実態とずれます。先に構造としてH2とH3を決め、その後に見た目を割り当ててください。

上下の余白を同じにする

見出しがどちらの文章に属するのか分からなくなります。上を下の2倍から3倍にしてください。

編集画面で装飾を自由に変えられる状態にしておく

記事ごとに違う装飾が使われ、数十本たまった時点で統一感が失われます。選択肢は段だけに絞ってください。

よくある質問

見出しに画像を使ってもよいですか

推奨しません。文字として認識されないため検索エンジンに構造が伝わらず、拡大表示にも対応できません。装飾が必要であれば、文字はテキストのまま、背景や罫線で表現してください。

見出しは何文字くらいが適切ですか

画面幅に対して1行に収まる長さが目安です。日本語であれば20文字から30文字程度に収まると、2行になる見出しと混在しても崩れにくくなります。長くなる場合は、装飾として背景色の帯を使わないほうが安定します。

H4以下は使わないほうがよいですか

使わずに済む構成にできるなら、そのほうが読みやすくなります。H4まで必要になる場合、そもそも1つの記事に詰め込みすぎている可能性があります。記事を分けたほうが、読者にとっても検索評価の面でも扱いやすくなります。

見出しにキーワードを入れるべきですか

内容に合っていれば自然に入ります。入れること自体を目的にすると、文言が不自然になり拾い読みの妨げになります。見出しは内容を予測させるためのものなので、読んで中身が分かるかを基準に判断してください。

装飾のパターンは記事ごとに変えてよいですか

変えないでください。同じサイト内で記事ごとに見出しの形が違うと、読者は毎回そのサイトの読み方を覚え直すことになります。統一したうえで、どうしても必要な例外だけを形式として用意してください。

まとめ

見出しのデザインは、目を引くことではなく、拾い読みしている読者に記事の構造を伝えることを目的とします。この前提に立つと、装飾で解決できるのは「視線を止める」ことだけで、構造を伝える役割は大きさと余白が担っていると分かります。

装飾には順序が無いため、段の上下関係を表現できません。背景色の帯と左の縦線を比べても、どちらが上位かを判断する手がかりが無いためです。したがって装飾は最上位の段だけに使い、下位の段はサイズと余白で区別します。本文を基準にH2は1.5倍から1.8倍、H3は1.2倍から1.4倍を目安とし、見出しの上の余白は下の2倍から3倍を取ります。ここまで整えば、装飾を足さなくても区切りは伝わります。

実装では、見出しタグを見た目のために使わないでください。タグは文書の構造を示すもので、検索エンジンはここから記事の構成を読み取ります。そして公開後に崩れる最大の原因は、編集担当者に装飾の選択肢が残っていることです。選べるのは段だけにして、必要な例外はあらかじめ形式として用意しておいてください。

当社ではデザイン制作において、公開後の更新まで含めて崩れない設計を前提に進めています。サイト全体のご相談はホームページ制作をご覧ください。