Shopifyストアに複数画像のスライドショーを表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである 「シンプル複数画像スライドショー｜お手軽イメージカルーセル」 のご利用ガイドです。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築できるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識いただいて大丈夫です。
「シンプル複数画像スライドショー｜お手軽イメージカルーセル」は、ストア内の好きな場所に “見切れ表示つき” の画像スライダー（カルーセル） を追加できるアプリです。
次の画像が少し見えることで「続きが気になる」視覚効果が生まれ、スクロールや回遊を促しながら 特集ページ・新作・セール・コレクション などへ自然に誘導できます。
ご興味のある方は、以下の URL からインストールしてみてください。
シンプル複数画像スライドショー｜お手軽イメージカルーセル（Shopify アプリストア）
料金は Basic Plan：$4.99/月（1 週間の無料期間あり） です。
「シンプル複数画像スライドショー｜お手軽イメージカルーセル」でできること
Shopify アプリである「シンプル複数画像スライドショー｜お手軽イメージカルーセル」は、ストア内の好きな場所に 見切れ表示つきの画像スライダー を追加し、さらに 各スライドにリンク を付けて回遊導線を作れるアプリです。
主な特徴は次のとおりです。
- 見切れ表示つきスライダーをノーコードで設置
コード編集なしで、ストアにモダンなカルーセルを追加できます。 - スライドごとにリンク設定ができる
商品・コレクション・ブログ・任意の URL などへ誘導し、回遊導線を整えられます。 - 2 種類のデザインから選べる
表現したい雰囲気に合わせて、ブロックデザインを切り替え可能です。 - レイアウトや矢印、余白などを簡単に調整できる
ストアのトーンに合わせた見た目の統一がしやすくなります。
以下で、できることをもう少し具体的に見ていきます。
複数の画像を左右に見切れさせて表示できる
複数画像をスライド表示し、さらに「次の画像が少し見える」レイアウトにできます。
特集やカテゴリの導線を作るときに、“続きが気になる” きっかけ を作りやすいのがポイントです。
スライドショーは 2 つのデザインから選べる
アプリブロックは 2 種類のデザイン を選択できます。
（テーマやブランドの雰囲気に合わせて、フラット寄り／アクセント寄りなどを使い分けるイメージです）
ノーコードでカスタマイズできる
画像の比率、矢印の見た目、角丸、余白、オートスライドなどを 管理画面の設定だけで調整できます。
ストア全体のデザインに合わせて、統一感を出しやすいのが魅力です。
1 クリックでテーマに追加できる
アプリをインストール後、1 クリックでテーマに追加できるため、初期導入がスムーズです。
アプリのインストール
それでは、実際にアプリをインストールしていきましょう。
シンプル複数画像スライドショー｜お手軽イメージカルーセル（インストール）
アプリの料金は Basic Plan：$4.99/月（1 週間の無料期間あり） です。
- Shopify 管理画面左下の「設定」をクリックします。
- 「アプリ」から「Shopify App Store」を開きます。
- 検索窓で「シンプル複数画像スライドショー｜お手軽イメージカルーセル」を検索し、表示されたアプリを開きます。
- アプリ詳細画面で「インストール」をクリックし、権限を確認してインストールを完了します。
以上で、アプリのインストールは完了です。
アプリブロックをテーマに追加
インストールができたら、次はストア上にカルーセルを表示するために、テーマへアプリブロックを追加します。
自動でテーマに追加（1 クリック）
アプリ管理画面（アプリを開いた画面）から、テーマに追加する導線が用意されている場合は、こちらが最も簡単です。
- Shopify 管理画面で本アプリを開きます
- 「テーマを選択」から追加したいテーマを選びます
- 「テーマに追加」をクリックします
- テーマエディタが開いたら「保存」して完了です
手動でテーマに追加（ハイライト型・フラット型を好きなページ・好きな場所に設置）
フラット型のスライドショーを追加したい場合や、TOP ページ以外（商品ページ、コレクションページ、ブログなど）に設置したい場合は、テーマエディタから手動追加がおすすめです。
-
Shopify 管理画面 →「オンラインストア」→「テーマ」→「カスタマイズ」を開きます
-
追加したいページ（テンプレート）へ移動します
-
「セクションを追加」または「ブロックを追加」をクリックし、「アプリ」から本アプリのブロックを選んで追加します
- デザインとして 「フラット型」/「ハイライト型」 を選択できます
-
設定を整えて「保存」します
アプリブロックのカスタマイズ
テーマにアプリブロックを追加したら、テーマエディタの設定パネルからカスタマイズできます。
本アプリはデザインが 2 種類あるため、ブロック（フラット型／ハイライト型）によって一部設定項目が異なります。
▼ フラット型の設定項目
▼ ハイライト型の設定項目
以下、設定項目をまとめて解説します。
画像設定
画像 1〜画像 5 の枠があり、スライダーに表示する画像を設定できます。
- 画像 1〜画像 5：表示したい画像を選択します
- リンク 1〜リンク 5：各画像をクリックしたときの遷移先を設定します
- リンクを新しいタブで開く：ON にすると、クリック時に別タブで開きます
活用例：
- 新作コレクション／セール会場／ランキングページなど、目的別にリンクを割り当てる
- バナー的に使い、**回遊導線（次に見てほしいページ）**を明確にする
スタイル設定
デザインやストアのトーンに合わせて、見た目・動きを調整できます。
画像のアスペクト比
画像の縦横比を選択できます。
商品写真の比率や、スマホでの見え方に合わせて調整すると統一感が出やすいです。
スライドの高さ（フラット型）
フラット型には 「スライドの高さ」 があり、px 単位で高さを揃えられます。
複数画像を並べたときに、段差が出にくくなります。
スライドの間隔（フラット型）
フラット型には 「スライドの間隔」 があり、画像同士の距離を調整できます。
余白感を出したい／詰めて一覧っぽく見せたい、など用途で変えられます。
矢印のスタイル・色・大きさ
- 矢印のスタイル：スリム矢印／丸型矢印（塗り）などから選択
- 矢印の色：カラーピッカーで設定可能
- 矢印の大きさ：px 単位で調整可能
ストアの UI に合わせて、主張しすぎない色・サイズにすると馴染みやすいです。
角の丸み
画像の角丸を調整できます。
角丸を統一すると、ストア全体のトーンが整いやすくなります。
自動スライドのスピード（秒）
オートスライドの速度を秒で設定できます。
- 0 に設定すると自動スライドが停止します
- 負の値を設定すると、指定秒数で逆方向にスライドします
「手動で見せたい場合は 0」「ゆっくり流したい場合は 4〜8 秒」など、見せ方に合わせて調整するのがおすすめです。
余白設定
ブロックの上下余白を PC／スマホで個別に設定できます。
- 上部の余白（PC）
- 上部の余白（スマホ）
- 下部の余白（PC）
- 下部の余白（スマホ）
セクション間が詰まりすぎている場合は余白を足し、間延びしている場合は余白を減らすと、読みやすいレイアウトになります。
その他の設定
追加の CSS
設定項目だけでは調整しきれない場合、追加 CSS で上書きが可能です。
設定画面の説明の通り、検証ツールなどでクラス名を確認して CSS を当てる運用になります。
おわりに
今回は「シンプル複数画像スライドショー｜お手軽イメージカルーセル」の解説を行いました。
- 見切れ表示つきカルーセルで、視線を引きつけながら回遊を促進
- スライドごとにリンク設定ができ、特集・新作・セールページへ誘導しやすい
- 2 種類のデザイン＋ノーコード設定で、ストアの雰囲気に合わせて調整可能
- **Basic Plan：$4.99/月（1 週間無料）**で導入しやすい
ストアの回遊導線を整えたい方、特集やキャンペーンを目立たせたい方は、ぜひ活用してみてください。
シンプル複数画像スライドショー｜お手軽イメージカルーセル（インストール）
.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}
