Shopifyで縦型ショート動画ギャラリーや動画グリッドを導入できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/05/23

はじめに

Shopify（ショッピファイ）は、世界中で多くのストアが利用しているネットショップ作成サービスです。Shopify には「アプリ」と呼ばれる拡張機能があり、アプリを追加することで、専門的な知識がなくてもストアにさまざまな機能を後付けできます。

この度は「シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド」にご興味をお持ちいただき、ありがとうございます。

このアプリを使えば、YouTube・Vimeo・TikTok・Shopify ファイルの動画を、ストアのどこにでもかんたんに配置できます。グリッド表示とスライダー表示の 2 種類のレイアウトから選べて、動画の縦横比も横長・縦長・正方形・ワイドの 4 種類に対応。再生方法もクリックでモーダル表示、ホバーで再生、スクロール時に自動再生の 3 種類から選べます。最大 12 本の動画を設定でき、各動画にタイトルやサムネイル画像、リンク URL も設定可能です。

商品の使い方を動画で見せたり、ブランドの世界観を伝えたりと、動画を活用してストアをもっと魅力的に演出できます。コーディングは一切不要で、管理画面からワンクリックでテーマに追加するだけでご利用いただけます。

料金について

Basic Plan：月額 $6.99（または年額 $69.90 で 17% お得）。インストールから 7 日間は無料でお試しいただけます。年払いを選ぶと実質 2 ヶ月分が無料となり、お得にご利用いただけます。

アプリストア

▶ シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド（Shopify App Store）

シンプル縦型ショート動画ギャラリーのアプリストアヘッダー画像

「シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド」でできること

このアプリは、ストアに動画ギャラリーを設置するためのアプリです。YouTube・Vimeo・TikTok・Shopify ファイルの動画に対応しており、グリッド（タイル状に並べる）とスライダー（横にスクロールして見せる）の 2 つのレイアウトから、ストアの雰囲気に合わせて自由に選べます。動画の縦横比や再生方法も細かく設定でき、ノーコードで誰でもかんたんに扱えるのが特長です。

シンプル縦型ショート動画ギャラリーのアプリストアヘッダー画像

主な特徴

YouTube・Vimeo・TikTok・Shopify ファイルの動画に対応しています。
グリッド表示とスライダー表示の 2 つのレイアウトから選べます。
クリック・ホバー・スクロール自動再生の 3 つの再生方法に対応しています。
動画の縦横比を横長・縦長・正方形・ワイドから選べます。
最大 12 本の動画を設定でき、タイトルやサムネイルも変更可能です。
コーディング不要でワンクリックでテーマに追加できます。

アプリでできること

縦型ショート動画ギャラリーを簡単に表示！

人気の縦型ショート動画を、ストアにそのままギャラリーとして表示できます。トレンド感のある見せ方で、お客様の目を引くストアづくりに役立ちます。

縦型ショート動画ギャラリーを表示したストア画面

YouTube・Vimeo・TikTok・Shopify ファイルに対応！

YouTube・Vimeo・TikTok・Shopify ファイルの動画 URL に対応しています。すでに公開済みの動画をそのまま活用できるので、新たに動画をアップロードし直す手間がかかりません。

複数の動画サービスに対応した設定画面

グリッド・スライダーの 2 レイアウトに対応！

動画をタイル状に並べる「グリッド」と、横スクロールで見せる「スライダー」の 2 種類のレイアウトから選べます。設置場所や見せたい雰囲気に合わせて、最適な表示方法を選べます。

グリッド表示とスライダー表示の比較

動画の縦横比を自由に選択可能！

横長（16:9）・縦長（9:16）・正方形（1:1）・ワイド（21:9）の 4 種類から、動画の縦横比を選べます。ショート動画には縦長、通常の動画には横長など、コンテンツに合わせて最適な比率を設定できます。

動画の縦横比を選択する設定画面

ノーコードで自由にカスタマイズできる！

タイトルや色、フォントサイズ、矢印やインジケーターのデザインなど、見た目を細かくカスタマイズできます。専門的な知識がなくても、管理画面の設定だけでストアに合ったデザインに整えられます。

カスタマイズ設定パネルが表示されたテーマエディタ

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

アプリの管理画面から、ワンクリックでテーマに動画ギャラリーを追加できます。むずかしい設定は不要で、すぐに使い始められます。

ワンクリックでテーマに追加する画面

アプリのインストール

まずはアプリをインストールしましょう。

▶ シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド（Shopify App Store）

料金：Basic Plan 月額 $6.99（または年額 $69.90 で 17% お得）。インストールから 7 日間は無料でお試しいただけます。

インストール手順

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

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

インストールが完了したら、動画ギャラリーのブロックをテーマに追加します。追加方法は「自動（1 クリック追加）」と「手動」の 2 通りがあります。

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

特定のページにこだわりがない場合は、こちらの方法がかんたんでおすすめです。

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

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

設置するページや位置を自分で決めたい場合は、こちらの方法をご利用ください。

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

アプリのカスタマイズ

テーマに追加した動画ギャラリーは、テーマエディタの設定パネルから細かくカスタマイズできます。ここでは設定項目をグループごとに解説します。

コンテンツ設定

ギャラリー上部の見出しテキストや、全体の色・文字サイズを設定するグループです。

タイトル
ギャラリーの大見出しです。「人気の使い方動画」「ブランドストーリー」など、お客様に伝えたいテーマを入力すると効果的です。
サブタイトル
タイトルの下に表示される補足の文章です。タイトルだけでは伝わりにくい説明を添えたいときに便利です。
テキスト配置
タイトル・サブタイトルの表示位置を選びます。
- 左揃え
- 中央揃え
- 右揃え
ストア全体のデザインに合わせて選ぶと、まとまりのある印象になります。
背景色
ギャラリー全体の背景色です。ストアのブランドカラーに合わせると統一感が出ます。
文字の色
タイトル・サブタイトルの文字色です。背景色とのコントラストを意識すると読みやすくなります。
タイトルのサイズ（PC）
パソコン（769px 以上）で表示する際のタイトルのフォントサイズです。
タイトルのサイズ（スマホ）
スマートフォンで表示する際のタイトルのフォントサイズです。画面の小さいスマホでは少し小さめに設定すると、バランスが整います。
サブタイトルのサイズ（PC）
パソコン（769px 以上）で表示する際のサブタイトルのフォントサイズです。
サブタイトルのサイズ（スマホ）
スマートフォンで表示する際のサブタイトルのフォントサイズです。

コンテンツ設定の設定画面

レイアウト設定

ギャラリーの並べ方や動画の見せ方、スライダーの動作などを設定するグループです。

レイアウト
動画の並べ方を選びます。
- スライダー（横にスクロールして見せる。省スペースで多くの動画を見せたいときに便利です）
- グリッド（タイル状に並べる。一覧で見せたいときにおすすめです）
動画の縦横比
動画の表示比率を選びます。
- 横長（16:9）
- 縦長（9:16）
- ワイド（21:9）
- 正方形（1:1）
ショート動画には縦長、通常の YouTube 動画には横長など、コンテンツに合わせて選ぶときれいに表示されます。
上の余白 / 下の余白
ギャラリーの上下にとる余白の大きさです。前後のコンテンツとの間隔を調整したいときに使います。
角の丸み
動画の角の丸みの大きさです。0 にすると角丸なしになります。やわらかい印象にしたいときは大きめに設定すると効果的です。
カラム数（グリッド）
グリッド表示のときの 1 行あたりの表示数です。パソコン（769px 以上）のみ有効で、タブレットは 2 列、スマホは 1 列に固定されます。
表示枚数（スライダー）
スライダー表示のときに一度に見える動画の枚数です。パソコン（769px 以上）のみ有効で、タブレットは 2 枚、スマホは 1 枚に固定されます。
再生方法
動画の再生方法を選びます。
- クリックで再生（モーダル）：クリックすると拡大表示で再生します
- ホバーで再生：マウスを乗せると再生します（スマホでは自動再生になります）
- その場で再生（スクロールで自動再生）：画面に表示されると自動で再生します
※ ホバー・その場で再生モードでは、リンク URL が設定されている動画はクリック時にリンク先へ移動します。
矢印ボタンを表示
スライダーの左右に表示する矢印ボタンの表示・非表示を切り替えます。スライダーレイアウト時のみ有効です。
スマホ時に矢印を非表示
768px 以下の画面で矢印ボタンを非表示にします。スマホではスワイプ操作で見せたい場合に便利です。
インジケーターのスタイル
スライダーの現在位置を示すインジケーターのデザインを選びます。スライダーレイアウト時のみ有効です。「なし」を選ぶと非表示になります。
- なし
- ピル（丸 → 横長）
- ドット（アクティブ時に拡大）
- ダッシュ（等幅の横棒）
- 数字（例: 1 / 5）
インジケーターとの距離
スライダーとインジケーターの間の距離です。
矢印のスタイル
矢印ボタンの見た目を選びます。スライダーレイアウト時のみ有効です。
- ダーク（黒背景＋白アイコン）
- ライト（白背景＋黒アイコン）
- アウトライン（枠線のみ＋白アイコン）
背景色に合わせて選ぶと、矢印が見やすくなります。
無限スクロール
ON にすると、最後の動画の次に最初の動画へ戻り、ループして表示します。動画をくり返し見せたいときに便利です。
自動進行の間隔（秒）
スライダーが自動で次の動画へ進む間隔（秒）です。0 にすると自動進行しません。スライダーレイアウト時のみ有効です。

レイアウト設定の設定画面

動画設定

ギャラリーに表示する動画を 1 本ずつ設定するグループです。最大 12 本まで登録できます。各動画について、以下の項目を設定できます。

動画の URL（動画 1〜12）
表示したい動画の URL を入力します。YouTube / Vimeo / TikTok / Shopify ファイルの URL に対応しています。
※ TikTok はフル URL（例: tiktok.com/@user/video/ID）のみ対応で、短縮 URL（vm.tiktok.com）には対応していません。
※ 自動再生は YouTube・Vimeo・Shopify ファイルで動作します。TikTok の自動再生はミュート再生が必要で、ブラウザの設定によってはブロックされる場合があります。
サムネイル画像（1〜12）
動画再生前に表示する画像です。設定しておくと、動画の内容が伝わりやすくなり、表示も安定します。
タイトル（1〜12）
サムネイルの上に重ねて表示されるタイトルです。動画プレイヤーのアクセシビリティラベルにも使用されます。動画の内容がひと目で分かるように設定すると親切です。
リンク先（1〜12）
動画をクリックしたときに移動するリンク先 URL です。ホバー・その場で再生モードのみ有効で、設定するとクリック時に再生ではなくリンク先へ移動します（クリックモーダルでは無効です）。商品ページなどへ誘導したいときに便利です。