成功
バナー
重ねたメディア、テキスト、ボタン、およびデバイス別の表示制御を備えたプロモーションバナーを作成します。
Bannerブロックを使用すると、背景メディア、重ねたテキスト、明確な行動喚起を備えた、シンプルなお知らせ用ストリップから、より視覚的なプロモーションまで作成できます。モバイル用メディアの個別設定、任意の前景画像、ブロックごとのカラー制御をサポートしているため、各バナーを伝えたいメッセージに合わせて調整できます。フィールド単位のリファレンスについては、バナーに関するCompany XYZドキュメントをご覧ください。
エディターでのブロックの仕組みについて詳しくは、セクションとブロックに関するShopifyドキュメントをご覧ください。
まず、バナーのアスペクト比を選択します。固定比率は、よりデザインされた画像中心の形状にしたい場合に便利です。一方、Default は、コンテンツ自体が高さを決めるべき場合に最適です。
デスクトップでの形状が小さい画面では高すぎる、低すぎる、または窮屈に感じられる場合は、モバイル用に別の比率を設定できます。モバイル比率を Default のままにすると、メインの比率設定に従います。
このグループでは、バナー自体の背景の見せ方を制御します。前景コンテンツの背後にメインの視覚レイヤーを追加する用途で使用します。
画像または動画を使用でき、必要に応じてモバイル版も個別に設定できます。デスクトップ用の画像が小さい画面で不自然にトリミングされる場合や、より軽く焦点を絞ったモバイル構成にしたい場合に特に役立ちます。
背景画像のフィットは、画像メディアがバナー領域をどのように埋めるかを制御します。Cover は没入感のあるアートワークに通常最適で、Contain は画像全体を表示したままにする必要がある場合に適しています。
デスクトップとモバイルの両方でのトリミングを確認していない限り、重要なテキストや商品詳細を背景アート内に配置しないでください。
動画を使用する場合は、前景コンテンツの読みやすさを保つため、短くて視覚的にシンプルなものにしてください。ファイルのガイダンスと実践的な設定のヒントについては、using videoをご覧ください。
このグループでは、背景の上に表示されるコンテンツを制御します。空欄のフィールドは非表示のままになるため、ブロックをシンプルに保ちやすくなります。
水平配置と垂直配置を使用して、バナー内で最も自然に見える位置にコンテンツを配置します。中央揃えのレイアウトはシンプルなメッセージに適していることが多く、下揃えや端揃えのレイアウトは画像中心のプロモーションでより効果的なことがよくあります。
アイコン、キャプション、見出し、サブ見出しを組み合わせて、明確なコンテンツ階層を構築できます。アイコンフィールドには、絵文字またはアイコン名を入力できます。対応する使い方については、icon guideをご覧ください。
見出しタイプは、ページ上でのバナーの役割に基づいて選択します。より強い見出しレベルは主要なプロモーションメッセージに適しており、より軽いテキストスタイルは、バナーが主役というより補助的な役割のときに適しています。
ボタン設定では、テキスト、アイコンの扱い、サイズ、レイアウトを含むバナーの主要アクションを制御します。バナーが主にアクション重視の場合、モバイルで全幅のボタンにするとタップしやすくなります。
リンクスタイルは、バナーをどの程度クリック可能にするかを変更します。ブロック全体リンクにするとプロモーションバナーを操作しやすくなりますが、テキスト領域内のリンクには影響します。
リンクを新しいタブで開くのは、外部キャンペーンや補足リソースへのリンクなど、その動作が顧客の導線を明確に支える場合に限ってください。
バナー前景メディア
Section titled “バナー前景メディア”ロゴ、バッジ、商品切り抜き、キャンペーングラフィックのように、テキストと一緒に追加の画像を表示したい場合は、前景メディアを使用します。背景がより雰囲気重視で、プロモーション画像を鮮明かつ制御された状態に保ちたい場合に適しています。
画像スタイルは、視覚表現をバナーの他の要素に合わせるのに役立ちます。幅設定を使うと画像を控えめにしたり、より目立たせたりでき、0に設定すると利用可能なスペース全体に広げられます。
前景画像にはリンクを追加することもできます。ブロックにすでに強い主要ボタンやブロック全体リンクスタイルがある場合は、メインアクションが明確に分かるよう、クリック動作をシンプルに保ってください。
バナーカラー
Section titled “バナーカラー”これらの設定は、このブロックにのみデフォルトのバナーカラー処理を上書きします。キャンペーン固有のスタイル、より強いコントラスト、またはカスタムのオーバーレイ処理が必要なバナーで使用してください。設定の詳細については、バナーカラー設定に関するCompany XYZドキュメントをご覧ください。
背景、枠線、見出し、アイコン、サブ見出し、テキスト、オーバーレイの各色を、グラデーションオプションを含めて調整できます。多くの場合、最も重要なのは、選択した背景メディアの上でも前景コンテンツが読みやすいかどうかです。
オーバーレイの不透明度は、背景画像や動画が情報量の多い場合に特に役立ちます。少し強めのオーバーレイにすると、すべてのテキスト色を極端に変更するよりも、読みやすさを自然に向上させられることがよくあります。
標準ブロック設定
Section titled “標準ブロック設定”表示コントロールを使用すると、ブロックをすべてのデバイス、デスクトップのみ、またはモバイルのみで表示できます。これは、画面サイズごとに別々のバナーレイアウトやアートワークを使いたい場合に便利です。設定の詳細については、表示設定に関するCompany XYZドキュメントをご覧ください。
デスクトップ版とモバイル版を別々に作成する場合は、顧客が矛盾するプロモーションに遭遇しないよう、メッセージと遷移先を一致させてください。エディターの基本については、テーマエディターに関するShopifyドキュメントをご覧ください。
使用上の注意
Section titled “使用上の注意”- 目的に応じて比率を選ぶ。 視覚的なプロモーションには固定比率を使い、バナーに長いテキストや複数のコンテンツ要素がある場合は、より柔軟な設定を使います。
- モバイル用メディアは別に計画する。 デスクトップ背景が不自然にトリミングされる場合や、小さい画面で情報量が多く感じられる場合は、モバイル専用の画像や動画を追加します。
- 主要アクションは1つにする。 ボタン、リンク付き前景メディア、ブロック全体リンクは慎重に使い、バナーに明確な1つのクリック経路がある状態を保ちます。
- 読みやすさを優先する。 メッセージがすべての背景メディア上で読みやすい状態になるまで、オーバーレイの強さとテキスト色を一緒に調整します。
- デバイスの表示設定は意図的に使う。 レイアウトやアートワークを本当に変える必要がある場合にのみ、デスクトップ用とモバイル用のバナーを別々に作成します。
- 両方の表示領域を確認する。 公開前に、デスクトップとモバイルの両方で配置、メディアのトリミング、コントロールの表示を確認します。各レイアウトの動作は異なる場合があります。
- 可能な場合はフォールバックのスタイルを維持する。 バナーに周囲の見た目を継承させたい場合は、カラー項目を未設定のままにします。明示的な色、グラデーション、メディアの上書きは、バナーを周囲と差別化する必要がある場合のみ使用します。
- フォームの状態は読みやすく保つ。 バナーに顧客入力が含まれる場合は、空の状態、送信済み状態、検証状態、エラー状態が、選択したメディアの上でも見やすいようにしてください。