成功
バナー
メディア、テキスト、オーバーレイ、明確なCTAを備えた柔軟なプロモバナーを作成します。
- セクションとブロックに関するShopifyドキュメント
- 動画の使用に関するCompany XYZドキュメント
- アイコンに関するCompany XYZドキュメント
- バナーカラー設定に関するCompany XYZドキュメント
- セクションの余白設定に関するCompany XYZドキュメント
- セクション背景設定に関するCompany XYZドキュメント
- 区切り線設定に関するCompany XYZドキュメント
- 表示設定に関するCompany XYZドキュメント
- レイアウト幅設定に関するCompany XYZドキュメント
- セクションのカスタマイズに関するShopifyドキュメント
- テーマエディターに関するShopifyドキュメント
Banner を使用して、重ねたメディア、テキスト、任意のCTAを備えた単一のプロモーション機能を作成します。ヒーローセクション、告知、季節キャンペーン、ブランドメッセージに適しており、選択した比率で収まりきらない高さが必要な場合は拡張できます。より広い概要については、セクションとブロックに関するShopifyドキュメント を参照してください。
メインのレイアウト設定では、デスクトップとモバイルでのバナーの形状を制御します。強い視覚的な枠が必要な場合は固定アスペクト比を選び、コンテンツ量が変わる可能性があり、バナーをより自然なサイズにしたい場合はデフォルト比を使用します。
モバイルでは独自の比率を使用できます。デスクトップの切り抜きが小さい画面では浅すぎると感じる場合に便利です。モバイル比率を高くすると、多くの場合、テキスト、人物、商品詳細に、別画像を用意しなくてもより多くの余白を確保できます。
このグループでは、外側のセクション背景とは別に、バナー自体の背景領域を制御します。画像または動画を使用でき、デスクトップ版が小さい画面でうまく切り抜かれない場合は、モバイル専用メディアも任意で指定できます。
背景画像のフィット設定では、メディアがバナー領域全体を埋めるか、完全に表示されたまま内側に収まるかを決定します。バナーを没入感のある印象にしたい場合はフィル系の方法を、端から端までの表示よりも作品全体を保持することを重視する場合はコンテイン系の方法を使用します。
前景コンテンツを追加すると、バナーはそれに合わせて高さが増えることがあります。その追加の高さによって、背景メディアの切り抜き方が変わる場合があります。
テキストが長いバナーや前景メディアを追加したバナーは、コンテンツの高さによって背景の切り抜きが大きく変わることがあるため、デスクトップとモバイルの両方で確認してください。
動画背景を使用する場合は、音声がなくてもメッセージが伝わるよう、短く視覚的にわかりやすいクリップにしてください。動画ファイルのガイダンスは、動画の使用に関するCompany XYZドキュメント で確認できます。
このグループでは、背景の上に重なるコンテンツを制御します。アイコン、キャプション、見出し、補足テキスト、1つの主要アクションを組み合わせることができ、空のコンテンツは非表示のままになります。
水平方向と垂直方向の配置で、バナー内のメッセージ位置を調整できます。画像を主役にしたバナーでは下寄せがよく合い、シンプルなプロモーションメッセージでは中央配置が最も適していることが多いです。
バナーのページ内での役割に基づいて、見出しタイプを選択します。バナーが大きなセクションの導入になる場合は見出しレベルを使用し、テキストが装飾的であったり、他の場所で繰り返される場合は段落スタイルを使用します。
ボタン設定では、ラベル、アイコン、サイズ、レイアウトを制御します。バナーが主要な入口として機能する場合は、モバイルで全幅ボタンを使うとタップしやすくなります。
リンクスタイルでは、バナー全体のクリック可能範囲が変わります。全体ブロック型スタイルはバナーを使いやすくできますが、小見出しテキストからリンクがなくなります。
アイコンには、絵文字または対応しているアイコン名を使用できます。アイコンのガイダンスは、アイコンに関するCompany XYZドキュメント で確認できます。
バナー前景メディア
Section titled “バナー前景メディア”ロゴ、バッジ、商品の切り抜き、補助画像など、追加の視覚レイヤーがバナーに必要な場合は、前景メディアを使用します。このメディアは、背景の後ろではなく、テキストコンテンツの横に表示されます。
画像スタイルは、メディアをより編集的にも、よりバッジ風にも見せられます。角丸や円形の処理はロゴや人物写真に適しており、デフォルトスタイルは通常、商品画像に適しています。
最大画像幅は、メディアとテキストのバランスを保つための主な手段です。画像がバナー内で目立ちすぎるようになったら、コピーを短くする前に幅を小さくしてください。
前景画像にリンクを追加することもできます。これは、画像が特集ブランド、コレクション、または商品を表し、独自の視覚的な入口として機能すべき場合に便利です。
これらの設定は、このセクションに限って通常のバナーカラー設定を上書きします。バナーにキャンペーン固有の配色、より強いテキストコントラスト、またはカスタムオーバーレイ処理が必要な場合に使用します。
オーバーレイの色と不透明度は、背景画像や動画が視覚的に情報量の多い場合に特に有効です。多くの場合、オーバーレイを調整するほうが、すべてのテキスト色を変更するよりも、読みやすさを自然に改善できます。
単色とグラデーションの両方を使用する場合、該当箇所ではグラデーションが優先されます。オーバーレイのグラデーションにも同じことが当てはまります。
バナーのカラーガイダンスは、バナーカラー設定に関するCompany XYZドキュメント で確認できます。
標準セクション設定
Section titled “標準セクション設定”余白設定 では、Banner セクションの上下のスペースを制御します。バナーを近くのコンテンツと密接につなげたい場合は狭めの余白を、目立つ演出として独立させたい場合は広めの余白を使用します。
バナーは視覚的に目立ちやすいため、わずかな余白の変更でもページのリズムに大きな影響を与えることがあります。デスクトップとモバイルの両方で余白を確認してください。
セクション背景設定
Section titled “セクション背景設定”セクション背景設定 は、バナー自体ではなく外側のセクションラッパーに影響します。これは、バナーをより広い枠付きの領域内に配置したい場合や、周囲のセクションに独自の画像、動画、色、オーバーレイが必要な場合に便利です。
外側のセクション背景と、バナー自体の背景メディアを組み合わせる場合は注意してください。意図的に重ねたデザインやインセットデザインを作る場合を除き、両方を使うと雑多に見えることがあります。
区切り線設定
Section titled “区切り線設定”区切り線設定 では、セクションの上部または下部に線を追加します。似た色や余白のセクションの間にバナーを配置するときに、その境界を明確にするのに役立ちます。
バナーにすでに強いビジュアル、枠線、コントラストが含まれている場合は、区切り線は控えめにしてください。視覚的なエッジが多すぎると、レイアウトが重く感じられることがあります。
表示設定 では、デバイスサイズごとにこのセクションを表示または非表示にできます。これは、デスクトップ用とモバイル用で別々のバナーレイアウトを使いたい場合に便利です。
デバイス別のバージョンを作成する場合は、画面サイズによって訪問者に異なるプロモーションが表示されないよう、メッセージと遷移先を一致させてください。
幅設定 では、バナー内のコンテンツ幅とセクションラッパーの幅の両方を制御します。コンテンツ幅は読みやすさの管理に、セクション幅はバナーを囲み付き、全幅、または端から端までのどれに見せるかの判断に使用します。
これらの変更は、特に広いレイアウトでは、エディター内と公開ページ上で見え方が異なることがあります。公開前に、ストアフロントで幅の更新結果をプレビューしてください。エディターのコントロールについては、セクションのカスタマイズに関するShopifyドキュメント と テーマエディターに関するShopifyドキュメント を参照してください。
使用上の注意
Section titled “使用上の注意”- 比率をメッセージに合わせます。 画像を主役にしたキャンペーンには固定比率を使用し、長いコピーや追加メディアで柔軟な高さが必要な場合はデフォルト比率を使用します。
- モバイルでの切り抜きを早めに計画します。 デスクトップの背景が小さい画面で重要な焦点を隠してしまう場合は、モバイル専用の比率またはメディアアセットを追加します。
- 両方のブレークポイントを確認します。 デスクトップとモバイルのコントロールでは、配置、表示、メディアの動作が異なる場合があるため、公開前に両方のビューポートサイズでバナーをプレビューしてください。
- 読みやすさのためにオーバーレイを使います。 コピーを書き換えたり複数のテキスト色を変更したりする前に、バナーのオーバーレイ色と不透明度を調整します。
- アクションを明確にします。 強いボタンを1つ使用し、バナー全体を1つの遷移先に導く場合にのみ、全体ブロック型リンクスタイルを選びます。
- 実際の幅の挙動をプレビューします。 幅や背景設定を変更した後は公開ページを確認してください。エディタープレビューでは、余白や切り抜きの変化が控えめに見えることがあります。