Shopifyストアに動画を埋め込む方法を解説！動画サイズは？自動再生はできる？

Shopifyストアを運営していて、動画を活用したいとお考えの方も多いと思います。Shopifyでは、動画の埋め込みも簡単です。

この記事では、Shopifyストアでの動画埋め込み方法を中心に、埋め込める動画のサイズや自動再生の方法などを解説します。Shopifyストアで動画を活用している事例も紹介しますので、参考にしてください。

Shopifyで動画を埋め込む方法

Shopifyで動画を埋め込むには、大きく分けて次の2つです。

• YouTubeやVimeoを埋め込む
• mp4などの動画を埋め込む

それぞれの埋め込み方法について説明します。

YouTubeやVimeoを埋め込む

Shopifyでは、YouTubeやVimeoにアップロードした動画をストアに埋め込めます。ただしテーマによって仕様が異なるので、利用するテーマで動画の埋め込みが可能か否か事前に確認してください。

ここでは、Shopifyの人気無料テーマであるDawnを例に説明します。動画を埋め込める箇所は、トップページ、商品ページ、ブログ記事ページなどです。

1．トップページに埋め込む方法

トップページにYouTubeやVimeoにある動画を埋め込む方法は次の通りです。

Shopify管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。

次に左側メニュー内「テンプレート」の「セクションを追加」をクリックし「動画」を選びます。

追加した動画セクションを開き、YouTubeやVimeoから取得したURLを貼り付けます。

※YouTubeやVimeoの動画URLの確認方法は下記の通りです。

（YouTube）

（Vimeo）

2．商品ページやブログに動画を埋め込む方法

商品ページやブログに動画を埋め込む際は、「埋め込みスニペット」を書き込みます。埋め込みスニペットとは、動画を埋め込むコードのようなもので、YouTubeやVimeoから簡単にコピーできます。

先に説明したYouTubeとVimeoのURL確認方法と同じ箇所を開きます。

YouTubeでは「埋め込む」をクリックした先に埋め込みスニペットが表示され、Vimeoでは「埋め込みコードをコピー」をクリックするだけでコピーが可能です。

（YouTube）

（Vimeo）

商品ページとブログへの埋め込み方法は以下の通りです。

＜商品ページ＞

1. 「商品管理」をクリックし商品ページの編集画面を開く
2. 「説明」の動画を挿入したい部分にカーソルを合わせる
3. 「動画を挿入」のアイコンをクリックする
4. 埋め込みスニペットを貼り付ける

＜ブログ記事＞

1. 「オンラインストア」→「ブログ記事」をクリックして編集ページを開く
2. 「コンテンツ」の動画を挿入したい部分にカーソルを合わる
3. 「ビデオを挿入する」をクリックする
4. 埋め込みスニペットを貼り付ける

mp4などの動画を埋め込む

動画を直接Shopifyにアップロードして埋め込むこともできます。

1．トップページに埋め込む方法

Shopifyに動画を直接アップロードしてトップページに埋め込む方法は、動画セクションを追加するところまでYouTubeやVimeoを埋め込む方法と同じです。

動画セクションを開き、「Shopifyがホストするビデオ」→「ビデオの選択」をクリックし、動画をアップロードすると埋め込みが完了します。

2．商品ページやブログに動画を埋め込む方法

商品ページでは「メディア」ブロックに、Shopifyにアップロードした動画を表示可能です。「メディア」ブロックの「URLから追加」をクリックし、アップロードした動画のURLを貼り付けます。

Shopifyへの動画のアップロードは、管理画面の「コンテンツ」→「ファイル」から行えます。

動画のURLはファイル名の右にある「リンク」をクリックすると表示されます。

ブログ記事では、エディターを利用して挿入できるのは、埋め込みスニペットのみです。Shopifyにアップロードした動画を挿入する場合は、HTMLで書き込まないといけません。ブログ記事にShopifyにアップロードした動画を使用する際には、下記のようなコードを書き込みます。

Shopifyで動画を自動再生させる方法

Shopifyで動画を自動再生させる際のポイントは、以下の3つです。

• Shopifyでは自動再生を推奨していない
• 自動再生するにはコードの書き換えが必要
• iPhoneの低電力モードでは自動再生されない

動画を自動再生させたいとお考えの方は参考にしてください。

Shopifyでは自動再生を推奨していない

Shopifyでは低視力、聴覚障害、難聴、前庭障害の方のため、動画の自動再生が推奨されていません。多くのお客様に快適な買い物体験を提供できるようにという、Shopifyのポリシーによるものです。例えば、前庭障害がある方は平衡感覚を保つのが難しく、動画を見るとめまいがする恐れがあります。

また、動画の視聴が難しい方は、スクリーン情報のテキスト化や音声化する機能を利用しているため、動画コンテンツにも配慮が必要です。Shopifyでは、動画を使用する際に下記のガイドラインの使用を呼びかけています。

• ビデオは自動的に再生しません。
• ビデオを自動的に再生する場合は、音声をミュートにします。
• オーディオを含むビデオの場合、ビデオは完全に表示され、他のページ要素によって遮られることはありません。これにより、字幕が引き続き表示されます。
• 対話を含むビデオでは、文字起こしの利用が可能です。これらは、ページまたは別のページへのリンクに含まれています。

　（引用：Shopify）

動画を利用する際には、上記のガイドラインも参考にしてください。

自動再生するにはコードの書き換えが必要

Shopifyでは利用しやすさの観点から、動画の自動再生を推奨していないため、自動再生を行う場合にはカスタマイズが必要です。カスタマイズにはLiquidやCSSといったコードの書込みが必要で、動画を配置したい場所やデザインによってコーディングしなければいけません。

カスタマイズには専門的な知識が必要になるため、少しでも不安がある場合はプログラマーや開発会社などに相談しましょう。技術的な質問は、Shopify コミュニティにも多くの事例がありますので、こちらもご参考にしてください。

iPhoneの低電力モードでは自動再生されない

Shopifyで動画を自動再生している方に多くあるトラブルが、iPhoneの低電力モード時の再生です。iPhoneにはバッテリーの残量がわずかになった際に、電力の使用を抑える低電力モードという機能があります。

低電力モードが起動している端末では、動画の自動再生は行われません。iPhoneの仕様のため、Shopify側で変更できません。

Shopifyにアップロードできるファイルサイズ

Shopifyで定められている動画ファイルの要件は以下の通りです。

動画ファイルの大きさは、解像度やフレームレートなどによって異なりますが、4Kで撮影した場合は約1分で1GB前後です。とはいえ、想定するユーザーの使用デバイスがスマホやタブレットなどであれば、4Kのような高画質は必要ありません。なぜなら、高画質の動画であっても、閲覧側の端末が対応していない場合は、見せたい画質で表示されないからです。

また、高画質な動画は通信料が高かったり、読み込みに時間がかかったりして、かえってユーザーの負担になるケースもあります。参考までに、YouTubeでは1280p×720のハイビジョンもしくは、1920×1080のフルハイビジョンが多く使用されています。動画ファイルがアップロードできないときは、動画の大きさも確認してみてください。

Shopifyストアで動画を使うメリット

Shopifyストアで動画を使うメリットは、以下の3つです。

• 商品情報が伝わりやすい
• 印象に残りやすい
• サイトの滞在時間が伸びる
• マーケティングに利用できる

それぞれのメリットを見ていきましょう。

商品情報が伝わりやすい

ECストアで動画を活用すると、静止画やテキストよりも商品情報が伝わりやすくなります。物品であれば、商品の大きさや質感をリアルに見られ使用イメージが湧きやすく、無形サービスであれば映像と音声でより理解が深まります。

印象に残りやすい

動画は、テキストに比べて印象に残りやすくなります。広告に関する調査では、広告の認知度において動画広告はバナー広告の約1.7倍の認知度があることがわかっています。つまり、ビジュアルや音声、ストーリーによって訴求できる動画は、テキストよりも印象に残りやすいということです。

サイトの滞在時間が伸びる

ECストアで動画を活用すると、ユーザーの滞在時間が伸びてSEOや売上に良い影響をもたらします。Googleはコンテンツの評価を、離脱率や滞在時間といったユーザーの行動をもとに行っています。そのため離脱率が低くて滞在時間が長いコンテンツは、ユーザーに役立つ良いコンテンツと評価されやすく、間接的にSEOの改善に寄与しています。

また、ある研究によると平均滞在時間を上回ったユーザーによる売上が、ECストア全体の売上の86%であることがわかりました。（イタリアのボッコーニ大学とアメリカのFanplayrが行った共同研究）つまり、滞在時間が長くなればなるほど、購入に至る確率が高まるということです。検索エンジンからの評価と売上の両面において、動画コンテンツはECストアのメリットとなります。

マーケティングに利用できる

動画から得られる情報は、マーケティングにも活用できます。例えば、YouTubeのアナリティクス機能の利用です。

YouTubeのアナリティクス機能では、ユーザーが動画のどこで離脱したのかがわかります。商品説明の動画であれば、顧客の興味があるポイントや反対にあまり関心がない部分も調査できるでしょう。

異なるコンセプトの動画を2つ用意すれば、ABテストもできます。動画を通して得られたデータを、商品の改善や販促方法の見直しに活用しましょう。

Shopifyストアに動画を埋め込むデメリット

Shopifyストアに動画を埋め込む際は、デメリットも把握しておきましょう。主なデメリットは、下記の2つです。

• サイトの表示が遅くなる
• 制作やストアのカスタマイズにコストがかかる

それぞれ説明していきます。

サイトの表示が遅くなる

動画はデータ量が多いため、読み込むのに時間がかかり、サイト表示が遅くなります。サイト表示が遅いと、ユーザーの離脱につながったり、検索エンジンからの評価が下がったりします。

せっかくいいコンテンツを作っても、見てもらえなければ意味がありません。動画を埋め込む際には、サイト表示速度にも気を配りましょう。

制作やストアのカスタマイズにコストがかかる

質の高い動画コンテンツやサイトデザインをつくるには、制作コストがかかります。

例えば、ブランドイメージに関わる動画制作は、専門のノウハウが必要になります。さらに動画をデザイン性高くストアに埋め込みたい場合には、高度な技術的知識をもつ企業に依頼するのが懸命です。

そうした場合、動画制作とストアカスタマイズにかかるコストは小さくはないでしょう。動画を活用する際には、コスト面も十分に検討する必要があります。

Shopifyストアで動画埋め込みをしている事例

Shopifyストアで動画埋め込みを活用している事例を4つ紹介します。

• SOÉJU（ソージュ）／アパレル
• RR COFFEE／焙煎豆珈琲屋
• CYCLISM／サイクリング用品
• Our Place／キッチン小物

他社の事例を参考に、自社での動画活用をイメージしてみてください。

SOÉJU（ソージュ）／アパレル

引用：SOÉJU

女性向け商品を展開するアパレルブランドのSOÉJでは、ブランドイメージの発信に動画を活用しています。Vimeoにアップロードした動画を埋め込んでおり、配置箇所はトップページの最下部です。

ブランドイメージを中心とした内容で、最後に表示されるコピー以外文字での情報はありません。動画の長さは41秒と短いため、途中で視聴を止めるユーザーも少ないでしょう。

RR COFFEE／焙煎豆珈琲屋

引用：RR COFFEE

RR COFFEEは「うなぎロースト」という、独自の焙煎法を使用したコーヒー豆を販売するECストアです。動画はShopifyにアップロードしたものをトップページに埋め込み、自動再生しています。

動画の内容は、独自の焙煎法であるうなぎローストの説明です。アニメーションを取り入れ、実際の焙煎の様子などを交えながら展開していきます。

文字の誘導もあり、音がなくても自然と内容に惹き込まれます。1分4秒とは思えないほどリズムよく展開するので、初めてストアに訪れる人は、恐らく最後まで視聴するでしょう。

CYCLISM／サイクリング用品

引用：CYCLISM

本格的なサイクリング用品を取り扱うのが、CYCLISMです。トップページメインビジュアルに動画を使用し、自動再生させています。サイクリング用品販売店ならではの、躍動感と疾走感が伝わるイメージ動画です。

商品ページでは取り扱いブランドのYouTube動画を埋め込み、テキストや画像の説明にプラスしています。ロードバイクは100万円以上と非常に高価なため、商品説明には丁寧さが必要です。また、走行している様子を動画でみせることで、購入後のイメージが湧き、購買意欲を掻き立てる効果もあります。

まとめ

Shopifyの動画埋め込み方法や動画の活用について説明しました。Shopifyで適用するテーマによって仕様は異なるものの、簡単に動画を埋め込めます。

ただし、動画を自動再生させたり、表示デザインを変更させたりしたい場合はカスタマイズが必要です。カスタマイズにはLiquidなどのコード知識が必要になるので、わからない場合は専門の業者に相談しましょう。動画をうまく活用し、ストアの売上アップにつなげていきましょう。

Shopifyストアの構築はShopify認定パートナーのフルバランスへ

フルバランスはShopifyストアの構築をサポートしています。Shopifyは、誰でも簡単にECストアを構築できる優れたサービスです。

一方で「この部分を変えたい」「他とは違うデザインにしたい」「どのアプリを使えばいいかわからない」といったお悩みも多く寄せられます。フルバランスはShopifyの日本参入初期からストア構築をサポートしてきたため、さまざまなご要望やお悩みに対応してきました。

お客様の売上最大化を目指し、パートナーとしてストア構築をご支援いたします。ECストアで実現したいことを、ぜひフルバランスにご相談ください。