パンくずリストは、訪問者がECサイト内を迷わず閲覧するために必要なナビゲーション機能です。Shopifyで構築したECサイトにパンくずリストを導入することで、サイトの回遊性の向上だけでなく、SEO対策にも大きな効果が期待できます。
本記事では、Shopifyでパンくずリストを設定するための具体的な方法を紹介します。初心者でも簡単に実践できますので、ぜひ活用してください。
パンくずリストとは？ECサイトに必要な理由
パンくずリストは、Webサイト内の現在位置を示すナビゲーション機能で、顧客が迷わずに目的のページに移動できるようサポートしてくれます。
ここでは、パンくずリストが、SEO対策や顧客体験の向上など、ECサイト運営で重要な理由について解説します。
SEO評価に効果的
パンくずリストは検索エンジンにサイトの構造を正確に伝えることができるため、クロールが効率化され、インデックス登録がスムーズになります。
また、パンくずリストは内部リンクとしても機能しますので、サイト全体のSEOパフォーマンスの向上を期待できるでしょう。ほかにもパンくずリストが表示されることでサイトの構造を理解しやすくなり、クリック率（CTR）や回遊率が向上したり、離脱率が低下したりすることも、SEO対策に有効なのです。
ECサイトにおけるSEO対策について、詳しくは下記の記事をご覧ください。
ECサイトでの購入体験の向上
パンくずリストは、顧客に快適で効率的な体験を提供するための重要な要素です。
例えば、パンくずリスト、ページ上部に表示されることが多いので、現在どのカテゴリやページにいるのかが判りますし、目的のページに効率的にたどり着けるでしょう。
もちろん、上位カテゴリや関連ページへ簡単に移動できるため、ストレスなくECサイトを探索できます。特に、商品数が多いECサイトであれば、効果は絶大です。
また、スマホなどのモバイル環境で閲覧している場合は、パンくずリストがあると、小さな画面でも快適に操作できます。
Shopifyでパンくずリストを追加する3つの方法
Shopifyにパンくずリストを追加する方法は3つあります。それぞれの手順を紹介しますので、ご自身に合った方法を選び、実践してみてください。
コードを使用してパンくずリストを追加する方法
まずは、コードを使ってパンくずリストを導入する方法です。柔軟なデザインが可能ですが、コード編集が必要になりますので、HTMLやLiquidの基本的な知識がある方におすすめです。また、テーマの更新時に再設定が必要になりますので、ご注意ください。
手順
Shopifyの管理画面から「販売チャンネル」「テーマ」から、使用中のテーマを選び「カスタマイズ」の左側にある「…」をクリックして「コード編集」を選びます。
次に左カラムの「snippets」から「＋新しいスニペットを追加する」を選びます。「liquid」ファイルを新規作成するウインドウが開くので、最適な名前（例：breadcrumb）を付けて「完了」を押します。
次に作成したファイルに、Shopifyが提供しているパンくずリストのコードを貼り付けて保存します。
次にこのファイルの内容を任意の場所に表示させます。例えば、theme.liquidファイルを開きます。次に「{{ content_for_layout }}」の上に「{% render 'breadcrumb' %}」と入力し保存します。パンくずリストが正しく表示されるか確認して完了です。
Liquidについて、詳しくは下記の記事をご覧ください。
パンくずリストが設定されているテーマを使う方法
Shopifyのテーマの中には、あらかじめパンくずリスト機能が設定してあるテーマもあります。現状、無料のテーマにはありませんが、コーディングスキルが不要で、テーマエディターで、配置やフォントなど多少カスタマイズが可能です。
手順
Shopifyのテーマストアからパンくずリストが設定されているテーマをインストールします。「Breadcrumbs」で絞り込んで探すと見つけやすいでしょう。
Shopifyの管理画面から「販売チャンネル」「テーマ」から、テーマライブラリーの中にインストールしたテーマが表示されていますので、「メインテーマとして設定」を選択し、必要であればデザインをカスタマイズして利用しましょう。
アプリで簡単にパンくずリストを追加する方法
Shopifyアプリストアには、パンくずリストを簡単に追加できるアプリが提供されています。コードを編集する必要がないため、初心者でも利用可能です。利用料金やカスタマイズ性はアプリよって異なるため注意が必要です。
手順
Shopifyアプリストアから、パンくずリストを追加できる任意のアプリをインストールします。
次にインストールしたアプリを使用しているテーマに反映させます。アプリによって管理画面のアプリメニューから設定するか、テーマエディタの左側サイドバーからアプリを追加するかは異なりますので、インストールしたアプリのマニュアルに従って設定しましょう。
アプリでパンくずリストを導入するメリット
ご紹介したように、Shopifyにパンくずリストを導入する方法は３つあります。ですが、コードを使う方法は初心者にはハードルが高いですし、例えばテーマエディターを使う方法はそもそもテーマが対応していなければ使えません。
初心者でもテーマに関係なくパンくずリストを導入したい場合、アプリの利用がおすすめです。ここではアプリを利用する場合のメリットをご紹介しましょう。
コードの知識が不要で簡単に設定可能
アプリを使えば、コーディングの知識がなくても、初心者でも直感的な操作で簡単に設定が完了します。また、コード編集でのようにテーマ更新時に設定が消えることがありませんので、安心して運用できます。
デザインや動作を柔軟にカスタマイズ可能
アプリによっては、パンくずリストのデザインやスタイルを簡単にカスタマイズできる機能が付属しています。サイトのブランドイメージに合わせてデザインを調整しやすく、操作性や見た目を向上させることも可能です。
もちろんコード編集よりも自由度は低いかもしれませんが、手軽にデザインや動作をカスタマイズできるメリットは高いです。
日本語対応でデザインカスタマイズもできるBiNDecのパンくずリストアプリ
Shopifyの構築・運用支援サービスのBiNDecでは、パンくずリストを簡単に追加できる日本語対応のアプリを提供しています。BiNDecのパンくずリストアプリは、テーマエディタからパンくずリストの設置場所を任意に決められることや、表示形式やデザインの編集のカスタマイズ性の高さが特徴です。
文字の折り返しなどモバイルユーザー向けにも対応した設定や、区切りの記号、文字サイズと余白なども細かく指定できるため、元のページに溶け込んだデザインのパンくずリストを作成できます。
また、お問い合わせページやカートページなど、離脱させたくないページにはパンくずリストを表示しない制限をかけることもできます。
BiNDecのアプリについて、詳しくは下記の記事をご覧下さい。
ShopifyのECサイトのカスタマイズならBiNDecへ
パンくずリストの設置方法は様々ですが、コードで対応する場合も、既存のコードを流用して書き換えることで可能なので、初心者でもトライしてみる価値はあります。
株式会社ウェブライフでは、Shopifyを利用したECサイト構築から運用までサポートする「BiNDec」を提供しています。
豊富な導入実績とハイレベルな技術力・知識量を認められたShopify Premierパートナーとして、中小規模から大規模のビジネスに向けた最適な運用戦略の提案も可能です。
パンくずリストだけでなく、ブランドイメージ合わせてカスタマイズされたShopifyのECサイトの構築なら、BiNDecにお気軽にご相談ください。
