みなさんは、Shopifyでブログ記事（またはニュースやジャーナル、マガジンなど）を書いていますか。
まだ書いていないという方は、まずはこちらの記事を参考にしてください。
Shopifyのブログ機能をフル活用しよう｜機能や拡張アプリを紹介
本記事では、Shopifyストアのブログ記事に目次を追加するメリットや目次追加におすすめのShopifyアプリをご紹介します。
Shopifyに目次を入れるメリット
Shopifyストアに目次のを入れるメリットは下記になります
- 読者（訪問者）の利便性が上がる
- 書き手（ストア側）思考の整理になる
- アクセス数が増加する
- ユーザーニーズを把握できる
- SEOにも良い効果が期待できる
それぞれ詳しく解説していきます。
読者（訪問者）の利便性が上がる
目次は下記のように読者の利便性を向上させます。
- ブログ記事の内容がひと目でわかる
- 読みたい箇所にすぐにアクセスできる
書き手（ストア側）思考の整理になる
目次を利用することで、書き手側の思考の整理にも役立ちます。思考の整理として下記の項目を目次でチェックすることがおすすめです。
- 論理的に整理されているか
- 読者（訪問者）目線で書かれているか
- 読者（訪問者）が得たい情報が書かれているか
アクセス数が増加する
Googleの検索結果で記事タイトルの下にいくつかリンクが表示されているのを見たことはありませんか？
目次はGoogleの検索結果にも表示されることがあるため、目次が検索結果に表示されるとクリック率が増え、アクセス数の増加も期待できます。
ユーザーニーズを把握できる
ヒートマップツールと組み合わせることで、読者がブログ記事内のどの内容に興味を持ち、よく読まれているのかを把握することができます。
ユーザーニーズを見つける方法としては、ヒートマップツールのクリック（タップ）が多い箇所を赤く染めてくれる機能を利用し、目次内のどの見出しが多くクリックされているのかを確認することで特定できます。
下記の記事では、弊社おすすめのヒートマップツール「Clarity（クラリティ）」をShopifyへ導入する方法を解説していますので、ご参考にしてください。
Clarity（クラリティ）とは？ | ShopifyにClarityを設定する方法
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の目次作成アプリの選び方
目次作成アプリを選ぶ際に確認しておきたいのが下記の項目になります
- 日本語に対応しているか
- 目次を自動で生成してくれるか
- コスト（月額費用）はいくらか
それぞれ詳しく解説していきます。
日本語に対応しているか
安さだけでアプリを選んでしまうと見えない作業コスト（日本語変換やなにか問題が発生したときの問い合わせなど）が発生するため、十分に注意が必要です。まずは、下記が日本語に対応されているか確認しましょう。
- ストアフロント部分（ユーザー側のサイト表示部分）
- アプリの管理画面
- ヘルプページ
- 問い合わせ担当者
目次を自動で生成してくれるか
目次を生成できるだけでなく、目次を自動で生成してくれることが大事です。
目次作成できる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アプリです。
無料から利用でき、ノーコードで導入可能です。
文言やデザイン、スクロールのオン・オフ、目次の表示位置の調整など、様々なカスタマイズが可能です。また、ライブプレビュー機能で、リアルタイムで確認しながら目次のカスタマイズが可能です。引用元: RuffRuff 目次作成
料金
$0 / 月〜
機能
- 目次の自動生成
- 目次に利用する見出しの選択（h1からh6の中から）
- タイトルの文言変更
- 区切り線の有無を変更
- カラー変更（背景、枠、区切り線、タイトル、リンク）
- 章番号の表記の変更（なし、点、数字の３種類から選択可能）
- 字下げ（インデント）の有無を変更
- スクロールの有無を変更
- スクロールオフセットの調整
- ライブプレビュー
Easy Table Of Contents
コンテンツに手を加えることなく、自動で目次を生成してくれるShopifyアプリです。
目次のデザインは1種類のみですが、色を調整できる箇所が多く、自身のサイトデザインに合わせて調整することが可能です。
また、目次として利用する見出しをh1タグ〜h6タグの中から選択できたり、目次の表示位置の変更できたりします。
料金
$1.9 / 月 ※ 14日間の無料体験
機能
- 目次デザイン 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 | ◯ | ✕ | ✕ |
| ライブプレビュー | ◯ | ✕ | ✕ |
|
見出しを利用した アンカーリンク |
◯ | ✕ | ✕ |
最後に
下記の記事では目次を追加できるShopifyアプリ以外にも「集客」や「売上拡大」、「ブログ記事拡張」など様々なおすすめアプリをジャンル別に紹介しています。ご参考にしてください。
