長い記事を書いたのに、読者が知りたい箇所にたどり着く前に離れてしまう。見出しが10個を超える記事なら、冒頭に目次を置くだけで読みやすさは大きく変わります。
結論から言うと、Shopifyの標準エディターには目次を自動で作る機能がありません。HTMLを手で書くか、テーマのコードを編集するか、アプリの目次ブロックを使うかの3択です。記事を増やしていくストアなら、見出しから自動で目次を作って更新もしてくれるアプリが最も手間がかかりません。
- 目次がない長い記事で起きていること
- Shopify標準エディターで手作業で目次を作る手順
- テーマのコードを編集して全記事に目次を出す方法と注意点
- Smart Agent Blogの目次ブロックで自動生成する手順
- 3つの方法の比較と、目次を置く位置のコツ
目次がない長い記事で起きていること
Smart Agent Blogのご提案のために、2026年8〜9月に日本のShopifyストアのブログ記事を確認してきました。見出しの有無を記録できた78記事のうち、27記事（約35%）は見出しが1つもありませんでした。見出しが13〜16個ある長い記事でも、目次が置かれていない例が複数ありました。
スマートフォンで読む人にとって、目次のない長い記事は「自分に関係のある話がどこにあるか分からない」状態です。サイズの選び方だけ知りたい人も、お手入れ方法だけ知りたい人も、最初から順にスクロールするしかありません。目次があれば、冒頭で記事の全体像をつかみ、必要な箇所に直接移動できます。
目次をつける前に、見出しを整える
どの方法でも、目次は記事の見出しから作ります。先に次の3点を確認しておくと、目次がそのまま記事の地図になります。
- 見出しの形式を使う：太字にした段落を見出し代わりにしていると、目次には拾われません。エディターの「見出し2」「見出し3」を使います。
- 階層をそろえる：大きな話題は見出し2、その中の小分けは見出し3にします。見出し2を飛ばして見出し3だけを使うと、目次の並びが不自然になります。
- 見出しだけで内容が分かる言葉にする：「ポイント1」より「サイズは足の実寸＋1cmで選ぶ」のほうが、目次を見た段階で読者が判断できます。
方法1：Shopify標準エディターで手作業で作る
Shopifyのブログ記事エディターには、表・画像・動画・リンクの挿入機能はありますが、目次の自動作成はありません。そのため、HTMLを直接書いて目次を作ります。
- Shopify管理画面で対象のブログ記事を開きます。
- エディターのツールバーにある
</>ボタンを押して、HTMLの表示に切り替えます。 - 目次に入れたい見出しに、半角英数字の
idを付けます。 - 記事の冒頭に、見出しへのリンクを並べたリストを書きます。
- 保存して、プレビューでリンクを押し、該当の見出しへ移動するか確認します。
<ul>
<li><a href="#size">サイズの選び方</a></li>
<li><a href="#material">素材による違い</a></li>
<li><a href="#care">長く使うためのお手入れ</a></li>
</ul>
<h2 id="size">サイズの選び方</h2>
<p>……</p>
<h2 id="material">素材による違い</h2>
<p>……</p>
費用はかかりませんが、次の手間が残ります。
- 記事ごとに毎回HTMLを書く必要がある
- 見出しを追加・変更するたびに、目次のリンクも手で直す必要がある
- ヘッダーが画面上部に固定されるテーマでは、移動先の見出しがヘッダーの裏に隠れることがある（テーマのCSSで
h2[id], h3[id]にscroll-margin-top: 80pxを指定する必要がある）
記事が数本で、今後あまり見出しを変えないなら、この方法でも十分です。
方法2：テーマのコードを編集して自動生成する
テーマのブログ記事テンプレートに、見出しを読み取って目次を作るJavaScriptを追加すると、すべての記事に目次を出せます。Shopifyの無料テーマ「Dawn」であれば、sections/main-article.liquid の末尾に次のようなコードを追加します。
<script>
document.addEventListener('DOMContentLoaded', function () {
var body = document.querySelector('.article-template__content');
if (!body) return;
var headings = body.querySelectorAll('h2, h3');
if (headings.length < 3) return;
var list = document.createElement('ol');
headings.forEach(function (h, i) {
if (!h.id) h.id = 'section-' + (i + 1);
var item = document.createElement('li');
var link = document.createElement('a');
link.href = '#' + h.id;
link.textContent = h.textContent;
item.appendChild(link);
list.appendChild(item);
});
var nav = document.createElement('nav');
nav.setAttribute('aria-label', '目次');
nav.appendChild(list);
body.insertBefore(nav, body.firstChild);
});
</script>
一度設定すれば記事ごとの作業はなくなりますが、注意点があります。
- 本文を囲む要素のクラス名はテーマごとに違うため、上のコードはそのままでは動かないことがある
- テーマのバージョンアップや別テーマへの切り替えで、追加したコードが消えることがある
- 目次の見た目（余白、文字の大きさ、折りたたみ）はCSSで別途作る必要がある
- 公開中のテーマを直接編集せず、複製したテーマで確認してから反映する
社内にテーマを触れる人がいる、または制作会社に依頼できる場合の選択肢です。
方法3：アプリの目次ブロックを使う
Smart Agent Blogは、Shopify管理画面から使えるブログエディターです。本文に「目次」ブロックを置くと、記事の見出しから目次が自動で作られます。
- Smart Agent Blogの「記事一覧」から記事を開きます（新しく作る場合は「記事を作成する」）。
- 目次を置きたい行で半角の「/」を入力し、「目次」を選びます。右側の挿入メニューにある「目次」を押しても追加できます。
- 見出し2〜4が、目次として自動で並びます。
- プレビューで表示を確認し、保存・公開します。
あとから見出しを追加したり言葉を変えたりしても、目次は自動で更新されます。HTMLを書く必要も、見出しに id を付ける必要もありません。
押さえておきたい点は2つです。
- 目次に並ぶのは見出し2〜4です。見出し1と見出し5は目次に入りません。
- ストアに表示するには、最初に一度だけ、テーマエディターの「ブログ記事」テンプレートにSmart Agent Blogのセクションを追加します。手順はストアに記事を表示するにまとめています。
3つの方法の比較
| 標準エディター（手作業） | テーマのコード編集 | Smart Agent Blog | |
|---|---|---|---|
| 記事ごとの作業 | 毎回HTMLを書く | なし | 目次ブロックを置くだけ |
| 見出しを変えたとき | 目次も手で直す | 自動で反映 | 自動で反映 |
| 必要な知識 | HTMLの基礎 | Liquid・JavaScript・CSS | 不要 |
| 費用 | 無料 | 無料（外注すれば制作費） | 無料プランあり（10記事まで） |
| テーマ変更の影響 | 受けにくい | コードが消えることがある | セクションを追加し直す |
| 向いているストア | 記事が数本で更新が少ない | テーマを管理できる人がいる | 記事を増やし、書き直していく |
目次を置く位置と、読みやすくするコツ
リード文の直後に置くのが基本です。最初の数行で「誰のための、何の記事か」を伝え、そのすぐ下に目次を置くと、読者は全体像を見たうえで読み進めるかを決められます。
**見出しが3つ未満なら、目次はなくてもかまいません。**目次が効くのは、見出しが多く、読者によって読みたい箇所が違う記事です。選び方ガイド、比較記事、使い方の解説、生産者インタビューなどが当てはまります。
**目次が長くなりすぎるときは、見出し3を見直します。**見出し3が細かく並びすぎていると、目次そのものが読みにくくなります。1つの見出し2の中に見出し3が5つ以上あるなら、話題を分けるか、箇条書きにまとめられないか検討します。
目次で読みたい箇所に移動した読者が、そのまま商品を選べるようにしておくと、記事が売上につながりやすくなります。Smart Agent Blogでは、目次・見出し・商品カード・コールアウトを同じエディターで組み合わせられます。商品の入れ方はShopifyブログに商品情報を表示するには？で解説しています。
よくある質問
すでに公開している記事にも目次をつけられますか？
つけられます。Smart Agent Blogの「記事一覧」には、Shopify管理画面で作った記事も表示され、開いて目次ブロックを追加できます。無料プランの場合、Shopify管理画面で作った記事をSmart Agent Blogで保存した時点で、10件の枠に数えられます。独自のHTMLや別アプリの要素を使っている記事は、先に複製したテーマや非公開の状態で表示を確認してください。
目次をつけると検索順位は上がりますか？
目次そのものが順位を上げるとは言えません。ただ、目次をつけるために見出しを整理すると、記事の構成が読者にも検索エンジンにも伝わりやすくなります。まずは読者が目的の箇所にたどり着けるようにする、という考え方で取り入れるのがおすすめです。
目次の見た目はテーマによって変わりますか？
実際の表示はテーマの設定によって変わることがあります。公開前にプレビューで、パソコンとスマートフォンの両方を確認してください。
まとめ
- Shopifyの標準エディターには、目次の自動作成機能はない
- 手作業のHTMLは無料だが、記事ごと・見出しの変更ごとに手直しが必要
- テーマのコード編集は全記事に効くが、テーマの更新や切り替えで消えることがある
- Smart Agent Blogの目次ブロックなら、見出し2〜4から自動で作られ、見出しを変えても自動で更新される
見出しが10個を超える記事がひとつでもあるなら、まずはその記事に目次を置いてみてください。記事の組み立て方から見直したいときは、Shopifyブログ記事の書き方もあわせてどうぞ。