しばしば議論になる目次の「必要・不要」論争
それぞれの理由はありますが、ユーザー視点で考えればどちらが正解なのか。
自分なりに考えてみることにしました。
今回は目次の必要・不要論、CSSで目次をカスタマイズする方法を紹介します。
ブログに目次は必要？不要？
WEBサイトやブログをみると、記事冒頭に目次設定されているものが多いですが、一方でNEWSサイトなどはほとんど見たことがありません。
もしかすると使い方によって変わるのでは？
まずは、それぞれの理由を整理しましょう！
目次が不要な理由
普段から使わない
目次が不要と考える人は、普段から目次を見ない習慣があると想定されます。
ネットニュースなど目次がない記事を読む場合、目次が邪魔に思えてしまうことも少なくないようです。スマホ中心だとスクロールで読み飛ばしてしまうため、面倒に思えることが要因ではないでしょうか。
直帰率が高くなるから
WEBやブログを書いていると気になる「直帰率」
直帰率とは、サイト内で1ページしか見ずにそのままサイトから出るというユーザーの行動を指した指標ですが、目次を設定することでユーザーは該当部分しか読まずに滞在時間が減るという意見があります。
また、目次を読んで納得したり必要ないと感じればすぐに離れるといった可能性も考えられますね。
目次が必要な理由
記事の概要が分かりやすい
一方で目次が必要と考える人は、目次から概要をつかむ習慣があると想定されます。
気になった本を見つけた際、まずはどこから情報を入手するかといえば目次ですよね！目次で概要をつかんで興味があれば購入、なければ買わないといった重要な判断材料としても利用されます。
また、SEO対策として見出しに「キーワード」を入れている方もおられますが、検索流入するときも情報が探しやすく、該当する部分に早くたどり着けるといったメリットもありますよね。
記事の構成がしっかりする
記事を書くときにタイトル・見出し・文章の順に構成すると思いますが、目次設定することで全体のバランスが整いやすくなります。
見出しと文章の関連性やバランス調整などリライトする際にも効果的ですし、充実した記事構成になりやすいといったメリットも考えられます。
ユーザー視点ではどちらが良いか
では、ユーザー視点ではどうでしょう？
ここでは検索流入を想定して考えてみます。
検索ユーザーは「自分の悩みや質問に関する答え」を探しますが、迅速かつ的確に答えを教えてくれる記事を求めているわけです。
検索ユーザーの視点で考えると、
- 悩みや質問に対する答えが明確
- 読みやすく素早く理解できる
- 網羅的に取り上げている
- 情報が新しく信頼できる
これら検索意図に合った記事が利便性が高く評価される記事になります。
先程、目次が不要な理由として「直帰率が高くなる」ことを挙げましたが、素早く答えが見つかるという点でいうとメリットにもなります。
ブログ内のコミュニティや友達同士の情報交換であれば目次設定の必要性は低いですが、検索流入を狙うなら目次は必要という結論になりますね！
CSSで目次をカスタマイズ
目次の必要性が整理できたところで、ここからは目次デザインのカスタマイズについて紹介いたします。
はてなブログの場合、上段のメニューバーに目次ボタンがあるので目次を挿入することが簡単であることはご存知だと思います。
目次をカスタマイズする理由
目次を挿入すること自体は簡単ですが、シンプルすぎてデザイン変更したい！と考える方はわたしを含めてきっと多いでしょう。
見出し項目（h3・h4・h5）で一段毎下がるのですが、下がり幅が大きいため見出しが長いと２、３行になってしまうケースも珍しくありません。
スマホだと読みづらく、スクロールで読み飛ばされてしまうのも納得できますよね。
他のCSSが影響する場合もある
わたしは『Minimalism』というテーマを使用していますが、選ぶテーマによって目次までカスタマイズされているものも多くあります。
『Minimalism』はシンプルゆえにすっきりしており、カスタマイズもしやすいのが特徴ですが、目次もシンプルなデザインでまとめられています。
パソコンでは気付きにくいですが、スマホで見ると右側に寄り過ぎてしまう傾向があるので、目次をカスタマイズすることに決めました。
今回は以下サイトを参考にさせていただきましたのでご覧ください。
はてなブログ【目次カスタマイズ】コピペで使えるデザイン集 - フジブロっ！
CSSを追加するときの注意点
目次以外のCSSがデザインに影響することがあります！
わたしの場合、リスト（箇条書き）のCSSが目次に影響してしまったため、リストのCSS部分を削除して目次のCSSを優先させることで対応しました。
手戻りが発生するかもしれませんので、バックアップを取ることを推奨します。
文字色と線色を変更
CSSを追加する際、ブログに合うよう文字色と線色を変更しております。
わたしの場合、見出しデザインで和色である若竹色（わかたけいろ）を使用しているので同じコードで統一させました。
≪この部分のコードを変更しております≫
.entry-content .table-of-contents {
position: relative;
margin: 0;
padding: .5em 1.2em 1em;
background: #fff;
font-size: 100%;
border-top: solid 40px #68be8d;
border-right: solid 2px #68be8d;
border-bottom: solid 2px #68be8d;
border-left: solid 2px #68be8d;
border-radius: 8px;
color: #68be8d;
}
和色の詳しい色見本やカラーコードはコチラを参照ください
いかがだったでしょうか。
検索流入を考えた目次の必要性について整理しましたが、検索されるキーワードに応じたリライト作業もとても重要です。
目次構成がしっかりしていれば文章も充実するし信頼性も高まります。
結果、良いコンテンツとして評価されるので目次設定することをオススメします！
記事を最後まで読んで頂いて、本当に有難うございます！
最後に一つお願いです。
当ブログ「にせもんのホンモノ」はブログランキングに参加しております。
少しでも面白い・参考になったと感じたら、バナーをクリックしてブログランキング上位になる応援をしていただけないでしょうか？
アナタのクリックが励みになります！
人気ブログランキング
また次の記事で会いましょう！
