成功
動画とテキスト
デバイスに合わせて調整できる柔軟な横並びレイアウトで、動画とリッチテキストを組み合わせます。
このセクションでは、動画と補足テキストをすっきりとした2分割レイアウトで組み合わせます。動画にコンテキスト、見出し、明確な次のステップが必要な商品紹介、ブランドストーリー、チュートリアル、キャンペーンコンテンツなどに特に適しています。テーマコンテンツの構成方法の概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
これらの設定では、動画ブロックとテキストブロックの全体的な関係を調整します。ブロックの順序を変更して、どちら側を先に表示するかを決めることもできます。
- コンテンツの配置では、横並びで表示したときに2つの側を縦方向にどのように揃えるかを設定します。上揃えはエディトリアルコンテンツに適しており、中央揃えはよりバランスの取れた印象になり、下揃えにすると両側の視覚的な終点を揃えやすくなります。
- スティッキーコンテンツを有効にするを有効にすると、訪問者が高さのある側をスクロールしている間、短い側が上部付近に固定されます。一方のブロックが他方より大幅に長い場合に最も便利です。
- モバイルで積み重ねるを有効にすると、小さい画面でセクションが1列になります。横並びのコンテンツが窮屈に感じられる場合や、動画により広いスペースが必要な場合に使用します。
- デスクトップで積み重ねるを有効にすると、大きい画面でもレイアウトが縦方向の並びになります。2列よりも、各項目を順番に読む方が自然なコンテンツに適しています。
スティッキーコンテンツはデスクトップでのみ機能し、積み重ねレイアウトが有効な場合は適用されません。
セクションレベルのカラーコントロールを使用すると、このセクションのデフォルトのテキストスタイルを上書きできます。セクションでカスタム背景を使用する場合や、メディア周辺のコントラストを高めたい場合に便利です。
動画またはセクションの背景がすでに視覚的に複雑な場合は、これらの設定を慎重に使用してください。小さなカラー変更の方が、追加のスタイルを設定するよりも読みやすさを効果的に向上させる場合があります。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- Rich text
- Video
Rich textブロック
Section titled “Rich textブロック”Rich textブロックでは、見出し、本文、アイコン、オプションのボタンなど、レイアウトのテキスト側を設定できます。Company XYZのRich textブロックに関するドキュメントを参照してください。
- 動画にコンテキストを与えるメインの説明、補足ストーリー、または行動喚起に使用します。
- 動画が視覚的な役割の大部分を担う場合は、メッセージを簡潔にまとめます。
- このブロックには背景、カラー、表示に関する独自のコントロールも含まれており、テキスト側を枠付きのコンテンツパネルのように見せるのに役立ちます。
Videoブロック
Section titled “Videoブロック”Videoブロックでは、ホストされた動画、Vimeo、またはYouTubeのリンクを表示し、アスペクト比、再生、幅、キャプション、オーバーレイスタイル、配置を設定できます。Company XYZのVideoブロックに関するドキュメントを参照してください。
- 必要に応じてポスター画像を使用し、再生開始前からセクションを整った状態にします。
- デフォルトのフレーミングに違和感がある場合は、大きい画面と小さい画面でアスペクト比を個別に選択します。
- セクション全体の幅が広く、動画を視覚的に収めておきたい場合は、最大幅を設定します。
動画のオーバーレイを Always show に設定すると、他の場所でコントロールが有効になっていても、動画プレーヤーのコントロールはオフになります。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”ヘッダー設定を使用して、横並びコンテンツの上にオプションの導入部分を追加します。動画により詳しい説明や強い行動喚起が必要な場合、この領域にセクションタイトル、補足テキスト、ボタンを配置すると便利です。
余白設定を使用して、セクションの上下のスペースを調整します。近くのコンテンツと密接につながった印象にしたい場合は余白を減らし、動画を視覚的に分離したい場合は余白を増やします。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定を使用して、セクション全体の背後にカラー、グラデーション、画像、動画を追加します。背景はセクションの雰囲気を強められますが、使いすぎると動画やテキストと競合することもあります。
区切り線設定
Section titled “区切り線設定”区切り線設定を使用して、セクションの上または下に線を追加します。ページで似たレイアウトが連続して使用されている場合に、セクションを近くのコンテンツと区別するのに役立ちます。
表示設定を使用して、デバイスサイズに応じてセクションを表示または非表示にします。デスクトップとは異なるコンテンツフローをモバイルで使用したい場合に便利です。
幅設定を使用して、セクションのラッパーと内部コンテンツの幅を調整します。幅を広くすると動画の存在感が増し、コンテンツ幅を狭くするとテキスト側が読みやすくなります。
使用上の注意
Section titled “使用上の注意”- **1つの優先事項から始める。**動画とテキストのどちらを主役にするかを決め、セクションが過密にならないよう、もう一方は補助的な役割にします。
- **両方のビューポートを確認する。**デスクトップとモバイルのコントロールによって配置、表示、メディアの動作が変わる可能性があるため、公開前に両方のサイズを確認します。
- **ブロックコンテンツを意図的に使用する。**ブロックを追加するとセクションが大きく変わる可能性があるため、新しい動画ブロックやテキストブロックが元のメッセージを引き続き支えていることを確認します。
- **デフォルトをシンプルに保つ。**空白または透明のスタイルでは通常フォールバックの外観が維持されますが、強いカラー、グラデーション、メディアの上書きによってセクションがより独立した印象になります。
- **メディアのフレーミングを確認する。**デスクトップとモバイルで別々のメディアを設定すると、切り抜きや見え方が異なる可能性があるため、両方のバージョンが明瞭で読みやすいことを確認します。
- **スティッキーレイアウトを実際の状況でテストする。**スティッキーコンテンツは、一方の側が明らかに短く、デスクトップレイアウトが積み重ねられていない場合に最も効果的です。