動画設定

注目のリンク

1. テーマエディターに関するShopifyドキュメント
2. セクションとブロックに関するShopifyドキュメント
3. 動画の使用に関するCompany XYZドキュメント

役立つ動画

Shopify Academy動画：ストアのカスタマイズ

Shopify Academy動画：ストアのカスタマイズ

これらの設定を使用して、テーマ内で動画がどのように表示され、再生されるかを制御します。ソースの選択、表示フレームの設定、表示幅の制限、顧客に許可する再生コントロールの範囲を決められます。これらのコントロールがどこに表示されるかの概要については、テーマエディターに関するShopifyドキュメントを参照してください。

動画ソース

ホストされた動画ファイル、または Vimeo か YouTube のリンクのいずれかを使用できます。これにより、直接アップロードした動画と、対応サービスですでに公開されている動画の両方に柔軟に対応できます。動画がセクションの一部である場合、セクションとブロックに関するShopifyドキュメントでセクション設定の構成を確認できます。

サービス URL を使用する場合は、埋め込みコードではなく動画ページのリンクを入力してください。エディターでは、保存するまで動画の変更がすぐに表示されない場合があります。

ホストされたファイルの場合は、アップロード前にサイズとビットレートを最適化して、特にモバイルで再生をスムーズに保ちます。動画の使用を参照してください。

各動画エリアには意図したソースを 1 つ選び、保存後に正しく表示されることを確認してください。これは、さまざまな動画タイプをテストしている設定時の混乱を防ぐのに役立ちます。

ポスター画像

ポスター画像は、再生が始まる前のプレビューとして機能します。特にホストされた動画では有用で、適切なプレビューフレームによって動画がより洗練され、意図のあるものに感じられます。

動画にできるだけ近いフレーミングの画像を選んでください。トリミングの差が大きいと、再生への切り替わりが急に感じられることがあります。

アスペクト比とモバイルレイアウト

アスペクト比は動画フレームの形状を制御します。これは、動画が使用するスペースの量や、周囲のコンテンツとの整列の一貫性に影響します。

大きい画面ではメインの比率を使用し、小さい画面で別の表示が必要な場合にのみ、モバイル用の別の比率を設定してください。モバイルが Default のままの場合は、メインの比率が適用されます。

元の動画のサイズがすでにレイアウトに合っている場合は、自然なサイズ設定が適しています。複数の動画で一貫した見た目にしたい場合や、近くの画像やテキストときれいに揃えたい場合は、プリセット比率の方が適しています。

ヒント

よりタイトで編集的なレイアウトには、縦長または正方形のフレーミングを使用してください。動画をより映画的に見せたい場合や、広いレイアウトにまたがらせたい場合は、ワイドスクリーンまたはウルトラワイドのフレーミングを使用してください。

幅

最大幅の設定を使用して、動画をより狭いレイアウト内に収めます。これは、動画を利用可能なすべてのスペースに広げるのではなく、テキストコンテンツと揃えたい場合に役立ちます。

0 の幅にすると、動画は利用可能な最大幅まで広がります。これにより視覚的なインパクトは高まりますが、低解像度の動画は大きな画面でややぼやけて見えることがあります。

再生動作

自動再生は、動画が表示領域に入ると再生を開始し、表示領域から外れると一時停止します。これは、近くのコンテンツを補完しつつ、過度な注目を必要としない短いビジュアルクリップに最適です。

ループは、環境的な動き、商品詳細のクリップ、短い繰り返しデモに役立ちます。長い動画や、明確な始まりと終わりがある動画では、ループは気が散る場合があります。

ミュート再生は、通常、自動再生が有効な場合に最も安全な選択です。体験を妨げにくくし、予期しない音声を避けられます。

ノート

動画がナレーションや音声での説明に依存する場合は、顧客自身が再生を開始できるようにし、プレーヤーコントロールを表示したままにしてください。

プレーヤーコントロール

プレーヤーコントロールを使うと、顧客は動画を直接再生、一時停止、操作できます。動画で商品を説明する場合、手順を示す場合、視聴者が見直したい詳細を含む場合は、コントロールを表示したままにする方が通常は適しています。

コントロールを非表示にすると、よりすっきりした表示になりますが、直接操作の重要度が低い短い装飾クリップに適しています。

使用上の注意

1. 両方の表示領域サイズを確認してください。 デスクトップとモバイルの設定では、レイアウト、配置、表示、メディアの動作が異なる場合があるため、変更後は両方の表示を確認してください。
   1. 大きい画面で、動画が近くのコンテンツの横で引き続きバランスよく見えることを確認します。
   2. モバイルでは別々に確認し、トリミングの変化、より狭い間隔、小さすぎる、または目立ちすぎるコントロールがないかを確認します。
2. 空白値やデフォルト値はフォールバックとして扱ってください。 設定を空白、透明、またはデフォルト風の値のままにすると、通常は周囲のスタイルが維持されます。
   1. 動画エリアをより独立して目立たせたい場合のみ、明示的な色、グラデーション、またはメディアの上書きを使用してください。
   2. そうした強い設定は、その周辺領域への視覚的な影響が大きくなると考えてください。
3. メディアの選択は読みやすさを確認してください。 メディアの選び方によって、トリミング、読み込み、フォールバック、動画まわりのテキストのコントラストが変わる場合があります。
   1. デスクトップとモバイルでメディアを別々に設定している場合は、特に注意してください。
   2. プレビューフレームが近くのテキストやボタンを引き続き支えられることを確認してください。
4. コンテンツに合う再生コントロールを選んでください。 視聴者が見直し、一時停止、詳細確認を必要とする可能性がある場合は、プレーヤーコントロールを使用します。
   1. 商品中心または説明用の動画では、コントロールを表示したままにしてください。
   2. コントロールを非表示にするのは、クリップが短く装飾的な場合のみです。