2026/02/03

Shopifyで複数画像スライドショーを実現できるアプリ7選を紹介！

@ 信条刃

今回の記事は Shopify App Store で提供されている、「複数の画像を一度に表示できるスライドショー（カルーセル）アプリ」についての記事です。

「スライドショー＝1枚ずつ切り替わるバナー」というイメージが強いですが、最近は PC で“複数枚を横並び” にしつつ、次の画像が少し見切れる（peek） ことで「続きが気になる」導線を作れるタイプが人気です。コレクション誘導・新作訴求・ブランドロゴ訴求など、見せたい画像が複数あるストアほど相性が良いです。

スライドショーアプリについて調べるにあたり、以下の公式ドキュメントも参考にしています。（実装パートで使います）

Shopify テーマのセクション/ブロック（Theme Sections）
Theme App Extensions（アプリブロック）
Liquid の画像出力（image_url / image_tag）

（URL が必要な場合は、末尾の「参考記事」にまとめています）

複数画像スライドショーとは

複数画像スライドショーは、ストアの任意の場所（トップ、コレクション、商品詳細、ブログなど）で、複数の画像を 横スクロール（カルーセル） や ローテーション（自動切り替え） で見せる UI です。

特に「複数の画像を一度に表示できる」タイプは、次のような見せ方が得意です。

PC では 3〜6 枚を横並び表示し、一覧性を上げる
右端をあえて見切れさせて “続きがある” ことを視覚的に伝える
各画像にリンクをつけて、特集ページ（新作/セール/コレクション）へ誘導する
モバイルはスワイプで直感的に閲覧させる

「画像が1枚だけ」だと訴求が単発になりますが、複数枚を並べられると 回遊を促す導線 を作りやすくなります。

複数画像スライドショーを導入する利点

複数画像スライドショーの導入により得られる利点について解説します。

回遊率の向上
画像が複数並ぶことで「他にもある」ことが直感的に伝わり、スクロール/スワイプが増えやすくなります。結果として、コレクションや特集ページへの遷移が増えます。
訴求の“並列化”ができる
新作・セール・定番・ランキングなど、伝えたい要素が複数あるストアほど、1枠でまとめて見せられるのは強いです。
クリック導線を作りやすい
スライドごとにリンク設定ができると、画像＝メニューになります。トップの「特集導線」が作りやすいです。
コンバージョンに近い導線へ短縮できる
「画像 → 商品一覧 → 商品詳細」のように、入口から購入候補までの距離を短くできます。
ブランド体験の統一感が出る
画像のトーンや余白、角丸、影などを揃えることで、ストア全体の見た目が整い“きちんと感”が出ます。
モバイル UX と相性が良い
スワイプ操作はモバイルで自然です。バナーより“触れるUI”として認知されやすいです。
季節施策・キャンペーンの運用がしやすい
スライド差し替えやスケジュール機能（アプリによる）で、季節ごとの運用が楽になります。
分析・改善に繋げやすい
クリック数や表示数（アプリによる）を見て、どの訴求が効いたか改善できます。

スライドショーアプリの選び方

複数画像スライドショーアプリを選ぶ際には、「見せ方」と「運用のしやすさ」をセットで見るのが重要です。以下に、選定時に重視すべきポイントをまとめます。

PC で複数枚を横並び表示できる
見切れ（peek）表示ができる、または幅調整でそれっぽく作れる
画像ごとにリンク設定ができる（コレクション/商品/外部URLなど）
レスポンシブ（デバイス別に表示枚数や余白を調整できる）
テキストの重ね表示（キャプション）に対応している
速度・表示の軽さ（表示が重いと離脱に直結）
ノーコードで完結するか、必要ならコードで微調整できるか
日本語対応（管理画面の翻訳・サポート言語）は必要か
無料枠の範囲（画像枚数、スライドショー数、表示回数の上限など）

「まず失敗したくない」なら、日本語対応 + ノーコードで設置できる アプリから入るのが無難です。逆に、LP をガッツリ作り込みたいなら、テンプレートが豊富なビルダー系が強いです。

コーディングで複数画像スライドショーを実装する方法

アプリが便利なのは前提として、「まずは軽く試したい」「アプリを増やしたくない」「デザインを細かく揃えたい」場合は、テーマにセクションを追加して自作するのも有効です。

ここでは、複数枚を横並び表示し、スワイプ/横スクロールでき、矢印ボタンで移動できる簡易カルーセルを、Shopify テーマのセクションとして実装します。
（“見切れ表示”も、設定でそれっぽく作れるようにしています）

追加手順

管理画面 → オンラインストア → テーマ → 「…」→ コードを編集
sections に multi-image-carousel.liquid を新規作成
下のコードを貼り付け
テーマエディタで「セクションを追加」→「マルチ画像カルーセル」を選択
ブロックで画像を追加し、必要ならリンクも設定

セクションコード（そのまま使えます）

{% comment %}
  マルチ画像カルーセル（簡易版）
  - PCは複数枚を横並び表示
  - モバイルはスワイプ
  - 矢印でスライド移動
  - 画像にリンク設定可
{% endcomment %}

<section id="ur-carousel-{{ section.id }}" class="ur-carousel" data-ur-carousel>
  {% if section.settings.title != blank %}
    <h2 class="ur-carousel__title">{{ section.settings.title | escape }}</h2>
  {% endif %}

  <div class="ur-carousel__frame">
    <button class="ur-carousel__nav ur-carousel__nav--prev" type="button" aria-label="前へ" data-ur-carousel-prev>
      ‹
    </button>

    <div class="ur-carousel__track" data-ur-carousel-track tabindex="0" aria-label="画像カルーセル">
      {% for block in section.blocks %}
        {% assign img = block.settings.image %}
        <div class="ur-carousel__item" {{ block.shopify_attributes }}>
          {% if img != blank %}
            {% capture image_markup %}
              {{
                img
                | image_url: width: 1600
                | image_tag:
                  loading: 'lazy',
                  widths: '360, 540, 720, 900, 1200, 1600',
                  sizes: '(min-width: 990px) 25vw, (min-width: 750px) 33vw, 80vw',
                  alt: block.settings.alt_text
              }}
            {% endcapture %}

            {% if block.settings.link != blank %}
              <a class="ur-carousel__link" href="{{ block.settings.link }}">
                {{ image_markup }}
              </a>
            {% else %}
              {{ image_markup }}
            {% endif %}

            {% if block.settings.caption != blank %}
              <p class="ur-carousel__caption">{{ block.settings.caption | escape }}</p>
            {% endif %}
          {% else %}
            <div class="ur-carousel__placeholder">
              画像を設定してください
            </div>
          {% endif %}
        </div>
      {% endfor %}
    </div>

    <button class="ur-carousel__nav ur-carousel__nav--next" type="button" aria-label="次へ" data-ur-carousel-next>
      ›
    </button>
  </div>
</section>

<style>
  #ur-carousel-{{ section.id }} {
    --gap: {{ section.settings.gap }}px;
    --radius: {{ section.settings.radius }}px;

    /* 表示枚数（ブレイクポイントで切替） */
    --per-view: {{ section.settings.per_view_mobile }};
    --peek-extra: {% if section.settings.peek %}0.35{% else %}0{% endif %};
  }

  @media (min-width: 750px) {
    #ur-carousel-{{ section.id }} { --per-view: {{ section.settings.per_view_tablet }}; }
  }
  @media (min-width: 990px) {
    #ur-carousel-{{ section.id }} { --per-view: {{ section.settings.per_view_desktop }}; }
  }

  #ur-carousel-{{ section.id }} .ur-carousel__title {
    margin: 0 0 12px;
    font-size: 1.4em;
    line-height: 1.3;
  }

  #ur-carousel-{{ section.id }} .ur-carousel__frame {
    position: relative;
  }

  #ur-carousel-{{ section.id }} .ur-carousel__track {
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 2px;
    -webkit-overflow-scrolling: touch;

    /* スクロールバーを目立たせない（完全非表示はしない） */
    scrollbar-width: thin;
  }

  #ur-carousel-{{ section.id }} .ur-carousel__item {
    scroll-snap-align: start;
    flex: 0 0 calc(100% / (var(--per-view) + var(--peek-extra)));
  }

  #ur-carousel-{{ section.id }} img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
  }

  #ur-carousel-{{ section.id }} .ur-carousel__link {
    display: block;
    text-decoration: none;
  }

  #ur-carousel-{{ section.id }} .ur-carousel__caption {
    margin: 8px 0 0;
    font-size: 0.95em;
    line-height: 1.4;
  }

  #ur-carousel-{{ section.id }} .ur-carousel__placeholder {
    border: 1px dashed rgba(0,0,0,.2);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
  }

  #ur-carousel-{{ section.id }} .ur-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.15);
    background: rgba(255,255,255,.9);
    cursor: pointer;
  }

  #ur-carousel-{{ section.id }} .ur-carousel__nav--prev { left: 6px; }
  #ur-carousel-{{ section.id }} .ur-carousel__nav--next { right: 6px; }

  /* モバイルはスワイプ中心にして矢印を控えめに */
  @media (max-width: 749px) {
    #ur-carousel-{{ section.id }} .ur-carousel__nav { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    #ur-carousel-{{ section.id }} .ur-carousel__track { scroll-behavior: auto; }
  }
</style>

<script>
  (function () {
    const root = document.querySelector('#ur-carousel-{{ section.id }}[data-ur-carousel]');
    if (!root) return;

    const track = root.querySelector('[data-ur-carousel-track]');
    const prev = root.querySelector('[data-ur-carousel-prev]');
    const next = root.querySelector('[data-ur-carousel-next]');
    const item = root.querySelector('.ur-carousel__item');

    if (!track || !prev || !next || !item) return;

    function step() {
      const rect = item.getBoundingClientRect();
      const gap = parseFloat(getComputedStyle(track).gap || '0');
      return rect.width + gap;
    }

    prev.addEventListener('click', () => {
      track.scrollBy({ left: -step(), behavior: 'smooth' });
    });

    next.addEventListener('click', () => {
      track.scrollBy({ left: step(), behavior: 'smooth' });
    });
  })();
</script>

{% schema %}
{
  "name": "マルチ画像カルーセル",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "見出し",
      "default": "おすすめ"
    },
    {
      "type": "checkbox",
      "id": "peek",
      "label": "見切れ（次の画像を少し表示）を有効にする",
      "default": true
    },
    {
      "type": "range",
      "id": "per_view_desktop",
      "min": 2,
      "max": 6,
      "step": 1,
      "label": "PCで同時に見せる枚数",
      "default": 4
    },
    {
      "type": "range",
      "id": "per_view_tablet",
      "min": 1,
      "max": 4,
      "step": 1,
      "label": "タブレットで同時に見せる枚数",
      "default": 3
    },
    {
      "type": "range",
      "id": "per_view_mobile",
      "min": 1,
      "max": 2,
      "step": 1,
      "label": "モバイルで同時に見せる枚数",
      "default": 1
    },
    {
      "type": "range",
      "id": "gap",
      "min": 0,
      "max": 24,
      "step": 1,
      "label": "画像の間隔（px）",
      "default": 12
    },
    {
      "type": "range",
      "id": "radius",
      "min": 0,
      "max": 24,
      "step": 1,
      "label": "角丸（px）",
      "default": 12
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "スライド",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "画像"
        },
        {
          "type": "url",
          "id": "link",
          "label": "リンク先URL（任意）"
        },
        {
          "type": "text",
          "id": "caption",
          "label": "キャプション（任意）",
          "default": ""
        },
        {
          "type": "text",
          "id": "alt_text",
          "label": "代替テキスト（alt）",
          "default": ""
        }
      ]
    }
  ],
  "max_blocks": 12,
  "presets": [
    {
      "name": "マルチ画像カルーセル"
    }
  ]
}
{% endschema %}

実装のポイント

画像は loading: 'lazy' で遅延読み込みし、表示を重くしにくくしています
PC/タブレット/モバイルで「同時に見せる枚数」を変えられます
「見切れ表示」は --peek-extra で“少しだけ次が見える幅”を作っています
リンクを入れれば、画像がそのまま導線（特集/コレクション）になります

アプリを入れるか迷うときでも、このセクションでまず“置いたときの効果”を確認してから判断すると失敗が減ります。

価格比較

「複数画像を見せたい」という目的で、各アプリの始めやすさをざっくり整理します。（テーブルは使わず箇条書きでまとめます）

シンプル複数画像スライドショー｜お手軽イメージカルーセル
$4.99/月（7日無料体験）
Image Slider Pro
無料プランあり（スライドショー1つ/画像5枚まで）
有料は $6.99/月〜（7日無料体験）
Image & Video Slider
無料プランあり（スライダー3つ）
有料は $4.99/月または $35.99/年
TA Banner Slider, Sales Pop up
無料プランあり（〜2,000 views/月）
有料は $9.99/月〜（7日無料体験）
スライダー革命: ランディングページビルダーとセクション
$4.99/月〜（7日無料体験）
DC: Image Slideshow Slider
無料
Qikify Slide Cart Drawer
無料プランあり
有料は $14.99/月〜（7日無料体験）

「画像カルーセルだけ欲しい」のか、「販促バナー運用までまとめたい」のか、「LP を作り込みたい」のかで、最適解が変わります。

Shopify アプリの日本語サポート

日本語サポート（少なくともアプリ UI が日本語対応しているか）は、運用効率に直結します。翻訳しながら設定すると、地味に時間が溶けます。

日本語対応あり
- シンプル複数画像スライドショー｜お手軽イメージカルーセル（日本語を含む多言語対応）
日本語未翻訳（英語）
- Image Slider Pro
- Image & Video Slider
- TA Banner Slider, Sales Pop up
- スライダー革命: ランディングページビルダーとセクション
- DC: Image Slideshow Slider
- Qikify Slide Cart Drawer

「スタッフ全員が英語UIでも問題ない」なら選択肢は広がりますが、運用担当が複数いるストアほど、日本語対応の価値は大きいです。

使いやすさ

複数画像スライドショー用途で、管理画面の言語面も含めて「シンプルに使いやすい」のは、現状だと 「シンプル複数画像スライドショー｜お手軽イメージカルーセル」 です。

見切れ表示という“今っぽい要件”が最初から満たせる
ノーコードで設置・調整できる
日本語対応で、設定時のストレスが少ない
価格も $4.99/月で始めやすい

一方で、バナー運用・分析・ポップアップまで含めるなら TA、LP を作り込むならスライダー革命、動画を混ぜるなら Image & Video Slider、カートで AOV を伸ばすなら Qikify…というように、目的別に選ぶのがベストです。

終わりに

今回は、Shopify の「複数の画像を一度に表示できるスライドショー（カルーセル）アプリ 7選」を紹介しました。

どのアプリをインストールするか迷っている場合は、まずは次の順番で検討すると選びやすいです。

見せたい場所はどこか（トップ / コレクション / 商品 / カート）
何を見せたいか（特集バナー / ルックブック / ロゴ / 動画 / 関連商品）
運用担当は英語UIでも問題ないか
まず無料枠で検証するか、最初から有料で最短ルートを取るか

また、「アプリを増やさずにまず試したい」場合は、記事内のセクションコードで簡易カルーセルを作って、クリック率や回遊が伸びるかを見てからアプリ導入するのもおすすめです。

ここまでお付き合い頂き、誠にありがとうございました。

@ 信条刃

Shopify

サイトTOP お問い合わせ

Shopifyで複数画像スライドショーを実現できるアプリ7選を紹介！

複数画像スライドショーとは

複数画像スライドショーを導入する利点

スライドショーアプリの選び方

おすすめの複数画像スライドショー Shopify アプリ7選

シンプル複数画像スライドショー｜お手軽イメージカルーセル ☆ 迷ったらこれ

特徴・機能

価格設定

Image Slider Pro

特徴・機能

価格設定

Image & Video Slider

特徴・機能

価格設定

TA Banner Slider, Sales Pop up（Built for Shopify）

特徴・機能

価格設定

スライダー革命: ランディングページビルダーとセクション

特徴・機能

価格設定

DC: Image Slideshow Slider

特徴・機能

価格設定

Qikify Slide Cart Drawer（Built for Shopify）

特徴・機能

価格設定

コーディングで複数画像スライドショーを実装する方法

追加手順

セクションコード（そのまま使えます）

実装のポイント

価格比較

Shopify アプリの日本語サポート

使いやすさ

終わりに

最新の記事

目次

関連タグ

Shopifyで複数画像スライドショーを実現できるアプリ7選を紹介！

Shopifyで割引率表示を実現できるアプリ7選を紹介！

Shopifyのブログ記事タグを一覧で表示できるアプリを6つ紹介！

Shopify で商品説明タブを表示できるアプリを5つ紹介！

Shopify で決済アイコンを表示できるアプリを5つ紹介！

Shopify でスマホナビゲーションを表示できるアプリを8つ紹介！