動画の使用

注目のリンク

1. 動画設定に関するCompany XYZドキュメント
2. セクション背景設定に関するCompany XYZドキュメント
3. ファイルのアップロードと管理に関するShopifyドキュメント
4. 商品メディアの追加に関するShopifyドキュメント
5. テーマのアクセシビリティに関するShopifyドキュメント

役立つ動画

Shopify Academy動画：ストアをカスタマイズする

Shopify Academy動画：ストアをカスタマイズする

Alignは、独立したメディア領域、セクションとバナーの背景、商品ギャラリー、スライドショー、ナビゲーションプロモーション、複合コンテンツレイアウトで動画をサポートします。ほとんどの配置では、動画ソース、フレーミング、再生、ポスター、オーバーレイに同じ基本コントロールを使用しますが、設定ラベルはコンテキストによって異なる場合があります。

このガイドを使用して動画を準備し、Shopifyストアで実用的な設定を選択してください。設定の詳細については、動画設定およびセクション背景設定を参照してください。

動画ソースを選択する

ほとんどのAlign動画領域は、次の3種類のソースのいずれかをサポートします。

1. Shopifyホスト型動画
   1. Shopifyストアのファイルからファイルをアップロードまたは選択します。
   2. エンコード、ループ、ファイルサイズ、背景スタイルの再生を管理する必要がある場合に、このオプションを使用します。
   3. セクション、バナー、ヒーローの背景動画処理には、ホスト型動画が必要です。
2. YouTube
   1. 埋め込みコードではなく、動画ページのURLを貼り付けます。
   2. 動画がすでにYouTubeにあり、プロバイダーのホスティングで要件を満たせる場合にYouTubeを使用します。
3. Vimeo
   1. 埋め込みコードではなく、動画ページのURLを貼り付けます。
   2. 動画がすでにVimeoにあり、プロバイダーのホスティングで要件を満たせる場合にVimeoを使用します。

ファイルのアップロード手順については、ファイルのアップロードと管理に関するShopifyドキュメントを参照してください。

各動画領域では、使用するソースを1つにしてください。ホスト型ファイルとサービスURLの両方が指定されている場合は、ホスト型ファイルが優先されます。あいまいさを避けるため、使用しないソースを消去してください。外部動画の変更を反映するには、Shopifyテーマエディターのプレビューがストアフロントと一致する前に保存が必要な場合があります。

ヒント

外部動画では、最初にポスターが読み込まれます。完全なプレーヤーは、操作した後、または自動再生動画が表示されたときにのみ読み込まれます。

ホスト型動画ファイルを準備する

ファイル容量は、特にモバイルでの読み込み時間に直接影響します。Shopifyは適応型ストリーミング（HLS）でホスト型動画を配信しますが、より低いビットレートでエンコードすると、PageSpeedと体感パフォーマンスをさらに改善できます。ストリーミングを利用できる場合でも、ソースファイルを小さくすることは重要です。

ビットレートを理解する

ビットレートとは、1秒ごとにエンコードされる動画データの量です。

1. 高いビットレートでは動きや細部が鮮明になりますが、ファイル容量が大きくなり、ページのデータ量も増えます。
2. 低いビットレートではファイルが軽くなって高速に開始できますが、動きの速いシーンや暗いシーンの細部が失われる場合があります。

ほとんどのエンコーダーでは、ビットレートはkbpsまたはMbpsで表示されます。単一の最高品質設定ではなく、見た目の品質とパフォーマンスのバランスとして扱ってください。

まずは次のエンコード目標から始める

1. 一般的な用途 — 独立した動画、ヒーロークリップ、商品メディア、全幅セクション背景には、約2500 kbpsを使用します。
2. 小型またはコンパクトな配置 — メニュープロモーション、検索バナー、フッターメディア、コラージュタイル、その他の狭いフレームには、約1000～1500 kbpsを使用します。
3. 背景および環境動画 — ファイルを短く、ループしやすく、視覚的にシンプルにします。通常、これらの動画はミュートで自動再生されるため、映画的というより軽快に感じられるようにします。

動画が表示されるサイズに合わせて解像度を設定します。小さなバナーで表示する1080pや4Kのマスターは、表示結果を改善せずに帯域幅だけを増やします。

背景、スライドショー動画、注目ヒーロークリップなど、自動再生される領域は特にパフォーマンスの影響を受けやすくなります。短いクリップ、ミュート再生、控えめなビットレートを使用してください。

異なる配置で動画を使用する

同じ動画の概念を、Alignエディターのさまざまな場所で適用できます。次のグループは、すべての個別セクションではなく、一般的な役割を説明するものです。

1. 独立した動画領域
   1. 専用の動画セクションと、複合レイアウトの動画ブロックが含まれます。
   2. ホスト型、YouTube、Vimeoのソースをサポートします。
   3. 任意のキャプションやボタンを使用して、デモ、ブランドストーリー、説明動画、編集メディアに適しています。
2. セクションとバナーの背景
   1. 見出し、バナー、ヒーロー、プロモーションコンテンツの背後に装飾的な動きを追加します。
   2. ホスト型ファイルのみを使用します。
   3. 通常はミュートで自動再生し、ループして、コントロールを非表示にします。
   4. 画面サイズによって異なるトリミングが必要な場合、デスクトップ用とモバイル用に別々の背景ファイルをサポートすることがあります。
3. 商品画像
   1. 商品ページと注目の商品領域の商品ギャラリー動画が含まれます。
   2. ホバーメディアが有効な場合、商品カードの任意のホバー動画を含めることができます。
   3. 購入者は意図的な再生を期待するため、ここではポスターフレームと再生コントロールが特に役立ちます。
4. スライドショーとカルーセルのメディア
   1. 動画でスライド画像を置き換えたり、上書きしたりできます。
   2. 通常、スライドがアクティブになるとクリップが自動再生されるため、シーケンス内で意図したものに感じられるよう、十分に短くします。
5. コンパクトなプロモーション領域
   1. ナビゲーション、検索、その他の高密度な領域にある小さなバナースタイルの配置が含まれます。
   2. これらの配置は、高いビットレートと大きなファイルサイズの影響を最も受けやすくなります。

商品ギャラリーへのアップロード手順とサポートされているメディアタイプについては、商品メディアの追加に関するShopifyドキュメントを参照してください。

動画が重く感じられる場合は、まず配置を確認してください。全幅のヒーローで適切に動作するファイルでも、メニューバナーやカードサイズのフレームには大きすぎる場合があります。

再生を設定する

これらのコントロールは、動画セクション、動画ブロック、その他のメディア主導のAlign領域に表示されます。

1. 自動再生
   1. 動画が表示領域に入ると再生を開始し、表示領域から出ると一時停止します。
   2. 周囲のコンテンツを補完する短い環境動画に適しています。
   3. 通常のストアフロントでの使用中は、ミュート再生が必要です。
2. ループ
   1. クリップを連続して繰り返します。
   2. 背景や短い動きのアクセントに適していますが、ナレーション付き動画やストーリー性のある動画の邪魔になる場合があります。
3. ミュート
   1. 購入者がプレーヤーコントロールで有効にするまで、音声をオフにします。
   2. 自動再生が有効な動画は、デフォルトでミュートされます。
4. 動画プレーヤーコントロールを表示
   1. サポートされている場合、再生、一時停止、シーク、音量、全画面表示のネイティブまたはプロバイダーのコントロールを表示します。
   2. 説明動画、デモ、購入者が再生または詳しく確認したい動画では、コントロールを表示したままにします。
   3. 装飾的なクリップではコントロールを非表示にできます。多くの領域では、コントロールが非表示でもクリックとキーボード操作が機能します。

ノート

動画が音声による詳細説明に依存する場合は、自動再生をオフにし、購入者が聞くタイミングを選べるようにコントロールを表示したままにしてください。

ポスター、アスペクト比、幅を設定する

1. ポスター画像
   1. 再生開始前に任意のプレビュー用フレームを表示します。
   2. ホスト型動画や、洗練された第一印象を作る場合に特に役立ちます。
   3. カスタムポスターを設定しない場合、外部動画ではプロバイダーのサムネイルが使用されます。
2. アスペクト比
   1. デスクトップ、および利用可能な場合はモバイルで、表示フレームの形状を制御します。
   2. ソースの寸法がすでにレイアウトに適している場合は、デフォルトを使用します。
   3. スマートフォンで異なるトリミングが必要な場合にのみ、モバイル用の別の比率を設定します。
3. 最大幅
   1. コンテンツ領域内で動画が意図した幅を超えて引き伸ばされるのを防ぎます。
   2. 0の値では、利用可能な幅全体が使用されます。

動画のトリミングに近いポスターを選択してください。これにより、再生開始時の切り替えが滑らかになります。

オーバーレイとコントロールなしの再生を追加する

多くの動画領域では、カラーまたはグラデーションのオーバーレイとオーバーレイスタイル設定がサポートされています。

1. 一時停止時に表示
   1. 再生前と、購入者が動画を一時停止した後にオーバーレイを表示します。
   2. 動画の再生中は、見た目をすっきり保ちます。
   3. 自動再生動画が表示領域に応じて自動的に一時停止しても、購入者による一時停止とはみなされません。
   4. 多くの動画領域では、これがデフォルトです。
2. 常に表示
   1. ポスターと再生中の動画の両方にオーバーレイを表示し続けます。
   2. 編集的またはブランド化された処理など、色合いがデザインの一部である場合に使用します。
   3. このオプションを選択すると、動画プレーヤーコントロールを表示の設定にかかわらず、コントロールがオフになります。

コントロールを非表示にしている場合でも、多くのホスト型動画とVimeo動画はポスターから開始し、クリックまたはキーボード操作で一時停止や再生を行えます。YouTubeでは、テーマ側に2つ目の再生アイコンを追加するのではなく、プロバイダーが所有する再生操作が維持されます。

テキストとのコントラストが十分になるようにオーバーレイを使用してください。動画が見出し、ボタン、本文の背後に表示される場合は、セクション背景設定を参照してください。より広範なガイダンスについては、テーマのアクセシビリティに関するShopifyドキュメントを参照してください。

組み込みのパフォーマンス動作を理解する

Alignは、すべてのプレーヤーをすぐに読み込まずに、動画の見た目を整えるのに役立ちます。

1. ポスター優先の読み込み
   1. 外部動画では、ライブプレーヤーを作成する前にポスターを表示します。
   2. 自動再生しない動画では、完全な埋め込みを読み込む前に操作を待ちます。
2. 表示領域を考慮した自動再生
   1. 可能な場合、自動再生プレーヤーの作成を動画が表示領域に入るまで遅延します。
   2. 動画が表示領域から出ると自動再生を一時停止します。
3. 軽量なホスト型デフォルト
   1. 自動再生しないホスト型動画では、先行プリロードを避けます。
   2. 背景動画では、適切な場合にソースの読み込みを遅延し、利用可能な場合はプレビュー画像のポスターを使用します。
4. 確実な更新
   1. グリッドの更新とエディターの再読み込み後に動画の動作をリセットし、更新後に古いプレーヤーが残らないようにします。
5. 商品カードの連携
   1. 商品カードにメイン動画とホバー動画の両方がある場合、一度に再生されるクリップは1つだけです。

これらの動作は自動です。主なパフォーマンスコントロールは、ファイル容量、配置、自動再生の選択、クリップの長さです。

使用例

1. ヒーロー背景のループ
   1. 約2500 kbps以下でエンコードした、6～10秒のホスト型環境動画を使用します。
   2. ミュートとループを維持し、テキスト用のオーバーレイを強め、デスクトップのトリミングがスマートフォンでうまくいかない場合にのみモバイル専用ファイルを追加します。
2. 商品デモ動画
   1. コントロールを表示し、自動再生をオフにして、カスタムポスターフレームを設定したホスト型動画またはサービスURLを使用します。
   2. ギャラリーのレイアウトに合うワイドスクリーンまたはデフォルトの比率を選択します。
3. ナビゲーションプロモーションバナー
   1. 約1000～1500 kbpsでエンコードした、コンパクトなホスト型クリップを使用します。
   2. 動きをシンプルにし、ナレーションを避け、表示フレームが小さいためモバイルでのパフォーマンスを確認します。
4. 色合い付きの編集動画
   1. 色の効果がデザインの一部である場合は、常に表示のオーバーレイスタイルを使用します。
   2. クリップを短くし、再生中もテキストとのコントラストが十分に保たれることを確認します。
5. 外部の説明動画
   1. 自動再生をオフ、コントロールをオンにしたYouTubeまたはVimeoのページURLを使用し、デフォルトのサムネイルのトリミングが不十分な場合はカスタムポスターを設定します。
   2. 購入者が再生するかどうかを決めている間、ポスター優先の読み込みでパフォーマンスを維持します。

使用上の注意

1. アップロード前にエンコードします。 ストリーミングだけに頼るよりも、ビットレートと解像度が重要です。
2. 背景にはホスト型ファイルを使用します。 YouTubeとVimeoは独立したメディアやブロックベースのメディアには使用できますが、装飾的な背景処理には使用できません。
3. 動きのある背景は短くします。 背景動画とスライドショー動画は、音声や注意を必要とせず、明確に伝わるようにします。
4. モバイルを個別に確認します。 背景ファイル、アスペクト比、オーバーレイは、小さな画面では異なる動作をする場合があります。
5. 保存後にプレビューします。 外部動画の変更は、保存してストアフロントを表示するまでエディターに完全には反映されない場合があります。