グリッドインターフェース設定

注目のリンク

1. テーマエディターに関するShopifyドキュメント
2. グリッドインターフェース設定に関するCompany XYZドキュメント
3. セクションとブロックに関するShopifyドキュメント

役立つ動画

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

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

グリッドベースのページをどのように閲覧しやすくするかを、この設定で管理できます。大きな画面とモバイルの既定レイアウトを設定し、さらにお客様が自分でグリッドサイズを切り替えるための組み込みインターフェースを表示するかどうかを決められます。テーマ設定の構成についての概要は、テーマエディターに関するShopifyドキュメントを参照してください。

この設定グループは、お客様がグリッド内の複数の商品を確認するページで特に役立ちます。適切な設定にすると、強い既定値を保ちながら、さまざまな閲覧の好みにも対応できます。

既定のグリッドレイアウト

デスクトップとモバイルのグリッドサイズの選択は、グリッドが最初に表示されるときの開始ビューを決めます。より密なレイアウトでは一度に多くの商品を表示でき、よりゆとりのあるレイアウトでは、画像、タイトル、価格、その他の詳細のために各カードにより多くのスペースを割り当てられます。

大きな画面では、カードの見た目がシンプルで、お客様が多くの商品をすばやく比較しそうな場合、より狭いグリッドが効果的です。より広いデスクトップグリッドは、カードに長い名前、バッジ、スウォッチ、その他の補足情報が含まれる場合に、通常は閲覧しやすくなります。

モバイルは別の判断が必要です。1列レイアウトでは各商品により多くの視覚的な焦点が当たり、読みやすさを向上できます。一方、2列レイアウトではスクロール量を抑えながら、より速く商品を確認できます。

既定値は、表示したい商品数だけでなく、各カードに含まれるコンテンツ量に基づいて選んでください。カードに複数のラベルや長いテキストがある場合、より密なグリッドはすぐに窮屈に感じられることがあります。

グリッドサイズコントロール

グリッドサイズのインターフェースを有効にすると、お客様は自分の閲覧スタイルに合うレイアウトへ切り替えられます。これは、できるだけ多くの商品を確認したいお客様と、読みやすい大きめのカードを好むお客様の両方に役立ちます。

より厳選された表示にしたい場合は、インターフェースをオフにして、設定した既定値に任せられます。柔軟性をより重視するなら、コントロールをオンにすることで、基になるコンテンツを変更せずにお客様が表示を調整できます。

このインターフェースが対応グリッド全体でどのように機能するかの詳細は、グリッドインターフェース設定を参照してください。関連するテーマ設定のガイドは、セクションとブロックに関するShopifyドキュメントを参照してください。

スティッキーコントロール

スティッキーインターフェースでは、お客様がスクロールしている間も、これらのコントロールがページ上部付近に表示され続けます。これにより、特に長いグリッドページでは、レイアウトを変更するためだけに上部へ戻る必要がなくなり、閲覧体験がよりスムーズになります。

スティッキーコントロールは、グリッドが長く、スクロール後にレイアウト変更が発生しやすい場合に最も役立ちます。短いページや、すでに複数のコントロールが表示されたままになるレイアウトでは、スティッキーインターフェースは不要に感じられることがあります。

ヒント

レイアウトの選択が単なる便利機能ではなく、閲覧体験の一部である場合に、スティッキーコントロールを使ってください。お客様が表示を切り替える可能性が低いなら、よりシンプルな非スティッキー設定の方がすっきり感じられることがよくあります。

使用上の注意

1. カードのコンテンツから始める。 各カードに何文字のテキストや補足情報が必要かに基づいて、グリッドの密度を選びます。
2. モバイルは別に調整する。 デスクトップの設定をそのまま反映するのではなく、小さな画面での読みやすさを優先してモバイルの既定値を設定します。
3. 両方のビューポートを確認する。 デスクトップとモバイルのコントロールは、レイアウト、配置、表示、メディア表示にそれぞれ異なる影響を与えるため、公開前に各画面サイズを確認してください。
4. プレビューの違いに注意する。 エディタのプレビューでは、実際のコンテンツがなくてもグリッドが利用可能に見えることがあるため、可能であれば実際のコンテンツで最終結果を確認してください。
5. スライダーの動作が変わることを想定する。 グリッドがスライダー形式のレイアウトとして表示される場合、ナビゲーション、ページネーション、プレビュー、ブレークポイントの動作は、静的なグリッドや積み重ねレイアウトとは異なることがあります。
6. フォールバックのスタイルを維持する。 周囲の領域に組み込みの見た目を保たせたい場合は、空白またはデフォルトスタイルの値を残してください。グリッド領域をより目立たせたい場合のみ、明示的な色、グラデーション、またはメディアの上書きを使用します。