Shopifyにご利用ガイドやご利用の流れを簡単に実現できるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプルご利用ガイド｜お手軽購入説明」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプルご利用ガイド｜お手軽購入説明」は、ストアに「ご利用の流れ」セクションを簡単に追加できるアプリです。
アプリを利用することで、あらゆるページに購入手順や利用ステップを分かりやすく設置し、お客様の「買い方が分からない」という不安を解消できます。5 種類のデザインスタイルから選べるうえ、色やフォントサイズ、余白などもノーコードで簡単にカスタマイズできるため、専門知識がない方でもスムーズに導入が可能です。
ご興味のある方は、以下の URL からインストールしてみてください。
「シンプルご利用ガイド｜お手軽購入説明」でできること
Shopify アプリである「シンプルご利用ガイド｜お手軽購入説明」は、以下のようにストア内のあらゆるページに「ご利用の流れ」セクションを設置できるアプリです。
主な特徴は次のとおりです。
- 5 種類のデザインスタイルから選べる
タイムライン・シンプル・カード・コンパクト・円形の 5 種類から、ストアの雰囲気に合ったレイアウトを選択できます。 - 最大 6 ステップまで対応
各ステップにタイトル・説明文・画像を設定でき、購入の流れを分かりやすく伝えられます。 - ノーコードで自由にカスタマイズ
色・フォントサイズ・矢印アイコン・余白などをテーマエディタから簡単に調整できます。 - PC・スマホ両対応
レスポンシブデザインにより、どのデバイスでも最適に表示されます。
これらを活用することで、お客様に購入手順を視覚的に伝え、スムーズなお買い物体験を提供できます。
ご利用の流れをストアに追加できる
あらゆるページに「ご利用の流れ」セクションを挿入できます。トップページや商品ページなど、必要な箇所に簡単に設置して、お客様の購入手順への不安を解消しましょう。
5 種類のデザインから選択できる
タイムライン・シンプル・カード・コンパクト・円形の 5 つのデザインスタイルを用意しています。ストアのブランドイメージに合わせて最適なレイアウトを選べます。
ノーコードで見た目をカスタマイズできる
色・フォントサイズ・矢印アイコン・余白などをテーマエディタからノーコードでカスタマイズできます。HTML や CSS の知識がなくても、簡単にデザインを整えられます。
1 クリックでテーマに追加できる
アプリをインストール後、1 クリックでストアへのご利用ガイドブロックを追加できます。難しいコードの編集作業は一切必要ありません。
シンプルご利用ガイドアプリのインストール
それでは、実際にアプリをインストールしていきましょう。
アプリの料金は、月額 $3.99（7 日間の無料お試し期間あり）となっております。年払いの場合は $39.99/年で 16% お得にご利用いただけます。
ストア管理画面左下の「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。
検索窓に「シンプルご利用ガイド｜お手軽購入説明」と入力し、表示されたアプリをクリックします。
アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。こちらのアプリは月額 $3.99（7 日間の無料お試し期間あり）でご利用いただけます。
「インストールボタン」をクリックすると、必要な権限が表示されますので確認して「インストール」を完了してください。
以下のアプリ管理画面が表示されます。
以上で、アプリのインストールは完了です。
シンプルご利用ガイドのアプリブロックをテーマに追加
アプリ管理画面から「テーマに追加する」ボタンをクリックし、テーマエディタを開きます。
テーマエディタが開いたら、「シンプルご利用ガイド」のセクションが追加されていることを確認してください。
5 種類のデザインスタイルから使いたいセクションを選択して追加します。不要なスタイルのセクションは非表示または削除してください。
以下では、5 種類のデザインスタイルそれぞれの設定項目について解説します。
デザインスタイル 1：タイムライン
タイムラインスタイルは、ステップ番号を円で囲み、縦方向に流れを表現するデザインです。各ステップに画像・タイトル・説明文を設定でき、視覚的に分かりやすく購入手順を伝えられます。
コンテンツ設定
| 設定項目 | 説明 |
|---|---|
| セクションタイトル | セクション全体の見出しを設定します（例：「ご利用の流れ」）。 |
| ステップラベルのテンプレート | 各ステップのラベル表示形式を設定します（例：Step 0[step_number]）。[step_number] の部分にステップ番号が自動挿入されます。 |
| ステップ番号のテンプレート | 円の中に表示される番号の形式を設定します（例：0[step_number]）。 |
| ステップ 1〜5 番号画像 | 各ステップに表示するアイコン画像を設定します。 |
| ステップ 1〜5 タイトル | 各ステップの見出しを設定します（例：「商品を選ぶ」「カートに入れる」）。 |
| ステップ 1〜5 説明文 | 各ステップの補足説明を設定します（例：「お好みの商品をお選びください。」）。 |
スタイル設定
| 設定項目 | 説明 |
|---|---|
| 円の大きさ | ステップ番号を囲む円のサイズを px 単位で設定します（デフォルト：80px）。 |
| 円の背景色 | 円の背景色を設定します（デフォルト：#F0E4F2）。 |
色設定
| 設定項目 | 説明 |
|---|---|
| ステップラベルの色 | 「Step 01」などのラベルテキストの色を設定します（デフォルト：#B481BB）。 |
| ステップタイトルの色 | ステップの見出しテキストの色を設定します（デフォルト：#333333）。 |
レイアウト設定
| 設定項目 | 説明 |
|---|---|
| ステップ間の余白 | 各ステップ間の余白を px 単位で設定します（デフォルト：32px）。 |
| 上部余白 PC | PC 表示時のセクション上部の余白を設定します。 |
| 下部余白 PC | PC 表示時のセクション下部の余白を設定します。 |
| 上部余白 モバイル | モバイル表示時のセクション上部の余白を設定します。 |
| 下部余白 モバイル | モバイル表示時のセクション下部の余白を設定します。 |
追加設定
「追加 CSS」で設定項目以外に CSS を使って見た目をカスタマイズすることができます。直接 CSS のコードを入力してください。クラス名などは検証を利用して取得してください。
デザインスタイル 2：シンプル
シンプルスタイルは、円の中にステップ番号を表示し、接続線でつなぐミニマルなデザインです。画像を使用せず、タイトルのみでステップを表現するため、すっきりとした見た目になります。
コンテンツ設定
| 設定項目 | 説明 |
|---|---|
| セクションタイトル | セクション全体の見出しを設定します（例：「ご利用の流れ」）。 |
| ステップ番号のテンプレート | 円の中に表示される番号の形式を設定します（例：0[step_number]）。 |
| ステップ 1〜5 タイトル | 各ステップの見出しを設定します（例：「お好みの商品をお選びください。」）。 |
スタイル設定
| 設定項目 | 説明 |
|---|---|
| 円の大きさ | ステップ番号を囲む円のサイズを px 単位で設定します（デフォルト：40px）。 |
| 円の背景色 | 円の背景色を設定します（デフォルト：#F0E4F2）。 |
| 円の文字の大きさ | 円の中の番号のフォントサイズを設定します（デフォルト：14px）。 |
色設定
| 設定項目 | 説明 |
|---|---|
| 円の文字色 | 円の中の番号テキストの色を設定します（デフォルト：#B481BB）。 |
| 接続線の色 | ステップ間をつなぐ線の色を設定します（デフォルト：#D8C4DB）。 |
| テキストの色 | ステップタイトルのテキスト色を設定します（デフォルト：#333333）。 |
| テキストの文字の大きさ | ステップタイトルのフォントサイズを設定します（デフォルト：15px）。 |
| セクションの背景色 | セクション全体の背景色を設定します（デフォルト：#FFFFFF）。 |
レイアウト設定
| 設定項目 | 説明 |
|---|---|
| ステップ間の余白 | 各ステップ間の余白を px 単位で設定します（デフォルト：24px）。 |
| 上部余白 PC | PC 表示時のセクション上部の余白を設定します。 |
| 下部余白 PC | PC 表示時のセクション下部の余白を設定します。 |
| 上部余白 モバイル | モバイル表示時のセクション上部の余白を設定します。 |
| 下部余白 モバイル | モバイル表示時のセクション下部の余白を設定します。 |
追加設定
「追加 CSS」で設定項目以外に CSS を使って見た目をカスタマイズすることができます。直接 CSS のコードを入力してください。クラス名などは検証を利用して取得してください。
デザインスタイル 3：カード
カードスタイルは、各ステップをカード形式で表示し、矢印アイコンでステップ間のつながりを表現するデザインです。各ステップに画像とタイトルを設定でき、バッジ付きで視認性の高い見た目になります。
コンテンツ設定
| 設定項目 | 説明 |
|---|---|
| セクションタイトル | セクション全体の見出しを設定します（例：「ご利用の流れ」）。 |
| ステップラベルのテンプレート | 各ステップのラベル表示形式を設定します（例：STEP [step_number]）。 |
| ステップ 1〜5 画像 | 各ステップに表示する画像を設定します。 |
| ステップ 1〜5 タイトル | 各ステップの見出しを設定します（例：「商品を選ぶ」「カートに入れる」）。 |
スタイル設定
| 設定項目 | 説明 |
|---|---|
| 画像の大きさ | ステップ画像のサイズを px 単位で設定します（デフォルト：80px）。 |
| 矢印アイコン | ステップ間に表示する矢印の種類を選択します（デフォルト：矢印）。 |
| 矢印の色 | 矢印アイコンの色を設定します（デフォルト：#D8C4DB）。 |
色設定
| 設定項目 | 説明 |
|---|---|
| カードの枠線の色 | カードの枠線の色を設定します（デフォルト：#B481BB）。 |
| カードの背景色 | カードの背景色を設定します（デフォルト：#FFFFFF）。 |
| バッジの背景色 | ステップ番号バッジの背景色を設定します（デフォルト：#F0E4F2）。 |
| バッジの文字色 | ステップ番号バッジの文字色を設定します（デフォルト：#B481BB）。 |
| ステップタイトルの色 | ステップの見出しテキストの色を設定します（デフォルト：#333333）。 |
レイアウト設定
| 設定項目 | 説明 |
|---|---|
| ステップ間の余白 | 各ステップ間の余白を px 単位で設定します（デフォルト：16px）。 |
| 上部余白 PC | PC 表示時のセクション上部の余白を設定します。 |
| 下部余白 PC | PC 表示時のセクション下部の余白を設定します。 |
| 上部余白 モバイル | モバイル表示時のセクション上部の余白を設定します。 |
| 下部余白 モバイル | モバイル表示時のセクション下部の余白を設定します。 |
追加設定
「追加 CSS」で設定項目以外に CSS を使って見た目をカスタマイズすることができます。直接 CSS のコードを入力してください。クラス名などは検証を利用して取得してください。
デザインスタイル 4：コンパクト
コンパクトスタイルは、番号付きのリスト形式でステップを表示するデザインです。画像を使用せず、番号とタイトルのみでステップを表現するため、省スペースで情報をまとめたい場合に最適です。矢印アイコンでステップの流れを示します。
コンテンツ設定
| 設定項目 | 説明 |
|---|---|
| セクションタイトル | セクション全体の見出しを設定します（例：「ご利用の流れ」）。 |
| ステップ番号のテンプレート | 番号の表示形式を設定します（例：[step_number]）。 |
| ステップ 1〜5 タイトル | 各ステップの見出しを設定します（例：「お好みの商品をお選びください。」）。 |
スタイル設定
| 設定項目 | 説明 |
|---|---|
| 矢印アイコン | ステップ間に表示する矢印の種類を選択します（デフォルト：三角形）。 |
| 矢印の色 | 矢印アイコンの色を設定します（デフォルト：#B481BB）。 |
色設定
| 設定項目 | 説明 |
|---|---|
| 番号の背景色 | ステップ番号の背景色を設定します（デフォルト：#B481BB）。 |
| 番号の文字色 | ステップ番号の文字色を設定します（デフォルト：#FFFFFF）。 |
| 番号の文字の大きさ | ステップ番号のフォントサイズを設定します（デフォルト：24px）。 |
| 行の背景色 | 各ステップの行の背景色を設定します（デフォルト：#F7F0F8）。 |
| テキストの色 | ステップタイトルのテキスト色を設定します（デフォルト：#333333）。 |
| テキストの文字の大きさ | ステップタイトルのフォントサイズを設定します（デフォルト：15px）。 |
| セクションの背景色 | セクション全体の背景色を設定します（デフォルト：#FFFFFF）。 |
レイアウト設定
| 設定項目 | 説明 |
|---|---|
| ステップ間の余白 | 各ステップ間の余白を px 単位で設定します（デフォルト：0px）。 |
| 上部余白 PC | PC 表示時のセクション上部の余白を設定します。 |
| 下部余白 PC | PC 表示時のセクション下部の余白を設定します。 |
| 上部余白 モバイル | モバイル表示時のセクション上部の余白を設定します。 |
| 下部余白 モバイル | モバイル表示時のセクション下部の余白を設定します。 |
追加設定
「追加 CSS」で設定項目以外に CSS を使って見た目をカスタマイズすることができます。直接 CSS のコードを入力してください。クラス名などは検証を利用して取得してください。
デザインスタイル 5：円形
円形スタイルは、各ステップのアイコン画像を円形で表示し、横並びに配置するデザインです。各ステップに画像・タイトル・説明文を設定でき、矢印アイコンでステップの流れを表現します。ビジュアル重視で購入手順を伝えたい場合に最適です。
コンテンツ設定
| 設定項目 | 説明 |
|---|---|
| セクションタイトル | セクション全体の見出しを設定します（例：「ご利用の流れ」）。 |
| ステップ番号のテンプレート | 番号の表示形式を設定します（例：0[step_number]）。 |
| ステップ 1〜5 番号画像 | 各ステップに表示する円形のアイコン画像を設定します。 |
| ステップ 1〜5 タイトル | 各ステップの見出しを設定します（例：「商品を選ぶ」「カートに入れる」）。 |
| ステップ 1〜5 説明文 | 各ステップの補足説明を設定します。 |
スタイル設定
| 設定項目 | 説明 |
|---|---|
| 矢印アイコン | ステップ間に表示する矢印の種類を選択します（デフォルト：矢印）。 |
| 円の大きさ | 円形アイコンのサイズを px 単位で設定します（デフォルト：100px）。 |
| 円の背景色 | 円形アイコンの背景色を設定します（デフォルト：#F0E4F2）。 |
色設定
| 設定項目 | 説明 |
|---|---|
| ステップタイトルの色 | ステップの見出しテキストの色を設定します（デフォルト：#333333）。 |
レイアウト設定
| 設定項目 | 説明 |
|---|---|
| ステップ間の余白 | 各ステップ間の余白を px 単位で設定します（デフォルト：16px）。 |
| 上部余白 PC | PC 表示時のセクション上部の余白を設定します。 |
| 下部余白 PC | PC 表示時のセクション下部の余白を設定します。 |
| 上部余白 モバイル | モバイル表示時のセクション上部の余白を設定します。 |
| 下部余白 モバイル | モバイル表示時のセクション下部の余白を設定します。 |
追加設定
「追加 CSS」で設定項目以外に CSS を使って見た目をカスタマイズすることができます。直接 CSS のコードを入力してください。クラス名などは検証を利用して取得してください。
おわりに
今回は「シンプルご利用ガイド｜お手軽購入説明」の解説を行いました。
- 5 種類のデザインスタイル（タイムライン・シンプル・カード・コンパクト・円形）からストアに合ったレイアウトを選択可能
- 最大 6 ステップまで対応し、タイトル・説明文・画像を自由に設定
- 月額 $3.99（7 日間の無料お試し期間あり）で利用可能
「ご利用の流れ」セクションを設置することで、お客様の購入手順への不安を解消し、スムーズなお買い物体験を提供しましょう。
ここまでお読みいただき、誠にありがとうございました。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
