みなさんは、Shopifyでブログ記事（またはニュースやジャーナル、マガジンなど）を書いていますか。
まだ書いていないという方は、まずはこちらの記事を参考にしてください。
本記事では、Shopifyストアのブログ記事に目次を追加するメリットや目次追加におすすめのShopifyアプリをご紹介します。
Shopifyに目次を入れるメリット
Shopifyストアに目次を入れるメリットは下記になります
- 読者（訪問者）の利便性が上がる
- 書き手（ストア側）思考の整理になる
- アクセス数が増加する
- ユーザーニーズを把握できる
- SEOにも良い効果が期待できる
それぞれ詳しく解説していきます。
読者（訪問者）の利便性が上がる
目次は下記のように読者の利便性を向上させます。
- ブログ記事の内容がひと目でわかる
- 読みたい箇所にすぐにアクセスできる
書き手（ストア側）思考の整理になる
目次を利用することで、書き手側の思考の整理にも役立ちます。思考の整理として下記の項目を目次でチェックすることがおすすめです。
- 論理的に整理されているか
- 読者（訪問者）目線で書かれているか
- 読者（訪問者）が得たい情報が書かれているか
アクセス数が増加する
Googleの検索結果で記事タイトルの下にいくつかリンクが表示されているのを見たことはありませんか？
目次はGoogleの検索結果にも表示されることがあるため、目次が検索結果に表示されるとクリック率が増え、アクセス数の増加も期待できます。
ユーザーニーズを把握できる
ヒートマップツールと組み合わせることで、読者がブログ記事内のどの内容に興味を持ち、よく読まれているのかを把握することができます。
ユーザーニーズを見つける方法としては、ヒートマップツールのクリック（タップ）が多い箇所を赤く染めてくれる機能を利用し、目次内のどの見出しが多くクリックされているのかを確認することで特定できます。
下記の記事では、弊社おすすめのヒートマップツール「Clarity（クラリティ）」をShopifyへ導入する方法を解説していますので、ご参考にしてください。
SEOにも良い効果が期待できる
目次がSEOに直接的な効果をもたらすわけではありませんが、間接的にSEOに良い効果をもたらすと考えています。
SEOで一番大事なことは、ユーザーにとって良いコンテンツかどうかです。
上述のとおり、目次を出すことでユーザーの利便性が向上しますし、ユーザーニーズを把握した上でブログ記事の改善を続けられるため、自ずとSEOでも評価される良質なコンテンツになっていくと考えられます。
下記の記事では、SEOのメリットやShopifyで出来るSEO対策について解説しています。参考にしてください。
SEOのメリット・デメリット｜Shopifyで出来るSEO対策
Shopifyで目次を作る3つの方法
Shopifyで目次を作る方法は下記になります
- アプリを導入する
- ソースコードをカスタマイズする
- 目次対応の有料テーマを購入する
それぞれ詳しく解説していきます。
アプリを導入する
まずはじめに、Shopifyアプリを利用する方法です。
アプリを利用するメリットとして、簡単に導入ができ、好みのデザイン（色味）にカスタマイズができることです。
また、細かな調整や動作テスト等に貴重なエンジニアのリソースを割かなくて済むのも大きなメリットと言えます。
デメリットとしては、月額費用として数ドルで発生する場合があります。
ただし、自動で目次生成するShopifyアプリ「RuffRuff 目次作成」では無料から利用できます。
ソースコードをカスタマイズする
次に、Shopifyのソースコードをカスタマイズして導入する方法です。
メリットとしては無料で作ることができ、自由にデザインをカスタマイズ出来ることです。
デメリットとしては、HTMLやCSS、JavaScriptなどのプログラミング知識が必要になることです。また、開発だけでなく、意図したとおりに動くかテストする時間や継続的なメンテナンスが発生するのがデメリットです。
下記の記事では、ソースコードを独自でカスタマイズして、Shopifyサイトに目次を自動生成する方法を解説しています。参考にしてみてください。
目次対応の有料テーマを購入する
最後に、目次を自動生成してくれるShopifyの有料テーマを購入する方法です。
メリットとしては、プログラミング知識が不要で、買い切りなので長く利用する場合はアプリよりも安く抑えることが出来ます。
デメリットとしては、デザインの自由に変更できないことや費用が$180以上は発生することです。また、対応しているテーマを探すのにも時間がかかります。
Shopifyの目次作成アプリの選び方
目次作成アプリを選ぶ際に確認しておきたいのが下記の項目になります
- 日本語に対応しているか
- 目次を自動で生成してくれるか
- コスト（月額費用）はいくらか
それぞれ詳しく解説していきます。
日本語に対応しているか
安さだけでアプリを選んでしまうと見えない作業コスト（日本語変換やなにか問題が発生したときの問い合わせなど）が発生するため、十分に注意が必要です。まずは、下記が日本語に対応されているか確認しましょう。
- ストアフロント部分（ユーザー側のサイト表示部分）
- アプリの管理画面
- ヘルプページ
- 問い合わせ担当者
目次を自動で生成してくれるか
目次を生成できるだけでなく、目次を自動で生成してくれることが大事です。
目次作成アプリの中には、手動で目次を作成する必要があるものもあります。１回の作業はそこまで時間がかからないかもしれませんが、作業漏れなどの原因になりますので、できるだけ目次を自動で生成してくれるアプリを選びましょう。
コスト（月額費用）はいくらか
目次作成アプリのコストは無料で使えるものから月額数ドルのものまであります。読者（訪問者）の利便性や目次作成の手間削減にいくらまでコストを割けれるかを並べて判断しましょう
目次作成アプリのプラン比較
| アプリ名 | プラン名 | 月額利用料 |
|---|---|---|
| RuffRuff 目次作成 | Free | 無料 |
| Light | $3.99 | |
| Regular | $9.99 | |
| Easy Table Of Contents | BASIC | $1.99 |
| ジャンプリンクス | FULL ACCESS | $1.99 |
Shopifyの目次作成アプリを紹介
RuffRuff 目次作成
ブログ記事だけでなく、商品ページやコレクション、Pagesなどにも目次を自動生成できる世界に1つしかないShopifyアプリです。
無料から利用でき、ノーコードで導入可能です。
文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。
料金
無料〜
機能
- 目次の自動生成
- 目次に利用する見出しの選択（h1からh6の中から）
- タイトルの文言変更
- 区切り線の有無を変更
- カラー変更（背景、枠、区切り線、タイトル、リンク）
- 章番号の表記の変更（なし、点、数字の３種類から選択可能）
- 字下げ（インデント）の有無を変更
- スクロールの有無を変更
- スクロールオフセットの調整
- ライブプレビュー
Easy Table Of Contents
コンテンツに手を加えることなく、自動で目次を生成してくれるShopifyアプリです。
目次のデザインは1種類のみですが、色を調整できる箇所が多く、自身のサイトデザインに合わせて調整することが可能です。
また、目次として利用する見出しをh1タグ〜h6タグの中から選択できたり、目次の表示位置の変更できたりします。
下記のブログ記事でEasy Table Of Contentsの特徴や料金プラン、注意点をご紹介しています。ご参考にしてください。
ブログに目次を表示できるShopifyアプリ「Easy Table Of Contents」とは？特徴や料金プラン、注意点をご紹介
料金
$1.9 / 月 ※ 7日間の無料体験
機能
- 目次デザイン 1種類
- スクロール（Smooth Scroll）のオン・オフ切り替え
- 目次に含む見出しをh1~h6の中から選択
- 特定の記事で目次を非表示
- 段落表示を「丸表記(Bullet)」「数値表示 (Numeric)」「なし（None）」から選べる
- 字下げ（インデント）のオン・オフ切り替え
- 下記の色味の変更が可能
- 背景、枠、タイトル、リンク、hover時のリンク、クリック後のリンク
ジャンプリンクス
数少ない目次生成アプリの１つで、「Easy Table Of Contents」と機能も料金も大差ありません。
料金
$1.9/月 ※ 7日間の無料体験
機能
- 目次デザイン 1種類
- スクロール（Smooth Scroll）のオン・オフ切り替え
- スクロールの表示領域の調整（オフセット調整）
- 目次の表示位置の調整
- 最初の見出しの上部
- アプリブロックによる指定位置
- 目次に含む見出しをh1~h6の中から選択
- 特定の記事で目次を非表示
- 段落表示を「丸表記(Bullet)」「数値表示 (Numeric)」「なし（None）」から選べる
- 下記の色味の変更が可能
- 背景、枠、タイトル、リンク、hover時のリンク、クリック後のリンク
目次を作成できるShopifyアプリを徹底比較
目次を表示できる場所で比較
| アプリ名 | RuffRuff 目次作成 | Easy Table Of Contents | ジャンプリンクス |
|---|---|---|---|
| ブログ記事で目次表示 | ◯ | ◯ | ◯ |
| 商品で目次表示 | ◯ | ✕ | ✕ |
| Pagesで目次表示 | ◯ | ✕ | ✕ |
| コレクションで目次表示 | ◯ | ✕ | ✕ |
目次のカスタマイズ機能で比較
| アプリ名 | RuffRuff 目次作成 | Easy Table Of Contents | ジャンプリンクス |
|---|---|---|---|
|
見出し選択 （目次に利用する） |
◯ h1~h6 |
◯ h1~h6 |
◯ h1~h6 |
|
スクロール （Smooth Scroll） |
◯ | ◯ | ◯ |
| 段落表示 |
◯ 3種類 |
◯ 3種類 |
◯ 3種類 |
| 区切り線 | ◯ | ✕ | ✕ |
|
字下げ （インデント） |
◯ | ◯ | ✕ |
| カラー変更 | ◯ | ◯ | ◯ |
| 開閉ボタン | ◯ | ✕ | ✕ |
| 初期表示行数の設定 | ◯ | ✕ | ✕ |
|
目次の 表示位置調整 |
◯ 3種類 |
◯ 3種類 |
◯ 2種類 |
|
目次の 配置 |
◯ 左寄せ、中央寄せ、右寄せ |
✕ | ✕ |
|
目次の 余白 |
◯ 上下左右 |
✕ | ✕ |
その他の機能で比較
| アプリ名 | RuffRuff 目次作成 | Easy Table Of Contents | ジャンプリンクス |
|---|---|---|---|
| 目次の自動生成 | ◯ | ◯ | ✕ |
| 1クリックON/OFF | ◯ | ✕ | ✕ |
| ライブプレビュー | ◯ | ✕ | ✕ |
|
見出しを利用した アンカーリンク |
◯ | ✕ | ✕ |
RuffRuff 目次作成でブログ記事に目次を表示する方法
Shopifyのブログ記事に目次を表示する方法は以下になります。
事前準備
今回はShopifyアプリ「RuffRuff 目次作成」を利用する方法をご紹介します。RuffRuff 目次作成は、ブログ記事や商品ページなどShopify内のあらゆるコンテンツに目次を表示できる日本製のShopifyアプリです。無料かつシンプルな設定で利用することができます。まだインストールされていない方は、下記のリンクよりインストールをお願いします。
RuffRuff 目次作成のインストールはこちら
手順1 目次のデザインをカスタマイズする
RuffRuff 目次作成アプリを開き、左メニューの「目次のカスタマイズ」をクリックします。目次のカスタマイズ画面より、目次のタイトルや目次の生成に利用する見出しを選択し、画面右上の「保存」をクリックします。
手順2 目次を表示したい場所にアプリブロックを追加
「オンラインストア > テーマ」の順にアクセスし、目次を導入したいShopifyテーマの「カスタマイズ」をクリックします。
テーマエディタの画面中央上部のセレクトボックスから「ブログ記事」のテンプレートを選びます。
次に「ブロックを追加（または、セクションを追加）」をクリックし、アプリタブを選択します。アプリ一覧から「目次」という名称のアプリブロックを追加、画面右上の「保存する」をクリックします。
ブログ記事に目次が表示されたら、無事に設定できています。
目次の設定方法で問題が発生した場合の対処法
ブログテンプレートにアクセスできない
公開されているブログ記事が1件も存在しないのが原因の可能性が考えられます。「Shopify > ブログ」の順にアクセスし、公開済みのブログ記事が存在するか確認しましょう。
「目次」のアプリブロックが表示されない
下記の原因が考えられます。
原因1 RuffRuff目次作成をインストールしていない
RuffRuff目次作成をインストールしましょう。
原因2 「ブログ記事」のテンプレートにアクセスしていない
テーマエディタの画面中央上部のセレクトボックスから「ブログ記事」のテンプレートを選びましょう。
原因3 利用中のShopifyテーマがOnline Store 2.0に対応していない
下記のヘルプページでOnline Store 2.0テーマ以外のセットアップ方法を紹介されていますので、ヘルプページを参考にセットアップを行いましょう。
アプリブロックを追加したが目次が表示されない
下記の原因が考えられます。
原因1 ブログ記事内に見出しが存在しない
目次は見出しタグ（例：<h1>, <h2>, <h3>）を元に作成されるため、ブログ記事内の見出しタグが正しく使用されていない場合、目次が生成されない可能性があります。見出しタグが適切に使われているか確認しましょう。
原因2 キャッシュの問題
Shopifyプラットフォーム上で特定のキャッシュが原因で、新しく追加した目次がすぐに表示されない可能性があります。テーマエディタで「保存」ボタンをクリックした後、ブラウザのキャッシュをクリアするか、ページをリフレッシュしましょう。
原因3 ブログ記事をShopify純正のブログエディタ以外で作成している
RuffRuff 目次作成はShopify純正のブログエディタで作成したブログ記事のみサポートしています。PageflyやGempageなどで作成したブログ記事はサポートしていないため、もし目次を表示させたい場合はShopify純正のブログエディタで作り直す必要があります。
最後に
以上のように、Shopifyで目次を作成する方法やアプリの選び方について解説しました。目次を活用して、読者の利便性向上やSEO効果を最大限に活かしましょう。
下記の記事では目次を追加できるShopifyアプリ以外にも「集客」や「売上拡大」、「ブログ記事拡張」など様々なおすすめアプリをジャンル別に紹介しています。ご参考にしてください。
