Shopifyで縦型ショート動画ギャラリーを表示する方法｜動画グリッドの作り方とおすすめアプリ
目次
- はじめに
- Q. そもそも動画を載せると売上は変わるの？
- Q. Shopify の標準機能だけで縦型ショート動画ギャラリーは作れる？
- Q. 動画ファイルの容量や長さに制限はある？
- Q. アプリとコード、結局どちらで実装すべき？
- アプリで作る場合「シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド」
- アプリのインストール手順
- アプリをテーマに追加（有効化）
- Q. 設定項目が多そう。どこを触ればいい？
- 目的別のおすすめ設定例
- Q. どこに設置すると効果が高い？
- Q. アプリを使わずコードで作るには？
- Q. 速度や本数で失敗しないコツは？
- よくある質問
- まとめ
- 参考記事
はじめに
「TikTok や Instagram リールに上げた縦型ショート動画を、そのまま Shopify のストアにも並べたい」——そう考えて検索したものの、調べるほど疑問が増えてくる、という方は少なくないはずです。標準機能でどこまでできるのか、複数の動画を 「グリッド」 で並べるにはどうするのか、アプリとコードのどちらが良いのか、そもそも動画を載せると本当に売上が動くのか。
この記事は、Shopify 縦型ショート動画ギャラリー や Shopify 動画グリッド を実装するときに実際によく聞かれる質問を起点に、ひとつずつ答えていく構成にしました。Shopify 動画 表示 方法 をこれから決める段階の方が、遠回りせず判断できることを目指しています。筆者は Shopify アプリの開発・運用に携わる立場から、仕様の数値や効果データといった「調べないと判断できない部分」を中心に補足していきます。
今回は以下の記事を参考にしています。
- Shopifyで縦型ショート動画ギャラリーや動画グリッドを導入できるアプリについて徹底解説｜ご利用ガイド
- Shopifyに縦型ショート動画ギャラリー・動画グリッドを設置できるアプリ6選を紹介！
- Shopifyで縦型ショート動画ギャラリーを設置できるアプリ5選！動画グリッドでストアを魅力的に演出
Q. そもそも動画を載せると売上は変わるの？
最初に気になるのは、手間をかける価値があるのかという点でしょう。ここは感覚論ではなく、ショッパブル動画（買えるショート動画）の計測データが参考になります。
海外の調査では、動画があるサイトのコンバージョン率は 4.8%、動画がない場合は 2.9% という差が報告されています。また、ショッパブル動画を見た視聴者の 41% が購入に至り、購入意欲は最大で 9倍 に高まるとされます。複数ブランドを横断した管理下の A/B テスト（7ブランド・20万セッション以上、2025年11月〜2026年4月）では、サイト全体のコンバージョン率が中央値で +17〜33%、動画を視聴したユーザーに限ると中央値で +125%（上位は +500%）上昇したという結果も出ています。
平均注文額（AOV）の実例も示されています。あるブランドは130本以上のショッパブル動画を運用して平均注文額が +65%、別のブランドは数カ月でカート追加が2,000件を超え、ROI が62倍に達したと報告されています。数字の出方はストアによって変わりますが、「動画を視聴したかどうか」でこれだけ差が出る以上、視聴してもらう導線をどう作るかが要点になる、という整理ができます。
縦型ショート動画ギャラリーは、まさにこの「視聴される導線」を作るための見せ方です。1本だけ埋め込むより、複数本を並べて回遊させたほうが視聴接点が増える、と考えると役割がはっきりします。
Q. Shopify の標準機能だけで縦型ショート動画ギャラリーは作れる？
ここがいちばん誤解の多いところです。先に答えを言うと、複数の縦型ショート動画をグリッドやスライダーで並べる標準セクションは存在しません。
公式の標準セクションを整理すると、こうなります。
- 「動画」セクションは、YouTube / Vimeo の埋め込みか、Shopify にホストした動画の単体表示に対応します。あくまで1本を見せる用途です。
- 「ギャラリー」セクションは画像を最大4枚まで並べてリンクを設定できますが、これは静止画用で、動画グリッドではありません。
つまり「縦型ショート動画を複数まとめてタイル状に並べたい」「横スクロールのスライダーで見せたい」といったニーズは、標準セクションの組み合わせでは満たせません。実現するには、後述の テーマのコードを編集する方法 か、アプリを導入する方法 のどちらかが必要になります。これは公式の標準セクション仕様にもとづいた事実なので、「標準で頑張れないか」と粘る前に把握しておくと時間を節約できます。
Q. 動画ファイルの容量や長さに制限はある？
意外と見落とされがちで、後から作り直しになりやすいのがこの仕様です。Shopify の動画には 2つの仕様レイヤー があり、混同するとアップロードでつまずきます。
- 「ファイル」ページ／メタフィールド経由で扱う場合：最大 1GB・最長 10分・最大 4K（4096×2160px）、MP4 / MOV に対応します。
- 商品メディアへ直接アップロードする場合：実質 20MB前後・720p で、30〜60秒程度が目安です。Shopify 公式も商品メディアについては 「20MB未満・1分以内」 を推奨しています。
縦型ショート動画は 9:16 の解像度で書き出すとファイルが重くなりがちです。商品メディアに直接載せるつもりで4K長尺を用意すると、容量オーバーで弾かれることがあります。「どのレイヤーに置くか」を先に決めてから書き出すのが、やり直しを防ぐコツです。ギャラリーアプリで外部サービス（YouTube・Vimeo・TikTok）の URL を指定する方式なら、この容量制限の影響を受けにくい、という利点もあります。
Q. アプリとコード、結局どちらで実装すべき？
「自由度ならコード、手軽さならアプリ」とよく言われますが、判断材料をもう少し具体的に並べます。
テーマのコードを編集する場合
- 自由度が高く、デザインを細部まで作り込めます。
- アプリの月額費用がかかりません。
- 一方で、Liquid・HTML・CSS・JavaScript の知識が必要です。
- YouTube・Vimeo・TikTok など、動画サービスごとに異なる埋め込み仕様へ個別対応する必要があります。
- レスポンシブ対応や再生制御（クリック・ホバー・自動再生）も自前で実装します。
- テーマ更新時に編集が上書きされて崩れるリスクがあります。
アプリを導入する場合
- ノーコードで設置でき、専門知識が不要です。
- 複数の動画サービスに対応し、再生方法や縦横比を設定で切り替えられます。
- 速度対策やレスポンシブ対応がアプリ側で施されています。
- 設定変更や保守がかんたんです。
- 月額費用がかかります（多くは数ドル程度）。
実装方法を選ぶうえで、海外の計測データはもうひとつヒントをくれます。レイアウト別のベンチマークでは、画面に常時表示される フローティング型はカルーセル型の約8倍のエンゲージメント を記録した、という報告があります。設置場所と見せ方によって効果が大きく変わるということは、レイアウトや再生方法を後から手軽に切り替えられる仕組みのほうが、検証を回しやすいことを意味します。
このため筆者としては、最初はアプリで小さく試す進め方を推しています。多くのアプリが無料体験を用意しているので、効果を確認してから本格導入を判断でき、自社ストアに合うかどうかを低コスト・低リスクで検証できます。細部まで作り込みたいフェーズに入ってからコード化を検討しても遅くありません。
アプリで作る場合「シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド」
ここからは、ノーコードで縦型ショート動画ギャラリー・動画グリッドを設置できる日本製アプリ 「シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド」 を例に、実際の作り方を見ていきます。海外のショッパブル動画アプリ（Vimotia、Whatmore、ReelUp、Videowise など）が多機能で価格帯も上がりがちな中、必要十分な機能を月額 $6.99 で使える点が、最初の一本に向いています。
アプリの基本情報
- アプリ名：シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド
- 料金：Basic Plan 月額 $6.99（年額 $69.90 で 17% お得）、7 日間の無料体験あり
- 対応動画サービス：YouTube・Vimeo・TikTok・Shopify ファイル
- 特徴：グリッド・スライダーの 2 レイアウト、4 種類の縦横比、3 種類の再生方法、ノーコードで設置可能
このアプリでできること
縦型ショート動画ギャラリーをそのまま表示
人気の縦型ショート動画を、ストアにギャラリーとして並べて表示できます。SNS のフィードに近いテンポ感で見せられるので、前述の「視聴される導線」を作りやすいのが実務上のメリットです。
YouTube・Vimeo・TikTok・Shopify ファイルに対応
YouTube・Vimeo・TikTok・Shopify ファイルの動画 URL に対応しています。すでに公開済みの動画を URL で指定するだけなので、アップロードし直す手間がなく、先ほどの容量制限の悩みも回避しやすくなります。
グリッド・スライダーの 2 レイアウトを切り替え
動画をタイル状に並べる 「グリッド」 と、横スクロールで見せる 「スライダー」 の2種類から選べます。設置場所や見せたい雰囲気に合わせて切り替えられるため、効果検証を回しやすい設計です。
動画の縦横比を4種類から選択
横長（16:9）・縦長（9:16）・正方形（1:1）・ワイド（21:9）の4種類から縦横比を選べます。ショート動画には縦長、通常の商品紹介には横長、といったようにコンテンツに合わせて最適な比率を設定できます。
ノーコードで細かくカスタマイズ
タイトルや色、フォントサイズ、矢印やインジケーターのデザインまで、見た目を管理画面の設定だけで整えられます。CSS を書かなくてもブランドに合わせられるので、デザイナーがいないチームでも運用しやすいはずです。
1 クリックでテーマに追加
アプリの管理画面から、ワンクリックでテーマに動画ギャラリーを追加できます。むずかしい設定は不要で、その日のうちに公開まで進められます。
アプリのインストール手順
ここからは、実際にアプリをインストールする手順を見ていきます。
-
Shopify 管理画面の左下にある「設定」をクリックします。
-
「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
-
検索窓に「シンプル縦型ショート動画ギャラリー」と入力し、表示されたアプリをクリックします。
-
アプリ詳細画面で「インストール」をクリックします。
-
権限の確認画面が表示されるので、内容を確認して「インストール」を完了します。
アプリをテーマに追加（有効化）
インストールが完了したら、動画ギャラリーのブロックをテーマに追加します。設置ページにこだわりがなければ、自動（1 クリック追加）がかんたんでおすすめです。
-
アプリの管理画面を開きます。
-
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
-
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。
設置するページや位置を自分で決めたい場合は、「オンラインストア」→「テーマ」→「カスタマイズ」からテーマエディタを開き、「セクションを追加」→「アプリ」タブからアプリブロックを選んで追加することもできます。
Q. 設定項目が多そう。どこを触ればいい？
テーマに追加した動画ギャラリーは、テーマエディタの設定パネルからカスタマイズします。設定は 「コンテンツ設定」「レイアウト設定」「動画設定」「追加設定」 の4グループに分かれています。最初に触るべきは「動画設定」と「レイアウト設定」で、ここだけ整えればまず公開できます。
コンテンツ設定
ギャラリー上部の見出しテキストや、全体の色・文字サイズを設定するグループです。
- タイトル：ギャラリーの大見出し。「人気の使い方動画」 や 「ブランドストーリー」 など、伝えたいテーマを入力すると効果的です。
- サブタイトル：タイトルの下に表示される補足の文章。
- テキスト配置：左揃え・中央揃え・右揃えから選択。
- 背景色・文字の色：ストアのブランドカラーに合わせて設定。
- タイトル・サブタイトルのサイズ（PC / スマホ）：デバイスごとにフォントサイズを設定。
レイアウト設定
ギャラリーの並べ方や動画の見せ方、スライダーの動作などを設定するグループです。
- レイアウト：スライダー／グリッドを切り替え。
- 動画の縦横比：横長（16:9）・縦長（9:16）・ワイド（21:9）・正方形（1:1）から選択。
- 上下の余白・角の丸み：前後のコンテンツとの間隔やデザインの印象を調整。
- カラム数（グリッド）／表示枚数（スライダー）：PC での 1 行あたりの表示数を設定（タブレットは 2、スマホは 1 に固定）。
- 再生方法：クリックで再生（モーダル）／ホバーで再生／その場で再生（スクロールで自動再生）から選択。
- 矢印ボタン・インジケーターのスタイル・無限スクロール・自動進行の間隔：スライダーの動作とデザインを細かく調整。
動画設定と追加設定
動画設定では、最大12本の動画について、それぞれ動画 URL・サムネイル画像・タイトル・リンク先 URL を設定できます。追加設定では、このブロック内にのみ適用されるカスタム CSS を入力できます。
目的別のおすすめ設定例
ストアの目的に合わせた設定例を紹介します。そのまま真似してもらえれば、最初の公開はすぐに切れます。
縦型ショート動画ギャラリーで世界観を伝えたいとき
- レイアウト：スライダー
- 動画の縦横比：縦長（9:16）
- 再生方法：その場で再生（スクロールで自動再生）
- インジケーター：ピル
- 自動進行の間隔：5 秒
SNS のフィードのような感覚で、トレンド感のあるギャラリーを演出できます。
商品の使い方動画を一覧で見せたいとき
- レイアウト：グリッド
- 動画の縦横比：横長（16:9）
- カラム数：3〜4
- 再生方法：クリックで再生（モーダル）
複数の使い方動画を一覧で見せ、気になる動画をクリックして拡大再生してもらえます。
文言のテンプレ例
- タイトル：「人気の使い方動画」 「お客様の声」 「ブランドストーリー」
- サブタイトル：「動画で商品の魅力をチェック」 「実際の使用シーンをご覧ください」
Q. どこに設置すると効果が高い？
設置場所によって動画の役割は変わります。前述のとおりレイアウトや表示位置で効果が大きく変わるため、目的に合わせて置き分けるのがコツです。
SNS マーケティングと連携させる
TikTok や Instagram で公開している動画をストアの動画ギャラリーにも転用すれば、SNS とストアで一貫したブランド体験を提供できます。SNS で動画を見たお客様が、そのままの感覚でストアの動画ギャラリーを楽しみ、購入へ進む流れを作れます。各動画にリンク先 URL を設定すれば、動画から該当商品ページへ直接誘導することも可能です。
商品ページを補強する
商品ページに動画グリッドを設置すると、商品写真だけでは伝わりにくい使用感やサイズ感を補完できます。レビューやお客様の声と組み合わせれば、信頼感をさらに高められます。動画視聴者のコンバージョン率が大きく伸びるという計測結果を踏まえると、購入判断の直前にある商品ページは特に相性が良い設置場所です。
ランディングページ・特集ページを演出する
セールやキャンペーンの特集ページに縦型ショート動画ギャラリーを設置すると、ページに動きと華やかさが加わり、訴求力が高まります。ブランドの世界観を伝えたいトップページにも効果的です。
これらと組み合わせることで、動画を起点とした回遊・購入の導線を強化できます。
Q. アプリを使わずコードで作るには？
「自前で作り込みたい」「月額費用をかけたくない」という場合に向けて、テーマのコードを直接編集して簡易的な動画グリッドを実装する方法も紹介します。先ほど触れた縦型 9:16 の比率維持と遅延読み込みを、最小構成で押さえた例です。
実装の流れ
- セクションファイルまたはカスタム Liquid ブロックに HTML を追加する
- グリッドレイアウトと縦横比を整える CSS を追加する
- 遅延読み込みのための JavaScript を追加する
HTML を追加
<div class="video-grid">
<div class="video-grid__item">
<iframe
data-src="https://www.youtube.com/embed/VIDEO_ID_1"
title="商品紹介動画 1"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<div class="video-grid__item">
<iframe
data-src="https://www.youtube.com/embed/VIDEO_ID_2"
title="商品紹介動画 2"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<!-- 動画の数だけ video-grid__item を追加 -->
</div>
CSS を追加
.video-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.video-grid__item {
position: relative;
width: 100%;
/* 縦型ショート動画（9:16）の比率を維持 */
aspect-ratio: 9 / 16;
border-radius: 12px;
overflow: hidden;
}
.video-grid__item iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* タブレットは 2 列、スマホは 1 列に */
@media (max-width: 768px) {
.video-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.video-grid {
grid-template-columns: 1fr;
}
}
JavaScript を追加
// data-src に動画 URL を入れておき、画面に入ったときに読み込む
document.addEventListener('DOMContentLoaded', () => {
const iframes = document.querySelectorAll('.video-grid__item iframe[data-src]');
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const iframe = entry.target;
iframe.src = iframe.dataset.src;
obs.unobserve(iframe);
}
});
});
iframes.forEach((iframe) => observer.observe(iframe));
});
コードで作るときの注意点
- TikTok や Vimeo は埋め込み仕様が異なるため、サービスごとに対応する必要があります。
- 再生方法（クリック・ホバー・自動再生）の制御や、サムネイル画像の差し替えは、追加で実装が必要です。
- テーマをアップデートすると、編集したコードが上書きされて消えるおそれがあります。
こうした手間や保守の負担を考えると、ノーコードで設定でき、複数サービスや再生方法に標準対応したアプリの導入が、多くのストアにとっては現実的な選択になります。
Q. 速度や本数で失敗しないコツは？
動画は容量が大きいぶん、運用の仕方で印象が変わります。最後に、つまずきやすいポイントを先回りで押さえておきます。
- 動画には必ずサムネイル画像を設定する：再生前の表示が安定し、ページ速度の低下を抑えられます。
- 動画の本数は欲張りすぎない：読み込み負荷とのバランスを考え、まずは4〜8本程度から始めるのがおすすめです。
- 縦横比は動画の種類に合わせる：縦型ショート動画には縦長、横型の商品紹介動画には横長を選ぶと、きれいに表示されます。
- リンク先 URL を活用する：ホバー・その場で再生モードでは、動画クリック時に商品ページへ誘導できます。
よくある質問
Q. TikTok の動画は使えますか？
A. 使えます。ただし、フル URL（例: tiktok.com/@user/video/ID）のみ対応で、短縮 URL（vm.tiktok.com）には対応していません。
Q. 動画は何本まで設定できますか？
A. 最大12本まで設定できます。各動画にタイトル・サムネイル・リンク先 URL も設定可能です。
Q. スマホでも見やすく表示されますか？
A. はい。グリッドはスマホで1列、タブレットで2列に自動調整され、レスポンシブに表示されます。
Q. ページの表示速度に影響はありますか？
A. サムネイル画像を設定しておくことで、再生前の読み込み負荷を抑えられます。動画は必要なタイミングで読み込まれる設計のため、速度への影響を最小限にできます。
Q. コーディングの知識は必要ですか？
A. 必要ありません。管理画面からワンクリックでテーマに追加でき、設定もすべてテーマエディタから行えます。
Q. 自動再生はすべての動画サービスで動きますか？
A. 自動再生は YouTube・Vimeo・Shopify ファイルで動作します。TikTok の自動再生はミュート再生が必要で、ブラウザの設定によってはブロックされる場合があります。
まとめ
- Shopify の標準セクションには複数の縦型ショート動画をグリッド／スライダーで並べる機能がなく、コード編集かアプリのどちらかが必要です。
- 動画ファイルは「ファイル経由なら最大1GB・10分・4K」「商品メディア直は20MB未満・1分以内が目安」という2つの仕様レイヤーを意識すると、やり直しを防げます。
- ショッパブル動画は視聴者のコンバージョン率や平均注文額を大きく押し上げる計測データがあり、設置場所やレイアウトで効果が変わります。手軽に検証できるアプリから小さく試すのが進めやすい方法です。
- 「シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド」 は、YouTube・Vimeo・TikTok・Shopify ファイルに対応し、ノーコードでグリッド・スライダーの動画ギャラリーを設置できます。
動画を活用して、お客様の心に残るストアづくりにお役立てください。
参考記事
今回は以下の記事を参考にしています。
