この記事では、ワードプレスブログの目次の見え方ついて紹介していきます。
目次は内容を確認する際にとても重要で、目次が疎かになっていると離脱されかねません。
僕は、目次がごちゃごちゃしていると離脱すること多いです
ブログ作業はパソコンがメインだと思いますが、スマホでの見え方を意識しないと大変なことに…。
スマホでの目次の見え方をメインに、注意すべきことを挙げていくのでチェックしてくださいね。
ちなみに、テーマやプラグインで見出しから目次を生成していることが前提です。
目次の見え方
まずは、実際に目次の見え方について画像を交えて紹介していきます。
目次の長さによるPCとスマホでの見え方をそれぞれ紹介していくので、順番に確認していきましょう。
PCでの見え方
上記画像は、目次の文字数が多いときにPCで見た場合です。
PCから見た時、目次の文字数が多くても1行に収まっちゃったりします。
しかし、これをPC画面からしか確認していない場合は注意が必要。
また、文字数が多いと、1行に収まっても視線をずらすので見づらいですよね。
そんな長い目次の文字数を削ったものが、下記の画像です。
⇩
余計な言葉を削りシンプルにすることで、目次がかなり見やすくなりました。
短くなることで、内容も分かりやすくなります。
こんな感じで、PCでも目次はシンプルな方が見やすく感じますね。
次はスマホで見た時ですが、さらに激変するのでしっかりとチェックしてください。
スマホでの見え方
上記画像は、目次の文字数が多いときにスマホで見た場合です。
1行で収まっている所はいいですが、2行・3行にまたがる部分はとても分かりづらい…。
さらに、文字数が多いことで、目次の行数がかなり増えています。
このような見づらい目次も、下記画像のようにシンプルにするとかなり見やすくなるんです。
⇩
この違いわかりますか？
すべての目次が1行に収まっていて、かなり見やすくなりましたよね。
これがスマホを意識して目次を作ろうってことです。
次はスマホで見た時に目次が見づらい原因を挙げていくので、読み進めて確認してください。
スマホで目次が見づらくなる原因
- 目次が2行にまたがる
- 目次が3行にまたがる
- 目次の数が多い
スマホで目次を見た時に見づらく感じるのは、上記の3つが主な原因です。
各原因それぞれ紹介しているので、しっかりとチェックしてください。
①目次が2行にまたがる
スマホで目次が見づらくなる原因①は、目次が2行にまたがるからです。
目次が2行にまたがるとき、たいていは余計な言葉が入っています。
それにより見づらくなり、内容が分かりづらくなるんですよね。
2行にまたがるということは、左⇒右⇒左⇒右と視線を動かす必要があります。
無駄に視線を動かすことになると、読者に嫌われるのでそれも避けたいところです。
②目次が3行にまたがる
スマホで目次が見づらくなる原因②は、目次が3行にまたがるからです。
①で紹介した2行にまたがることと同じで、ごちゃごちゃしてるからですね。
3行にまたがることはたまにありますが、さすがに4行以上にまたがってないですよね？
スマホで見た時に4行以上になるのは確実に余計なことが書かれているので、ちゃんと削りましょう。
③目次の数が多い
スマホで目次が見づらくなる原因③は、目次の数が多いことです。
原因①②を満たしたうえで目次が多いと、ほんと見づらいんですよ。
上記画像では目次が17個ですが、行数は27行あります。
網羅型の記事を書こうとすると、目次は多くなり行数も増えます。
そんな時に目次が2行、3行にまたがると、離脱につながりかねないので気を付けましょう。
目次が長くなる3つのデメリット
- 視認性が悪い
- 目次が分かりづらい
- 離脱されやすくなる
目次が長くなると、上記3つのデメリットがあります。
見づらくなる原因でも触れていますが、ここで再確認してください。
①スマホでの視認性が悪い
目次が長くなるデメリット①は、スマホでの視認性が悪くなることです。
というのも、目次が長くなると、スマホだと1画面で収まらなかったりします。
特に網羅型の記事で見出しが多いと、自然と目次が多くなりスマホだと1画面に収まりにくいです。
すると、スクロールして目次を確認する手間がかかり、視認性が悪くなります。
②目次が分かりづらくなる
目次が長くなるデメリット②は、目次が分かりづらくなることです。
文字という情報量が多くなると、どうしてもごちゃごちゃしますよ。
そうなると、何が書かれているのか見づらくなり、内容が頭に入ってきません。
どんなことが書かれているか分かりやすくするための目次なので、内容が頭に入ってこないと意味ないですよね。
③離脱されやすくなる
目次が長くなるデメリット③は、離脱されやすくなることです。
上記①②のことが起こると、どうしてもストレスがたまります。
せっかちな人は目次で判断することもあり、わかりづらいと目的の情報がないと判断されかねません。
そうすると、離脱される原因になっちゃいます。
目次を短くするメリット
- スマホの1画面に収まりやすい
- 内容が分かりやすくなる
目次を短くするメリットは、上記の2つが挙げられます。
これらのメリットから得られることを、確認していきましょう。
①スマホの1画面に収まりやすい
目次を短くするメリット①は、スマホの1画面に収まりやすくなることです。
スマホの画面で表示できる情報量は、PCに比べるとかなり少ないです。
そのため、スマホを意識するなら、できるだけ余計な動作をさせないことが重要。
目次を短くすることで1画面に収まりやすくなり、ユーザーの離脱を減らすことにつながります。
③内容が分かりやすくなる
目次を短くするメリット②は、内容が分かりやすくなることです。
この記事の最初の方でも触れましたが、目次が短いととても見やすいですよね。
目次が見やすいってことは、書いてあることもわかりやすいってこと。
目次が短いことで内容が分かりやすくなるので、記事も最後まで読まれやすくなります。
目次を見やすくする2つの施策
- 目次はh3まで抽出する
- 目次は17文字以内に収める
目次を見やすくする施策は、上記の2つが挙げられます。
これを押さえると、かなり見やすくなるのでチェックしてください。
①目次はh3まで抽出
目次を見やすくする施策①は、h3まで見出しを抽出することです。
h3まであることでインデント(字下げ)されるため、余白が生まれます。
余白があることでメリハリがつき、視認性が良くなり情報も確認しやすいです。
そのため、目次を生成するときは、h3まで抽出するように設定しておきましょう。
②目次は17文字以内に収める
目次を見やすくする施策②は、目次の文字数を17文字以内に収めることです。
上記画像は、ワードプレステーマSWELLを利用し、iPhone12proの画面条件。
h2の抽出は19文字、h3の抽出は18文字で、次の行に行きます。
そのため、目次を一行で抑えるには、17文字くらい以内に収めるのがおすすめです。
といっても、KWによっては短くするのが無理なものもあるので、臨機応変に対応しましょう。
PCからスマホ画面を確認する方法
最後にPCからスマホ画面を確認する方法を紹介します。
chrome利用時になりますが、参考にどうぞ。
①右クリック⇒検証
まず、記事を描いたらプレビュー画面で右クリックをします。
そうしたら下の方に検証というのがあるので、そこをクリック。
②デバイス選択ボタン
検証をクリックしたら、画面右半分の左上の上記画像の部分をクリックします。
ここをクリックすると、スマホなどの画面サイズにできるようになります。
③表示するデバイス選択
上記画像の赤線部分ははじめ『Responsive』となっています。
今回は、iPhone12proを選択肢て表示。
いくつか機種を選択できますが、日本ならユーザー数が多いiphoneを選んでおけばいいかと。
記事を書いてプレビューを見るときは、必ずこの作業を行ってスマホでの見え方を確認しましょう。
もちろん投稿し終わってからでも確認できますが、登校前にチェックしておくのがいいですよ。
まとめ：スマホを意識してシンプルに
この記事では、目次の見え方や見づらくなる原因などについて解説しました。
目次は記事の最初の方に見られるので、できるだけ見やすいのがいいです。
せっかちな人は、目次の内容が分かりづらいとその時点で離脱することも…。
特にスマホは1画面に収まる情報量が少ないので、見え方を意識して見出しを作りましょう。
見出しは要素をまとめることで、内容が分かりやすくなります。
また、違和感のないようにKW入れることも重要。
見出しのまとめ方については別の記事で紹介しているので、目次を考える上での参考にしてみてください。
コメント