成功
コレクションバナー
柔軟なメディア、メッセージ、カラー設定で、コレクショングリッドにプロモーションバナーを追加します。
このブロックを使用して、コレクショングリッド内にプロモーションメッセージを直接配置します。背景メディア、オーバーレイコンテンツ、任意の前景画像、カスタムカラーを組み合わせることで、商品閲覧に自然に溶け込むコレクション固有のキャンペーンを作成できます。
テーマブロックの仕組みについてのより詳しい概要は、セクションとブロックに関するShopifyドキュメントをご覧ください。
このブロックは、コレクションにグリッド内へ配置するのに十分な商品がある場合にのみ表示されます。大きいバナーには少なくとも 6 商品、小さいバナーには少なくとも 11 商品が必要です。
追加の詳細については、提供元のガイドもご利用いただけます: コレクションバナーに関するCompany XYZドキュメント。
主なサイズ設定で、バナーがグリッド内で占めるスペース量を調整します。各サイズのバナーは 1 つだけ表示されるため、同じコレクションで複数のバナーを使用する場合は、サイズを慎重に選択してください。
プロモーションをはっきり目立たせたい場合は、Large バナーを使用します。商品タイルほど強く競合させず、軽めのプロモーション表現にしたい場合は Small を使用します。
このグループでは、バナーコンテンツの背後にあるメディアを設定します。デスクトップ版が小さい画面でうまく切り抜かれない場合は、画像または動画を使用でき、モバイル用メディアを別に設定できます。
モバイル用メディア欄を空欄のままにすると、メインの背景メディアが再利用されます。シンプルな設定では便利ですが、テキストや焦点をより適切に収める必要がある場合は、モバイル専用アセットを別に用意する価値があります。
Background image fit で、画像ベースの背景が利用可能なスペースにどのように収まるかが変わります。画像の雰囲気を主に見せたい場合は full-bleed の見た目を、アートワーク全体を表示したい場合は contained の収まりを使用します。
動画の設定方法については、動画の使用に関するCompany XYZドキュメントをご覧ください。
このグループでは、背景の上に重ねるコンテンツを設定します。配置、アイコン、テキスト、主な行動喚起が含まれます。空欄のフィールドは非表示のままになるため、最小限のラベルから、より充実したプロモーションメッセージまで簡単に作成できます。
水平方向と垂直方向の配置で、背景メディアの焦点に合わせてコンテンツを配置できます。画像にすでに強い被写体がある場合は、すべてをデフォルトで中央揃えにするのではなく、余白にテキストを置いてください。
絵文字または対応するアイコン名を使ってアイコンを追加すると、素早い視覚的な目印になります。これは季節キャンペーン、期間限定メッセージ、シンプルなブランドアクセントに適しています。提供元のアイコンガイダンスは、Google Material Icons と アイコンに関するCompany XYZドキュメント で確認できます。
見出し、キャプション、サブ見出しは、明確な階層で使うと最も効果的です。見出しは簡潔にし、キャプションには軽い文脈を、サブ見出しは追加のコピーがプロモーション理解に役立つ場合のみ使用してください。
ボタン設定では、リンク先、スタイル、アイコンの配置、モバイル幅を制御します。全ブロックリンクスタイルを選ぶと、バナー自体が主なクリック対象になります。
バナー前景メディア
Section titled “バナー前景メディア”このグループでは、前景コンテンツの横に任意の画像を追加します。ロゴ、商品切り抜き、バッジ、背景の代わりに上部へ配置したい補助アートワークに便利です。
画像スタイルで見た目の処理が変わり、幅設定でレイアウト内での画像の存在感が調整されます。ロゴには小さめの幅が、目立つキャンペーン用アートワークには大きめの幅が通常適しています。
前景画像に個別のリンクを追加することもできます。すでにバナーにボタンや全ブロックリンクがある場合は、操作が予測しやすいように慎重に使用してください。
バナーカラー
Section titled “バナーカラー”これらの設定は、このブロックに対してのみ、より広いバナースタイルを上書きします。コレクションキャンペーンで独自の配色、より強いコントラスト、またはデフォルトのスタイルよりもブランド感のある見た目が必要な場合に便利です。
バナーの背景、枠線、テキスト、アイコン、見出し、サブ見出し、オーバーレイを細かく調整できます。一般的なテキストカラーは、より具体的なテキストカラーが設定されていない場合の代替として機能します。
オーバーレイの色と不透明度は、背景画像や動画がメッセージと競合する場合に特に重要です。不透明度を下げるとメディアはより見えやすくなりますが、可読性はすぐに低下する可能性があります。
これらの共通カラーコントロールの詳細については、提供元の参照情報をご利用ください: バナーカラー設定に関するCompany XYZドキュメント。
標準ブロック設定
Section titled “標準ブロック設定”この共通グループでは、ブロックをデスクトップ、モバイル、またはその両方に表示するかを制御します。小さい画面で異なる販促構成を使いたい場合や、1 つのデバイスサイズでグリッドを簡素化したい場合に便利です。
表示ルールをバナーサイズや商品数の要件と組み合わせる場合は注意してください。片方の画面サイズでバナーが非表示になると、デバイスごとにコレクションの見え方が異なるためです。エディターのより広い動作については、セクションのカスタマイズに関するShopifyドキュメントをご覧ください。提供元の表示ガイドは、表示設定に関するCompany XYZドキュメントです。
使用上の注意
Section titled “使用上の注意”- コレクションサイズを確認する。 バナーが表示されない場合は、選択したバナーサイズに対してコレクションの商品数が十分か確認してください。
- アクションを明確にする。 可能な限り 1 つの主なリンク先を使用し、バナーが理解しやすく、クリックしやすいようにしてください。
- コントラストを意識してデザインする。 メッセージがデスクトップとモバイルの両方で読みやすいように、メディア、オーバーレイ、テキストカラーのバランスを取ってください。
- 必要に応じてモバイル専用メディアを使用する。 デスクトップの切り抜きで重要な内容が小さい画面で隠れる場合は、モバイル専用アセットに差し替えてください。
- 両方の表示幅を確認する。 デスクトップとモバイルのコントロールで配置、表示、メディアの動作が変わることがあるため、公開前に両方のサイズでバナーを確認してください。
- 代替スタイルは意図的に使用する。 ブロックを周囲の見た目に合わせて継承させたい場合はカラーやメディアを空欄のままにし、バナーをより独立した見た目にしたい場合は明示的に上書きしてください。