成功
セクション背景設定
色、グラデーション、画像、動画、オーバーレイ、オプションのモバイル専用メディアを使ってセクション背景をカスタマイズします。
この設定グループを使用して、セクションのコンテンツの背後にある背景の見た目を制御します。より広い設定の背景については、セクションとブロックに関するShopifyドキュメントを参照してください。色でシンプルにしたり、グラデーションで奥行きを加えたり、画像や動画の背景にオーバーレイを組み合わせて、読みやすさを保ちながらより強い視覚的な印象を作成できます。
背景スタイル
Section titled “背景スタイル”セクションの役割に合う、最も軽い演出を選択してください。
- すっきりしていて注意をそらしにくいセクションには、背景色を使用します。
- より奥行きやブランドらしさを出したい場合は、背景グラデーションを使用します。
- 写真、質感、イラストには、背景画像を使用します。
- 動きがメッセージを明確に支える場合は、背景動画を使用します。
グラデーションを適用すると、対応する単色設定よりも優先されます。
背景色またはオーバーレイ色が更新されないように見える場合は、グラデーションが設定されていないか確認してください。グラデーションは同等の単色を上書きします。
オーバーレイのコントロール
Section titled “オーバーレイのコントロール”オーバーレイ設定を使うと、画像や動画の背景の上でもテキスト、ボタン、その他のコンテンツを読みやすく保てます。単色のオーバーレイまたはグラデーションのオーバーレイを使用し、さらに不透明度を調整して、見やすさとメディアの表示量のバランスを取れます。
不透明度を下げると、背景がより見えるようになります。不透明度を上げると、長めのテキスト、小さい文字、複数のアクションがあるセクションでは、通常より適しています。
背景メディア
Section titled “背景メディア”画像は、ページを煩雑にしすぎずに見た目の豊かさを加える、最も安全な方法です。動画は、動きが控えめで、コンテンツと競合するのではなく支える場合に最適です。
動画背景では、音声がなくても意味が通り、細かなディテールに頼らない短いクリップを使用してください。実践的なガイダンスについては、動画の使用に関するCompany XYZドキュメントを参照してください。
モバイル専用メディア
Section titled “モバイル専用メディア”デスクトップ用アセットがうまく切り抜かれない、または小さい画面で焦点がずれる場合は、モバイル用の背景画像や動画を個別に設定できます。モバイル専用の設定を空のままにすると、代わりにメインの背景画像または動画が使用されます。
被写体に別の切り抜きが必要な場合、縦長の構図のほうが適している場合、またはデスクトップ動画がスマートフォンでは幅広すぎる、もしくは視覚的に密集して見える場合は、モバイル専用のアセットを使用してください。
実践的な設定の選択
Section titled “実践的な設定の選択”最適な結果は、通常、背景スタイルとセクションのコンテンツ密度を組み合わせることで得られます。
- 内容が多く、明瞭さが最も重要なセクションでは、色またはグラデーションのみを選択します。
- より雰囲気が必要な販促用または編集的なセクションでは、画像とオーバーレイを選択します。
- 動きが明確な価値を加え、セクションに十分な表示スペースがある場合に限り、動画とオーバーレイを選択します。
- メインのアセットが実際に切り抜きや読みやすさの問題を引き起こす場合にのみ、モバイル専用メディアを追加します。
使用上の注意
Section titled “使用上の注意”- まずはシンプルに始めます。 メディアを追加する前に色またはグラデーションから始め、視覚的な複雑さはセクションのメッセージを改善するときだけ高めてください。
- 早めにコントラストを確認します。 テキストスタイルを変更する前にオーバーレイを調整し、見出し、本文、ボタンが読みやすいままになるようにしてください。
- 両方の表示幅を確認します。 デスクトップとモバイルのコントロールでは、切り抜き、配置、表示、メディアの動作が異なる場合があるため、公開前に両方をテストしてください。
- フォールバックのスタイルを想定します。 空、透明、またはデフォルトスタイルの値は通常、既存の見た目を維持しますが、明示的な色、グラデーション、またはメディアの上書きにより、セクションはより独立した見た目になります。
- 動画は選択的に使用します。 動きのある背景は、多くのセクションで繰り返すのではなく、インパクトの大きい領域のみに使ってください。
- 階層を保ちます。 強い背景処理は注目を集めるため、セクションを最も目立たせたい場所で使用してください。