レイアウト設定

注目のリンク

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

役立つ動画

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

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

これらの設定を使って、繰り返しコンテンツをデスクトップ、タブレット、モバイルでどのように表示するかを制御します。各デバイスサイズごとにグリッドまたはスライドショーを選択し、コンテンツと画面スペースに合わせて一度に表示するアイテム数を調整できます。テーマコンポーネントの構成について、より詳しくは セクションとブロックに関するShopifyドキュメント を参照してください。

レイアウトスタイル

レイアウトスタイルでは、アイテムを固定グリッドで表示するか、スワイプ可能なスライドショーで表示するかを制御します。これにより、大きな画面では一度により多くのアイテムを表示しつつ、小さな画面ではより見やすくできます。

1. 顧客が複数のアイテムを並べて比較できるようにする場合は、Grid を選択します。
2. 各アイテムをより目立たせたい場合や、スペースが限られている場合は、Slideshow を選択します。
3. 必要に応じて、デバイスごとにスタイルを組み合わせます。デスクトップではグリッド、モバイルではスライドショーにする構成は、よく使われる実用的な組み合わせです。

レイアウトスタイルと列数はセットで選択してください。情報量の多いグリッドはシンプルなコンテンツに最適で、スライドショーは通常、表示するアイテム数を少なくし、各カードにより多くの余白が必要です。

列数

列数は、各デバイスサイズで各行に表示されるアイテム数を制御します。列数を増やすと閲覧密度は高くなりますが、画像、タイトル、価格、補足情報に使えるスペースは少なくなります。

1. デスクトップでは、コンパクトなカードや広い範囲のアイテム閲覧に、より多い列数が適しています。
2. タブレットでは、別の列数を設定することで、中間サイズの画面で窮屈に感じるレイアウトを避けられます。
3. モバイルでは、通常は列数を少なくしたほうが読みやすく、タップしやすくなります。

タブレットの列数を 0 に設定すると、タブレット画面では代わりにデスクトップの列設定が使用されます。これは、大きな画面で一貫したレイアウトにしたい場合に便利ですが、タブレットのカードにも十分なスペースがあるか確認する価値があります。

ヒント

アイテムカードが窮屈に感じる場合は、テキストサイズを変更したり詳細を非表示にしたりする前に、列数を減らしてください。通常は、横方向の余白を増やすほうが見やすさをすばやく改善できます。

適切な密度の選び方

最適なレイアウトは、各アイテムにどれだけの情報を表示する必要があるかによって異なります。画像中心のシンプルなカードは密度の高いレイアウトに対応しやすい一方、テキスト量が多いカードや詳細の多いカードには通常、より広いスペースが必要です。

1. 長いタイトル、複数のラベル、価格、追加メタデータがある場合は、列数を少なくします。
2. テキストを最小限にして素早く一覧できるレイアウトでは、列数を多くします。
3. 全体の行を見渡すよりも、顧客が1つのアイテムに集中できるようにしたい場合は、スライドショーのレイアウトを使用します。

使用上の注意

1. コンテンツサイズから始めます。 各アイテムに無理なく表示できるテキスト量と画像量に基づいて列数を選択します。
2. タブレットは個別に確認します。 デスクトップの列数を引き継ぐと時間を節約できますが、タブレットのレイアウトは個別の調整が必要なことがよくあります。
3. モバイルではタップしやすさを保ちます。 カードが細すぎたり、タッチ対象が小さすぎたりするモバイルレイアウトは避けてください。
4. スライドショーは意図して使います。 一度に最大数のアイテムを表示することよりも、注目度を優先したい場合にスライドショーを選択します。
5. フォールバックのスタイルを使いたい場合は、デフォルトの見た目を保持します。 空白、透明、またはデフォルトスタイルの値は通常、継承された外観を維持します。一方、明示的な色、グラデーション、またはメディアの上書きは、その領域をより独立して見せます。テーマエディターでの設定手順については、セクションのカスタマイズに関するShopifyドキュメント を参照してください。