カスタムページの編集時には、「動画コレクションブロック」を追加することで、YouTube・Facebook・Vimeo の動画をページ内に挿入できます。また、動画の配置を調整することも可能です。
⚠️ ご利用前にご注意ください：
- SHOP Builder は現在、Ultra Chic、Kingsman、Varm、Philia のテーマのみ対応しています。
- SHOP Builder で作成したページは、他のテーマに切り替えた場合でも表示は可能ですが、編集はできず、レイアウトが崩れる可能性があります。公開前に内容をご確認ください。
本記事では以下の内容について説明します：
１、動画コレクションブロックを追加
STEP 1.
SHOPLINE 管理画面の「オンラインストアデザイン > オンラインストアページ」に移動し、「カスタムページ」または「編集」をクリックすると、カスタムページの編集画面が開きます。
STEP 2.
「ブロック」ボタンをクリックします。
STEP 3.
「動画コレクション」のブロックを選択します。
STEP 4.
YouTube、Facebook、または Vimeo の動画 URL を入力します。
「＋ 動画」をクリックすると、動画を追加できます。１行につき最大４件まで追加できます。
*ご注意：
- 時間指定 URL や短縮 URL には現在対応していません。
- モバイル端末では画面サイズの制限により、１行につき１件の動画のみ表示されます。
STEP 5.
動画のタイトルを入力し、タイトルの配置（左寄せ／中央揃え／右寄せ）を設定します。
STEP 6.
動画の各種設定を調整できます（上位５項目はデフォルトでオフになっています）：
- フル幅表示：動画をページ幅いっぱいに表示します。
-
シンプル再生モード：再生開始後、進行バー・音量・ロゴなどの外部プラットフォームのコントロールが非表示になります。この場合、再生／一時停止のみ操作できます。
- 表示内容は各プラットフォームの仕様により異なる場合があります。実際の再生イメージは以下をご参照ください。
- 自動再生：ページをスクロールして動画が表示されると、自動的に再生されます。
- ループ再生：動画終了後、先頭から繰り返し再生されます。
- ミュートで再生：再生時は音声がミュートされた状態で開始されます。
- 動画比率：動画の表示比率を選択できます。（16:9／4:3／9:16）
- 余白：動画コレクションブロックとページ間の余白を調整します。
＊ご注意：
- 動画の撮影時のアスペクト比に合わせて、適切な設定を選択してください。そうでない場合、動画の上下または左右に黒帯が表示されることがあります。
- ブラウザ共通の仕様（Chrome、Safari など）により、動画を自動再生するには、ミュート設定をオンにする必要があります。実際の再生イメージは以下をご参照ください。
- シンプル再生モードは、自動再生をオンにした場合にのみ使用できます。
- 各プラットフォームにより、シンプル再生モードおよびループ再生の挙動は異なります。これらの設定を利用する場合は、「自動再生」と「ミュートで再生」をあわせてオンにすることをおすすめします。
STEP 7.
設定中に、画面下部の「保存」をクリックすると、右側のプレビュー画面で追加した動画コレクションブロックを確認できます。
または、画面右上の「ストアフロントでプレビュー」をクリックすると、ストアフロントでの表示を確認できます。
※参考：下図は Facebook 動画を例としています。全画面表示や Facebook 上での視聴に対応しています。
STEP 8.
上記の設定が完了したら、画面右上の「公開」をクリックしてください。ストアフロントにて、本ページに追加した内容が表示されます。
２、動画の再生イメージ
ケース１
「自動再生」をオンにし、顧客が「モバイル端末で」動画を含むページを閲覧している場合現在はこの条件では動画の自動再生には対応していません。顧客は再生ボタンをタップする必要があり、タップ後はそのままストアフロント上で動画が再生されます。
ケース２
「自動再生」をオフにし、顧客が「モバイル端末」で動画を含むページを閲覧している場合動画を再生するには、再生ボタンを２回タップする必要があります。再生は全画面表示で行われます。
ケース３
「自動再生」をオンにし、顧客が 「PC」で動画を含むページを閲覧している場合動画を自動再生するには、「ミュートで再生」もあわせてオンにする必要があります。
ケース４
「自動再生」をオフにし、顧客が「PC」で動画を含むページを閲覧している場合顧客は再生ボタンをクリックする必要があります。クリック後は、そのままストアフロント上で動画が再生されます。
ケース５
「シンプル再生モード」および「ループ再生」をオンにし、顧客が「PC」で動画を含むページを閲覧している場合YouTube
「シンプル再生モード」と「ループ再生」を使用するには、「自動再生」と「ミュートで再生」をあわせてオンにする必要があります。
＊備考：再生開始から 1〜2 秒後に、コントロールが非表示になります。動画をタップすると一時停止し、「他の動画」のみが表示されます。再度タップすると再生が続行されます。
Vimeo
「シンプル再生モード」と「ループ再生」を使用するには、「自動再生」をオンにする必要があります。再生時は音声がミュートされた状態で開始されます。
＊備考：再生開始と同時に、すべてのコントロールが非表示になります。動画をタップすると一時停止し、再度タップすると再生が続行されます。
「シンプル再生モード」と「ループ再生」を使用するには、「自動再生」と「ミュートで再生」をオンにする必要があります。
＊備考：動画をタップして一時停止しても、進行バーや音量などのコントロールは表示されますが、操作はできません。ボタンをタップすると、再生が続行されます。
ケース６
「シンプル再生モード」および「ループ再生」をオンにし、顧客が「モバイル端末」で動画を含むページを閲覧している場合
YouTube
「シンプル再生モード」と「ループ再生」を使用するには、「自動再生」と「ミュートで再生」をオンにする必要があります。
＊備考：再生開始から 1〜2 秒後に、コントロールが非表示になります。動画をタップすると一時停止し、再度タップすると再生が続行されます。
Vimeo
「シンプル再生モード」と「ループ再生」を使用するには、「自動再生」をオンにする必要があります。再生時は音声がミュートされた状態で開始されます。
＊備考：再生開始と同時に、すべてのコントロールが非表示になります。動画をタップすると一時停止し、再度タップすると再生が続行されます。
「シンプル再生モード」には対応していません。動画をタップしても再生されません。
「ループ再生」を使用するには、「シンプル再生モード」をオフにするか、「ミュートで再生」をオンにしてください。
３、注意事項
- 動画が削除されている場合や、公開範囲が一部のユーザーに限定されている場合は、再生できません。
- ライブ配信の動画を追加し、「自動再生」と「ミュートで再生」をオンにしている場合：
- 「モバイル端末」で閲覧する場合は、再生ボタンをタップする必要があります。タップ後は全画面表示で再生されます。
- 「PC」で閲覧する場合は、「ミュートで再生」をオンにしていれば、自動的に再生されます。
- 動画の読み込み中は画面が黒く表示されることがありますが、これは Facebook の仕様によるものです。
コメント