2026/05/09

Shopifyにタブ切り替え式の画像スライドショーを設置できるアプリ6選！商品の特徴を整理して見せる方法

@ 信条刃

今回の記事は Shopify App Store で提供されている、タブ切り替え式の画像スライドショーを商品ページやホームページに設置できるアプリについての記事です。商品の特徴を「サイズ別」「カラー別」「特徴別」などのタブで整理して見せたい Shopify ストア運営者の方に役立つ内容となっています。

タブ切り替え式の画像スライドショーとは

タブ切り替え式の画像スライドショーとは、複数の画像をラベル付きのタブで分類しながら表示できる UI コンポーネントのことです。一般的な自動再生型のスライドショーと異なり、お客様が見たいタブを直接クリックして画像を切り替えることができます。

たとえばアパレル商品なら「カラー別」「サイズ別」「コーディネート例」、家電なら「正面」「背面」「使用シーン」、コスメなら「使用前」「使用後」「成分」など、商品の特徴を整理してコンパクトに伝えるのに最適です。商品ページの縦の長さを抑えながら、お客様が見たい情報にすぐにアクセスできるため、コンバージョン率の向上にも貢献します。

タブ切り替え式の画像スライドショーアプリについて調べるにあたり、以下の記事を参考にしています。

タブ切り替え式の画像スライドショーを導入する利点

商品の特徴を整理して伝えられる
タブごとに画像を分類できるので、商品ページの情報がスッキリと整理された印象になります。お客様にとっても情報が探しやすくなり、購買意欲を高めることができます。
ページの縦の長さを抑えられる
通常なら縦に並べる必要がある複数の画像を、1 枚分のスペースで全て表示できます。スマホでのスクロール量が大きく減るため、ストレスなく商品ページを閲覧してもらえます。
ユーザーが能動的に情報を選べる
自動スライドの場合は受動的に画像を見ることになりますが、タブ切り替え式ならお客様が「見たい情報」を能動的に選べます。商品への関心度が高まり、購入意欲の向上にもつながります。
PC とスマホで最適な見せ方ができる
PC では横長のワイドな画像、スマホでは縦長の画像など、デバイスごとに最適な構図を選べるアプリも多くあります。各デバイスでの見え方を最大化することで、コンバージョン率の改善が期待できます。
商品の理解度が高まり返品率を下げる
サイズや使い方への不安が事前に解消されることで、お客様が納得した上で購入できるようになります。結果として返品率の低下にも貢献します。
ブランドの世界観に合わせたデザインで信頼感を高められる
タブの色や文字サイズ、アニメーションなどを細かくカスタマイズできるアプリを選べば、ストアのブランドイメージにぴったり合う見せ方が実現できます。

タブ切り替え式の画像スライドショーアプリの選び方

タブ切り替え式の画像スライドショーアプリを選ぶ際は、以下のポイントに注目しましょう。

「画像をタブで切り替える」機能に特化しているか、それとも「商品説明をタブで切り替える」アプリかを確認する
設置可能なタブ（画像）の最大枚数を確認する
PC とスマホで別々の画像を設定できるかを確認する
アスペクト比やアニメーションのカスタマイズ性を確認する
ノーコードで簡単に導入・設定できるかを確認する
月額料金と無料体験の有無を確認する
日本語サポートの有無を確認する

特に最初に挙げた「画像を切り替えるアプリ」と「商品説明を切り替えるアプリ」の違いは重要です。タブで画像そのものを切り替えたいのか、商品説明テキストを分類して見せたいのか、目的に合わせて選ぶようにしましょう。

コーディングでタブ切り替え式の画像スライドショーを実装する場合のサンプル

「アプリは使わずにテーマのコードで実装したい」という方向けに、シンプルなタブ切り替え式画像スライドショーのサンプルコードを紹介します。

HTML（Liquid）

sections/tab-image-slider.liquid などのファイルとして作成します。

<section class="tab-image-slider" data-tab-image-slider>
  <div class="tab-image-slider__tabs" role="tablist">
    {% for block in section.blocks %}
      <button
        type="button"
        class="tab-image-slider__tab {% if forloop.first %}is-active{% endif %}"
        role="tab"
        aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
        aria-controls="tab-panel-{{ forloop.index }}"
        data-tab-target="{{ forloop.index }}"
      >
        {{ block.settings.label }}
      </button>
    {% endfor %}
  </div>

  <div class="tab-image-slider__panels">
    {% for block in section.blocks %}
      <div
        id="tab-panel-{{ forloop.index }}"
        class="tab-image-slider__panel {% if forloop.first %}is-active{% endif %}"
        role="tabpanel"
        data-tab-panel="{{ forloop.index }}"
      >
        {% if block.settings.image != blank %}
          <img
            src="{{ block.settings.image | image_url: width: 1600 }}"
            alt="{{ block.settings.label | escape }}"
            loading="lazy"
            width="1600"
            height="900"
          >
        {% endif %}
      </div>
    {% endfor %}
  </div>
</section>

{% schema %}
{
  "name": "Tab Image Slider",
  "max_blocks": 5,
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        { "type": "text", "id": "label", "label": "Tab Label", "default": "Tab" },
        { "type": "image_picker", "id": "image", "label": "Image" }
      ]
    }
  ],
  "presets": [{ "name": "Tab Image Slider" }]
}
{% endschema %}

CSS

assets/tab-image-slider.css を作成し、テーマに読み込ませてください。

.tab-image-slider {
  max-width: 1200px;
  margin: 40px auto;
}

.tab-image-slider__tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.tab-image-slider__tab {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.tab-image-slider__tab.is-active {
  border-bottom-color: #1f1f1f;
  color: #1f1f1f;
}

.tab-image-slider__panels {
  position: relative;
  margin-top: 16px;
}

.tab-image-slider__panel {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tab-image-slider__panel.is-active {
  display: block;
  opacity: 1;
}

.tab-image-slider__panel img {
  width: 100%;
  height: auto;
  display: block;
}

JavaScript

assets/tab-image-slider.js を作成して、{{ 'tab-image-slider.js' | asset_url | script_tag }} でテーマに読み込みます。

document.querySelectorAll('[data-tab-image-slider]').forEach((slider) => {
  const tabs = slider.querySelectorAll('[data-tab-target]');
  const panels = slider.querySelectorAll('[data-tab-panel]');

  tabs.forEach((tab) => {
    tab.addEventListener('click', () => {
      const target = tab.dataset.tabTarget;

      // 既存のアクティブを解除
      tabs.forEach((t) => {
        t.classList.remove('is-active');
        t.setAttribute('aria-selected', 'false');
      });
      panels.forEach((p) => p.classList.remove('is-active'));

      // 対象をアクティブに
      tab.classList.add('is-active');
      tab.setAttribute('aria-selected', 'true');
      slider
        .querySelector(`[data-tab-panel="${target}"]`)
        .classList.add('is-active');
    });
  });
});

このコードはあくまで最小限の実装例です。実際のストアでは PC とスマホの画像出し分け、自動スライド、アニメーション、矢印操作、アクセシビリティ対応などを追加で実装する必要があります。これらをすべて自前で作るのはかなりの工数がかかるため、最初は アプリで小さく試してから検討するのがおすすめです。

価格比較

各アプリの料金プランを箇条書きで比較すると、以下のとおりです。

シンプルタブ型画像スライドショー｜商品説明タブ切り替え: $4.99/月（1 週間無料体験、年払いで実質 2 ヶ月分無料）。画像のタブ切り替え、PC/スマホ別画像、ノーコード対応。
EasySlide Accordion tabs & FAQ: $5/月（7 日間無料体験）。アコーディオン式、多言語対応、WCAG 2.0 準拠。
Tabs + Product Descriptions: 無料〜$10/月（年払い $108 で 10% お得）。バリアントごとの商品説明、共有タブテンプレート、5 商品まで無料。
ET Product Tabs & Descriptions: 無料〜$2.99/月（年払い $24.99 で 30% お得）。プリセットタブ、見出しからの自動タブ、低価格で導入しやすい。
GA: Product Tabs with AI: 完全無料。水平・垂直スタイル、FAQ・比較表対応、コスト 0 で運用可能。
Tabs Studio: 無料〜$6/月。見出しから自動タブ、メタフィールド表示、共有タブ、Built for Shopify バッジ取得済み。

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

各アプリの日本語サポート状況は次のとおりです。

シンプルタブ型画像スライドショー｜商品説明タブ切り替え: 日本語サポートあり
EasySlide Accordion tabs & FAQ: 日本語サポートなし
Tabs + Product Descriptions: 日本語サポートなし
ET Product Tabs & Descriptions: 日本語サポートなし
GA: Product Tabs with AI: 日本語サポートなし
Tabs Studio: 日本語サポートなし

日本語サポートがあるのは、本記事で紹介したアプリの中では「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」のみです。日本国内での運用を予定している方や、英語に不安がある方には特におすすめできるアプリです。

使いやすさ

最もおすすめのアプリは 「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」 です。

理由は次のとおりです。

「タブで画像そのものを切り替える」という機能に特化しているため、目的が明確で迷わず使える
PC とスマホで別々の画像を設定できるため、デバイスに最適化された見せ方が実現できる
アスペクト比、タブの色、文字サイズ、矢印スタイル、アニメーションなど細かなカスタマイズが可能
1 クリックでテーマに追加でき、初心者でも迷わず導入できる
日本語サポートがあるため、設定・運用面での不安が少ない
$4.99/月の手頃な価格、年払いなら実質 2 ヶ月分無料

「商品の特徴を整理して伝えたい」「商品ページのスクロール量を減らしたい」「お客様に能動的に画像を選んでもらいたい」というニーズには、まさに直球で応えてくれるアプリです。

終わりに

今回の記事では、Shopify でタブ切り替え式の画像スライドショーを設置できるアプリを 6 個ご紹介しました。商品の特徴を整理してお客様に伝えるためには、タブ切り替え式の見せ方は非常に有効です。

特に「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」は、画像のタブ切り替えに特化していて操作も簡単なので、まずはこちらから試してみるのがおすすめです。1 週間の無料体験期間があるので、気軽に導入を検討してみてください。

参考記事

[Shopifyアプリ「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」をリリース！タブ切り替え式の画像スライダーで商品の特徴を整理して伝えるアプリ](TODO: 公開後にURLを差し替える)
[【Shopify】商品ページにタブ切り替え式の画像スライドショーを設置できるアプリ5選！商品の特徴をスッキリ整理して伝える方法](https://qiita.com/eijiSaito/items/TODO: Qiita 公開後の id を差し替える)
Shopifyの商品ページにタブ切り替え型画像スライドショーを設置する方法！商品の特徴を整理して伝える完全ガイド
Shopifyのタブ切り替え型画像スライドショーアプリ9選！商品の特徴をわかりやすく伝える厳選アプリを徹底比較

@ 信条刃

Shopify

サイトTOP お問い合わせ

Shopifyにタブ切り替え式の画像スライドショーを設置できるアプリ6選！商品の特徴を整理して見せる方法

タブ切り替え式の画像スライドショーとは

タブ切り替え式の画像スライドショーを導入する利点

タブ切り替え式の画像スライドショーアプリの選び方

おすすめのタブ切り替え式画像スライドショー Shopify アプリ

シンプルタブ型画像スライドショー｜商品説明タブ切り替え ☆ 迷ったらこれ

特徴・機能

価格設定

EasySlide Accordion tabs & FAQ

特徴・機能

価格設定

Tabs + Product Descriptions

特徴・機能

価格設定

ET Product Tabs & Descriptions

特徴・機能

価格設定

GA: Product Tabs with AI

特徴・機能

価格設定

Tabs Studio

特徴・機能

価格設定

コーディングでタブ切り替え式の画像スライドショーを実装する場合のサンプル

HTML（Liquid）

CSS

JavaScript

価格比較

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

使いやすさ

終わりに

参考記事

最新の記事

目次

関連タグ

Shopifyにタブ切り替え式の画像スライドショーを設置できるアプリ6選！商品の特徴を整理して見せる方法

Shopify にカードカルーセルを設置できるアプリ6選を紹介！テキスト付き画像で魅せるストアの作り方

Shopify のタイムライン表示アプリ 6 選！沿革・会社概要・ブランドストーリーを魅力的に伝える

Shopify に残りわずかバッジを設置できるアプリ6選を紹介！

Shopify にアコーディオン・折りたたみタブを設置できるアプリ 6 選を紹介！

Shopify にご利用ガイドを設置できるアプリ6選を紹介！