目次とは?ブログの記事に目次は必要か不必要なのか実例をもとに解説

目次とは?ブログの記事に目次は必要か不必要なのか実例をもとに解説

よく、ブログサポートをしている中で「目次は必要ですか?」という質問があります。

筆者の回答としては、「目次が必要なブログ記事構成の時と必要ではない時の記事構成」について個別にWebサイトや扱うテーマを考慮して回答しています。

WebサイトのUI(ユーザインターフェース)/UX(ユーザーエクスペリエンス)という、サイト訪問者にとって使いやすいということはどういうことなのか?

これらの用語をベースに解説することもあるのですが、UI/UXについては、本当にWebサイトによってケースバイケースです。

本記事では、「ブログの記事に目次は必要か不必要か?」について、もう少し深く解説していきたいと思います。

この記事の内容
  1. ブログサイトに目次が必要な場合と不必要な場合
  2. 目次の初期表示設定は常に表示と非表示のどちらにしておいた方が良いのか?
  3. 目次機能の組み込み方について

ブログサイトに目次が必要な場合と不必要な場合

ブログサイトに目次が必要な場合と不必要な場合

ブログサイトは、運営者によって扱うテーマや書き方が全然違うので、「目次」と言う機能を入れるかどうか。

また、目次を機能として入れた場合、常に一覧表示するか、目次の一覧を閉じておいてサイト訪問者が利用したときに表示するボタンを作っておくかなど、サイト運営者は色々な選択肢が可能です。

例えば、当ブログ(ユニコブログ®)の場合は

  1. WordPressテーマ(サイトデザイン)にはSTORK19を利用
  2. 目次を自動生成するためにプラグインにTable of Contents Plusを利用
  3. 目次一覧の表示に関する初期設定は「閉じる」にしている

上記のような形で目次機能を利用しています。

特に、目次の表示・非表示の初期設定は、最初から表示した方が良いとしている方、ユーザーに表示か非表示かを選んでもらうために非表示にする方が良いと言う方で分かれますが、筆者の考え方としては、運営するサイトによってどちらにした方がサイト訪問者が使いやすいかを判断して選ぶという形で良いと思っています。

ブログ記事に目次が必要なサイトコンテンツ

ブログ記事に目次が必要なサイトコンテンツ

目次機能を入れて運用した方が良いブログコンテンツは、主にハウツー系の時だと考えています。

ブログ記事の構造も、ノウハウに関する内容をプロセス(過程)や段階を追って説明や解説をするときなどです。

ブログ記事を読んでいるサイト訪問者が、どこまで進んでいるか、または、ピンポイントで読みたい部分があるなど、そのようなニーズを満たすためにブログ記事を作成している場合には目次を入れた方がサイト訪問者にとって便利なWebサイトになると考えています。

また、目次機能を利用する場合、そのほとんどはブログ記事内の「見出し」を目次構造の情報として自動生成するようなツールが多いです。

● ブログの見出し構成の作り方と設計に困らないWebツールの紹介

目次機能を実装(サイト内に組み込む)時は、ブログ記事全体の見出しの作り方次第で、目次がスッキリと作られているか見えてしまうので、合わせて「見出し」の作り方は構成の仕方を覚えるとスキルアップに繋がったりします。

ブログ記事に目次が不必要なサイトコンテンツ

ブログ記事に目次が不必要なサイトコンテンツ

筆者が運営しているサイトの場合で「目次機能」が不要なサイトやページとしては、

  1. イラスト作品1つにページを割り当てているようなサイトの場合
  2. 3DCGで作品事に内容を紹介している場合
  3. ハンドメイドで作った作品の紹介

上記の3つは、当ブログ(ユニコブログ®)内の参考ブログ記事ですが、Webサイト単位で運営している中では、目次機能を組み込んでいないWebサイトもあります。

各作品のサイトコンテンツの中で、「見出し」にあたる部分が全て共通になってしまうので、1つ1つのサイトページが短いコンテンツの場合には、目次機能は付けていません。

ただ、作品を作った背景やストーリーなど、キャラクターに様々な付加情報が付く場合もあるので、このような場合は目次機能を利用しています。

このほかにも、比較的短いブログコンテンツになりやすい日記ブログであったり、ページの階層が細かくなりやすい趣味系のブログについては、筆者に「目次機能は入れた方が良いですか?」と言われたときには、Webサイトのコンテンツを上で是非を判断しています。

目次の初期表示設定は常に表示と非表示のどちらにしておいた方が良いのか?

目次の初期表示設定は常に表示と非表示のどちらにしておいた方が良いのか?

本記事の冒頭でも書いた部分なのですが、運営しているブログサイトに「目次機能」を実装している場合、Webサイトの訪問者に対して目次一覧表示の初期設定を表示・非表示にしておくかは、UI/UXの観点から様々な意見が出てきます。

筆者の場合、この当ブログ(ユニコブログ®)に関しては、非表示にしてあります。

その理由は、ユニコブログ®では5,000~10,000程度の文字で構成されているブログ記事が多いため、「目次一覧の初期設定を表示」にしておくと、スゴく長い見出し構成が表示されてしまい、ちょっと見にくい感じになってしまいます。

探したい内容や目次で探したい場合は「目次を開く」を押すと、すぐに一覧表示されるように合っているので、サイトの運営方針としてはそちらを選んでいます。

2カラムにして、特にPC表示の時はサイドバーに「目次一覧」を表示させるオプションもあるのですが、ユニコブログ®はブログ開設時から1カラム構成でスマホと同じ表示をするようにしているのでそのままにしています。

関連記事:カラムとは?Webサイトの構成で重要なカラム数について分かりやすく解説

Webサイトにヒートマップツールなどを導入して利用するのがベスト

Webサイトにヒートマップツールなどを導入して利用するのがベスト

もし、目次一覧の初期設定を表示しておいた方が良いのか、非表示の方が良いのかについて、定量的なデータがほしい場合は、「ヒートマップツール」を利用すると便利です。

ある一定のPV数まで無料で試せるなど、お金を掛けずに試すことも可能なので、自分の運営するWebサイトで、「目次一覧」の初期設定が表示の時と非表示の時、どちらの方がページ滞在率などの指標が良いのか確認することも出来るので、それで判断すると良いと考えています。

目次一覧の初期設定は表示のままが良いか非表示のままが良いかはWebサイトごとに違う

目次一覧の初期設定は表示のままが良いか非表示のままが良いかはWebサイトごとに違う

実際に試すと、サイトのデザインや扱っているテーマ、ひいてはそのサイト内のブログ記事事によっても全然違う定量データがとれたりするので結構勉強になると考えています。

筆者の場合、以前は検証したいときに利用するWebサイトが数十サイトあり、一時はヒートマップを利用して、どちらの方が滞在時間が長いとか、どの辺りがよく読まれるのかなど、ペラサイトやミニサイトで定量データを集めて分析していた時期もありました。

現在は、以前に比べたらそのようなデジタルマーケティングツールを使う機会も減ったので、あまり細かく定量データをとるようなことはしていません。

ブログサポートの際に、ポイントで一定期間だけそういうツールを入れて方向性を決めていく時くらいかもです。

ただ、使い方を知っておくと、Webマーケティングスキルとしても良い経験になるので、使ってみるのは良いかもです。

目次機能の実装や組み込み方について

目次機能の実装や組み込み方について

運営しているWebサイトに目次機能を実装することはそれほど難しいことではありません。

一例として、ブログ型サイトで言えば、CMSにWordPressを利用している人も多いかと思いますし、その他のCMSでも、目次機能の導入はそれほど難しいことではありません。

  1. HTML+CSSでスタイルを決めてデザインしていく
  2. プラグインを導入する
  3. CMSやWordPressテーマに標準搭載されている機能を利用する

上記の3つから選んですぐに利用することが可能です。

HTML+CSSでスタイルを決めてデザインしていく

HTML+CSSでスタイルを決めてデザインしていく

文章を書く前に、先にブログ記事の構成を設計して考えてからブログ記事を書ける人は、この選択肢が良いと考えています。

目次機能は、HTML+CSSで目次一覧を閉じたり開いたり等も含めて、コーディングが可能です。

予め、スタイルを作っておいて、ブログ記事の構成が出来上がったらテキストを流し込んで最初に目次を作ってしまうことも可能です。

プラグインを入れる必要もなくなるし、筆者も良い方法だなと感じています。

プラグインを導入する

プラグインを導入する

WordPress前提になってしまいますが、筆者の場合は

  1. Table of Contents Plus
  2. Rich Table of Contents

のどちらかを利用することが多いです。

CMSやWordPressテーマに標準搭載されている機能を利用する

CMSやWordPressテーマに標準搭載されている機能を利用する

最近は、有料のWordPressテーマが標準で目次機能を実装していることが多くなりました。

また、利用するレンタルサーバーによっては、割安でWordPressテーマを購入できたりもするので、もし、「副サイトを運営してみたいな」とか、「Webサイトを別で作り直してみたいな」あったら選んでみても良いかもしれません。

筆者の場合、目次生成機能を持っているWordPressテーマで言えば、最近はSWELLというテーマを新しいWebサイトを作るときに利用しています。

この他にもTHE SONICというWordPressテーマもあり、もし、レンタルサーバーでConoHa WINGを利用している場合や、これからブログサイトやWebサイトを作成するという方にはお薦めです。

ConoHa WINGのレンタルサーバーを借りる時に合わせて購入すれば割引がきくので結構お得です。

THE SONICとかだと、2カラムで簡単に、本文を左に表示させて、右側に目次を表示させることが簡単にできたりするので便利です。

参考サイト:Blog one|ユニコブログ®の運営者が綴る日記ブログ

サイト開設してコンテンツが増えてから目次機能を入れる場合はプラグイン等が便利

サイト開設してコンテンツが増えてから目次機能を入れる場合はプラグイン等が便利

これまで、すでに多くのブログ記事を書いてきていて、CMSでWordPressを利用している場合、後から目次機能を入れる場合には、先ほど紹介した目次生成プラグインを入れてしまうのが楽だと考えます。

HTML+CSSで、ベタに目次を組んでいく場合にはちょっと工夫しないと、ブログ記事ごとに目次を作って行くとかなり大変な作業になるので避けたいところです…。

そういう意味では、ConoHa WINGでレンタルサーバーを借りる時に、合わせてTHE SONICというWordPress用テーマを購入してしまうのもアリですし、すでにレンタルサーバーを借りている場合はSWELLというWordPressを検討してどうにゅうしてみるのもアリだと思います。

最後まで読んでいただき、ありがとうございました。

ABOUT US
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

起業から法人化して初期の頃は、自分と同じく起業する人、スタートアップ企業への出資や資金調達を含めてサポートしていました。

最近は、主に自社のブログサイト運営やWebメディア、Webアプリの開発や運営、LINEスタンプやLINE絵文字等の2Dイラスト制作を中心にキャラクターデザインをしたり、3DCGによるコンテンツ制作事業をAR(拡張現実)/VR(仮想現実)プラットフォーム向けに行っています。

公式ブログサイトでは、「会社の収入だけに依存しない生活を手に入れる」ことをテーマにブログ記事を書いたり、ブログ運営を始める人のサポートを無償で行っています。

2003年から映像業界向けの様々な新規事業立ち上げに従事。

2014年からは経営/メディアコンサルティング業も始めて2020年01月に独立しました。

現在、ユニコブログ®以外にも、数十サイト以上の特化ブログを立ち上げて運用しています。

全て同じサイト構成、ブログ記事構成、文章構成など、検証可能な範囲で仕様を合わせてみて、収益を出すのに再現性があるか?などを試行錯誤している日々です。

他にも、ピックアップしているレンタルサーバーとWordPressテーマを総当たりで組み合わせてサイトスピードがどうなるかなど、思いついた事をひたすら検証する日々。

WordPress用のシンプルなプラグインやブログパーツの開発にもチャレンジしています。

SMPTE Professional Engineer Member

一般社団法人 日本ポストプロダクション協会認定 映像音響処理技術者

著書 : 『保存版 売上を向上させるためのYouTube活用術』

2020年度と2021年度の 学校法人調布学園 田園調布学園 中等部・高等部「豊かな教養を培う 未来へつなぐ土曜コアプログラム『探究』」にて空中ディスプレイコンテンツ制作及びWebサイト制作の特別講師を担当。2022年度は土曜プログラム(マイプログラム)『仕事最前線』で講演

著述家 / ブロガー兼コンテンツクリエイター

プロフィールの詳細はこちら