# コレクションレイアウトの設定 > **学べること** > > * コレクションページのレイアウトをカスタマイズする方法 > * 列数、間隔、画像サイズ、ホバー効果の調整方法 *** ### 🧭 概要 この **コレクションレイアウト** 設定により、デスクトップとモバイルのコレクションページで商品の表示方法を制御できます。これらのオプションは、ブランドの見た目や取り扱い商品に合った理想的なショッピング体験を作成するのに役立ちます。 *** ### 🖥️ レイアウトオプション #### デスクトップの列数 * デスクトップで1行に表示する商品の数を選択してください： * オプション： **2**, **3**, **4**, **5**、または **6** 列 #### モバイルの列数 * モバイルで1行に表示する商品の数を選択してください： * オプション： **1列** または **2列** 列 > 💡 大きな商品画像や高級商品の場合は列数を少なくしてください #### 列間＆行間の間隔 商品の間隔を調整して視覚的な密度をコントロールします： * **列間（デスクトップ）** * **行間（デスクトップ）** * **列間（モバイル）** * **行間（モバイル）** すべての値はピクセル（`px`）で測定され、スライダーで調整できます。 *** ### 🖼️ 画像設定 #### 商品画像のサイズ * コンテナに対する商品画像の割合サイズを調整します（例：100%） #### 商品画像のアスペクト比 グリッド内で商品画像の形状を選択してください： * **自然（元の画像サイズ）** * **正方形** * **縦長** * **横長** > 💡 を選択して **正方形** より均一なレイアウトにする #### ホバー時に2枚目の画像を表示 * デスクトップでホバーしたときに商品リストの2枚目の画像を表示するにはこれをオンにします * 別アングルや別ビューを見せるためによく使われます *** ### 🧪 よくあるユースケース * **ミニマルなストア** — 2〜3列と大きめの間隔を使用 * **大量出品のストア** — より多くの商品を表示するために4〜6列を使用 * **インタラクティブな表示** — 商品のエンゲージメント向上のためにホバーで2枚目の画像を有効にする *** ### **ヘルプが必要ですか？** * 💬 **Discordでコミュニティに参加：** * 📧 **メールでお問い合わせ：** * 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/english-ja/readme-1/theme-settings/collection-layout-settings.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.