コレクションカード設定

注目のリンク

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

役立つ動画

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

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

これらの設定は、テーマ全体のコレクションカードの既定の外観を制御します。コレクショングリッド、注目のコレクションエリア、その他のコレクションベースの表示に一貫した基準を作るために使用し、特定のレイアウトで異なるスタイルが必要な場合にのみ、個別のセクションで上書きしてください。テーマの各部分をどのようにカスタマイズできるかの概要については、セクションとブロックに関するShopifyドキュメント を参照してください。

カードスタイル

カードスタイルは、コレクションカードの全体構成と視覚的な重みを決定します。コレクション一覧の見え方に最も大きな影響を与えるため、通常は最初に選ぶのに最適な設定です。

バナースタイルは、画像を前面に出し、テキストをその上に重ねる場合に最適です。余白付きスタイルは一般的により標準的で、多列レイアウトでも見やすくなります。一方、画像なしスタイルは、よりシンプルでテキスト中心のデザインに適しています。

グローバルなカードスタイルを変更すると、複数の場所のコレクションカードに同時に影響することがあります。更新後は、コレクション一覧エリアと、同じ既定値を使用するプロモーション用のコレクション表示の両方を確認してください。

画像のアスペクト比

デスクトップとモバイルのアスペクト比設定は、画面サイズごとにコレクション画像がどのように表示されるかを制御します。これにより、小さい画面向けにトリミングを調整しながら、カードの見た目の一貫性を保てます。

横長の比率は、より編集的で横方向の印象になります。一方、正方形や縦長の比率は、各コレクションをより目立たせます。コレクション画像のばらつきが大きい場合、固定比率にするとレイアウトがすっきりしますが、画像によってはより強くトリミングされることがあります。

ヒント

デスクトップでは問題ないのに、スマートフォンでコレクション画像が切れすぎる場合は、まずモバイルの比率を調整してください。通常、デスクトップのレイアウトを変えずに、小さい画面での表示が改善します。

ボタンスタイル

ボタンスタイルは、コレクションカードで行動喚起を表示するかどうか、またその存在感をどの程度にするかを制御します。コレクションカードでより直接的にクリックを促したい場合は強めの設定を、画像とタイトルから遷移先がすでに明確な場合は控えめな設定を使用してください。

ボタンを非表示にすると、密度の高いグリッドをすっきり見せられます。より目立つボタンスタイルは、注目のコレクションエリアやプロモーション用のコレクションエリアに適しています。

カードテキスト

タイトルや抜粋からテキストなしまで、各コレクションカードに表示するテキスト量を制御できます。この設定は、わかりやすさと視覚的な密度の両方に影響します。

コレクション名に追加の文脈が必要な場合は、タイトルと抜粋の両方を表示するのが、しばしば最も安全な選択です。コレクション名が明確で、主な情報を画像が伝える場合は、タイトルのみまたはテキストなしの方法のほうが適しています。

テキスト配置

横方向と縦方向の配置は、カード内でテキストをどこに置くかを制御します。これらの設定は、画像中心のスタイルで特に目立ちます。配置は、読みやすさとカード全体のバランスの両方に影響します。

左揃えのテキストは、グリッドで最も見やすいことが多いです。中央揃えのテキストは、プロモーションレイアウトでより洗練された印象になります。縦方向の配置は、画像の目立つ部分からテキストを離しておくのに役立ちます。

ノート

中央の縦位置合わせは、バナーカードスタイルにのみ適用されます。その他のカードスタイルでは、この配置オプションは同じ効果を持ちません。

グローバル既定値と上書き

これらの設定は、コレクションカードのテーマ全体の既定値として機能します。一部のセクションではローカルに上書きできるため、このグループは、特殊なケースを調整する前に一貫した開始点を設定するのに適しています。これらのセクションレベルのコントロールを編集する詳細については、セクションのカスタマイズに関するShopifyドキュメント を参照してください。

グローバル既定値を使用して、テーマ全体でコレクションカードの配置を揃え、その後、セクションに明確なデザイン上の理由がある場合にのみ、ローカル上書きを適用してください。

使用上の注意

1. まずレイアウトを選択します。 他の設定の見え方は全体レイアウトで変わるため、テキストやボタンを調整する前にカードスタイルから始めてください。
2. レスポンシブ動作を確認します。 スライドスタイルの表示では、ナビゲーション、ページネーション、プレビュー、ブレークポイントの動作が変わることがあるため、レイアウト変更後はデスクトップとモバイルの両方を確認してください。
3. モバイルのトリミングは個別に確認します。 画像に重要な商品詳細、顔、テキストが含まれる場合は、より小さい画面でコレクションカードを確認してください。
4. テキストはわかりやすさに合わせます。 コレクションタイトルと画像だけで遷移先を十分に説明できる場合にのみ、カードテキストを減らしてください。
5. 柔軟性のために既定スタイルを使用します。 空白、透明、または既定スタイルの値は通常、フォールバックのスタイリングを保持します。一方、明示的な色、グラデーション、またはメディアの上書きは、ローカルのカード領域をより独立させます。
6. ローカル上書きを確認します。 グローバル変更の後に一部のエリアだけが不整合に見える場合、そのセクションでは独自のコレクションカード設定が使われている可能性があります。