Shopifyにご利用ガイドを設置する方法｜購入説明をわかりやすく伝えるコツとアプリ活用術

はじめに
記事の構成
Shopify でご利用ガイドを表示できる？
ご利用ガイドを表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプルご利用ガイド｜お手軽購入説明」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
5種類のデザインスタイル別の特徴
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify でストアを運営していて、こんな悩みを抱えていませんか？

「カート放棄が多い気がする」「商品ページからの離脱が目立つ」「お客様から購入方法に関する問い合わせがよく来る」――。こうした課題の多くは、お客様が 「どうやって買えばいいのかわからない」「届くまでにどれくらいかかるのかわからない」 という不安を抱えていることが原因です。

そんなときに役立つのが、ストアに ご利用ガイド を設置することです。「ご利用の流れ」「購入説明」「ショッピングガイド」など呼び方はさまざまですが、購入手順を視覚的にわかりやすく伝えるセクションを用意するだけで、お客様の不安は大きく軽減されます。

この記事では、Shopify のご利用ガイドを設置する方法を、テーマのコード編集とアプリ導入の両面から徹底解説します。実装サンプルコードも掲載しているので、実際に手を動かしてみたい方にも参考にしていただける内容になっています。

この記事は以下の記事を参考にしています。

記事の構成

この記事は以下の流れで解説します。

ご利用ガイドとは何か、なぜ必要なのか
ご利用ガイドを設置するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプルご利用ガイド｜お手軽購入説明」の紹介
アプリのインストール手順と設定方法
5種類のデザインスタイル別の解説
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツとよくある質問

Shopify でご利用ガイドを表示できる？

結論から言うと、Shopify でご利用ガイドを表示することは可能です。

実現方法は大きく2つあります。

テーマのコード編集で実装する方法
Liquid と CSS、JavaScript を使って、自分でご利用ガイドのセクションを実装する方法です。自由度は高いですが、コーディングの知識が必要です。
アプリを導入して実装する方法
Shopify アプリストアで提供されているご利用ガイドアプリをインストールして、ノーコードで実装する方法です。コーディング不要で、テーマエディタから簡単にカスタマイズできます。

それぞれにメリット・デメリットがあるので、自分のストアの状況や運営方針に合わせて選びましょう。

ご利用ガイドを表示するメリット・デメリット

メリット

お客様の不安を解消できる

初めてストアを訪れたお客様は、「ちゃんと届くのかな」「返品はできるのかな」「クレジットカード以外でも買えるのかな」といったさまざまな不安を抱えています。ご利用ガイドで購入の流れや支払い・配送・返品のルールを明示しておくことで、こうした不安を解消できます。

具体的には以下のような効果が期待できます。

カート放棄率の低下
購入完了率の向上
問い合わせ数の減少
ストアへの信頼感アップ

ブランドの信頼感を高められる

購入説明をしっかり用意しているストアは、運営者がお客様のことを丁寧に考えていることが伝わります。「このストアはちゃんとしている」という印象を与えられるので、初めて訪れたお客様にも安心して購入してもらえます。

問い合わせ対応の負担を減らせる

「いつ届きますか？」「どんな支払い方法が使えますか？」「返品できますか？」――こうした基本的な質問は、ご利用ガイドにまとめておくことで自然と問い合わせが減ります。スタッフの工数削減につながり、本来のコア業務に集中できるようになります。

コンバージョン率の向上が期待できる

購入手順がわかりやすいストアは、お客様にとって買いやすいストアです。「ここなら安心して買える」と感じてもらえれば、カート放棄を減らし、購入完了まで進んでもらえる可能性が高まります。

リピーター獲得にもつながる

一度購入したお客様が、返品方法や次回の購入手順を確認するためにご利用ガイドを再訪することもあります。「いつでも丁寧に説明されている」という印象は、長期的なリピーター獲得にも貢献します。

デメリット

情報量が多すぎると逆効果になる

ご利用ガイドにあれもこれもと情報を詰め込みすぎると、お客様にとって読みづらいページになってしまいます。本当に伝えたい内容を厳選して、簡潔にまとめることが大切です。

運用コストがかかる

配送業者や返品ポリシー、支払い方法などが変わった場合は、ご利用ガイドの内容も更新する必要があります。複数のページに同じ内容を記載していると、更新漏れのリスクも生じます。

デザインの統一感を保つのが難しい

テキストだけで購入説明を書くと無機質になりがちで、画像と組み合わせて見やすく整えるにはデザインの工夫が必要です。コードで実装する場合は、CSS の調整に手間がかかります。

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

メリット

アプリ料金がかからず、ランニングコストを抑えられる
細部までデザインを自由にカスタマイズできる
他のセクションと完全に統一感を持たせられる

デメリット

Liquid と CSS の知識が必要
実装に時間がかかる
テーマのアップデート時に変更が失われる可能性がある
バグや表示崩れが発生したときに自分で対応する必要がある

アプリを導入する方法

メリット

ノーコードで簡単に設置できる
テーマエディタから直感的にカスタマイズできる
スマホ対応やレスポンシブデザインが標準で用意されている
アプリ提供元のサポートを受けられる

デメリット

月額料金がかかる（ただし数ドル〜と低価格のものが多い）
アプリ提供元の機能仕様に依存する
アプリを停止すると表示が消える

結論：最初はアプリで小さく試すのがおすすめ

「ご利用ガイドの効果を試してみたい」「コーディング知識はないけれどきれいに設置したい」という方には、アプリでの導入をおすすめします。月額数ドルから始められて、無料体験期間も用意されているアプリが多いので、リスクなく試せます。

効果を確認したうえで、本格的に独自カスタマイズをしたくなったら、テーマのコード編集に切り替えるのも一つの選択肢です。

アプリのインストール手順

ここからは、実際にアプリをインストールする手順を解説します。

ストア管理画面左下の「設定」をクリックします。

設定をクリック

「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。

Shopify App Storeを開く

検索窓に「シンプルご利用ガイド｜お手軽購入説明」と入力し、表示されたアプリをクリックします。

アプリを検索する

アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。月額 $3.99（7日間の無料お試し期間あり）でご利用いただけます。

アプリをインストールする

「インストール」ボタンをクリックすると、必要な権限が表示されますので確認してインストールを完了してください。

インストールの権限を確認する

以下のアプリ管理画面が表示されます。

アプリの管理画面

以上で、アプリのインストールは完了です。

アプリをテーマに追加（有効化）

インストール後は、アプリブロックをテーマに追加する必要があります。

アプリ管理画面から「テーマに追加する」ボタンをクリックし、テーマエディタを開きます。

テーマに追加するボタンをクリック

テーマエディタが開いたら、「シンプルご利用ガイド」のセクションが追加されていることを確認してください。

テーマエディタでセクションを確認

5種類のデザインスタイルから使いたいセクションを選択して追加します。不要なスタイルのセクションは非表示または削除してください。

5種類のデザインスタイル別の特徴

タイムライン

タイムラインスタイルは、ステップ番号を円で囲み、縦方向に流れを表現するデザインです。各ステップに画像・タイトル・説明文を設定でき、視覚的に分かりやすく購入手順を伝えられます。

タイムラインスタイルのプレビュー

主な設定項目には、セクションタイトル、ステップラベルのテンプレート、ステップ番号のテンプレート、各ステップのタイトル・説明文・画像があります。スタイル設定では円の大きさや背景色、色設定ではステップラベル・ステップタイトルの色、レイアウト設定ではステップ間の余白や PC・モバイルそれぞれの上下余白を調整できます。

タイムラインスタイルの設定画面

シンプル

シンプルスタイルは、円の中にステップ番号を表示し、接続線でつなぐミニマルなデザインです。画像を使用せず、タイトルのみでステップを表現するため、すっきりとした見た目になります。

シンプルスタイルのプレビュー

円の大きさ、円の背景色、円の文字色、接続線の色などをカスタマイズでき、シンプルでありながらブランドカラーに合った調整が可能です。

シンプルスタイルの設定画面

カード

カードスタイルは、各ステップをカード形式で表示し、矢印アイコンでステップ間のつながりを表現するデザインです。各ステップに画像とタイトルを設定でき、バッジ付きで視認性の高い見た目になります。

カードスタイルのプレビュー

画像の大きさ、矢印アイコン、矢印の色、カードの枠線の色や背景色、バッジの背景色や文字色などを細かく調整できます。

カードスタイルの設定画面

コンパクト

コンパクトスタイルは、番号付きのリスト形式でステップを表示するデザインです。画像を使用せず、番号とタイトルのみでステップを表現するため、省スペースで情報をまとめたい場合に最適です。矢印アイコンでステップの流れを示します。

コンパクトスタイルのプレビュー

矢印アイコンの種類や色、番号の背景色・文字色・文字サイズ、行の背景色などを設定可能です。

コンパクトスタイルの設定画面

円形

円形スタイルは、各ステップのアイコン画像を円形で表示し、横並びに配置するデザインです。各ステップに画像・タイトル・説明文を設定でき、矢印アイコンでステップの流れを表現します。ビジュアル重視で購入手順を伝えたい場合に最適です。

円形スタイルのプレビュー

矢印アイコンの種類、円の大きさ、円の背景色、ステップタイトルの色などをカスタマイズできます。各デザインスタイルとも、必要に応じて「追加 CSS」でさらに細かいスタイル調整も可能です。

円形スタイルの設定画面

すぐ使えるおすすめ設定例

ここからは、実際にコピペで使える設定例を3パターン紹介します。

例1: 物販ストア向けの基本構成

ステップ1「商品を選ぶ」: お気に入りの商品を選んでください
ステップ2「カートに入れる」: 「カートに入れる」ボタンをクリック
ステップ3「注文情報を入力」: お届け先と支払い情報を入力
ステップ4「注文確定」: 内容を確認して注文を確定
ステップ5「商品が届く」: 数日以内にお手元に届きます

例2: サブスクリプション・定期購入ストア向け

ステップ1「プランを選ぶ」: お好みのプランを選択
ステップ2「お届けサイクルを設定」: 配送頻度を選ぶ
ステップ3「お支払い方法を登録」: クレジットカード情報を入力
ステップ4「初回お届け」: 数日以内に初回商品が届きます
ステップ5「定期的にお届け」: 設定した頻度で自動でお届け

例3: ハンドメイド・受注生産ストア向け

ステップ1「ご注文」: 商品を選んで注文
ステップ2「制作開始」: ご注文後、制作を開始します
ステップ3「制作完了のご連絡」: 完成したらメールでご連絡
ステップ4「発送・お届け」: 商品を発送、数日でお届け
ステップ5「ご利用後のお問い合わせ」: 困ったときはお気軽にご連絡を

文言のテンプレ例

「ご利用の流れ」「お買い物の流れ」「ご注文の流れ」「ショッピングガイド」など、ストアの世界観に合わせて言葉選びを変えるのも効果的です。例えば、

カジュアル: 「お買い物の流れ」「使い方」
丁寧: 「ご利用の流れ」「ご注文方法のご案内」
フランク: 「使い方ガイド」「これでカンペキ！買い方ガイド」

テーマのコード編集で実装する場合のサンプルコード

「コードで自分で実装したい」という方のために、Liquid・CSS・JavaScript のサンプルコードを紹介します。

実装の流れ

テーマの sections フォルダに新しい Liquid ファイルを作成
テーマの assets フォルダに CSS ファイルを作成
必要に応じて JavaScript で動きをつける
テーマエディタからセクションを配置

HTML を追加（Liquid ファイル）

sections/user-guide.liquid を作成して以下のコードを記述します。

<section class="user-guide">
  <h2 class="user-guide__title">{{ section.settings.title }}</h2>
  <div class="user-guide__steps">
    {% for block in section.blocks %}
      <div class="user-guide__step" {{ block.shopify_attributes }}>
        <div class="user-guide__step-number">{{ forloop.index }}</div>
        {% if block.settings.image %}
          <img class="user-guide__step-image"
               src="{{ block.settings.image | img_url: '400x' }}"
               alt="{{ block.settings.step_title }}">
        {% endif %}
        <h3 class="user-guide__step-title">{{ block.settings.step_title }}</h3>
        <p class="user-guide__step-desc">{{ block.settings.description }}</p>
        {% unless forloop.last %}
          <span class="user-guide__arrow">→</span>
        {% endunless %}
      </div>
    {% endfor %}
  </div>
</section>

{% schema %}
{
  "name": "ご利用ガイド",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "セクションタイトル",
      "default": "ご利用の流れ"
    }
  ],
  "blocks": [
    {
      "type": "step",
      "name": "ステップ",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "画像"
        },
        {
          "type": "text",
          "id": "step_title",
          "label": "ステップタイトル",
          "default": "ステップタイトル"
        },
        {
          "type": "textarea",
          "id": "description",
          "label": "ステップ説明",
          "default": "ステップの説明文を入れてください"
        }
      ]
    }
  ],
  "max_blocks": 6,
  "presets": [
    {
      "name": "ご利用ガイド",
      "blocks": [
        { "type": "step" },
        { "type": "step" },
        { "type": "step" }
      ]
    }
  ]
}
{% endschema %}

CSS を追加

assets/user-guide.css を作成して以下のスタイルを追加します。theme.liquid の <head> 内に {{ 'user-guide.css' | asset_url | stylesheet_tag }} を追加して読み込みます。

.user-guide {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.user-guide__title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 48px;
  font-weight: bold;
}

.user-guide__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  position: relative;
}

.user-guide__step {
  text-align: center;
  padding: 24px 16px;
  background: #fafafa;
  border-radius: 12px;
  position: relative;
}

.user-guide__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #333;
  color: #fff;
  border-radius: 50%;
  font-weight: bold;
  margin-bottom: 16px;
}

.user-guide__step-image {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-bottom: 16px;
  border-radius: 8px;
}

.user-guide__step-title {
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: bold;
}

.user-guide__step-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.user-guide__arrow {
  display: none;
}

@media (min-width: 769px) {
  .user-guide__arrow {
    display: block;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #999;
  }
}

@media (max-width: 768px) {
  .user-guide__steps {
    grid-template-columns: 1fr;
  }
}

JavaScript を追加

スクロール時のフェードイン効果など、簡単なアニメーションをつけたい場合は assets/user-guide.js に以下を追加します。

document.addEventListener('DOMContentLoaded', function() {
  const steps = document.querySelectorAll('.user-guide__step');

  if (!('IntersectionObserver' in window)) return;

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
      }
    });
  }, { threshold: 0.2 });

  steps.forEach((step) => {
    step.style.opacity = '0';
    step.style.transform = 'translateY(20px)';
    step.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
    observer.observe(step);
  });
});

document.head.insertAdjacentHTML('beforeend', `
  <style>
    .user-guide__step.is-visible {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }
  </style>
`);