ShopifyストアにYouTube動画を簡単に埋め込めるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプル YouTube 埋め込み｜どこでも動画挿入」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプル YouTube 埋め込み｜どこでも動画挿入」は、シンプルに YouTube 動画をどこにでも埋め込めるアプリです。
アプリを利用することで、あらゆるページに YouTube 動画を設置し、お店のブランド力・訴求力を高めることができます。また、複数の動画をグリッド表示したり、自動再生やループ再生などをノーコードで簡単に設定できるため、専門知識がない方でもスムーズに導入が可能です。
ご興味のある方は、以下の URL からインストールしてみてください。
「シンプル YouTube 埋め込み｜どこでも動画挿入」でできること
Shopify アプリである「シンプル YouTube 埋め込み｜どこでも動画挿入」は、以下のように店舗内のあらゆるページに YouTube 動画を設置できるアプリです。
主な特徴は次のとおりです。
- コード不要・30 秒で設置
インストールしてテーマに追加するだけで、すぐにストアに動画を埋め込めます。 - 自動再生・ループ再生など多彩な設定が簡単
ノーコードで操作できるので、誰でも簡単に動画の見せ方をカスタマイズ可能です。 - 最大 4 つまでのグリッド表示
複数動画を一度に表示して、ブランドの世界観をアピールしやすくなります。
これらを活用することで、ストアを訪れた顧客の興味を引き付け、ブランドのイメージ訴求やコンバージョン向上につなげることができます。
YouTube 動画を埋め込める
あらゆるページに YouTube 動画を挿入できます。商品ページやブログ記事など、必要な箇所に簡単に埋め込んで、お店の世界観をより魅力的に伝えましょう。
YouTube 動画をグリッド表示できる
YouTube 動画を 1 カラム〜4 カラムで表示することができます。複数のブロックを使えば、さらに多くの動画を一覧で並べることも可能です。
ノーコードでカスタマイズできる
自動再生やループ再生、コントロールの表示・非表示、カラム数、余白などをノーコードで設定できます。HTML や CSS の知識がなくても、カンタンにデザインを整えられます。
1 クリックでテーマに追加できる
アプリをインストール後、1 クリックでストアへの YouTube 動画アプリブロックを追加できます。難しいコードの編集作業は一切必要ありません。
シンプル YouTube 埋め込みアプリのインストール
それでは、実際にアプリをインストールしていきましょう。
アプリの料金は、月額 $4.99（無料お試し期間なし）となっております。
ストア管理画面左下の「設定」をクリックします。
「アプリと販売チャネル」をクリックし、「Shopify App Store」に移動してください。
検索窓に「シンプル YouTube 埋め込み｜どこでも動画挿入」と入力し、表示されたアプリをクリックします。
アプリの詳細画面から「インストール」ボタンをクリックしてストアにインストールします。こちらのアプリは月額 $4.99 でご利用いただけます。
「インストールボタン」をクリックすると、必要な権限が表示されますので確認して「インストール」を完了してください。
以下のアプリ管理画面が表示されます。
以上で、アプリのインストールは完了です。
シンプル YouTube 埋め込みのアプリブロックをテーマに追加
「シンプル YouTube 埋め込み｜どこでも動画挿入」を実際にテーマに組み込み、YouTube 動画をストア上に表示できるように設定していきましょう。
自動でアプリをテーマに追加
アプリの管理画面を開いてください。
『テーマに YouTube 動画を追加」の「テーマを選択」でアプリブロックを追加したいテーマを選択してください。
「テーマに追加」ボタンをクリックします。
テーマ編集画面が開き、アプリが有効化されます。
「保存する」をリックして、有効化は完了です。
以上で、テーマに自動的に YouTube 埋め込みアプリブロックが追加されます。
手動でアプリをテーマに追加
自動追加がうまくいかない場合や、別のテーマで手動調整したい場合、TOP ページ以外にアプリブロックを追加したい場合は以下の手順で行ってください。
アプリ管理画面を開いて下さい。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックします。
テーマエディタが開くので、アプリを追加したい画面に移動します。
「セクションを追加」または「ブロックを追加」をクリックします。
「アプリ」のタブに「YouTube 埋め込み」というアプリブロックが表示されるので、クリックして追加します。
アプリセクションが追加されその中に YouTube 埋め込みブロックが追加されました。詳細な設定が完了したタイミングで「保存する」ボタンをクリックしてください。
以上で、手動でのブロック追加は完了です。
シンプル YouTube 埋め込みアプリのカスタマイズ
テーマにアプリブロックを追加したら、テーマエディタで「シンプル YouTube 埋め込み｜どこでも動画挿入」のカスタマイズを行えます。
「YouTube 埋め込み」ブロックをクリックすると、下記のような設定項目が表示されます。
動画設定
「YouTube リンク（または ID）」には、埋め込みたい YouTube 動画のリンク URL（例：https://www.youtube.com/watch?v=xxxxx）または動画 ID（例：xxxxx）を入力します。
最大 4 つの動画を一度に設定することができます。複数の動画を設定した場合、グリッドレイアウトで表示されます。
自動再生やループ再生などの再生設定ができます。
- 自動再生を有効化：有効にすると、ページ読み込み時に動画が自動的に再生されます（ブラウザ仕様によりミュート状態となります）。
- ループ再生を有効化：動画が終わったら再度再生を繰り返します。
- コントロールを表示する：再生バーなどのコントロール UI を表示するかどうかを選択できます。
- 関連動画を表示する：動画終了後に関連動画を表示するかどうかを選択できます。
- キーボード操作を無効化する：キーボードのショートカット（スペースキーで再生/一時停止など）を無効にするか設定できます。
レイアウト設定
「カラム数（PC / スマホ」で動画のグリッド表示の列数を 1 ～ 4 カラムから選択可能です。PC 用とスマホ用で異なるカラム数を指定することができます。
「動画間の余白（PC / スマホ）」で各動画の間隔をピクセル単位で調整できます。
ブロックの余白設定
アプリブロックの余白に関する設定ができます。設定できる余白は以下の通りです。
- 左右の余白（PC / スマホ）
- 上部の余白（PC / スマホ）
- 下部の余白（PC / スマホ）
ブロック全体に対して上下左右の余白を設定し、レイアウトの見栄えを整えます。
その他の設定
「追加 CSS」で設定項目以外に CSS を使って見た目をカスタマイズすることができます。直接 CSS のコードを入力して下さい。クラス名などは検証を利用して取得してください。
おわりに
今回は「シンプル YouTube 埋め込み｜どこでも動画挿入」の解説を行いました。
- あらゆるページに YouTube 動画を設置して、ストア訪問者へ動画を使ったブランドの世界観を簡単にアピール
- 1 ブロックあたり最大 4 本の動画をグリッド表示して訴求力をアップ
- 月額 $4.99 で利用可能
動画を使って顧客の興味を引きつけ、ブランディングやコンバージョン向上にぜひお役立てください。
ここまでお読みいただき、誠にありがとうございました。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
