成功
セクションの余白設定
デスクトップとモバイルのレイアウトでセクションのスペースを制御します。
セクションのコンテンツの上下の余白を制御するには、これらの設定を使用します。これにより、画面サイズが異なっても、各部分が開放的に感じるか、コンパクトに感じるか、またはつながって感じるかを細かく調整できます。セクションベースのレイアウトの概要については、セクションとブロックに関するShopifyドキュメント を参照してください。
このグループでは、デスクトップとモバイル向けに上下の余白コントロールを個別に設定できます。これにより、すべてのデバイスで同じ間隔を強制せずに、縦方向のリズムを一貫させやすくなります。
大きな画面では、余白がレイアウトの洗練度やゆとりの印象に大きく影響します。スペースを広めに取ると注目コンテンツを目立たせやすくなり、余白を狭めると商品や情報量の多いページを効率よく見せられます。
小さな画面では、間隔を短くする必要があることがよくあります。デスクトップではバランスよく見える値でも、モバイルでは大きく見えすぎることがあり、とくにページ上部では余白が大きいほど重要なコンテンツが下に押し下げられます。
これらのコントロールの動作について詳しくは、セクションの余白設定 または テーマエディターに関するShopifyドキュメント を参照してください。
上下の余白のバランス調整
Section titled “上下の余白のバランス調整”上下の余白を一致させる必要はありません。値を変えることで、コンテンツ領域の切り替えをなめらかにし、セクションを前後の内容とより自然につなげられます。
たとえば、上の余白を大きくすると新しいコンテンツ領域の存在感を高められ、下の余白を小さくすると次の領域を視覚的に近づけられます。これは、バナー、テキストセクション、コレクション、画像中心のコンテンツを組み合わせる場合に特に便利です。
隣接する 2 つのセクションのどちらも余白が大きいと、間のスペースが想定以上に広く感じられることがあります。余白が広すぎると感じたら、両方のセクションを変更する前に、まず片側を小さくしてください。
デスクトップとモバイルの余白戦略
Section titled “デスクトップとモバイルの余白戦略”デスクトップとモバイルのコントロールが分かれているため、大きな画面ではゆとりのあるレイアウトを保ちながら、小さな画面では見やすくできます。多くの場合、まずデスクトップの余白を設定し、レイアウトが高く見えすぎる、または詰まりすぎる場合にのみモバイルの値を調整するのが最適です。
余白を 0 にすると、隣接する領域を視覚的につなげたい場合に便利です。ただし、スペースを削りすぎるとコンテンツが窮屈に見えたり、異なるコンテンツタイプのコントラストが弱まったりするため、慎重に使用してください。
使用上の注意
Section titled “使用上の注意”- スペースをコンテンツに合わせる。 注目コンテンツには大きめの余白を、情報量が多く作業向けの領域には小さめの余白を使用します。
- セクション全体を確認する。 隣接するコンテンツと合わせて間隔を見直し、ページ全体のバランスが不均一にならないようにします。
- モバイルは個別に調整する。 コンテンツが画面の下に下がりすぎて見える場合や、ページが過度に引き伸ばされて見える場合は、モバイルの余白を減らします。
- 意図して不均等な余白を使う。 上下で異なる値にすると、完全に一致させるよりも良い切り替えを作れます。
- 積み重なった隙間に注意する。 隣接するセクションの余白が大きいと、それぞれ単独では問題なく見えても、不要な空白が生まれることがあります。
- 両方の表示幅でプレビューする。 デスクトップとモバイルでは余白の印象が大きく異なる場合があるため、完了前に両方のサイズでセクションを確認してください。