成功
動画
柔軟な再生、キャプション、レイアウトオプションを備えたレスポンシブな動画セクションを追加します。
このセクションを使用して、柔軟な再生、サイズ調整、補足テキストを備えた 1 つの動画を表示します。商品デモ、チュートリアル、キャンペーンのストーリー、そして動画をページの主役にしたいその他の場面で特に効果的です。テーマエディターでセクションがどのように構成されているかの概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
このグループでは、動画のソースと、ページ上でメディアフレームがどのように動作するかを管理します。品質や配信の管理方法に応じて、ホスト済み動画または Vimeo や YouTube のリンクを使用できます。詳しくは、動画設定リファレンスを参照してください。
ホスト済み動画では、ポスター画像が特に役立ちます。再生が始まる前に、訪問者に洗練されたプレビューを表示できるためです。ランダムな最初のフレームに頼るよりも、より強い第一印象を与えることもできます。
アスペクト比設定を使うと、動画の自然な比率を維持するか、より制御されたレイアウト形状に合わせるかを選べます。ページ全体で一貫した余白を保ちたい場合は固定比率を、元のフレーミングを最も重視したい場合はデフォルト比率を使用してください。モバイルでは、デスクトップの比率に従うことも、より小さい画面で別の切り抜き感が必要な場合に独自の設定を使うこともできます。
最大動画幅は、セクションをより編集的に、エッジからエッジまでの印象を抑えたい場合に便利です。幅いっぱいの動画はより強い印象を与え、より狭いフレームはキャプションやヘッダー内容と組み合わせると、より洗練された印象になります。
自動再生は、スクロールして表示されたときに動画を再生し、訪問者が通り過ぎると一時停止します。ループ再生は短く繰り返し使うクリップに最適で、プレイヤーコントロールは長めの動画や情報量の多い動画により適しています。
自動再生を有効にする場合は、動画をミュートにし、音声なしでもこのセクションが成立することを確認してください。
キャプション設定
Section titled “キャプション設定”キャプション領域を使って、動画の上または下に短い説明を配置します。クレジット、商品コンテキスト、簡単な要点、またはメディアの近くに置いておきたい小さな補足情報に適しています。
セクションが引き続き動画主体に見えるよう、キャプションは簡潔に保ってください。配置、位置、サイズの設定は、キャプションが動画と競合するのではなく、レイアウト全体に自然に組み込まれて見えるようにするのに役立ちます。
オーバーレイ設定
Section titled “オーバーレイ設定”オーバーレイ設定は、動画の上に色またはグラデーションを追加します。より強い雰囲気、より良いコントラスト、または異なる映像間でより一貫した見た目を出したい場合に便利です。
不透明度は慎重に調整してください。薄いオーバーレイは可読性と仕上がりを向上させますが、強いオーバーレイは細部を隠し、動画をのっぺりと見せることがあります。
オーバーレイのスタイルは、オーバーレイが表示されるタイミングを制御します。停止中のみ表示すると再生中の見え方がより開放的になり、常に表示するとセクションによりスタイライズされた印象を与えます。
これらの設定は、デスクトップとモバイルでセクションのコンテンツがどのように配置されるかを制御します。見出し、キャプション、またはボタンを動画と一緒に使う場合に、特に重要です。
画面サイズ全体で配置をそろえると、通常は最もすっきりした見た目になります。モバイルのレイアウトが窮屈に感じる場合は、モバイルの配置を個別に調整すると、セクションが読みやすくなります。
これらのカラーコントロールは、このセクションのテキスト、アイコン、境界線のデフォルトカラーを上書きします。動画、オーバーレイ、背景によって通常の色のコントラストが低くなる場合に使用してください。
上書きは必要な部分だけに適用し、セクションがサイト全体の雰囲気と一貫して見えるようにしてください。多くの場合、最も重要なのは、メディア上でもテキストの可読性を保つことです。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”共通のヘッダー設定を使用して、動画の上に導入コンテンツを追加します。見出し、短い補足テキスト、任意のボタンを組み合わせると、動画の重要性を伝え、訪問者を次の行動へ導けます。
ヘッダー内容は簡潔に保ち、動画を圧倒するのではなく補助するようにしてください。ボタンを追加する場合は、明確な行動を 1 つだけ設定します。
共通の余白設定を使用して、セクションの上下の余白を調整します。余白を大きくすると動画が独立した特別な要素として感じられ、狭めると近接するコンテンツとより密接につながります。
デスクトップだけでなくモバイルでも余白を確認してください。大きな画面ではバランスよく見える動画セクションでも、小さな端末では大きすぎると感じられることがあります。
セクション背景設定
Section titled “セクション背景設定”共通のセクション背景設定を使用して、セクションの背後に色、グラデーション、画像、または背景動画を追加します。周囲の領域をより没入感のある、またはブランド性の高い印象にしたい場合に特に有効です。
強い背景に動画オーバーレイやカスタムテキストカラーを組み合わせるときは注意してください。レイヤー効果が多すぎると、見通しが悪くなり、セクションが重く感じられることがあります。
区切り線設定
Section titled “区切り線設定”共通の区切り線設定を使用して、セクションの上下に線を配置します。区切り線は、大きな余白を追加しなくても、動画を独立したコンテンツブロックとして定義するのに役立ちます。
控えめな区切り線は、長い編集記事風のページでうまく機能します。セクション自体に十分な視覚的コントラストがある場合は、区切り線を使わないほうがすっきり見えることが多いです。
共通の表示設定を使用して、デバイスサイズごとにこのセクションの表示・非表示を切り替えます。同じ動画の見せ方がデスクトップとモバイルの両方で同じようにうまく機能しない場合に便利です。
特定のブレークポイントでセクションを非表示にする場合は、その画面でも同じメッセージが明確に伝わるようにしてください。
共通の幅設定を使用して、セクション全体の幅と、その中のコンテンツ幅を調整します。これにより、動画をぴったりとフレームに収めるか、適度に囲むか、より広く見せるかを決められます。
通常、最初に調整するのはコンテンツ幅の設定です。プレビューのフレーミングによって幅変更の見え方が変わることがあるため、最終決定の前にライブページで結果を確認する価値があります。
使用上の注意
Section titled “使用上の注意”- 適切なソースを選ぶ。 ファイルを直接管理したい場合はホスト済み動画を使い、外部ホスティングのほうがワークフローに合う場合は動画 URL を使ってください。
- レイアウトを映像に合わせる。 不自然な見せ方に押し込むのではなく、動画のフレーミングを支えるアスペクト比と幅を選んでください。
- 再生の前提を明確にする。 自動再生とループ再生は、音声なしでも十分に伝わる短いクリップに限定してください。
- モバイルは別で確認する。 配置、表示設定、メディアの選択によってセクションの切り抜き、余白、可読性が変わるため、デスクトップとモバイルの設定は一緒に確認してください。
- 上書きは意図を持って使う。 空白またはデフォルト風のカラーは周囲の見た目を保ちやすく、明示的な色、グラデーション、またはメディアの選択は動画エリアをより独立して見せます。
- ブロックは慎重に追加する。 ブロックを使ってこのセクションを構成する場合は、ブロックで制御されるコンテンツが、よりシンプルなセクションレベルのコンテンツを置き換えたり拡張したりするため、全体の構成を再確認してください。