Web ページの目次と見出し

公開日:
更新日:
1,392Webデザイン

目次と見出しとは

ブログなどの Web ページの上部には、取り扱うコンテンツの章・節を一覧化して目次化されているページがあります。WordPress に代表される CMS では自動的に目次を作成するプラグインが提供されているため、設置しているページも多く見られます。

目次や見出しは紙媒体のメディアでも広く用いられているドキュメンテーション技法の基本です。目次や見出しの本来の意味は、比較的情報量の多いコンテンツに対して利便性(ユーザビリティ)や、検索性(ファインダビリティ)を助け、情報に対して利用しさすさ(アクセシビリティ)を向上させることにあります。

見出しや目次は広く用いられている一方で慣習的に使われているケースも多く、冒頭から順番に読まれる小説などの物語でも使われている場合があります。小説などの物語では、途中から読み始めるということは基本的にはあり得ないため、目次を付けることに意味はありません。Web ページでも目次の必要性が問われているため、本ページでは目次と見出しのあり方について考えていきたいと思います。

目次と見出しの必要性

前述の通り、目次と見出しには情報に対してアクセシビリティを向上させる効果があります。しかし、Web ページにおける目次と見出しに対しては不要であるという意見もあります。実際に、目次を意図的に付けていないサイトも存在します。目次と見出しの設置は本当に必要なのか、賛成派と反対派の意見を順番に見ていきましょう。

目次と見出しの設置に賛成派の意見

  • Web アクセシビリティが向上する。
  • コンテンツ全体をななめ読みできて、リンクで目的のコンテンツまで飛べる。
  • SEO に対してポジティブな効果が期待できる。

賛成派は、ユーザビリティやアクセシビリティを向上させる目的や、平均セッション時間や平均滞在時間を伸ばす SEO に対してポジティブな結果を得られる目的のために設置しているケースが多いようです。

見出しから目次を自動的に作成するプラグインの存在もあり、CMS を使用しているサイトの多くは目次を設置しています。もちろん、他サイトが目次を設置している場合が多いため、上記のメリットを意識せずに設置しているケースも少なくないようです。

目次と見出しの設置に反対派の意見

  • 目次をスクロールする時間が無駄で、早くコンテンツを読みたい。
  • コンテンツが体系的に書かれていないため、いわゆる小説に目次を付けるように意味がない。
  • 情報量が少ない場合でもプラグインにより目次が出力されており、必要性を考えていない。

その他にも、目次を付けていた方が真面目に見える、SEO として良い効果が期待できる、ユーザは目次を求めているなど、目次や見出しは書き手側の都合であることを反対派は指摘しています。

特にブログなどでは冒頭から読まれることをある程度前提としており、目次からジャンプすることに意味がないと考えているようです。

目次のクリック分析

ブログに設置された様々なパーツに対して、ユーザがどれだけクリックされたか分析をした面白いデータがあります。すべての Web パーツのクリック率は総 PV の 10.52 % という結果になっています。内訳を見てみると、目次が 34.23 % で他の Web パーツを大きく引き離している結果を示しています。

つまり、上記のサイトが分析した結果では、目次を利用するユーザは全体の 3.6 % となります。ただし、この結果は上記のサイトだけの分析結果であり、Web 全体が同じ結果になるわけではありません。目次の利用率は、サイトの性質やページの情報量によって異なるため、参考データにはなりますが決め手にはなりません。

目次と見出しの必要性における見解

賛成派、反対派の意見を調べている内に賛成派は書き手であり、反対派は読み手が多いように感じました。読み手のユーザは、目次や見出しよりもコンテンツの中身が知りたいだけであり、それほど目次の有用性は感じていないようです。

ただし、目次の有用性を感じていないのは検索性が必要ない日常ブログなどの雑記や、情報量が少ないページに対してであり、情報量がある程度多くなってくると目次の有用性は反対派も認めているようです。どの程度の情報量から目次は有用になるのか決めることは難しいですが、約 5,000 文字を超える程度から目次が有用になると思います。個人的に、雑記や情報量が少ないページに対して目次の設置については、特に必要性を感じません。本サイトでも目次と見出しを設置しているため、個人的見解を改めて書くまでもありませんが、コンテンツの内容はなるべく目次が活かせるアウトラインで書いています。

また、本サイトでは目次を表示させているのはデスクトップのみであり、モバイルの場合は表示させていません。ページによっては情報量が多すぎて目次だけでも相当量なスクロールが必要になるページもあるため、なかなかコンテンツに到達できないためです。本来論で言えば、モバイルにこそ目次が必要だと思いますが真逆のアプローチを取っています。

目次の作り方

ここでは WordPress のような CMS のプラグイン導入方法については説明しません。ページ表示時に Javascript で見出しタグを取得し、目次化するコードについて紹介します。以下のコードは、jQuery を利用して article タグ配下の h2 ~ h4 レベルまでの見出しタグに書かれている文字列を抽出し、順序リストで再構築しています。目次を表示したい場所にタグを配置し、ID に "toc" を指定すると目次が表示されます。

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);
見出しの文字列を自動的に目次化する Javascript

目次化する見出しタグのレベルについて

見出しタグのレベルは h1 ~ h6 まであります。h6 まで使われることは稀ですが、すべての見出しタグを目次化することは議論の余地があります。上記のサンプルコードでも h4 までしか目次として使用していません。理由は、h6 まで使用すると、目次の情報量が増えすぎてユーザビリティが低下する場合があるためです。

目次の本来の意味を考えると、h2 ~ h3 レベルまででも十分かもしれません。それ以上にドキュメントの階層が深くなる場合は、構成自体の見直しを検討することも選択肢の一つになります。

目次を構成するタグについて

HTML には見出しタグは存在しますが、目次タグは存在しません。目次は HTML と CSS を組み合わせれば、p タグでも、リストタグでも CSS 次第で自由に作成することができます。

しかし、自由にタグを選べるということはメリットのように感じますが、タグの選定には慎重になるべきです。なぜなら、HTML の本来の意味はドキュメントにマークアップ (意味付け) することであり、目次に段落タグや、見出しタグを使うのは HTML 的には正しくないためです。

目次の本来の意味を考えるならば、順序リストタグが妥当であると考えます。WordPress のプラグインで出力された目次も順序リストタグが使われています。もしも順序性のない目次であれば、箇条書きのリストタグも検討するべきです。その他にも目次はナビゲーションとしての役割を持つため全体を nav タグで囲むべきという意見もあります。

SEO と目次

目次は昔から SEO に効果があると言われていますが、根拠はありません。目次を正しく設置している場合、検索結果ページにアンカーテキストが表示される場合がありますが、それだけでは SEO にポジティブな結果を得られるとは断言できません。目次を設置することにより、平均セッション時間や平均滞在時間を伸ばせるなど副次的な効果はありますが、直接的な効果は不明です。

クローラは見出しタグからページの構造を読み取ることは広く知られていますが、目次についての言及はありません。そのため、SEO に効果がありそうだからと言って無闇に目次を導入することは軽率かもしれません。

目次の表示位置

日本語や英語の場合は、冒頭に目次を設置することが一般的ですが、フランス語の場合は索引として最後に設置される場合があります。Web ページの場合も冒頭に設置することが一般的ですが、左右のいずれかに設置するケースもあります。

Office の Word にある "見出しマップ" のように、ユーザがどの章を読んでいるのか目次が追従する機能を実装しているサイトもあります。フォーマルなサイト、または公式のリファレンスサイトなどでは目次の追従機能が付いているケースがあります。ただし、目次を追従する機能は便利で見た目にも面白いのですが、ユーザの気を散らす悪影響があることも考慮すべきです。そのため、情報量やサイトの性質にもよりますが、個人のサイトではそのような機能を実装する必要性は感じません。

目次の装飾デザイン

目次の装飾デザインは、ある程度限定的です。紙媒体の目次であれば、目を引くようなデザインを施している場合がありますが、Web ページでの目次の装飾は控え目になっています。

目次はあくまでもアクセシビリティを向上させるためのパーツなので、むしろデザインは控え目であるべきだと考えます。目次であることを認識してもらうために枠線で囲んだり、順序性があることを示すために数字を付与したり、リンクであることを示すために青色文字にしたりするなどです。

ユーザは他サイトのデザインパターンを無意識のうちに学習しているため、あまり他サイトとは違う奇抜なデザインを施してしまうと余計な学習コストがかかるため、不快感を示します。そのため、目次に装飾を施す場合は控え目にしておいた方が無難です。

目次の表示・非表示について

目次を設置しているサイトでは、表示・非表示のリンクを見かけます。ページの初期表示時にはデフォルトで目次が表示されていますが、邪魔である場合はユーザが目次を非表示にできる機能です。

この表示・非表示の機能がどの程度使われているのか示すデータはありませんが、User Experience のカンファレンスで発表された調査結果によると、オンライン広告に閉じるボタンが存在しないデザインは "悪い" と評価したのは全体の 90 % にもなります。もちろん、目次とオンライン広告は別物なので意味のないデータかもしれませんが、目次が本当に邪魔だと感じているユーザには需要があるかもしれません。

目次の表示・非表示の折衷案として、見出しレベルでの表示・非表示を行っているサイトもあります。例えば、ページの初期表示時は h2 レベルの目次のみ表示し、表示ボタンをクリックすると h3 ~ h4 の下位の見出しを表示する方法です。この方法ならば、情報量が多くても目次が長くならず、ページの概略も把握できます。目次のデザインはどのようにすれば良いかはサイトによって異なるため、サイトに合ったデザインを探ってみて下さい。

まとめ

目次や見出しは日常ブログより、技術解説ブログで威力を発揮します。特に体系的にまとめているコンテンツでは、目次をななめ読みするだけで、どこから読み始めれば良いのかユーザに伝えることができます。ユーザは、少しでも早く目的の情報にアクセスしたいため、訪問したページには何が書かれているのか目次化されていると、目的の情報にアクセスするためのヒントになります。

理解しやすい目次は、良いアウトラインから始まります。技術系ブログでは思いつくままに章構成を決めるより、ユーザが理解しやすい順序を考え、アウトラインを決めてから取り掛かると良いかもしれません。

 ページトップに戻る