Web コンテンツの見出しの書きかた
Web コンテンツの見出しは、HTML の <h1>、<h2>、<h3>...要素でマークアップされます (数字が小さいほど、大きな見出しになります)。
Web コンテンツは、少なくとも初めは、じっくり読んでもらえない (斜め読みされる) ことが多いものです。このため、まずは見出しだけを一瞥してコンテンツの概要が把握できることが大事になります。逆に、見出しを読んでもユーザーが概要をつかめない (いまひとつ、何が書いてあるのかピンと来ない) ようだと、そのまま結局コンテンツを読んでもらえない恐れがあります (それがビジネス上、重要なコンテンツである場合は、結果的に「機会損失」につながります)。
また、大半のスクリーンリーダー (主に視覚障害者が使用する音声読み上げソフト) には、見出しナビゲーション機能 (見出し要素、つまり<h1>、<h2>、<h3>...でマークアップされた箇所だけを辿って読み上げる機能) が用意されています。適切な見出しを付けることは、アクセシビリティの面でも有効と言えます。
見出しを書くコツ
コンテンツの概要が把握できるように、さらにコンテンツをじっくり読んでもらえるように、見出しを適切に付ける必要があるわけですが、実際に見出しを書くにあたっては、いくつかコツがあります。
- コンテンツの骨子を抽出し、見出しとして表出させる。
- ユーザーにとって意味のある、有益な内容の見出しにする。
- 下に紐づいている段落の、キーとなるメッセージをサマリーする。
- 当たり障りのない曖昧な見出し (たとえば「~とは?」「~について」など) はできるだけ避け、より具体的に書く。
- キャッチーであるよりも明解であることを基本的に重視する。
- ユーザーの使用語彙 (検索エンジンに入力するであろうキーワード) を盛り込む。
- ユーザーが理解できる表現にする (専門用語、隠語、略語など、ユーザーが理解できるかを注意する)。
- できるだけ簡潔に書く。
- 正しい階層構造にする (<h2> は必ず <h1> の下に、<h3> は必ず <h2> の下に...といった具合に)。
- 同階層の見出しは、同じスタイルで書く (パラレリズムを適用する)。
以上、参考になれば嬉しいです。これらはいずれも、基本として私自身普段から意識していることですが、Web サイトの要件によっては、これ以外にも色々なテクニックやノウハウが必要になることもあるかと思います (たとえば、魅力的なコピーライティングなど)。皆さんで工夫していることなどありましたら、ぜひコメントいただければと思います。