Zenn
🌊

Shopifyで動画埋め込みを実装する方法を考察

に公開
Shopify
shopifyアプリ
tech

はじめに

今回は、Shopify で動画を埋め込む方法について考察しました。

HTML・CSS・JavaScript を用いて動画を埋め込む方法や、Liquid を用いて動画を埋め込む方法を考察していきます。

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

Shopify で動画埋め込みを実装する定義

動画を埋め込むという行為は、ウェブ上の任意のページに対して、YouTube や Vimeo などのプラットフォーム、あるいは自前でホスティングしている動画ファイルを表示させることを指します。EC サイトにおいて動画は、商品やブランドの世界観を直感的に伝える手段として非常に有効です。

特に、Shopify のような EC プラットフォームでは、多彩な商品画像や文章だけでなく、動画を活用することで、ユーザーの購買意欲を高めることができます。

Shopify で動画埋め込みを実装するメリット

まずは、Shopify で動画を埋め込むことにどのようなメリットがあるかを考えていきましょう。

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

動画は、テキストや画像では伝えきれない魅力をユーザーに直接伝えることができます。商品説明を動画で行うことで、ユーザーが実際に商品を手に取ったようなイメージを得やすくなります。結果として、ユーザーエクスペリエンスが向上し、購入意欲の増加につながることが期待できます。

2. ブランディング効果

ブランドの世界観やストーリーを動画で表現すると、ユーザーの印象に残りやすくなります。魅力的な動画コンテンツがあると、「他の商品も見てみたい」と思わせるフックにもなり、ブランディングに大きく貢献してくれます。

3. 滞在時間の延長・CVR 向上

動画があるページは、ユーザーの滞在時間が長くなる傾向にあります。滞在時間が長くなることで、ショップ全体の回遊率が上がり、結果的にコンバージョン率（CVR）の向上にも期待できます。

4. 多角的な商品アピール

動画を通じて、商品サイズや使用イメージなどを多角的にアピールできます。ユーザーは購入後のイメージが具体的になり、購入前の不安が軽減されるため、購入後の満足度も高まりやすくなります。

5. SNS シェアとの相性

YouTube などの動画プラットフォームを使用すれば、ユーザーが簡単に SNS へシェアすることも可能になります。拡散性が高まるため、SNS プロモーションとの相性が非常に良い点も魅力です。

Shopify で動画埋め込みを実装するデメリット

続いて、動画埋め込みを実装するデメリットについても考えていきましょう。

1. ページの表示速度への影響

動画は容量が大きくなる場合が多く、ページの読み込み速度に影響を与える可能性があります。特に、自前ホスティングで高画質の動画を埋め込む場合は注意が必要です。

2. ユーザーの通信環境による視聴困難

スマホやタブレットなどで閲覧するユーザーが増えていますが、通信環境が悪い場合、再生がスムーズにいかない可能性があります。結果として、ページの離脱を招くリスクも考慮する必要があります。

3. 動画制作コスト

魅力的な動画を制作するには、機材や撮影のスキル、場合によってはプロへの依頼などコストがかかります。簡単に制作できる場合もありますが、クオリティを求めるほど費用と時間が必要になる点に注意が必要です。

4. デザイン・レイアウトとの整合性

動画プレイヤーを埋め込むと、サイト全体のデザインを崩してしまうことがあるかもしれません。特に、自動再生やループ再生など、実装する機能によってはサイト全体のレイアウトへの影響を考慮しなければならない場合があります。

Shopify で動画埋め込みを実装する方法

それではここから、Shopify で動画を埋め込むためのコーディング例を紹介していきます。まずは、HTML・CSS・JavaScript を用いたサンプルコードを見ていきましょう。

<!-- HTML で動画を埋め込む例 -->
<div class="video-container">
  <!-- YouTube の埋め込み例 -->
  <iframe
    class="video-iframe"
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

<style>
  /* 動画のスタイル */
  .video-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 アスペクト比を維持するため */
    height: 0;
    overflow: hidden;
    background-color: #f9f9f9;
  }
  .video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const videoElm = document.querySelector('.video-iframe');

    // 自動再生を設定する場合は、URL パラメータを追加（mute をセットしないとブラウザによって再生されない場合があります）
    // 例: https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1
    
    console.log('動画が埋め込まれました。');
  });
</script>

上記の例では、YouTube の動画を埋め込んでいますが、Vimeo など他サービスの埋め込みコードでも同様に対応可能です。

  • <iframe> タグで動画を呼び出す
  • CSS でレスポンシブ対応するために padding-bottom を指定
  • JavaScript で自動再生設定を加える場合は、URL パラメータに autoplay=1&mute=1 のようなパラメータを付与

Liquid を用いた動画埋め込み

Shopify で動的に動画を埋め込みたい場合や、テンプレートによって動画を出し分けたい場合は、以下のように Liquid を活用することもあります。

{% if section.settings.video_url %}
<div class="video-container">
  <iframe
    class="video-iframe"
    width="560"
    height="315"
    src="{{ section.settings.video_url }}"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>
{% endif %}

section.settings.video_url のようにセクションの設定項目を作っておけば、管理画面からノーコードで URL を変更可能です。

シンプル動画埋め込み｜お手軽どこでも動画挿入 の機能について

Shopify のコード編集が難しい方や、複雑な要望（例えば自動再生設定、ループ再生設定、複数動画のグリッド表示など）をノーコードで手軽に実装したい方には、以下のアプリがおすすめです。

以下のShopify公式のアプリストアからインストールできます。

https://apps.shopify.com/sa-084-ur-video-app?locale=ja

以下の公式のご利用ガイドを元に解説していきます。

https://unreact.jp/shopify-apps/sa-084-ur-video-app/guide

アプリ名: シンプル動画埋め込み｜お手軽どこでも動画挿入

  • 価格: 月額 $3.99
  • 評価: 0.0 (0 レビュー)
  • 開発者: 株式会社UnReact

主な特徴

  1. ノーコードでのカスタマイズ
    自動再生やループ再生、カラム数や余白調整など、コーディング無しで設定が可能です。

  2. あらゆるページへの埋め込み
    トップページやコレクションページ、ブログ記事ページなど、Shopify ストア上のあらゆるページに動画を設置できます。

  3. 最大 4 つの動画をグリッド表示
    複数の動画を並べて表示でき、複数ブロックを組み合わせれば 4 つ以上の動画も一覧表示が可能です。

  4. ストアへの追加が簡単
    インストール後、ワンクリックでストア内に動画ブロックを追加できます。

  5. ブランドの世界観を強化
    動画でブランドイメージや商品コンセプトを伝え、ユーザーのエンゲージメントを高めることができます。

英語には対応していますが、日本語にはまだ翻訳されていないようです。しかし、シンプルな UI で操作も簡単なので、初心者の方でも使いやすい点が魅力です。

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

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

こちらは、Shopify にアップロードした動画をストアにノーコードで埋め込みできるアプリです。

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

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

様々な項目をノーコードでカスタマイズできます。

以下の Shopify 公式のアプリストアからインストールできます。

https://apps.shopify.com/sa-084-ur-video-app?locale=ja

最後に

今回は、Shopify で動画を埋め込む方法について、コーディングによる実装と「シンプル動画埋め込み｜お手軽どこでも動画挿入」というアプリを併用する方法の両面から解説しました。

  • コーディングでの実装: HTML と CSS、さらに JavaScript や Liquid を駆使して自由度の高いカスタマイズが可能
  • アプリを使った実装: ノーコードで複雑な機能やレイアウトを簡単に設定できる

ぜひ、自身のストアにあった方法を選択し、動画を活用してブランドの世界観や商品の魅力を存分にアピールしてみてください。

お疲れさまでした。

参考記事

この記事の内容は、以下の記事を参考にしています。

Discussion