読者は、記事を開いた瞬間から “自分の悩みに効く答え” を探しています。
なのに——目次が長すぎたり、見出しの抽象度がバラバラだったりすると、最初の数秒で迷子になって離脱してしまうんですよね。
だからこそ、目次（TOC）は「最初に読む地図」 として整理されていることが大事。
さらに本文も、結論→根拠→手順 の順で並んでいれば、読者は安心して読み進められ、読了率もスクロール深度も自然と上がります。
本記事（前編）では、
・目次の粒度／長さの正解の幅
・H2/H3の並び順
・見出し文の書き方
・答えファースト本文の並べ替え方
・スクロール深度の簡易計測
といった、今日からすぐ使える“設計の型”をまとめていきます。
UIやCMS依存の細かい実装には踏み込まず、初心者〜中級の方でも迷わず再現できる内容にしています。
「読み切ってもらえる記事」を増やしたいなら、まずは本編の型づくりから一緒に整えていきましょう。
本記事でわかること
-
目次（TOC）の粒度と本数の決め方（幅で提示）
┗ H2/H3の数の“迷わない基準”がわかる -
見出し（H2/H3）の並べ方と文体の整え方
┗ 読者が迷子にならない並び順の型を習得 -
本文を“答えファースト”で並べ替える手順
┗ 結論→根拠→手順の並べ替え型を具体例で理解 -
スクロール深度の簡易計測と改善ログ
┗ 深度の取り方と“当たりの改善ポイント”が分かる
目次（TOC）の粒度と長さを整える
記事を“読み切ってもらえるかどうか”は、ほぼ 目次の設計だけで決まる と言っても大げさじゃありません。
最初の数秒で「何が書いてあるか」「自分に必要な章はどこか」が一発で分かると、読者は迷わず読み進められます。逆にここが曖昧だと、途中離脱やスクロール浅めのまま閉じられることも……。
まずは H2 の数、H3 の数、粒度（抽象度） を揃えて、読者が“地図として理解できるTOC”に整えていきましょう。
本数の目安 — H2は4–8項目、H3は各2–5項目を上限の目安（幅）
目次の本数は「少なすぎても伝わらない」「多すぎても迷子になる」ので、幅を決めておくと迷いません。
-
H2：4〜8個がちょうどいい
→ 長すぎると“章の森”になって読者が息切れします。
→ 少なすぎると、内容の全体像が見えなくなる。 -
H3：各H2につき 2〜5個が目安
→ 3つ前後がもっとも読みやすく、スクロール深度も安定しやすいバランス。
ポイントは、H2だけやたら多い／H3だけやたら多い という偏りを避けること！
読者は「同じ階層のものは、同じ量と見え方」だと理解しやすく、TOC全体が地図として機能します。
粒度の揃え方 — 同じ“階層”は同じ抽象度（混在を避ける）
目次でよく起きる問題のひとつが、抽象度がバラバラなH3が混在してしまうこと。
例えばこんな感じです：
-
H2：画像最適化
-
H3：圧縮方法
-
H3：おすすめツール
-
H3：そもそも重くなる原因とは？（←急に抽象度が上がる）
-
こうなると「え、話が戻った？」「今どのレイヤーの説明？」と読者が迷います。
解決法はシンプルで、
“H3はH2の中の並列項目” と割り切ること。
つまり、
-
手順型なら「手順1 → 手順2 → 手順3」
-
原因型なら「原因A → 原因B → 原因C」
のように 同じ種類の粒度で並べる のが鉄則です。
粒度が揃っていると、読者はストレスなく読み進められ、スクロール深度も自然と深くなります。
並び順 — 読者の意思決定順（結論→必要条件→手順→注意→次ステップ）
見出しの並び順は “読者がどう意思決定するか” に合わせる と、一気に読みやすくなります。
おすすめの型はこの順番：
-
結論（まず答え）
-
必要条件・前提
-
手順ややり方
-
注意点・落とし穴
-
次ステップ（別章リンク）
この順で並べると、読者は
「何をすればいいか → そのための条件 → 具体的にどうするか」
という自然な流れで理解できます。
特に大事なのは 最初に“答え”を置くこと。
ここが後回しになると、途中で離脱が起きやすく、スクロール深度の谷が生まれやすくなります。
「見出しを入れ替えただけで読了率が上がった」というケースは本当に多いです。
まずはこの型で、あなたの記事のTOCも並べ替えてみてください。
本文は“答えファースト”で並べ替える
多くの記事で読了率が落ちる原因は、本文の並び順が「読者の知りたい順」になっていない ことです。
本来は読者が知りたいのは、
「結論 → なぜそれが必要か → どうやるか」
という順番。
なのに、前提説明が先に来たり、背景が長く続いたりすると、読者は「結論いつ出るの？」と感じて離脱しやすくなります。
そこで使えるのが、この記事でも徹底している “答えファースト” の並べ替え型。
文章の順番を整えるだけで、読了率・滞在時間・スクロール深度は目に見えて改善します。
冒頭ブロック — 要約3–5行＋今日の到達点（判断材料を先に）
本文の最初に置くべきは、「この記事は何が分かるのか？」を即答する短い要約 です。
ボリュームは 3〜5行 が最適。長すぎず短すぎず、読者の“認知コスト”を下げられます。
例）
-
この記事では〇〇の最適なやり方を3つに絞って解説
-
まず結論：最優先すべきは△△です
-
このあと「理由 → 手順 → 注意点」の流れで理解できます
さらにもう一つ入れておきたいのが、
「今日の到達点（読者が読み終わった後どうなるか）」 の提示。
例）
-
最後まで読むと、自分の目次を“読了率の上がる構造”に組み直せます
-
この章を読むと、答えファーストで本文を再構成できるようになります
読者は“終わりの姿”が見えていると、安心してスクロールを続けてくれます。
段落の型 — 結論→根拠→手順→注意→次の行動（章末リンク）
本文のどの段落も、基本はこの順番にすると読者は迷いません：
-
結論（先に答え）
-
根拠（なぜそうなるか）
-
手順（やり方・例）
-
注意（落とし穴・例外）
-
次の行動（章末リンク・関連章へ）
この並び順は「読者が意思決定する順番」をそのまま文章にしたもの。
考え方の流れと文章の流れが一致するため、理解が速く、離脱ポイントも激減 します。
特に重要なのは “結論を先に置く” こと。
ここを後回しにすると、ユーザーは途中で疲れてページを閉じがち。
実際、多くのサイトで 結論前の離脱が最も多い というデータがあります。
文章は技術より順番。
まずは「結論→根拠→手順」という型に当てはめて、書き直してみてください。
図表の置き所 — 結論の直後／比較の直前に配置（後置は避ける）
図表・スクショ・イラストなどの“視覚情報”は、置く場所で効果が大きく変わります。
結論：
図表は “結論の直後” に置くと理解が最も速くなる。
その理由はシンプルで、
-
読者は答えを読んだ直後に“根拠の視覚的裏付け”を求める
-
画像を見ると理解の負荷が下がり、その後の文章が読みやすくなる
ため。
もう1つの鉄板の置き所は “比較の直前”。
AB比較をする前に図があると、頭の中で条件を整理しやすく、読者のスムーズな判断につながります。
逆に NG なのが 後置（文章の最後にまとめて置く）。
読者は文章の途中で「図はどこ？」「まだ？」と感じ、スクロール深度に谷ができます。
図表は “あとでまとめて出す” よりも “要点の直後に出す” ほうが、読了率は確実に上がります。
スクロール深度の簡易計測とログ
読了率を上げたいなら、「読者がどこまで読んでいるか」を把握するのは必須です。
ただし、深い計測ツールを使いこなす必要はありません。まずは スクロール深度を“ざっくり4分割” で見るだけでも、改善ポイントは十分見えてきます。
たとえば、
-
25%で落ちている → 導入 or 目次の問題
-
50%で落ちている → 見出しの粒度／並び順の問題
-
75%で落ちている → 手順の分かりにくさ／図表の位置
-
100%に届かない → 章末導線の弱さ
といった“おおまかな位置情報”だけでも、改善の当たりがすぐ分かります。
ここでは、
①どう深度を見るか
②どこを改善すると効きやすいか
③ログをどう残すか
の3点に分けて整理します。
深度の取り方（概念） — 25/50/75/100%の到達率
スクロール深度は、細かく取りすぎると逆に見にくくなります。
そこでおすすめなのが、4分割（25/50/75/100%）でザックリ把握する方式。
それぞれの意味はこんな感じ：
-
25％（導入・目次）
→ ここで落ちるなら TOC が長すぎる or 導入が抽象的 -
50％（本文前半）
→ 読者が目的の答えに“まだ辿り着けていない”サイン -
75％（本文後半）
→ 手順説明が長い／図表の位置が悪い／段落が重すぎる -
100％（記事末）
→ 章末導線が弱い／まとめの答えが分かりにくい
この4つを“ヒートマップ”のように眺めることで、
「どの章のどこが離脱ポイントなのか」 を、実務レベルで押さえることができます。
改善の当たり — 目次の順序変更／見出しの再命名／最初の図表の前倒し
多くの記事で深度が改善する“当たりパターン”は決まっています。
特に初心者〜中級の方は、まず次の3つだけ触るだけで、数字が動くことが多いです。
① 目次の順序を入れ替える
-
結論が後ろにある → 前に寄せる
-
抽象→具体の順が逆 → 具体を先に出す
TOCの並び替えは、即効性が非常に高い改善ポイントです。
② 見出しの再命名（抽象語→固有語）
-
「ポイントまとめ」
-
「その他の設定」
-
「詳細はこちら」
こういう見出しは深度を確実に落とします。
「やることが1秒で分かる名前」 に変えるだけで、スクロールが途切れにくくなります。
③ 最初の図表を前倒しする
深度の谷が50％付近で出ている場合、
最初の図を“結論直後”に置くと復活しやすい です。
図表は“理解を補助する装置”なので、本文が始まって早い段階で1つ置いておくと、読者が安心します。
実務ログテンプレ
改善を回すときに重要なのは、“どの変更が効いたのか” を必ず記録しておくこと。
次回の改善スピードが一気に上がります。
以下は、そのままコピーして使えるログテンプレです。
■ 改善ログ（テンプレ）
| 記事 | 変更（目次/見出し/図表） | 深度 Before→After | 読了率 Before→After | 備考 |
|---|---|---|---|---|
| 記事タイトル | 例：H2の順序変更、H3の名称変更、図表を前倒し | 25:xx → xx / 50:xx → xx / 75:xx → xx / 100:xx → xx | xx% → xx% | どこが効いたかメモ |
テンプレを書いておくだけで、
「何を変えると数字が伸びやすいか」
「このブログの読者は何を求めているか」
が段々と見えてきます。
改善は“正解探し”というより、“パターンの蓄積”です。
ログさえ残しておけば、改善スピードはどんどん上がります。
用語ミニ辞典
読了率やTOC改善の話をしていると、つい専門用語が増えてしまいがちです。
ここでは、この記事で頻出する 3つのキーワード を“実務でどう使うのか”に寄せて、シンプルに整理しておきます。
● TOC（目次 / Table of Contents）
TOC（目次）は、読者が 「この記事は何が書いてあるのか？」を最初に確認する地図 です。
TOCが機能していれば、読者は迷わず必要な箇所へジャンプでき、スクロール深度全体も安定します。
逆に、
-
H2/H3の粒度がバラバラ
-
抽象的な見出しが並ぶ
-
順序が読者の“意思決定順”と逆
といった状態だと、導入〜25％区間で離脱が増えやすくなります。
“TOCを整える＝読者の判断負荷を下げる” 作業。
この記事の最重要パートです。
● 答えファースト（Answer First）
“答えファースト”は、本文の 最初に結論を提示し、あとから理由・手順を説明する書き方 のこと。
読者は「結論が分からない状態の説明」を長く読むことが苦手なので、答えが遅れるだけで途中離脱が起きやすくなります。
ポイントはシンプルで、
-
段落の最初に「結論」
-
そのあとに「根拠」「具体例」「手順」
-
章末に「次の行動」
という順序を守ること。
これを徹底するだけで読了率が伸び、要約・検索にも拾われやすくなる“二重のメリット”があります。
● スクロール深度（Scroll Depth）
スクロール深度は、読者が ページのどこまでスクロールしたか を指す指標です。
「読了率」と違い、“何％地点で落ちたか” が分かるのが特徴。
ざっくり見るなら、
-
25%：導入・目次
-
50%：本文前半
-
75%：本文後半
-
100%：まとめ・章末導線
の4分割で十分分析できます。
改善の第一歩は、深度の谷がある場所と、対応する見出し・図表・導線を照らし合わせること。
深度を見ると、読者が“どこで迷っているか”が手に取るように分かります。
まとめ：目次と見出しの設計図——“答え→根拠→手順”で読了率を底上げする
この記事では、TOC（目次）と見出し設計の「型」 を中心に、読了率・スクロール深度を底上げする方法をまとめてきました。
特に意識してほしいのは、以下の3つです。
-
TOCは“地図”として機能させる
H2/H3の粒度を揃え、読者の意思決定順に並べることで、導入〜25％の離脱が激減します。 -
見出しは「具体語＋動詞」で書く
抽象語を避け、読む理由を1秒で伝えることで、スクロールの詰まりがなくなります。 -
本文は必ず“答えファースト”で構成する
結論→根拠→手順の順番に並べるだけで、読了率が目に見えて改善します。
そして、最後にもう1つ。
改善を続けるなら、スクロール深度をざっくり 25/50/75/100％ で記録する こと。
「どこで迷いが起きているか」を把握できれば、改善の方向性はほぼ自動的に決まります。
読者が迷わず読み切れる記事は、検索にもAI要約にも強くなります。
今日紹介した“設計の型”をベースに、あなたのブログのTOCをぜひアップデートしてみてください！
別記事への導線（キーワード入り）
ここから次の一歩へ進むなら、関連の深い記事を読むのがおすすめです。
前編で整えた「目次・見出し」の流れを、後編では CTA・章末導線・関連記事 に接続して、読者の回遊率を最大化していきます。
Vol.13【後編】｜CTA・章末導線・関連記事：次アクションを最短化するUX
目次や本文構成で整えた“読み切りやすさ”を、クリックにつなげるための後半パート。
CTAの置き所・章末導線の型・関連記事の役割が、迷わず再現できます。
Vol.2 復習｜内部リンクの設計図（ハブ＆クラスター）
回遊率を上げたいなら、内部リンク設計の基礎もセットで理解しておくと強いです。
「ハブ → クラスター」の構造化がまだ苦手な人は、ここで一気に整理できます。
今回はここで終わりにしたいと思います！
最後までお読みいただきありがとうございました！
このブログでは「ChatGPT×副業」をテーマに、AIをフル活用したリアルな副業チャレンジを発信しています🎶
むずかしい話はナシで、「ちょっとやってみたいかも」と思えるような内容を目指しています😁
私は現在、ChatGPTを使ってTシャツのデザインを作って販売したり、
LINEスタンプのキャラ制作に挑戦したりしています👍
デザインの知識ゼロでも、AIの画像生成機能を使えばかなりいい感じになりますよ！
ブログの内容やSEO対策も、ぜんぶChatGPTに相談しながら書いています。
アイデアが出ないときも、相棒みたいに助けてくれます🎶
さらに、楽天ルームのレビュー文章もChatGPTと一緒に考えたり、
X（旧Twitter）の投稿や運用方法も提案してもらったりと、あらゆる場面でAIに頼っています。😅
「AIって便利そうだけど、自分にも使えるのかな？」
と思っている人には、ぜひ読んでほしいです。
このブログは、AI初心者でも副業が始められるように、
体験ベースでわかりやすく書いています。
私の成功も失敗もまるごとシェアしていくので、よかったら気軽に読んでいってくださいね。
Xでも日々の活動をゆるっと更新しているので、ぜひのぞいてみてください！
明日のあなたがより豊かになりますように😌
それでは、おやすみなさい😴
