成功
画像
柔軟なサイズ設定、キャプション、オーバーレイ、オプションの見出しコンテンツを備えた1枚の画像を表示します。
このセクションを使用して、柔軟な表示コントロールとオプションの補足コンテンツを備えた1枚の画像を紹介します。セクションベースのテーマコンテンツの概要については、セクションとブロックに関するShopifyドキュメントを参照してください。編集向けの写真、シンプルなバナー、プロモーション用のコールアウト、他のセクション間のリンク付きのビジュアル区切りに適しています。
これらの設定では、画像の形、幅、切り抜き動作、オプションのリンクを含めて画像自体を制御します。最も重要な選択は通常、幅とアスペクト比です。レイアウト内で画像がどれだけ目立つかに最も大きな影響を与えるためです。
最大画像幅の設定を使って、画像を没入感のある見せ方にするか、収まりのよい見せ方にするかを決めます。全幅の画像はより強い印象を与え、幅を制限した画像は、周囲のコンテンツと組み合わせやすく、すっきり見えることが多くなります。
アスペクト比の設定を使うと、元の画像が異なっていても一貫した画像の形を保てます。構図を最も重視する場合は自然な比率を選び、ページ全体でより統一感のあるレイアウトにしたい場合は固定比率を使います。モバイル用の個別の比率は、デスクトップでの切り抜きが小さい画面では広すぎたり狭すぎたりするときに特に便利です。
画像スタイルを使うと、ファイル自体を編集せずに素早く見た目を調整できます。角丸は通常、より柔らかい編集レイアウトに向いており、円形の切り抜きは、アップロードした画像がすでに正方形に近い場合に最適です。
強制的なアスペクト比では画像が切り抜かれることがあります。重要な部分が表示されたままになるよう、デスクトップとモバイルの両方で確認してください。
リンクを追加する場合は、セクションが装飾ではなく意図を持っているように見えるよう、画像と密接に関連した内容にしてください。
キャプション設定
Section titled “キャプション設定”キャプション領域を使用して、画像の上または下に短い注記を追加します。これは、クレジット、簡単な説明、メディアに関連付けたままにしておくべき小さな補足コンテキストに適しています。
上部のキャプションは画像が表示される前に紹介するのに役立ちますが、下部のキャプションは通常、クレジットや補足情報により適しています。キャプションテキストは短く保ち、画像と競合するのではなく、補足するようにしてください。
オーバーレイ設定
Section titled “オーバーレイ設定”オーバーレイ設定では、画像の上に単色またはグラデーションを追加します。これは、にぎやかな画像をやわらげたり、雰囲気を加えたり、画像が他のビジュアル要素の近くにあるときのコントラストを改善したりするのに便利です。
控えめなオーバーレイは、最小限の視覚的コストで大きな効果を発揮することがよくあります。強いオーバーレイは印象的な画像に効果的ですが、強くしすぎるとディテールが隠れることもあります。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”共有のヘッダー設定を使用して、画像エリアの上にキャプション、見出し、サブ見出し、アイコン、オプションのボタンを追加します。このセクションでは、画像に文脈が必要な場合や、セクションを明確なアクションを持つシンプルなビジュアルコールアウトにしたい場合に、ヘッダーが役立ちます。
ボタンは画像または見出しメッセージと密接に結び付けてください。モバイルでは、ボタンの位置と全幅の動作によって、CTAをより見つけやすく、タップしやすくできます。
共有の余白設定を使用して、セクションの上下のスペースを制御します。余白を多めにすると、注目画像を単独で見せやすくなり、詰めた配置にすると、近くのコンテンツとつながって見えやすくなります。
大きな画像はデスクトップではバランスよく見えても、小さい画面では縦に長く見えすぎることがあるため、デスクトップとモバイルの余白を個別に調整する価値がよくあります。
セクション背景設定
Section titled “セクション背景設定”共有のセクション背景設定を使用して、セクションの背後に色、グラデーション、画像、または動画を追加します。これにより、画像を単独のアセットではなく、デザインされたコンテンツブロックとして枠付けできます。
空白または透明の背景を選ぶと、通常は周囲のテーマスタイルがそのまま維持されます。より明確な背景色、グラデーション、またはメディアを選ぶと、セクションがより独立した見え方になります。
メイン画像自体がすでに視覚的ににぎやかな場合は、セクションが窮屈に感じられないよう、背景効果は控えめにしてください。
区切り線設定
Section titled “区切り線設定”共有の区切り線設定を使用して、セクションの上または下に線を配置します。これは、追加の視覚的な重さを加えずに、画像を周囲のコンテンツと区別するシンプルな方法です。
画像自体が主な焦点である場合は、控えめな区切り線スタイルが通常最適です。
共有の表示設定を使用して、デバイスごとにセクションを表示または非表示にします。これは、デスクトップ用に1つの画像表現を使い、モバイル用に別の切り抜きや置き換えセクションを使いたい場合に便利です。
デバイスごとの表示設定とメディアの選択によって、レイアウト、配置、読みやすさが変わることがあるため、公開前に両方の表示サイズを確認してください。
そのデバイスで別のセクションやレイアウトの選択のほうが明らかに適している場合にのみ、セクションを非表示にしてください。
共有の幅設定を使用して、コンテンツ幅とセクション外側の幅を制御します。このセクションでは、コンテンツ幅は画像とヘッダーコンテンツがどれだけ広く表示されるかに影響し、セクション幅は背景を追加する場合や、セクションのラッパーをさらに広げたい場合に特に重要です。
幅を狭くすると、セクションがより編集的に見え、幅広い設定にすると、より没入感のある表現になります。可能であれば、ライブページで幅の変更をプレビューしてください。エディターが最終レイアウトを正確に反映しない場合があるためです。
使用上の注意
Section titled “使用上の注意”- 構図を守る。 強制的なアスペクト比を使う場合は、デスクトップとモバイルの両方で切り抜きを確認してください。
- 幅を目的に合わせる。 印象を強めるには広めの幅を、より収まりのよい編集的な見た目にするには狭めの幅を使います。
- キャプションは簡潔に保つ。 短いキャプションは、画像から注意をそらさずに文脈を加えます。
- オーバーレイは慎重に使う。 雰囲気や見やすさを改善するのに十分なだけの強さを加え、画像の印象を薄めないようにします。
- 競合する要素は簡潔にする。 画像、ヘッダー、ボタン、背景のすべてが注目を求める場合は、1つまたは2つを控えめにして、セクションの焦点を明確にしてください。