Shopifyで画像スライドショーをタブ切り替え表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/05/07

はじめに

Shopify は、世界中の多くのブランドや店舗が利用しているネットショップ作成サービスです。Shopify アプリは、その Shopify ストアに後から機能を追加できる拡張機能で、コーディングをしなくても、便利な機能をストアに簡単に追加できます。

このガイドでは、「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」 というアプリの使い方をご紹介します。本アプリを使うと、タブで切り替えるタイプの画像スライダーを商品ページやホームページに設置できます。最大 5 枚の画像をタブのラベルで分類しながら表示できるので、「サイズ別」「カラー別」「特徴別」など、伝えたい情報を整理してお客様に見せられます。アスペクト比、タブの色や文字サイズ、矢印のスタイル、自動スライドのスピードなど、ストアの雰囲気に合わせて細かく調整でき、PC 用とスマホ用で別々の画像も設定可能です。コーディング不要で、テーマに簡単に追加できます。

料金: Basic Plan $4.99/月　１週間の無料期間あり　年払いで実質 2 ヶ月分無料でお得にご利用いただけます。

アプリストアでアプリを見る

シンプルタブ型画像スライドショー｜商品説明タブ切り替えのメインビジュアル

「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」でできること

商品ページやホームページに、タブで画像を切り替えられるスライダーを設置できるアプリです。最大 5 枚までの画像をタブのラベルごとに整理して表示できるので、お客様が見たい情報をワンクリックで切り替えられて、商品の魅力をスッキリと分かりやすく伝えられます。アスペクト比やタブの色・文字サイズ、矢印デザイン、アニメーションの種類など、見た目のカスタマイズも豊富。PC とスマホで別々の画像を出し分けたり、自動スライド・マウスドラッグ・スワイプ操作にも対応していて、ストアの雰囲気に合った最適な見せ方を実現できます。

シンプルタブ型画像スライドショー｜商品説明タブ切り替えのメインビジュアル

アプリの特徴

タブで画像を切り替えるスライダーを商品ページやホームページに設置できます。
最大 5 枚の画像をタブのラベルで分類して、見やすく整理して見せられます。
アスペクト比や矢印スタイル、タブの色などを細かくカスタマイズできます。
PC 用とスマホ用で別々の画像を設定でき、最適な見た目で表示できます。
自動スライド、フェード／スライドアニメーション、マウスドラッグに対応。
ワンクリックでテーマに追加できる、コーディング不要のアプリです。

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

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

タブ形式で気になったスライドを素早く表示できる画像スライダー

PC 用とスマホ用に別々の画像を設定できる！

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

PC とスマホで別々の画像を設定できる画像スライダー

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

アスペクト比、タブの色や文字サイズ、矢印のスタイル、自動スライドのスピードなど、見た目に関わる設定を画面上でつまみを動かしたり色を選んだりするだけで自由に調整できます。コードを書く知識は一切不要で、ストアの世界観にぴったり合うスライダーに仕上げられます。

ノーコードで見た目をカスタマイズできる設定画面

1 クリックでテーマに追加できる！

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

1 クリックでテーマに追加できる管理画面

アプリのインストール

アプリストアでアプリを見る

料金: Basic Plan $4.99/月　１週間の無料期間あり　年払いで実質 2 ヶ月分無料でお得にご利用いただけます。

インストールの手順

Shopify 管理画面の左下にある「設定」をクリックします。
設定メニューから「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
検索窓に「シンプルタブ型画像スライドショー」と入力し、表示されたアプリをクリックします。
アプリ詳細画面で「インストール」をクリックします。
権限の確認画面が表示されるので内容を確認し、「インストール」をクリックしてインストールを完了します。

アプリブロックをテーマに追加

アプリをインストールしたら、画像タブスライダーをテーマに表示するために「アプリブロック」を追加します。追加方法は 2 通りあります。

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

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

アプリの管理画面を開きます。
「テーマを選択」で追加したいテーマを選び、「テーマに追加」ボタンをクリックします。
テーマエディタが開いたら、表示位置や設定を確認して右上の「保存する」をクリックします。

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

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

Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
テーマエディタ上部のプルダウンから、追加したいページに移動します。
「セクションを追加」または「ブロックを追加」をクリックします。
「アプリ」タブを選び、「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」のアプリブロックを選んで追加します。
表示を確認し、問題なければ右上の「保存する」をクリックします。

画像タブスライダーブロックのカスタマイズ

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

コンテンツ設定

スライダーに表示する画像やタブのラベル、リンクを設定するセクションです。最大 5 枚の画像（タブ）を設定できます。

タブ 1〜5 のラベル: 各タブに表示する文字を入力します。「サイズ」「カラー」「特徴」「使い方」など、画像の内容を一目で分かる短いラベルにすると効果的です。
画像 1〜5: タブごとに表示するメイン画像（PC 用）を設定します。
画像 1〜5（スマホ）: スマホで表示する専用の画像を設定できます。スマホ用画像を設定しない場合は、PC 用の「画像」がスマホでも表示されます。PC では横長、スマホでは縦長など、デバイスに合った構図にしたいときに便利です。
リンク 1〜5: 各画像をクリックしたときに移動する URL を設定できます。商品ページやコレクションページへの動線を作りたいときに活用してください。
リンクを新しいタブで開く: チェックを入れると、画像のリンクが新しいタブで開きます。お客様にサイトを離れてほしくないキャンペーンページなどへ誘導するときにおすすめです。

タブバー設定

タブバーの位置や色、文字の見た目などをカスタマイズできるセクションです。

タブバーの配置: タブバーをスライドの「上」「下」のどちらに配置するか、または「なし」（タブバーを非表示）にするかを選べます。
- なし: タブを表示せず、矢印や自動スライドだけで切り替えるスライダーになります。
- 上: タブバーを画像の上に表示します（標準）。
- 下: タブバーを画像の下に表示します。
タブの背景色: タブバーの背景色を選びます。ストアのブランドカラーに合わせるとデザインがまとまります。
タブの文字色: タブのラベル文字の色を選びます。背景色と十分なコントラストを付けると読みやすくなります。
タブの下線色: 選択中のタブの下に表示されるアンダーラインの色を選びます。アクセントカラーを使うと、選択中の項目が一目で分かります。
タブの下線太さ: アンダーラインの太さを 0〜10px の範囲で調整できます。
タブの不透明度: 0〜100% で調整できます。100% 未満にすると、タブバーをスライド画像に被せて表示します。スタイリッシュな見た目にしたいときにおすすめです。
タブの文字サイズ: タブのラベル文字の大きさを 10〜60px で調整できます。
タブの文字太さ: 100〜900 の範囲で文字の太さを変えられます。数字が大きいほど太く、強調表示になります。
タブの上下余白: タブバー内のタブの上下方向の余白を 0〜60px で調整できます。
タブの左右余白: タブとタブの間の余白を 0〜60px で調整できます。

スライド設定

画像の表示比率や矢印のスタイルなど、スライド本体の見た目を調整できるセクションです。

アスペクト比: スライドの縦横比を選びます。
- 最初の画像に合わせる: 1 枚目の画像の比率に合わせて自動調整します（標準）。
- 16:9 / 4:3 / 1:1 / 4:5 / 9:16: 固定比率で表示します。スマホで縦長に見せたいなら「9:16」、SNS のような正方形にするなら「1:1」がおすすめです。
画像の収め方: 設定したアスペクト比に対して画像をどう収めるかを選べます。
- 画像で埋める: 画像が領域いっぱいに広がります。一部が切り取られる場合がありますが、見栄え重視のときに最適です。
- 画像を収める: 画像全体が見えるように縮小して収めます。画像のすべてを必ず見せたい場合に使ってください。
マウスのドラッグ操作: チェックを入れると、PC でマウスドラッグでもスライドを切り替えられるようになります。スマホのスワイプ感覚で操作してもらいたいときにおすすめです。
矢印のスタイル: スライド左右に表示する矢印アイコンを 7 種類から選べます。「なし」を選ぶと矢印を非表示にできます。タブだけで切り替えさせたいときは「なし」、自動スライドや手動操作も併用したいときは矢印ありが便利です。
矢印の色: 矢印アイコンの色を選びます。
スマホ時の矢印表示: チェックを入れるとスマホでも矢印が表示されます。スマホは基本タブとスワイプで操作する設計のため、デフォルトでは非表示です。
矢印の大きさ: 矢印アイコンの大きさを 10〜100% で調整できます。

アニメーション設定

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

自動スライドのスピード: スライドが自動で切り替わる間隔を 0〜15 秒で設定できます。0 秒に設定すると自動スライドが OFF になり、お客様の操作でのみ切り替わるようになります。
アニメーションのスピード: スライド・フェードの切り替え時に発生するアニメーションの速さを 0.1〜3 秒で設定できます。素早く切り替えたいなら短く、ゆったり見せたいなら長めに設定してください。
アニメーションの種類: 切り替え時の動きを 3 種類から選べます。
- なし: アニメーションなしで瞬時に切り替わります。
- スライド: 画像が横にスライドして切り替わります（標準）。手動スワイプやマウスドラッグも有効になります。
- フェード: 画像がふわっと切り替わります。落ち着いた印象を出したいときにおすすめです。