Zenn
📝

ShopifyストアにVimeo動画を埋め込む方法を考察

2025/02/21に公開
Shopify
shopifyアプリ
tech

はじめに

今回は、Shopify ストアに Vimeo 動画を埋め込む方法について考察しました。
HTML・CSS・JavaScript で直接 Vimeo 動画を埋め込む方法や、Shopify アプリ「シンプル Vimeo 埋め込み｜お手軽どこでも動画挿入」を使ってノーコードで埋め込む方法を解説していきます。

それでは、頑張っていきましょう。

Shopify で Vimeo 動画を埋め込む定義

Vimeo 動画を Shopify に埋め込むことで、商品紹介やブランドの世界観を効果的に演出することができます。動画を使うことでテキストや画像だけでは伝わりにくい魅力を直感的に訴求でき、ユーザーの購買意欲やエンゲージメントを高めることが可能です。

また、Vimeo は外部ホスティングサービスとして動画を安定して配信できるため、サイトの負荷を軽減しながら動画コンテンツを展開できる点でも有用です。

Shopify で Vimeo 動画を埋め込むメリット

それでは、まず Vimeo 動画を埋め込むメリットについて解説します。

1. ユーザーエクスペリエンスの向上

動画を用いることで、ユーザーは商品やブランドの魅力を短時間で理解しやすくなります。特にテキストや画像だけでは表現しづらい使用感やストーリー性を、動画を通じて効果的に伝えることができます。

2. 高いブランド訴求力

動画があることで、サイトを訪れたユーザーがブランドの雰囲気や製品の特徴を強く認識しやすくなります。結果的にブランド体験を向上させ、リピーターの獲得やSNS での拡散にもつながりやすいです。

3. コンバージョン率の向上

商品デモや使い方を動画で分かりやすく提示することで、購入検討時の不安を軽減できます。実際の使い方や詳細な内容を動画で示すことで、購入ボタンを押してもらいやすくなる可能性があります。

4. サイト滞在時間の延長

動画コンテンツはテキストや画像コンテンツに比べてユーザーの滞在時間を伸ばす効果が期待できます。結果的にバウンス率の改善や、他のページへの回遊促進にもつながります。

5. プロモーションの幅が広がる

動画はYouTubeだけでなく、Vimeo や TikTok、Instagram など多くのプラットフォームと連携できます。商品ページに埋め込むだけでなく、SNS でシェアするなどプロモーションの幅を広げられます。

Shopify で Vimeo 動画を埋め込むデメリット

次に、Vimeo 動画を埋め込むデメリットについて考察します。

1. 読み込み速度への影響

動画は通常の画像やテキストに比べてファイルサイズが大きく、ページの読み込み速度に影響を与える可能性があります。ネット回線が遅いユーザーにとっては動画がうまく表示されない場合もあるため、キャッシュ対策や画質の最適化を考慮する必要があります。

2. 音声や自動再生の扱い

動画には音声が含まれるケースが多く、再生場所や自動再生の設定によってはユーザーにストレスを与える可能性があります。埋め込み時の設定や再生ポリシーを慎重に考えないと、離脱率が逆に高まってしまうかもしれません。

3. 外部サービス依存

Vimeo などの外部サービスを利用する場合、そのサービスが提供する埋め込み機能やサーバ状況に依存します。Vimeo 側の不具合や規約の変更で、動画が突然再生できなくなるリスクもゼロではありません。

4. 多数の動画埋め込みによるページ設計の複雑化

動画を多用することで、ページ全体のレイアウトが複雑になるケースがあります。ユーザーが目的の商品情報にたどり着きづらくならないように、全体の構成を考えて埋め込む場所や数を調整する必要があります。

Shopify で Vimeo 動画を埋め込む方法

ここからは、Shopify で Vimeo 動画を埋め込む具体的な方法について解説します。

まずは、HTML・CSS・JavaScript を用いたコーディングによる実装です。

1. 簡単な埋め込み例（HTML）

最もシンプルな方法は、Vimeo から取得した埋め込みコードをそのまま貼り付ける方法です。以下のような HTML コードになります。

<!-- Vimeo 動画埋め込みのサンプル -->
<div class="vimeo-embed-container">
  <iframe 
    src="https://player.vimeo.com/video/あなたの動画ID" 
    width="640" 
    height="360" 
    frameborder="0" 
    allow="autoplay; fullscreen; picture-in-picture" 
    allowfullscreen
  ></iframe>
</div>

このコードを任意のセクションまたはテンプレートに貼り付けると、動画を埋め込むことができます。

2. 外観調整用の CSS

上記のコンテナに対して、レスポンシブ対応などを施すために CSS を加えます。

.vimeo-embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 アスペクト比 */
  height: 0;
  overflow: hidden;
  margin: 20px 0;
}

.vimeo-embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

これにより、動画が様々な画面サイズで適切に表示されるようになります。

3. 複数動画をグリッド表示する例（HTML・CSS）

複数の Vimeo 動画をグリッドで配置したい場合は、以下のように複数の埋め込み要素を並べつつ、CSS の display: grid を活用する方法があります。

<!-- 複数 Vimeo 動画のグリッド表示サンプル -->
<div class="vimeo-grid">
  <div class="vimeo-grid-item">
    <iframe 
      src="https://player.vimeo.com/video/動画ID_1" 
      frameborder="0" 
      allow="autoplay; fullscreen; picture-in-picture" 
      allowfullscreen
    ></iframe>
  </div>
  <div class="vimeo-grid-item">
    <iframe 
      src="https://player.vimeo.com/video/動画ID_2" 
      frameborder="0" 
      allow="autoplay; fullscreen; picture-in-picture" 
      allowfullscreen
    ></iframe>
  </div>
  <!-- 必要に応じて追加 -->
</div>

.vimeo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.vimeo-grid-item {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.vimeo-grid-item iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

このようにコードで実装する方法は柔軟ですが、テーマ編集やソースコードの管理が必要になるため、非エンジニアの方には少しハードルが高いかもしれません。

Shopify アプリを用いて Vimeo 動画を埋め込む方法

そこで登場するのが、シンプル Vimeo 埋め込み｜お手軽どこでも動画挿入という Shopify アプリです。

シンプル Vimeo 埋め込み｜お手軽どこでも動画挿入 の特徴

  • 月額 $4.99
  • 開発者: 株式会社UnReact
  • 評価: 0.0 (0 レビュー)
  • あらゆるページに Vimeo 動画を埋め込み可能
  • 最大4つまでの Vimeo 動画をグリッド表示
  • 自動再生やループ再生などの動画設定もノーコードで設定
  • 余白やカラム数のデザインカスタマイズもノーコード

このアプリを使えば、複雑なコード編集をすることなく、ワンクリックで簡単に Vimeo 動画を追加できます。以下のような悩みを一挙に解決可能です。

  • 「Shopify のストアに Vimeo 動画を埋め込みたい…」
  • 「動画の自動再生やループ再生を簡単に設定したい…」
  • 「複数の Vimeo 動画を一覧表示したい…」

以下が、Shopify 公式のアプリストアになります。

https://apps.shopify.com/sa-083-ur-vimeo-app?locale=ja

インストールと使用の流れ

  1. Shopify アプリストアで「シンプル Vimeo 埋め込み｜お手軽どこでも動画挿入」を検索し、インストール。
  2. アプリを起動し、埋め込みたい動画の Vimeo ID もしくは動画 URL を入力。
  3. 自動再生やループ再生、グリッドレイアウトのカラム数などをノーコードで設定。
  4. 「保存」または「Publish」をクリックすると、設定が反映されてストア上に Vimeo 動画が埋め込まれる。

コーディング不要で簡単30秒

アプリを導入すると、ストア側で用意しているセクションやブロックに埋め込み場所を指定するだけで、動画表示が完了します。コーディングの知識がなくても気軽に動画を活用できるので、エンジニアを雇ったり外注したりするコストを大幅に削減できるでしょう。

シンプル Vimeo 埋め込み｜どこでも動画挿入の概要

ここからは、シンプル Vimeo 埋め込み｜どこでも動画挿入の概要について解説していきます。

こちらのアプリは、Vimeo 動画をShopifyストアにノーコードで埋め込むことができるアプリです。

あらゆるページに Vimeo 動画を簡単に挿入できます。

Vimeo 動画をグリッドで表示できます。

また、様々な設定項目をノーコードでカスタマイズ可能です。

1 クリックでテーマに追加可能です。

以下のリンクから、インストールが可能です。
https://apps.shopify.com/sa-083-ur-vimeo-app?locale=ja

最後に

今回は、Shopify で Vimeo 動画を埋め込む方法について、コーディングによる実装と、アプリ「シンプル Vimeo 埋め込み｜お手軽どこでも動画挿入」を利用する方法の二種類を紹介しました。

動画を取り入れることで、ユーザーに強いインパクトを与えられるだけでなく、ブランドの世界観を効果的にアピールできるようになります。ノーコードで動画を埋め込みたい方は、ぜひ今回紹介したアプリの導入も検討してみてください。

お疲れさまでした。

参考記事

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

Discussion