成功
コレクション一覧
レスポンシブなグリッドまたはスライドショーで選択したコレクションを表示し、カテゴリを見やすくします。
- セクションとブロックに関するShopifyドキュメント
- レイアウト設定に関するCompany XYZドキュメント
- スライドショーコントロール設定に関するCompany XYZドキュメント
- ヘッダー設定に関するCompany XYZドキュメント
- カード設定に関するCompany XYZドキュメント
- セクション余白設定に関するCompany XYZドキュメント
- セクション背景設定に関するCompany XYZドキュメント
- セクションのカスタマイズに関するShopifyドキュメント
- 区切り線設定に関するCompany XYZドキュメント
- 表示設定に関するCompany XYZドキュメント
- レイアウト幅設定に関するCompany XYZドキュメント
このセクションを使用すると、買い物客がカテゴリ別に閲覧しやすいよう、選択したコレクションをビジュアルカードとして表示できます。ホームページ、ランディングページ、キャンペーンページなど、カタログの適切な部分へ誘導したい場合に特に効果的です。
まず、表示するコレクションを選択します。このセクションは、厳選した個別の商品を強調するよりも、コレクションの発見やカテゴリ閲覧に適しています。エディターでセクションがどのように機能するかの全体像については、セクションとブロックに関するShopifyドキュメント を参照してください。
レイアウト設定
Section titled “レイアウト設定”レイアウトコントロールを使って、デスクトップ、タブレット、モバイルに表示するコレクションカードの数と、各デバイスでグリッドまたはスライドショーのどちらを使用するかを選択します。レイアウト設定 を参照してください。
タブレットの列設定は、0 のままにするとデスクトップの列数を継承できます。これは、デバイスごとの調整を少なくしたい場合に便利です。デスクトップのレイアウトが中程度の画面で密集しすぎる場合は、継承されたレイアウトに頼らず、タブレット値を明示的に設定してください。
デスクトップではバランスよく見えるレイアウトでも、小さい画面では窮屈に感じることがあります。見やすく閲覧しやすくするために、列数を減らすか、モバイルをスライドショーに切り替える方がよい場合があります。
スライドショー設定
Section titled “スライドショー設定”デバイスでスライドショーレイアウトを使用する場合、これらの設定でセクションの動き方と、買い物客がコレクションカード間をどのように移動するかを制御します。スライドショーコントロール を参照してください。
フェードアニメーションは、よりシンプルで集中しやすい表示になりますが、同時に表示できるスライドは 1 枚に制限され、ページネーションは表示されません。複数のコレクションを素早く見比べることより、すっきりした販促的な見た目を重視したい場合に使用してください。
自動再生は動きを加えられますが、気を散らすのではなく、補助的に感じられるようにする必要があります。デスクトップでは、ホバーで一時停止を使うと、買い物客がクリック先を決める間に動きを止められるため特に便利です。
次のスライドをプレビューすると、特にタッチデバイスでセクションがよりインタラクティブに感じられます。より整った、まとまりのあるレイアウトにしたい場合は、このプレビューをオフにしてください。
カードカラー設定
Section titled “カードカラー設定”これらの設定を使うと、このセクションでのみ、テーマの他の場所で使用されているカードカラーを上書きできます。コレクション一覧により強い販促感を持たせたい場合や、周囲のセクション背景に合わせてカードのコントラストを変えたい場合に便利です。
バナーオーバーレイのコントロールは、Banner カードスタイルを使用する場合にのみ適用されます。その他のカードスタイルでは、背景、枠線、見出し、テキストの色に注目し、カードの可読性と見た目の一貫性を保ってください。
これらのコントロールは、セクションのアイコン、見出し、補足テキストの色を上書きします。カスタムのセクション背景を追加し、ヘッダー内容をよりはっきり目立たせたい場合に最も有効です。
セクション背景と下のカード領域の両方に対して、十分なテキストコントラストを保ってください。ここを少し調整するだけで、カードデザイン自体を変更せずに、セクションをより洗練された印象にできます。
標準セクション設定
Section titled “標準セクション設定”ヘッダー設定
Section titled “ヘッダー設定”共通のヘッダー設定を使って、コレクションカードの上に導入文を追加できます。これには、配置、見出し、キャプション、補足テキスト、任意のボタンが含まれます。ヘッダー設定 を参照してください。
ここは、注目コレクションを結びつける要素、たとえば季節性、商品タイプ、想定対象などを説明するのに適しています。ボタンを追加する場合は、すべてのコレクションを表示する、または関連するランディングページを開くなど、次の明確な行動に使ってください。
共通のカード設定を使って、各コレクションカードの見た目を制御できます。これには、スタイル、画像比率、テキスト表示、配置、ボタンの扱いが含まれます。カード設定 を参照してください。
これらの設定は、このセクションにのみ、より広いテーマの既定値を上書きします。注目コレクションをサイトの他の部分とは異なる見せ方にしたい場合に便利です。Banner カードはより印象的で、シンプルなパディング付きスタイルは、大きなグリッドで見やすいことが多いです。
共通の余白設定を使って、セクションの上下のスペースを調整します。余白設定 を参照してください。
余白を広くすると、コレクション一覧が独立した閲覧エリアのように感じられます。一方、より詰めた間隔は、近くのコンテンツを支える場合に適しています。デスクトップとモバイルの両方で間隔を確認し、文脈の中でバランスよく見えるようにしてください。
セクション背景設定
Section titled “セクション背景設定”共通のセクション背景設定を使って、セクションの背後に色、グラデーション、画像、または動画を追加します。セクション背景設定 を参照してください。
背景を使うと、セクションをより編集的、またはキャンペーン主導の印象にできますが、可読性や見た目の余白にも影響します。画像や動画の背景を使う場合は、ヘッダーテキストのコントラストが十分であることを確認し、必要に応じてオーバーレイを使用してください。エディターでの設定の詳細については、セクションのカスタマイズに関するShopifyドキュメント を参照してください。
区切り線設定
Section titled “区切り線設定”共通の区切り線設定を使って、セクションの上部または下部に線を追加します。区切り線設定 を参照してください。
このセクションが見た目の似たコンテンツ領域の間にあり、より明確な境界が必要な場合に区切り線が役立ちます。より強い構造上の区切りを出したい場合を除き、控えめに保ってください。
共通の表示設定を使って、セクションをデスクトップ、モバイル、または両方に表示するかを制御します。表示設定 を参照してください。
これは、大きなデスクトップグリッドとよりシンプルなモバイルスライダーのように、デバイスごとに別バージョンのセクションを用意したい場合に便利です。デバイス別バージョンを作成する場合は、注目コレクションとメッセージの整合性を保ってください。
共通の幅設定を使って、セクションのコンテンツ幅と外側のセクション幅を制御します。幅設定 を参照してください。
幅を広くするとより大きなグリッドや多くの列に対応し、幅を狭くすると少数のコレクションをより厳選された印象にできます。背景を使用する場合は、エディターの枠組みで間隔がページ上とは違って見えることがあるため、ライブのストアフロントで幅の変更をプレビューしてください。
使用上の注意
Section titled “使用上の注意”- コレクションを意図的にまとめる。 セクションがディレクトリのようではなく、厳選された印象になるよう、明確なテーマを共有するコレクションを選びます。
- レイアウトを目的に合わせる。 複数のコレクションを素早く比較するにはグリッドを使い、スペースが限られる場合やタッチしやすい閲覧を重視する場合はスライドショーを使います。
- カードを読みやすく保つ。 強いオーバーレイ、カスタムカラー、Banner スタイルは、テキストがコレクション画像の上でもはっきり見えるときに最も効果的です。
- 役立つヘッダーの文脈を追加する。 短い見出しと簡潔な補足テキストがあると、注目コレクションをひと目で理解しやすくなります。
- すべての画面サイズを確認する。 列数、スライドショーの動作、幅の選択は、デスクトップ、タブレット、モバイルで大きく異なる場合があります。
- デバイス別メディアを慎重に確認する。 デスクトップ用とモバイル用で画像を分けると、切り抜き、読み込み、フォールバック動作、可読性が変わることがあります。
- ナビゲーションコンテンツを顧客の導線として扱う。 並べ替え、非表示、モバイル専用のリンクは、買い物客がこのセクションからたどり着ける先を変える可能性があります。