ブログなどの Web ページの上部には、取り扱うコンテンツの章・節を一覧化して目次化されているページがあります。WordPress に代表される CMS では自動的に目次を作成するプラグインが提供されているため、設置しているページも多く見られます。
Web ページに限らず目次や見出しは紙媒体のメディアでも広く用いられているドキュメンテーション技法の基本です。目次や見出しの本来の意味は、比較的情報量の多いコンテンツに対して利便性(ユーザビリティ)や、検索性(ファインダビリティ)を助け、情報に対して利用しさすさ(アクセシビリティ)を向上させることにあります。
見出しや目次は広く用いられている一方で慣習的に使われているケースも多く、冒頭から順番に読まれる小説などの物語でも使われている場合があります。小説などの物語では、途中から読み始めるということは基本的にはあり得ないため、目次を付けることに意味はありません。Web ページでも目次の必要性が見直されているため、ここでは目次と見出しのあり方について考えていきたいと思います。
前述の通り、目次と見出しには情報に対してアクセシビリティを向上させる効果があります。しかし、Web ページにおける目次と見出しに対しては不要論もあります。目次と見出しを設置することに賛成派と反対派の意見を順番に見ていきます。
賛成派は、CMS のプラグインによって簡単にアクセシビリティを向上させることができ、平均セッション時間や平均滞在時間を伸ばせるなど SEO に対してポジティブな結果を得られることで使用している場合が多いようです。
その他にも、目次を付けていた方が真面目に見える、SEO として良い効果が期待できる、ユーザは目次を求めているなど、目次や見出しは書き手側の都合であることを反対派は指摘しています。
賛成派、反対派の意見を調べている内に賛成派は書き手であり、反対派は読み手が多いように感じました。読み手のユーザは、目次や見出しよりもコンテンツの中身が知りたいだけであり、それほど目次の有用性は感じていないようです。
ただし、目次の有用性を感じていないのは検索性が必要ない日常ブログなどの雑記や、情報量が少ないページに対してであり、情報量がある程度多くなってくると目次の有用性は反対派も認めているようです。どの程度の情報量から目次は有用になるのか決めることは難しいですが、約 5,000 文字を超える程度から目次が有用になると思います。個人的に、雑記や情報量が少ないページに対して目次の設置については、特に必要性を感じません。本サイトでも目次と見出しを設置しているため、個人的見解を改めて書くまでもありませんが、コンテンツの内容はなるべく目次が活かせるアウトラインで書いています。
また、本サイトでは目次を表示させているのはデスクトップのみであり、モバイルの場合は表示させていません。ページによっては情報量が多すぎて目次だけでも相当量なスクロールが必要になるページもあるため、なかなかコンテンツに到達できないためです。本来論で言えば、モバイルにこそ目次が必要だと思いますが真逆のアプローチを取っています。
ここでは WordPress のような CMS のプラグイン導入方法については説明しません。ページ表示時に Javascript で見出しタグを取得し、目次化するコードについて紹介します。以下のコードは、jQuery を利用して <article> タグ配下の h2 ～ h4 レベルまでの見出しタグに書かれている文字列を抽出し、順序リストで再構築しています。
var idcount = 1;
var toc = '<div id="toctitle">目次</div>';
var currentlevel = 0;
$("article h2,article h3,article h4",this).each(function(){
this.id = "chapter-" + idcount;
idcount++;
var level = 0;
if(this.nodeName.toLowerCase() == "h2") {
level = 1;
} else if(this.nodeName.toLowerCase() == "h3") {
level = 2;
} else if(this.nodeName.toLowerCase() == "h4") {
level = 3;
}
while(currentlevel < level) {
toc += '<ol class="chapter">';
currentlevel++;
}
while(currentlevel > level) {
toc += "</ol>";
currentlevel--;
}
toc += '<li><a href="#' + this.id + '">' + $(this).html() + '</a>';
});
while(currentlevel > 0) {
toc += "</ol></li>";
currentlevel--;
}
$("#toc").html(toc);見出しタグのレベルは h1 ～ h6 まであります。h6 まで使われることは稀ですが、すべての見出しタグを目次化することは議論の余地があります。上記のサンプルコードでも h4 までしか目次として使用していません。理由は、h6 まで使用すると、目次の情報量が増えすぎてユーザビリティが低下する場合があるためです。
目次の本来の意味を考えると、h2 ～ h3 レベルまででも十分かもしれません。それ以上、ドキュメントの階層が深くなる場合は、構成自体を見直した方が良いかもしれません。
目次や見出しは日常ブログより、技術解説ブログで威力を発揮します。特に体系的にまとめているコンテンツでは、目次をななめ読みするだけで、どこから読み始めれば良いのかユーザに伝えることができます。ユーザは、少しでも早く目的の情報にアクセスしたいため、訪問したページには何が書かれているのか目次化されていると、目的の情報にアクセスするためのヒントになります。
理解しやすい目次は、良いアウトラインから始まります。技術系ブログでは思いつくままに章構成を決めるより、ユーザが理解しやすい順序を考え、アウトラインを決めてから取り掛かると良いかもしれません。