成功
コレクション一覧 - メイン
柔軟なカードとレイアウトのコントロールで、洗練された全コレクションページを構築します。
利用可能なすべてのコレクションを1つの閲覧しやすいレイアウトに表示し、カードスタイル、カラーの上書き、余白、幅のコントロールでページを整えます。このセクションは、厳選した注目コレクションのセットではなく、完全なコレクションのランディングページを作成したい場合に最適です。ページ構成の概要については、Shopifyドキュメントのテンプレートを参照してください。
このセクションの仕組み
Section titled “このセクションの仕組み”このセクションは、対応するページテンプレートのコレクション一覧全体を出力します。ここでは個別のコレクションを選択しないため、最終的な見た目はコレクションのタイトル、画像、説明の一貫性に大きく左右されます。テーマのセクションの配置について詳しくは、Shopifyドキュメントのセクションとブロックを参照してください。
すべてのコレクションが自動的に表示されるため、弱い、または一貫性のないコレクション画像や説明は、小さな注目コレクションのセクションよりもここで目立ちやすくなります。
カードカラー設定
Section titled “カードカラー設定”これらの設定では、このセクションだけにデフォルトのカードカラーを上書きできます。ストア全体のコレクションカードは変更せずに、コレクションページに個性を持たせたい場合に便利です。
バナーオーバーレイのコントロールは、Banner カードスタイルを使用する場合にのみ重要です。画像上のテキストを読みやすくするために使いますが、買い物客が1つのコレクションと別のコレクションを見分けられる程度には、オーバーレイを十分に軽く保ってください。
バナー以外のスタイルでは、背景、枠線、見出し、テキストのカラーで、コントラストと視覚的な重みを調整できます。コレクションの抜粋も表示する場合は、カード背景とセクション背景の両方に対してテキストが読みやすいことを確認してください。
これらの設定では、アイコン、メインテキスト、小見出しを含む、セクションのイントロコンテンツに使用するカラーを制御します。コレクションページでカスタムのセクション背景を使う場合や、デフォルトのテキストスタイルより強いコントラストが必要な場合に特に役立ちます。
イントロのスタイルは、下のカードの見た目と視覚的につながるようにしてください。見出し部分がコレクショングリッドよりもかなり強く見えたり装飾的すぎたりすると、ページ全体のバランスが崩れて見えることがあります。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”共通のヘッダー設定を使って、オプションのアイコン、キャプション、見出し、補足テキスト、ボタンでコレクションページを紹介します。このセクションでは、買い物客はすぐに閲覧を始めたいことが多いため、短く明確なイントロが通常は最適です。
オプションのボタンは、季節のキャンペーンやショッピングガイドへのリンクなど、補助的なアクションとして最も役立ちます。アイコンのみのボタンを使う場合は、特にモバイルで、そのアイコンが動作を明確に伝えていることを確認してください。
共通のカード設定を使って、一覧内で各コレクションをどのように表示するかを制御します。このセクションでは、カードスタイル、画像比率、テキストの表示、配置、カードボタンの扱いが、買い物客がページをどれだけ素早く確認できるかに大きく影響します。
Bannerスタイルのカードは、より画像中心の見た目になります。一方、シンプルな余白付きスタイルや画像なしスタイルは、コレクション画像の一貫性が低い場合によく適しています。固定の画像比率を使うと、グリッドがより整理されて見えることが多いですが、重要な注目点を隠してしまうような画像の切り抜きになる場合があります。
共通の余白設定を使って、セクションの上下のスペースを調整します。コレクションページでは、余白によってイントロと近くのコンテンツを分けつつ、グリッドが孤立して見えないようにできます。
セクション背景設定
Section titled “セクション背景設定”共通のセクション背景設定を使って、セクションの背後にカラー、グラデーション、画像、動画を追加します。特に周囲のレイアウトが最小限の場合、コレクションページにより強いブランドフレームを作れます。
背景は、画像が多いコレクショングリッドではより慎重に扱う必要があります。カード自体が強い画像に依存している場合は、ページが窮屈に見えないよう、セクション背景を控えめにしてください。
区切り線設定
Section titled “区切り線設定”共通の区切り線設定を使って、セクションの上または下に線を追加します。余白だけに頼らず、よりすっきりした視覚的境界を作りたい場合に適しています。
共通の幅設定を使って、コンテンツ幅と外側のセクション幅を制御します。広めの設定では、大きなコレクショングリッドをより効率よく閲覧できるようになり、狭めの設定では、より強いイントロを使う場合に、ページがより厳選された印象になり、読みやすくなります。
幅の選択は、背景、画像、動画も使う場合により目立ちます。エディター上の表示では幅の違いを正確に判断しづらいことがあるため、公開ページ表示でこれらの変更をプレビューする価値があります。
使用上の注意
Section titled “使用上の注意”- コレクションの内容を一貫させてください。 このセクションは、コレクションのタイトル、画像、説明が似た品質とスタイルになっているときに最もよく見えます。
- 画像の強さに基づいてカードスタイルを選んでください。 バナーまたは画像中心のレイアウトは、コレクション画像が明瞭で認識しやすく、切り抜きも一貫している場合にのみ使用してください。
- イントロは簡潔に保ってください。 簡潔な見出しと短い補足テキストは、閲覧を起点にしたページでは、長い説明よりも買い物客の助けになることが多いです。
- モバイルのレイアウトを注意深く確認してください。 小さい画面では、ボタンの配置、画像比率、テキストの長さを確認し、コレクショングリッドが見やすい状態を保ってください。
- 実際のコンテンツでコントラストをテストしてください。 オーバーレイ、カスタムカードカラー、セクション背景を使う場合は、テキストが異なるコレクション画像の上でも読みやすいことを確認してください。
- 両方のビューポートを比較してください。 デスクトップとモバイルではコントロールの動作が異なることがあるため、公開前に各画面サイズをプレビューしてください。
- 明示的な上書きは意図して使ってください。 空白またはデフォルト風の値は通常フォールバックのスタイルを維持しますが、カスタムカラー、グラデーション、別メディアの選択を使うと、このセクションはページの他の部分からより独立した見た目になります。