Shopify タブ切り替え 画像スライドショーの選び方ガイド｜商品ページに失敗しない設置方法

目次

• はじめに
• まず押さえておきたい：なぜタブで「整理」する必要があるのか
• 選び方の観点1：タブ数と「1タブ目の設計余地」
• 選び方の観点2：PC とスマホで別画像を出せるか
• 選び方の観点3：コードとアプリ、費用構造をどう捉えるか
• 選び方の観点4：サポート言語と設置の手軽さ
• 観点を満たすアプリ「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」
  • アプリの基本情報
  • 観点1（タブ数・1タブ目）への当てはめ
  • 観点2（デバイス別画像）への当てはめ
  • 観点4（サポート言語・手軽さ）への当てはめ
• タブ型 スライダーの設置方法（インストール手順）
  • 1. 設定をクリック
  • 2. アプリと販売チャネルへ移動
  • 3. アプリを検索
  • 4. インストール
  • 5. 権限の確認
• アプリをテーマに追加（有効化）
  • 自動でテーマに追加（1 クリック追加）
  • 手動でテーマに追加（任意ページに設置したい場合）
• 設定項目を観点に沿って調整する
  • コンテンツ設定
  • タブバー設定
  • スライド設定
  • アニメーション設定
  • 余白設定
  • 追加設定（カスタム CSS）
• ストアのタイプ別：観点を当てはめた設定例
  • アパレル：サイズ別の見せ方
  • コスメ：使用前後とテクスチャー
  • 家電：使用シーン別
  • 文言のテンプレ例
• 観点を広げる：関連施策との組み合わせ
  • 商品レビューアプリとの組み合わせ
  • サイズチャート・FAQ アプリとの組み合わせ
  • スライドショーアプリとの併用
  • A/B テストツールとの組み合わせ
  • メールマーケティングとの組み合わせ
• 自前コードで作るという選択肢
  • 実装の流れ
  • HTML を追加（Liquid）
  • CSS を追加
  • JavaScript を追加
  • コード実装で気をつけたいこと
• 運用で見落としを防ぐコツ
• よくある質問
• まとめ
• 参考記事

はじめに

Shopify の商品ページに「タブ切り替え 画像スライドショー」を入れたい、と思って検索すると、アプリ5選・6選・9選といった横並びの一覧記事ばかりがヒットします。けれど実際に手を動かす段になると、本当に知りたいのは「どれを選べば自分のストアで失敗しないのか」という一点に絞られてくるはずです。

そこでこの記事では、商品ページのスライドショー アプリを「機能の多さ」ではなく 選定の観点 から掘り下げます。タブ数・デバイス別画像・費用構造・サポート言語・設置の手軽さ――この5つを順番に確認していけば、自前のコードで作るべきか、アプリを入れるべきか、入れるならどのタイプかが自然と見えてきます。観点を理解したうえで、Shopify のタブ型 スライダー 設置方法を具体的なスクリーンショット付きで追える構成にしました。

先に1点だけ前提を共有します。Shopify のデフォルト機能だけでは、タブで画像を切り替えるスライドショーは作れません。標準テーマに入っている「画像スライダー」は自動再生か手動送りのどちらかで、タブ切り替えという概念そのものを持っていないからです。つまり選ぶべきは「アプリか、自前コードか」であり、本記事はその判断を観点ベースで支援します。

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

• Shopifyにタブ切り替え式の画像スライドショーを設置できるアプリ6選！商品の特徴を整理して見せる方法
• Shopifyのタブ切り替え型画像スライドショーアプリ9選！商品の特徴をわかりやすく伝える厳選アプリを徹底比較

まず押さえておきたい：なぜタブで「整理」する必要があるのか

選び方に入る前に、設計の前提となるデータを共有します。商品画像は 67%（モバイルでは74%）の買い物客が、説明文より先に評価すると言われています。一方でタブ UI には固有の落とし穴があり、隠れたタブの中身は約27%のユーザーに見落とされ、サムネイルが省略された場合は 50〜80%の顧客が全画像にたどり着けないという調査もあります。

ここから導ける運用指針はシンプルです。「最も訴求したい画像は1タブ目・ファーストビューに置く」。タブで整理すること自体は強力ですが、整理した結果として重要な情報が2タブ目以降に隠れてしまうと、見られないまま離脱されるリスクが上がります。選び方の観点も、この「見落としをどう防げるか」という視点で評価していきます。

なお、角度や利用シーンに変化をつけた 5枚以上の複数画像は、1枚のみと比べてコンバージョンを最大60%押し上げるという統計もあります。タブ型スライダーで最大5枚を整理する、という設計はこの数字とちょうど噛み合います。「枚数を増やす」のではなく「5枚をタブで構造化する」のが、商品ページ スライドショーの勘所だと考えています。

選び方の観点1：タブ数と「1タブ目の設計余地」

タブ切り替え型のアプリは、たいてい タブ数の上限が5枚程度に設定されています。これは制約というより、前述の「5枚で最大効果」というデータに沿った妥当な設計です。逆に8タブ・10タブと無制限に増やせるツールは、整理どころか見落としを増やす方向に働きやすいので注意してください。

確認すべきは枚数の上限そのものよりも、「1タブ目に何を置けるか」「ラベルを自由に決められるか」です。

• タブのラベルを任意のテキストにできるか（「サイズ」「カラー」など短い語を入れられるか）
• 各タブに別画像を割り当てられるか（説明文だけのタブ化ではないか）
• 1タブ目を初期表示にして、最重要画像をファーストビューに固定できるか

ここで一つ補足しておくと、検索上位に並ぶタブ系アプリの多くは「テキスト説明のタブ化」が主目的です。Tabs Studio（Station 社）は見出しから自動でタブを生成し WCAG 2.1 と Built for Shopify に対応、タブ:AI SEO 製品タブ（Trusted apps 社）は ChatGPT を活用した SEO 文章のタブ化、FOLDER Smart Product Tabs（TK Digital 社）は Lifetime $89.95 の買い切りプランを持つ、といった具合に、いずれも「商品説明文を畳む」用途に寄っています。画像スライドショーをタブで切り替えるという用途には、これらは想定外なのです。つまり「タブアプリ」とひとくくりにせず、ビジュアル整理に特化しているかどうかを最初に見分ける必要があります。

選び方の観点2：PC とスマホで別画像を出せるか

意外と見落とされがちですが、実務でいちばん効いてくるのがこの観点です。PC は横長、スマホは縦長と画面比率が真逆なので、同じ画像を使い回すとどちらかが必ず間延びします。横長のワイド画像をスマホで見ると小さく潰れ、縦構図の画像を PC で見ると左右に余白が空きすぎる、という現象です。

• PC 用と スマホ用で画像を分けて設定できるか
• 分けない場合に PC 用がスマホへ自動でフォールバックするか
• タブごとに、それぞれ PC/スマホ画像を持てるか

筆者の経験では、ここを妥協すると「PC では映えるのにスマホで離脱が増える」という再現性の高い失敗につながります。Shopify の購入はモバイル比率が高いストアが多いので、デバイス別画像はあって当たり前の条件として最初に確認することをおすすめします。

選び方の観点3：コードとアプリ、費用構造をどう捉えるか

「アプリは月額がかかるから、自前で作ったほうが安いのでは」という発想は当然出てきます。実際、検索上位には アプリを使わず自前実装する手法も存在します。単一の product-tab-slider.liquid を $19の買い切りで導入し、外部ライブラリゼロ・OS 2.0 専用・最大8タブで設置する、というアプローチです。「年 $228〜$588 のアプリ費用 vs 一度きりの $19」という見せ方で価格差を強調してきます。

ただし、この比較には書かれていないコストがあります。

• 保守：テーマアップデートのたびにコードが上書きされ、移植の手間が発生する
• 多言語：日本語を含む多言語対応は自前では作り込みが必要
• デバイス別画像：PC/スマホ出し分けを Liquid と CSS の両方で組む必要がある
• サポート：不具合時に頼れる窓口がない

費用を「月額か買い切りか」だけで比べると判断を誤ります。保守工数・多言語・デバイス別画像・サポートまで含めた総コストで捉えるのが、この観点の肝です。コードが書けてメンテも自分で回せるなら買い切りは合理的ですが、運用に時間を割きたくないなら、ノーコードのアプリのほうが結果的に安く済むケースが多いというのが実感です。

選び方の観点4：サポート言語と設置の手軽さ

最後の観点は、導入後にどれだけ手間なく運用できるかです。

• 管理画面とサポートが 日本語に対応しているか
• 設置が クリック操作で完結するか、コード貼り付けが必要か
• カスタム CSS の逃げ道が用意されているか（標準設定で足りない場合の保険）

海外製アプリは機能が豊富でも、設定 UI が英語のみだと運用担当者の負担が増えます。とくにタブのラベル設計やアスペクト比の調整は、日本語の管理画面で直感的にいじれるかどうかで作業速度が大きく変わります。

観点を満たすアプリ「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」

ここまでの5つの観点――タブ数と1タブ目設計／デバイス別画像／総コスト／日本語サポート／設置の手軽さ――をひと通り満たす日本製アプリ 「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」 を、観点への当てはめという形で紹介します。

アプリの基本情報

• アプリ名: シンプルタブ型画像スライドショー｜商品説明タブ切り替え
• 価格: Basic Plan $4.99/月（年額 $49.99 で17%割引、7日間の無料体験あり）
• 対応言語: 日本語を含む20言語
• 主な機能: タブ切り替え式の画像スライドショー、最大5タブ・各5枚、PC/スマホ別画像、自動スライド、アニメーション、マウスドラッグ、矢印7種類、アスペクト比6種類、カスタム CSS 対応

観点1（タブ数・1タブ目）への当てはめ

最大5タブで画像を整理でき、各タブのラベルは任意のテキストを設定できます。1タブ目を最重要画像にしておけば、前述の「見落としをどう防ぐか」という課題に対して、ファーストビューで主訴求を見せる設計が組めます。テキストのタブ化ではなく、画像スライドショーをタブで切り替えるビジュアル整理に特化している点が、汎用タブアプリとの決定的な違いです。

タブ形式で気になったスライドを素早く表示

通常のスライダーと違い、タブで直接表示したい画像を選べるのが特徴です。お客様が「サイズ別」「カラー別」「特徴別」など気になる情報をワンクリックで素早く切り替えられるので、商品の魅力をストレスなく伝えられます。

観点2（デバイス別画像）への当てはめ

タブごとに PC 用・スマホ用の画像を別々に設定でき、それぞれ最大5枚まで持てます。スマホ用を空にすれば PC 用が自動で表示されるので、出し分けを使うかどうかはストアごとに選べます。モバイル比率の高い Shopify ストアにとって、この出し分けは離脱対策の要になると考えています。

PC 用とスマホ用に別々の画像を設定可能

PC とスマホでは画面サイズや見え方が大きく違うため、最適な画像も変わってきます。本アプリでは PC 用画像・スマホ用画像をそれぞれ設定できるので、横長の PC ではワイドな画像を、縦長のスマホでは縦構図の画像を表示できます。

観点4（サポート言語・手軽さ）への当てはめ

日本語を含む20言語に対応し、アスペクト比6種・矢印7スタイル・自動スライド0〜15秒・フェード/スライド切替などを、画面上でつまみを動かしたり色を選んだりするだけで調整できます。標準設定で届かない細部はカスタム CSS 欄で補えるので、ノーコードと作り込みの両立ができます。

ノーコードで見た目をカスタマイズ

アスペクト比、タブの色や文字サイズ、矢印のスタイル、自動スライドのスピードなど、見た目に関わる設定を画面上でつまみを動かしたり色を選んだりするだけで自由に調整できます。

1 クリックでテーマに追加

アプリの管理画面から「テーマに追加」ボタンを押すだけで、お使いのテーマにスライダーをすぐに設置できます。難しい設定や手作業のコード追加は不要です。

タブ型 スライダーの設置方法（インストール手順）

ここからは、観点をクリアしたアプリを実際にストアへ入れる手順を、画像付きで解説します。設置方法はとても簡単なので、初めての方でも迷わず進められます。

1. 設定をクリック

Shopify 管理画面の左下にある「設定」をクリックします。

2. アプリと販売チャネルへ移動

設定メニューから「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。

3. アプリを検索

検索窓に「シンプルタブ型画像スライドショー」と入力し、表示されたアプリをクリックします。

4. インストール

アプリ詳細画面で「インストール」をクリックします。

5. 権限の確認

権限の確認画面が表示されるので内容を確認し、「インストール」をクリックしてインストールを完了します。

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

アプリをインストールしたら、画像タブスライダーをテーマに表示するために「アプリブロック」を追加します。「自動でテーマに追加」と「手動でテーマに追加」の2つの設置方法があり、設置したいページに応じて使い分けます。

自動でテーマに追加（1 クリック追加）

ホームページにスライダーを設置したい場合は、こちらの方法がおすすめです。

1. アプリの管理画面を開きます。

   

2. 「テーマを選択」で追加したいテーマを選び、「テーマに追加」ボタンをクリックします。

   

3. テーマエディタが開いたら、表示位置や設定を確認して右上の「保存する」をクリックします。

   

手動でテーマに追加（任意ページに設置したい場合）

商品ページやコレクションページなど、好きなページの好きな位置にスライダーを設置したい場合は、こちらの方法を使います。

1. Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。

   

2. テーマエディタ上部のプルダウンから、追加したいページに移動します。

   

3. 「セクションを追加」または「ブロックを追加」をクリックします。

   

4. 「アプリ」タブを選び、「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」のアプリブロックを選んで追加します。

   

5. 表示を確認し、問題なければ右上の「保存する」をクリックします。

   

設定項目を観点に沿って調整する

テーマエディタの右側にある設定パネルから、スライダーの見た目や挙動を細かくカスタマイズできます。設定はグループごとにまとまっているので、ここまで整理した観点を意識しながら順番に調整してみてください。

コンテンツ設定

スライダーに表示する画像やタブのラベル、リンクを設定するセクションです。最大5枚の画像（タブ）を設定できます。1タブ目に最重要画像を置く、という設計はここで決まります。

• タブ 1〜5 のラベル: 各タブに表示する文字。「サイズ」「カラー」「特徴」「使い方」など短いラベルが効果的です。
• 画像 1〜5: タブごとに表示するメイン画像（PC 用）を設定します。
• 画像 1〜5（スマホ）: スマホで表示する専用の画像。設定しない場合は PC 用画像がスマホでも表示されます。
• リンク 1〜5: 各画像をクリックしたときに移動する URL を設定可能。
• リンクを新しいタブで開く: チェックを入れると新しいタブで開きます。

タブバー設定

タブバーの位置や色、文字の見た目などをカスタマイズできるセクションです。タブを目立たせて「見落とし」を防ぐ調整は、主にここで行います。

• タブバーの配置: 「上」「下」「なし」から選べます。
• タブの背景色 / 文字色 / 下線色: ブランドカラーに合わせて自由に設定。
• タブの下線太さ: 0〜10px で調整可能。
• タブの不透明度: 0〜100% で調整。100% 未満にするとタブが画像に被さって表示されます。
• タブの文字サイズ・文字太さ: 文字の大きさ・太さを自由に調整。
• タブの上下余白・左右余白: 0〜60px の範囲で調整可能。

スライド設定

画像の表示比率や矢印のスタイルなど、スライド本体の見た目を調整できるセクションです。アスペクト比は観点2のデバイス別画像と直結するので、PC とスマホで構図を変える場合はここを丁寧に合わせます。

• アスペクト比: 「最初の画像に合わせる」「16:9」「4:3」「1:1」「4:5」「9:16」から選択。
• 画像の収め方: 「画像で埋める」「画像を収める」から選択。
• マウスのドラッグ操作: チェックで PC でもドラッグ操作できるようになります。
• 矢印のスタイル: 7 種類から選択可能。「なし」も選べます。
• 矢印の色 / 大きさ: 自由にカスタマイズ。
• スマホ時の矢印表示: チェックでスマホでも矢印を表示。

アニメーション設定

スライドの自動再生や切り替え時の動きを設定できるセクションです。

• 自動スライドのスピード: 0〜15 秒で設定。0 秒に設定すると自動スライドが OFF。
• アニメーションのスピード: 0.1〜3 秒で切り替え時のアニメ速度を調整。
• アニメーションの種類: 「なし」「スライド」「フェード」から選択。

余白設定

スライダーの上下の余白を、PC とスマホで個別に設定できるセクションです。

• 上部余白 / 下部余白（PC）: PC 表示時の余白を 0〜100px で設定。
• 上部余白 / 下部余白（スマホ）: スマホ表示時の余白を 0〜100px で設定。

追加設定（カスタム CSS）

標準の設定では実現できない細かなデザイン調整をしたい場合は、こちらに直接 CSS を記述できます。観点4で触れた「標準設定の保険」がこの欄です。

ストアのタイプ別：観点を当てはめた設定例

選び方の観点は、業種ごとに重みが変わります。代表的な3パターンで、どの観点を優先してどう設定するかを具体化しました。

アパレル：サイズ別の見せ方

• タブラベル: 「S サイズ」「M サイズ」「L サイズ」
• 画像: 各サイズの着用画像（モデル身長つき）
• アスペクト比: 4:5（縦長で着用感が伝わりやすい）
• アニメーション: フェード（落ち着いた印象）
• タブの背景色: 白、文字色: ダークグレー、下線色: ブランドカラー

コスメ：使用前後とテクスチャー

• タブラベル: 「使用前」「使用後」「テクスチャー」「成分」
• 画像: ビフォーアフター画像 + 質感のクローズアップ
• アスペクト比: 1:1（SNS 風で映える）
• アニメーション: スライド
• マウスドラッグ: ON（直感的に切り替えられる）

家電：使用シーン別

• タブラベル: 「リビング」「キッチン」「寝室」「アウトドア」
• 画像: 各シーンでの使用イメージ
• アスペクト比: 16:9（横長で空間が伝わる）
• アニメーション: スライド + 自動スライド 5 秒
• PC とスマホで別画像: PC は横長、スマホは縦長で使用シーンを最適化

文言のテンプレ例

タブのラベルは短く、ひと目で内容が分かるテキストが効果的です。

• 「カラー｜ブラック」のように記号で区切ると、視認性が向上
• 絵文字（🎨「カラー」、📏「サイズ」など）でアイコン的に使う
• 「3 つの特徴」のように数字を入れて訴求力を上げる

観点を広げる：関連施策との組み合わせ

タブ切り替え型の画像スライドショーは単独でも効果がありますが、他の施策と組み合わせることで「見せて終わり」にしない導線が作れます。Shopify ストアでよく行われている関連施策をご紹介します。

商品レビューアプリとの組み合わせ

Judge.me、Loox、YotPo などの商品レビューアプリと組み合わせれば、商品の特徴をタブで整理して見せた直後に、お客様の声で信頼性を裏付けることができます。「商品の特徴 → レビュー」という導線が完成し、購入意欲を強く後押しできます。

サイズチャート・FAQ アプリとの組み合わせ

タブ切り替え型のスライドショーで「サイズ感」を視覚的に伝えた上で、別途サイズチャートアプリで詳細な数値を提示することで、サイズに関する不安をほぼ完全に解消できます。FAQ アプリで「よくある質問」を整理することも、返品率の低下に大きく貢献します。

スライドショーアプリとの併用

タブ切り替え型は商品ページの「特徴セクション」に最適ですが、ホームページのファーストビューには 通常の自動再生型スライドショー の方が向いています。両方を併用することで、ページごとに最適な見せ方が実現できます。

A/B テストツールとの組み合わせ

タブの順序やラベル、画像の構成を A/B テストで検証すれば、最もコンバージョン率の高い組み合わせを見つけられます。データに基づいた改善を継続することで、スライドショー単独では得られないレベルの成果が生まれます。

メールマーケティングとの組み合わせ

商品ページのタブで紹介した「商品の特徴」を、Klaviyo などのメールツールで配信するメールマガジンにそのまま転用すれば、メールから商品ページへの導線がスムーズになります。リターゲティング広告にも同じ訴求軸を使えば、ブランドメッセージの一貫性が高まります。

自前コードで作るという選択肢

観点3で触れたとおり、コードが書けてメンテも自分で回せるなら、自前実装も有力な選択肢です。「アプリは使わずに自前で実装したい」という方向けに、シンプルなタブ切り替え型画像スライドショーのサンプルコードを紹介します。これを読むと、アプリが肩代わりしてくれている工数の量も体感できるはずです。

実装の流れ

1. sections/tab-image-slider.liquid を作成して Liquid とスキーマを定義
2. assets/tab-image-slider.css でスタイルを定義
3. assets/tab-image-slider.js でタブ切り替えロジックを実装
4. テーマレイアウトファイルから CSS と JS を読み込む
5. テーマエディタからセクションを配置して画像とラベルを設定

HTML を追加（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_pc != blank %}
          <img
            class="tab-image-slider__image tab-image-slider__image--pc"
            src="{{ block.settings.image_pc | image_url: width: 1600 }}"
            alt="{{ block.settings.label | escape }}"
            loading="lazy"
            width="1600"
            height="900"
          >
        {% endif %}
        {% if block.settings.image_sp != blank %}
          <img
            class="tab-image-slider__image tab-image-slider__image--sp"
            src="{{ block.settings.image_sp | image_url: width: 800 }}"
            alt="{{ block.settings.label | escape }}"
            loading="lazy"
            width="800"
            height="1200"
          >
        {% endif %}
      </div>
    {% endfor %}
  </div>
</section>

{% schema %}
{
  "name": "Tab Image Slider",
  "max_blocks": 5,
  "settings": [
    {
      "type": "select",
      "id": "aspect_ratio",
      "label": "Aspect Ratio",
      "options": [
        { "value": "16-9", "label": "16:9" },
        { "value": "4-3", "label": "4:3" },
        { "value": "1-1", "label": "1:1" },
        { "value": "4-5", "label": "4:5" },
        { "value": "9-16", "label": "9:16" }
      ],
      "default": "16-9"
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        { "type": "text", "id": "label", "label": "Tab Label", "default": "Tab" },
        { "type": "image_picker", "id": "image_pc", "label": "Image (PC)" },
        { "type": "image_picker", "id": "image_sp", "label": "Image (Mobile)" }
      ]
    }
  ],
  "presets": [{ "name": "Tab Image Slider" }]
}
{% endschema %}

CSS を追加

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

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

.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;
  color: #666;
  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;
}

.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__image {
  width: 100%;
  height: auto;
  display: block;
}

.tab-image-slider__image--sp {
  display: none;
}

@media (max-width: 768px) {
  .tab-image-slider__image--pc {
    display: none;
  }
  .tab-image-slider__image--sp {
    display: block;
  }
}

JavaScript を追加

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');
    });
  });

  // キーボード操作（左右矢印キーでタブ切り替え）
  tabs.forEach((tab, index) => {
    tab.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowRight') {
        const next = tabs[(index + 1) % tabs.length];
        next.focus();
        next.click();
      }
      if (e.key === 'ArrowLeft') {
        const prev = tabs[(index - 1 + tabs.length) % tabs.length];
        prev.focus();
        prev.click();
      }
    });
  });
});

コード実装で気をつけたいこと

• アクセシビリティ: タブには role="tab"、パネルには role="tabpanel" を付け、aria-selected や aria-controls を適切に設定する
• レスポンシブ対応: PC とスマホで画像を出し分ける場合、CSS と Liquid の両方を調整する必要がある
• パフォーマンス: 画像は loading="lazy" を付けて遅延読み込みする
• テーマアップデート: テーマを更新するとカスタムコードが上書きされるため、コピーを保管しておく
• 自動スライド・アニメーション: 上記サンプルには含まれていないため、必要に応じて追加実装する

ここまで読むと、デバイス別画像・自動スライド・アクセシビリティをすべて自前で満たすと相応の工数になることが分かります。観点3で挙げた「保守・多言語・サポート」まで含めて天秤にかけ、自分の運用体制に合うほうを選んでください。

運用で見落としを防ぐコツ

タブ切り替え型の画像スライドショーを最大限に活かすための、運用のコツをまとめます。冒頭の「隠れたタブは27%が見落とす」というデータを踏まえた実務的なポイントです。

• タブのラベルは 4 〜 6 文字程度に: 長すぎると改行されたり崩れる原因になります
• 最初のタブには「最も訴求したい情報」を配置: 初期表示で見られる確率が高いため
• タブの色とコンバージョンボタンの色は変える: タブが押されすぎてカートに進む導線を阻害しないように
• 画像のクオリティを揃える: タブごとに画質や色味がバラバラだと、安っぽく見えてしまう
• データを取って改善を続ける: タブごとのクリック率やコンバージョン率を計測し、ラベルや順序を最適化

よくある質問

Q1. タブはいくつまで設定できますか？
A. アプリにもよりますが、本記事で紹介した「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」は最大 5 枚まで設定できます。データ上も5枚前後が見せ方として効果的なので、無制限に増やせることを基準に選ぶ必要はありません。

Q2. PC とスマホで別の画像を表示できますか？
A. はい、本アプリでは PC 用画像とスマホ用画像をそれぞれ独立して設定できます。スマホ用画像を設定しない場合は PC 用画像が自動でスマホにも表示されます。

Q3. タブを表示せずに、自動スライドだけにすることはできますか？
A. はい、タブバーの配置で「なし」を選ぶと、タブを非表示にして矢印・自動スライドだけのスライダーにできます。

Q4. アニメーションを無効にできますか？
A. はい、アニメーションの種類で「なし」を選択すると、瞬時に切り替わるシンプルな表示にできます。

Q5. 既存テーマを変更すると設定はリセットされますか？
A. テーマブロックの設定はテーマごとに保存されるため、テーマを切り替えると新しいテーマで再度設定する必要があります。元のテーマに戻せば設定は復元されます。

Q6. アプリの解約はどうやってやりますか？
A. Shopify 管理画面の「アプリ」一覧から該当アプリの右側にある「アンインストール」をクリックするだけで解約できます。サブスクリプション料金もそこで停止されます。

まとめ

Shopify の商品ページに タブ切り替え 型の画像 スライドショー を設置するなら、機能の数ではなく 選び方の観点で判断するのが近道です。

要点を観点ごとに整理します。

• Shopify のデフォルト機能ではタブ切り替え型の画像スライドショーは実現できず、アプリかコードの二択になる
• 観点1：タブ数は5枚前後で十分。テキスト畳み込み系ではなく画像のビジュアル整理に特化したアプリを選ぶ
• 観点2：PC/スマホのデバイス別画像に対応しているかは、モバイル離脱を防ぐ必須条件
• 観点3：費用は月額か買い切りかだけでなく、保守・多言語・サポートを含む総コストで比較する
• 観点4：日本語サポートとクリック設置の手軽さで、運用負荷が大きく変わる
• 「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」は最大5タブ・各5枚、PC/スマホ別画像、20言語対応で、これらの観点をひと通り満たす一本です
• 月額 $4.99（年額 $49.99 で17%割引）で7日間の無料体験あり

重要な画像を1タブ目に置き、デバイスごとに最適な構図を出し分けることで、コンバージョン率の向上・返品率の低下・ブランドの信頼感アップにつながります。まずは無料体験から、観点に沿って試してみてください。

シンプルタブ型画像スライドショー｜商品説明タブ切り替えのインストールはこちら

詳細なご利用ガイドはこちらからご確認ください。

参考記事

• 【Shopify】商品ページにタブ切り替え式の画像スライドショーを設置できるアプリ5選！商品の特徴をスッキリ整理して伝える方法
• Shopifyにタブ切り替え式の画像スライドショーを設置できるアプリ6選！商品の特徴を整理して見せる方法
• Shopifyのタブ切り替え型画像スライドショーアプリ9選！商品の特徴をわかりやすく伝える厳選アプリを徹底比較