Video

注目のリンク

1. セクションとブロックに関するShopifyドキュメント
2. カラー設定に関するCompany XYZドキュメント
3. 表示設定に関するCompany XYZドキュメント

役立つ動画

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

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

このブロックを使用すると、レイアウト、再生、キャプション、オーバーレイを柔軟にコントロールできる、ホスト型、YouTube、またはVimeoの動画を追加できます。デスクトップとモバイルの両方で意図的に設計された印象の表示が必要な商品デモ、チュートリアル、キャンペーンメディア、ブランドストーリーテリングに適しています。テーマでのブロックの仕組みについて詳しくは、セクションとブロックに関するShopifyドキュメントを参照してください。

Video設定

このブロックでは、ホスト型の動画ファイルまたは動画サービスのURLを使用できます。YouTubeまたはVimeoの場合は、埋め込みコードではなく通常の動画リンクを使用してください。ホスト型ファイルをアップロードする場合は、ポスター画像を追加すると、再生開始前の最初のフレームをよりきれいに表示できます。

アスペクト比設定を使用すると、デバイス間で動画の形状をコントロールできます。Defaultはメディアを自然な比率で維持します。一方、固定比率は、周囲のコンテンツとの配置を整えたり、複数の動画ブロックで一貫した見た目にしたりする場合に便利です。

最大幅では、利用可能なスペース内で動画をどの程度の幅で表示できるかを設定します。フル幅のレイアウトは没入感のあるメディアに適しています。一方、動画をテキストやその他のコンテンツの近くに配置する場合は、狭い幅の方がバランスよく見えることがあります。

再生設定では、ページ上でブロックをどの程度アクティブに見せるかをコントロールします。自動再生はより動きのある体験を生み出し、ループは短く繰り返し再生するクリップに適しています。また、ミュートやプレーヤーコントロールによって、再生中に訪問者が操作できる範囲が変わります。

自動再生を有効にする場合は、より快適に利用できるよう動画をミュートしてください。音声付きの自動再生は煩わしく感じられやすく、デバイスによって一貫して動作しない場合があります。

ヒント

ホスト型動画では、ブロックの読み込みと再生をよりスムーズにするため、特にモバイルではファイルサイズとビットレートを適切な範囲に保ってください。

キャプション設定

キャプションを使用して、短い説明、商品詳細、キャンペーンメッセージなどのコンテキストを動画の上または下に追加できます。視聴者がすでに確認できる内容を繰り返すのではなく、メディアを補足する形で使用すると効果的です。

キャプションの位置では、再生前にテキストで動画を紹介するか、動画の下で補足情報として表示するかを選択できます。ブロックが周囲のコンテンツから離れて見えず、統合された印象になるよう、テキストの配置とサイズは周囲のコンテンツに合わせてください。

オーバーレイ設定

オーバーレイ設定では、動画領域にカラーまたはグラデーションを重ねます。ブランドに合わせた表示、アイコンのコントラスト強化、または一時停止中の状態を意図的に見せたい場合に便利です。

不透明度では、オーバーレイの下に動画をどの程度表示するかを決定します。不透明度を低くするとメディアが目立ちやすくなり、高くするとより強いビジュアル効果が生まれます。

オーバーレイスタイルでは、オーバーレイを表示するタイミングを設定します。常に表示するオーバーレイは、動画がデザイン性の高いレイアウトの一部である場合に適しています。一時停止中のみ表示すると、再生時の表示をよりすっきりさせられます。

Always showを選択すると、ブロック内の別の場所でコントロールが有効になっていても、動画プレーヤーのコントロールがオフになります。

配置設定

これらの設定では、デスクトップとモバイルで利用可能なスペース内にブロックを配置する方法をコントロールします。画面サイズや周囲のレイアウトに応じて動画の配置を変えたい場合に便利です。

デスクトップとモバイルで別々に配置を設定すると、狭いデバイスに同じ配置を強制せず、広い画面でブロックのバランスを整えられます。

標準ブロック設定

カラー設定

これらの設定では、枠線、アイコン、キャプションテキストなどの要素に対して、ブロックのデフォルトカラーを上書きします。動画により強いコントラストが必要な場合や、特定のキャンペーンまたはコンテンツ領域に合わせたい場合に使用してください。詳しくは、提供元のカラー設定リファレンスを参照してください。

表示設定

表示設定では、デスクトップまたはモバイルでブロックを非表示にできます。たとえば、デスクトップでは幅広い動画を表示し、モバイルではよりシンプルな代替表示にするなど、画面サイズごとに異なるメディア表示を使用したい場合に便利です。詳しくは、提供元の表示設定リファレンスを参照してください。

エディター設定

エディター設定は、エディターのサイドバーでブロックに付けられるラベルにのみ影響します。複数の動画ブロックがあり、配置や目的ですばやく識別したい場合は、カスタムエディタータイトルが便利です。

使用上の注意

1. 適切なソースを選択します。 表示を細かくコントロールしたい場合はホスト型ファイルを使用し、そのサービス上で動画を管理したい場合はYouTubeまたはVimeoのリンクを使用します。
2. 形状をレイアウトに合わせます。 シンプルな埋め込みには自然な比率を使用し、より均一なグリッドや整ったレスポンシブレイアウトが必要な場合は固定比率に切り替えます。
3. オーバーレイは控えめに使用します。 動画が暗くなったり見えにくくなったりしないよう、ブランディングやコントラストを補うのに十分なカラーまたはグラデーションだけを追加します。
4. キャプションを簡潔に保ちます。 動画が重要である理由を説明したり、要点を示したりする短いキャプションが最も効果的です。
5. モバイルでテストします。 フル幅の動画、自動再生、大きなホスト型ファイルは小さな画面では負荷が大きく感じられることがあるため、公開前にモバイルでブロックを確認してください。
6. 両方のビューポートを確認します。 デスクトップとモバイルのコントロールは配置、表示、メディアの動作に異なる影響を与える場合があるため、完了前に両方のレイアウトを確認してください。
7. 上書きは意図的に使用します。 空白またはデフォルトスタイルの値では通常、周囲のフォールバックスタイルが維持されます。一方、明示的なカラー、グラデーション、デスクトップとモバイルで別々のメディアを選択すると、ブロックをより独立した印象にできます。
8. コンテキスト内でコマース動作を確認します。 動画が商品またはカートのアクションに関連付けられている場合は、選択した商品、バリエーション、数量、在庫状況を確認し、設定したアクションがページの状態と一致するようにしてください。