画像の最大幅

注目のリンク

1. テーマのカスタマイズに関するShopifyドキュメント
2. セクションとブロックに関するShopifyドキュメント

役立つ動画

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

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

この設定グループでは、このオプションが使用できる場所での画像の最大幅を制御します。画像を控えめに見せる、より視覚的な重みを持たせる、または利用可能なスペースいっぱいに広げる用途に使えます。テーマエディターでこれを調整する場合は、テーマのカスタマイズに関するShopifyドキュメント を参照してください。テーマのセクションとブロックが設定をどのように使用するかをより広く把握するには、セクションとブロックに関するShopifyドキュメント を参照してください。

最大画像幅

画像が主役ではなく、近くのコンテンツを支える場合は、より小さい幅を選びます。これは、ロゴ、アイコン、バッジ、その他のテキストとの比率を保つべきビジュアルに適しています。

画像により強い存在感が必要な場合は、幅を大きくします。たとえば、特集アートワーク、エディトリアル画像、またはレイアウト内でより強く目立つべきその他のコンテンツに向いています。より広い設定にすると、残りのコンテンツはそのままでも、画像をより意図的に見せられます。

値を 0 にすると幅の制限がなくなり、画像はコンテナーの使用可能な幅いっぱいまで広がります。

フル幅の拡張は、周囲のレイアウトで利用可能なスペースのみを使用します。画像がコンテナーの幅を超えることはありません。

実用的な幅の選び方

まず、画像が装飾用なのか、補助的なのか、それとも主な焦点なのかを決めます。補助的な画像は通常、控えめな幅のほうが見栄えがよく、焦点となる画像は多くの場合、より広いスペースを使うと効果的です。

この設定がテーマの異なる場所に表示される場合は、どこでも同じ見た目の基準に頼るのではなく、使用箇所ごとに調整してください。適切な画像幅は、周囲のスペース量と、画像をどれだけ目立たせたいかによって決まります。

画質とバランス

画像幅が大きいほど、画質の低い元画像は目立ちやすくなります。画像がぼやけて見える、トリミングが不自然に見える、または強く出すぎる場合は、ほかのレイアウト設定を変更する前に幅を小さくしてください。

また、画像と近くのテキストやアクションの関係も確認してください。画像が大きすぎると、重要なコンテンツが下に押し出されたり、コンテンツ領域のバランスが崩れたりします。

使用上の注意

1. 画像の役割に合わせます。 補助的なビジュアルには小さい幅を、コンテンツの主役にすべき画像には大きい幅を使います。
2. フル幅は意図して使います。 値を 0 にするのは、レイアウトに十分なスペースがあり、そのサイズでも画像が鮮明に見える場合だけにします。
3. コンテンツのバランスを確認します。 幅の広い画像が、近くの見出し、本文、または CTA を圧倒しないようにしてください。
4. 配置ごとに調整します。 最適な幅は使用可能なスペースに左右されるため、表示される各コンテキストでこの設定を見直してください。
5. 両方のビューポートを確認します。 デスクトップとモバイルのコントロールは異なる動作をする場合があるため、公開前に両方の画面サイズで画像を確認してください。
6. メディアの選択を比較します。 デスクトップとモバイルで異なるメディアを使う場合は、トリミング、読み込み、フォールバック動作、読みやすさが両方の表示で適切に機能することを確認してください。