カード設定

注目のリンク

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

役立つ動画

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

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

これらの設定は、カードベースの領域でより広いテーマのデフォルトとは異なる表示が必要な場合に使用します。これにより、ストアフロント全体の他のカードスタイルを変更せずに、カードの見た目と読みやすさを細かく調整できます。これらの設定がどこに当てはまるかの概要については、セクションとブロックに関するShopifyドキュメントをご覧ください。

カードの外観

カードスタイルは、各カードの全体的な表示を制御します。構造、余白、画像の強調度合いなどが含まれます。カードが少しごちゃついて見える、単調に見える、または表示するコンテンツと合っていない場合は、ここから始めるのが最適です。

余白が多いスタイルは、通常、複数のコンテンツを見分けやすくします。画像をより重視するスタイルは、写真が内容の大部分を伝える場合に適しています。

テーマの他の部分と統一したい場合は、テーマ設定を使用のままにしてください。このカードグループに明確な見た目上またはコンテンツ上の必要がある場合にのみ、上書きしてください。

画像の比率

画像のアスペクト比は、カード画像の切り抜き方と表示枠を制御します。同じ切り抜きでも大きな画面ではバランスよく見える一方、小さな画面では重要な内容が切れてしまう場合があるため、デスクトップとモバイルで別々に設定すると特に便利です。

横長やワイドスクリーンの比率は、通常、横方向の画像や密度の高いレイアウトに適しています。正方形や縦長の比率は、より強いグリッドを作ったり、より高い画像に十分な余白を与えたりできます。スマートフォンで画像の見え方が不自然な場合は、デスクトップのレイアウトを妥協する前に、まずモバイルの比率を調整してください。

カードボタン

ボタンスタイルは、カードのアクションをどの程度強く見せるかを変更します。カードでクリックを促したい場合はより目立つスタイルを、タイトルと画像だけで遷移先が十分に伝わる場合は控えめなスタイルを使ってください。

小さめのボタンは、密度の高いグリッドで視覚的なノイズを減らすのに役立ちます。ボタンを非表示にするのは、非常にすっきりした画像重視のレイアウトでは有効な場合がありますが、その場合でもカードが明確に操作可能だと読み取れる必要があります。

カードテキスト

テキスト表示は、各カード内にどの程度の文章コンテキストを表示するかを制御します。これは、見分けやすさの速さと、クリック前に顧客が受け取る案内の量の両方に影響します。

タイトルと抜粋の両方を表示すると、説明が必要なカードや画像の説明性が低い場合に効果的です。タイトルのみのレイアウトはよりすっきりしており、画像とラベルだけで十分に伝わる場合に最適です。最小限のテキストスタイルは、周囲のコンテキストが十分にある、視覚中心のレイアウトに限定するのが最適です。

テキストの配置

水平および垂直の配置は、選択したカードスタイルの中でテキストを意図的に見せるのに役立ちます。配置は、視覚的なスタイルと同じくらい表示のしやすさに影響する、画像重視のレイアウトでより重要になります。

左揃えのテキストは、通常、グリッドで最も見分けやすく、中央揃えのテキストはより販促的な印象になります。垂直位置は、バナースタイルのカードや、テキストが画像の上または横に配置される他のレイアウトで最も重要です。

ノート

中央の垂直配置は、Bannerカードスタイルにのみ適用されます。他のスタイルでは、上または下に配置したほうが、より予測しやすい結果になります。

再利用可能な上書き

これらの設定は、再利用可能なカードに対するローカルな上書きとして使うことを想定しています。ほとんどのオプションをテーマ設定を使用のままにすると一貫性を保ちやすく、必要な項目だけを選択的に変更することで、特定のカードグループを異なるコンテンツタイプ、画像の形状、または閲覧動作に合わせて調整できます。

ほぼすべてのオプションを変更している場合は、そのカード領域の全体的な表示を見直してください。対象を絞った軽めの上書きのほうが、カードスタイルを最初から作り直すよりも、通常は一貫性のある結果になります。

利用可能なコントロールの詳細については、カード設定に関するCompany XYZドキュメント と セクションのカスタマイズに関するShopifyドキュメントをご覧ください。

使用上の注意

1. 両方のブレークポイントを確認します。 デスクトップとモバイルのコントロールは、レイアウト、配置、表示、メディアの動作に異なる影響を与える場合があるため、公開前に両方の表示を確認してください。
2. スライダーの動作に注意します。 スライダースタイルの表示では、静的なグリッドや積み重ねレイアウトと比べて、ナビゲーション、ページネーション、プレビュー、ブレークポイントの動作が変わる場合があります。
3. フォールバックはシンプルに保ちます。 空、透明、またはデフォルトスタイルの値は、通常、より広いフォールバックスタイルを維持します。一方、明示的な色、グラデーション、メディアの上書きは、そのローカル領域をより独立させます。
4. 画像の読みやすさを保ちます。 デスクトップとモバイルのメディアを別々に設定する場合は、両方の画面で切り抜き、読み込み、フォールバック、テキストのコントラストを確認してください。
5. わかりやすいナビゲーションの手がかりを維持します。 カードにメニュー、ドロワー、ネストされたリンク、またはモバイル専用のコントロールが含まれる場合は、非表示または並び替えられた項目が、顧客がたどると予想する経路を妨げないようにしてください。