Shopifyで縦型ショート動画ギャラリーを表示する方法｜動画グリッドの作り方とおすすめアプリ

はじめに
記事の構成
Shopify で縦型ショート動画ギャラリーを表示できる？
縦型ショート動画ギャラリーを表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
アプリの設定項目を理解する
インジケーターのデザインスタイル別の使い分け
すぐ使えるおすすめ設定例
- 文言のテンプレ例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

近年、TikTok や Instagram リール、YouTube ショートといった 縦型ショート動画 が一般化し、商品の魅力を短い動画でテンポよく伝える手法が主流になりつつあります。Shopify でストアを運営していると、「SNS で公開している動画をストアにも並べて見せたい」「複数の動画を 縦型ショート動画ギャラリー や 動画グリッド としておしゃれに表示したい」と感じる方も多いのではないでしょうか。

動画は、テキストや静止画では伝わりにくい質感・サイズ感・使用イメージを直感的に伝えられます。複数の動画をギャラリー形式でまとめて見せることで、お客様の滞在時間を伸ばし、ブランドの世界観を効果的に伝えられるため、購入率の向上が期待できます。

しかし、Shopify の標準機能だけでは、複数の縦型ショート動画をグリッドやスライダーで美しく並べる仕組みを整えるのは簡単ではありません。この記事では、Shopify で縦型ショート動画ギャラリー・動画グリッドを表示する方法を、メリット・デメリットから具体的な実装方法、おすすめアプリの設定手順まで、わかりやすく解説します。

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

記事の構成

この記事は以下の流れで解説します。

Shopify で縦型ショート動画ギャラリーを表示できるのか
動画グリッドを表示するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド」の紹介と設定手順
テーマのコード編集で実装する場合のサンプルコード
運用のコツとよくある質問

Shopify で縦型ショート動画ギャラリーを表示できる？

結論から述べると、Shopify で縦型ショート動画ギャラリーや動画グリッドを表示することは可能です。実現方法は大きく分けて 2 つあります。

テーマのコードを編集して実装する方法
Liquid・HTML・CSS・JavaScript を使って、自分で動画グリッドを組み込む方法です。自由度は高いですが、専門知識が必要です。
アプリを導入して実装する方法
Shopify App Store のアプリを使い、ノーコードで動画ギャラリーを設置する方法です。手軽で保守性が高いのが特徴です。

Shopify の標準機能でも、商品ページに単体の動画を 1 本埋め込むことはできます。しかし、複数の縦型ショート動画をグリッドやスライダーで並べたり、再生方法や縦横比を細かく調整したりする機能は標準では用意されていません。そのため、上記いずれかの方法で実装する必要があります。

縦型ショート動画ギャラリーを表示するメリット・デメリット

メリット

商品の魅力が直感的に伝わる

動画は、テキストや静止画よりも多くの情報を短時間で伝えられます。

商品の質感や色味がリアルに伝わる
実際の使用シーンやサイズ感をイメージできる
着用・利用イメージが湧きやすく、購入の後押しになる

購入後のミスマッチを減らせるため、返品率の低下にもつながります。

滞在時間が伸び、回遊率が向上する

動画コンテンツがあると、お客様がストアに留まる時間が長くなります。

動画を見ている間、ページから離脱しにくくなる
複数の動画を見ることで、他の商品への興味も喚起できる

滞在時間や回遊率の向上は、検索エンジンからの評価にも好影響を与えます。

SNS の動画資産をそのまま活用できる

すでに TikTok や Instagram、YouTube で公開している動画を、ストアにも転用できます。

追加の制作コストをかけずにコンテンツを充実できる
SNS とストアで一貫したブランド体験を提供できる

トレンド感のあるストアを演出できる

縦型ショート動画は SNS で主流のフォーマットです。これをストアに取り入れることで、トレンドに敏感なお客様にも親しみやすい印象を与えられます。

デメリット

ページの表示速度が低下する可能性がある

動画ファイルは容量が大きいため、設置方法によってはページの表示速度が遅くなることがあります。

サムネイル画像を活用し、再生前の読み込みを抑える
遅延読み込み（lazy load）に対応したアプリを選ぶ

これらの対策で、速度低下のリスクを軽減できます。

動画コンテンツの準備に手間がかかる

ギャラリーを充実させるには、ある程度の本数の動画を用意する必要があります。ただし、既存の SNS 動画を URL で指定するだけで使えるアプリを選べば、この手間は大きく軽減できます。

コード編集には専門知識が必要

テーマのコードを直接編集して実装する場合、Liquid・HTML・CSS・JavaScript の知識が必要になります。テーマ更新時に実装が崩れるリスクもあるため、注意が必要です。

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

メリット
- 自由度が高く、デザインを細部まで作り込める
- アプリの月額費用がかからない
デメリット
- Liquid・HTML・CSS・JavaScript の知識が必要
- 複数の動画サービスの埋め込み仕様に個別対応する必要がある
- レスポンシブ対応や再生制御を自分で実装する必要がある
- テーマ更新時に実装が崩れるリスクがある

アプリを導入する方法

メリット
- ノーコードで設置でき、専門知識が不要
- 複数の動画サービスに対応し、再生方法や縦横比も設定で切り替えられる
- 速度対策やレスポンシブ対応がアプリ側で施されている
- 設定変更や保守がかんたん
デメリット
- 月額費用がかかる（多くは数ドル程度）

結論：最初はアプリで小さく試すのがおすすめ

自由度の高さではコード編集に分がありますが、導入の手軽さ・保守性・速度対策を考えると、まずはアプリで小さく試すのがおすすめです。多くのアプリは無料体験を用意しているため、効果を確認してから本格導入を判断できます。動画ギャラリーが自社ストアに合うかどうかを、低コストかつ低リスクで検証できる点が大きな魅力です。

アプリのインストール手順

それでは、実際にアプリをインストールする手順を見ていきましょう。

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

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

インストールが完了したら、動画ギャラリーのブロックをテーマに追加します。特定のページにこだわりがない場合は、自動（1 クリック追加）がかんたんでおすすめです。

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

設置するページや位置を自分で決めたい場合は、「オンラインストア」→「テーマ」→「カスタマイズ」からテーマエディタを開き、「セクションを追加」→「アプリ」タブからアプリブロックを選んで追加することもできます。

アプリの設定項目を理解する

テーマに追加した動画ギャラリーは、テーマエディタの設定パネルから細かくカスタマイズできます。設定は「コンテンツ設定」「レイアウト設定」「動画設定」「追加設定」の 4 グループに分かれています。

コンテンツ設定

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

タイトル：ギャラリーの大見出し。「人気の使い方動画」「ブランドストーリー」など、伝えたいテーマを入力すると効果的です。
サブタイトル：タイトルの下に表示される補足の文章。
テキスト配置：左揃え・中央揃え・右揃えから選択。
背景色・文字の色：ストアのブランドカラーに合わせて設定。
タイトル・サブタイトルのサイズ（PC / スマホ）：デバイスごとにフォントサイズを設定。

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

レイアウト設定

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

レイアウト：スライダー／グリッドを切り替え。
動画の縦横比：横長（16:9）・縦長（9:16）・ワイド（21:9）・正方形（1:1）から選択。
上下の余白・角の丸み：前後のコンテンツとの間隔やデザインの印象を調整。
カラム数（グリッド）／表示枚数（スライダー）：PC での 1 行あたりの表示数を設定（タブレットは 2、スマホは 1 に固定）。
再生方法：クリックで再生（モーダル）／ホバーで再生／その場で再生（スクロールで自動再生）から選択。
矢印ボタン・インジケーターのスタイル・無限スクロール・自動進行の間隔：スライダーの動作とデザインを細かく調整。

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

動画設定と追加設定

動画設定では、最大 12 本の動画について、それぞれ動画 URL・サムネイル画像・タイトル・リンク先 URL を設定できます。追加設定では、このブロック内にのみ適用されるカスタム CSS を入力できます。

追加設定の設定画面

インジケーターのデザインスタイル別の使い分け

スライダーレイアウトでは、現在位置を示すインジケーターのデザインを 5 種類から選べます。ストアの雰囲気に合わせて使い分けると、より洗練された印象になります。

なし

TODO: 画像を入れる（インジケーター「なし」のプレビュー画像）

インジケーターを表示しないスタイルです。動画そのものに集中させたいときや、矢印ボタンだけで操作させたいときに向いています。ミニマルなデザインのストアと相性が良いスタイルです。

ピル（丸 → 横長）

TODO: 画像を入れる（インジケーター「ピル」のプレビュー画像）

アクティブな位置が丸から横長に変化するスタイルです。現在位置がひと目で分かりやすく、汎用的に使えます。どんなストアにもなじみやすい、おすすめのスタイルです。

ドット（アクティブ時に拡大）

TODO: 画像を入れる（インジケーター「ドット」のプレビュー画像）

アクティブな位置のドットが拡大するスタイルです。シンプルかつ視認性が高く、動画の本数が少ないときにすっきり見せられます。

ダッシュ（等幅の横棒）

TODO: 画像を入れる（インジケーター「ダッシュ」のプレビュー画像）

等幅の横棒で位置を示すスタイルです。スタイリッシュでモダンな印象を与えられるため、ファッションやアパレル系のストアに向いています。

数字（例: 1 / 5）

TODO: 画像を入れる（インジケーター「数字」のプレビュー画像）

「1 / 5」のように現在位置を数字で表示するスタイルです。動画の総数と現在位置が明確に分かるため、本数が多いギャラリーでも分かりやすく案内できます。

なお、矢印ボタンのスタイルも、ダーク（黒背景＋白アイコン）・ライト（白背景＋黒アイコン）・アウトライン（枠線のみ＋白アイコン）の 3 種類から、背景色に合わせて選べます。

TODO: 画像を入れる（矢印スタイルの設定画面）

すぐ使えるおすすめ設定例

ストアの目的に合わせた、おすすめの設定例を紹介します。

縦型ショート動画ギャラリーで世界観を伝える場合

レイアウト：スライダー
動画の縦横比：縦長（9:16）
再生方法：その場で再生（スクロールで自動再生）
インジケーター：ピル
自動進行の間隔：5 秒

SNS のフィードのような感覚で、トレンド感のあるギャラリーを演出できます。

商品の使い方動画を一覧で見せる場合

レイアウト：グリッド
動画の縦横比：横長（16:9）
カラム数：3〜4
再生方法：クリックで再生（モーダル）

複数の使い方動画を一覧で見せ、気になる動画をクリックして拡大再生してもらえます。

文言のテンプレ例

タイトル：「人気の使い方動画」「お客様の声」「ブランドストーリー」
サブタイトル：「動画で商品の魅力をチェック」「実際の使用シーンをご覧ください」

テーマのコード編集で実装する場合のサンプルコード

アプリを使わずに、テーマのコードを直接編集して簡易的な動画グリッドを実装する方法も紹介します。

実装の流れ

セクションファイルまたはカスタム 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 は埋め込み仕様が異なるため、サービスごとに対応する必要があります。
再生方法（クリック・ホバー・自動再生）の制御や、サムネイル画像の差し替えは、追加で実装が必要です。
テーマをアップデートすると、編集したコードが上書きされて消えるおそれがあります。

こうした手間や保守の負担を考えると、ノーコードで設定でき、複数サービスや再生方法に標準対応したアプリの導入が現実的でおすすめです。

運用のコツ

動画には必ずサムネイル画像を設定する：再生前の表示が安定し、ページ速度の低下を抑えられます。
動画の本数は欲張りすぎない：読み込み負荷とのバランスを考え、まずは 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 で縦型ショート動画ギャラリー・動画グリッドを表示するには、テーマのコード編集とアプリ導入の 2 つの方法がある。
動画ギャラリーは、商品の魅力を直感的に伝え、滞在時間を伸ばし、SNS の動画資産を活用できるなど、多くのメリットがある。
手軽さ・保守性・速度対策を考えると、まずはアプリで小さく試すのがおすすめ。
「シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド」は、YouTube・Vimeo・TikTok・Shopify ファイルに対応し、ノーコードでグリッド・スライダーの動画ギャラリーを設置できる。

動画を活用して、ぜひお客様の心に残るストアづくりにお役立てください。