読者です 読者をやめる 読者になる 読者になる

つばさのーと

つばさの日常を綴るのーと

目次(と見出し)を適切に配置することのメリットとデメリット

f:id:tsubasa123:20170104171712j:plain

 

こんにちは、つばさ(@tsubasa123)です。

 

先日、ポジ熊さんの下記の記事で、私が作成した目次のカスタマイズ機能をご紹介いただきました。

 

www.pojihiguma.com

 

はてなブログでは公式目次機能があるので、比較的簡単に目次を導入できるようになっています。今日は個人的に目次について思うところを書いてみようと思います。はてなブログの公式目次機能のように、見出しから目次が生成される仕組みを前提にしておりますのでご了承ください。

 

 

目次は必要か?

 

私は必要だと考えています。数行、数文字だけの記事だったり、日記的な側面の記事であればまぁなくてもいいかなとも思いますが、それなりの分量の記事を書くのであれば必須じゃないかと思います。

 

目次を導入する理由として真っ先に思い浮かぶのは「利便性をあげる」ということですが、「アクセシビリティ」の観点からみてもとても有用な機能だと考えています。アクセシビリティに関してはそこまで詳しくないのであまり言及はしませんが、わかる範囲でご紹介します。

 

G64: 目次を提供する|WCAG 2.0 実装方法集

 

ちなみに、W3Cにおける目次の目的は

  • ドキュメントの内容と構成の概要を利用者に与える。
  • 読者がオンラインドキュメントの特定の区分に直接行けるようにする。

 

と定義されているようです。

 

記事の概要を掴むことができる

 

記事の見出しを目次として利用することで、その記事でどんな内容を扱っているか、どんな内容を伝えたいのかをユーザーに簡潔に示すことができるようになります。これは書籍と同じですね。書籍も買う前に目次を眺めて、欲しい情報が掲載されているかどうかを確認する人は多いと思います。

 

特にここ最近は1ページに大量のコンテンツを詰め込むような手法がとられることが多くなってきているように感じます。SEO的な目的なのかわかりませんが、このような場合は特に目次で記事のアウトラインを掴むことができるようになっていると、ユーザーはこの記事を読んでみるかどうかの判断がしやすくなります。ざっとスクロールするだけでも結構大変だったりしますし、長文記事は読むのにも時間がかかりますからね。

 

注意点が1つ。記事のタイトルと同じように目次に利用される見出しには適切な名前を付けるようしましょう。適当な見出しを作ると逆にユーザーを混乱させてしまいます。私も結構適当な見出しを作っているのでこれは反省しなければ。

 

欲しい情報だけつまみ食いできる

 

これは特に長文記事やまとめ系の記事を書く人にあたりますが、記事中の興味のある部分だけ閲覧することができるようになります。記事の内容すべてに興味があったり、記事をゆっくり読む時間があればいいのですが、全員がそのような状況にあるわけではありません。

 

目次があれば目的の情報の位置までリンクをクリックすることで即座に移動することができるようになります。記事を見に来てくれたユーザーに対して、その記事内の必要な情報をスピーディーに提供するためにも目次は便利に活用することができます。

 

超長文の記事であれば、任意の場所でお気に入り登録するようなユーザーアクションにも対応できるようになります。そんなやついないだろう、と昔は思っていましたが、意外といるみたいなんですよね。意図せずブックマークしてしまっているのかもしれませんが、任意の位置でブックマークする人も一定数いますので。

 

アクセシビリティ的にも有効

 

ブログを閲覧するユーザーが全員ポインティングデバイス(マウスとかトラックボールとか)を使ってページをスクロールしているとは限りません。キーボードしか利用できないユーザーや、クリック機能のみのデバイスを利用しているユーザーもいるかもしれません。

 

そのようなユーザーに対しては目次とても有効に活用してもらえます。クリックすれば目的の位置まで一気にスクロールすることができますからね。細々とスクロールする手間を省略することができ、より簡単に目的の情報にアクセスできるようになります。

 

番組名は失念しましたが、以前、テレビのドキュメンタリー番組に出演されていた方は、生まれつき手が不自由なため口でペン型のデバイスを操作してWEBサイトを閲覧されていました。ペン型のデバイスでもスクロールする機能はあるかもしれませんが、クリックで目的の位置までスクロールできる方が閲覧は容易になるはずです。

 

特殊なデバイスを使っている人は多くはないかもしれませんが、ゼロではありません。ちょっとした気遣いができる記事づくり、ブログづくりを心掛けたいものです。

 

SEOにも良い影響?

 

SEOに関しては詳しくありませんが、見出しタグを適切に使うことは良い影響はあっても悪い影響はないだろう、というのが私の考えです。

 

はてなブログの公式目次機能は、見出しタグに指定された文字を利用して自動的に目次を作成してくれるので、自然と見出しを設定することになります。これにより文章を適切な大きさに区切って、ユーザーにとっても検索エンジンにとっても読みやすい文章ができるようになります。一石二鳥ですね。

 

目次のデメリット

 

hagex.hatenadiary.jp

 

こちらの記事で無駄な目次について説明されています。「見出しインフレ」と言われていますが、確かに無駄に見出しを利用すると逆に利便性を損なってしまいます。これはおっしゃる通りです。特にスマホで閲覧する場合は目次が長くなるとスクロール量が増えて視認性も損ないますので、記事を書く際には適切な構成を考えることが大事だと思います。

 

あと、SEOについても触れられていますが、これはどうなんでしょうか。私的には適切に見出しを使うことは有効でも、目次自体にはそこまで効果はないんじゃないかなーと思っています。

 

ぱっと思いつくデメリットは上記の「見出しインフレ」と「ファーストビューを損なうこと」くらいだったのですが、ブコメを拝見すると目次不要派が多くて驚きました。目次、便利じゃないですかね?「無駄な目次は不要」ととれるコメントが多いようで、内容の薄い記事に対しては目次は要らない、ということなのかな。こんなに好みがわかれる機能だったとは。

 

さいごに

 

目次について思うところをつらつらと書いてみました。アクセシビリティに関してはもう少し掘り下げて勉強してみる価値はありそうだなと思うところです。多分、視覚障害の方にとっても目次や見出しは有効に働くはずですので。読み上げ機能とかに関連していたかと。

 

不要派も一定数いるようですが、個人的には必用派。特にアクセシビリティを考慮するようなWEBサイトの場合はほぼ必須、という考えは変わりません。「JIS X 8341-3:2016」というアクセシビリティの規格があるのですが、こちらもちょっと勉強してみようかな。

 

ではでは、最後までお付き合いいただきありがとうございました。

 

関連記事

スマホサイト対応完了!はてなブログ公式目次のデザインカスタマイズ

レスポンシブデザイン向け、はてなブログ公式目次のデザインカスタマイズ