成功
メインメニュー
ドロップダウン付きのナビゲーションメニューに、オプションのバナーとレイアウトコントロールを追加して表示します。
このブロックを使うと、選択したメニューにネストされたリンクが含まれている場合に、自動ドロップダウン付きの標準ナビゲーションメニューを表示できます。オプションのバナーや機能バーも追加できるため、このブロックはナビゲーションと軽い販促やブランドメッセージを組み合わせるのに便利です。メインメニューに関するCompany XYZドキュメントを参照してください。
より広いテーマ構造の概要については、セクションとブロックに関するShopifyドキュメントを参照してください。
モバイルでは、Menu と Mega menu のすべてのブロックが 1 つのナビゲーションインターフェースにまとめられます。モバイルメニューが見やすく使いやすい状態を保てるよう、まとめて確認してください。
まず、このブロックに表示するメニューを選択します。次に、オプションのバナーや機能バーが、販促、季節のお知らせ、または簡単なサービスのハイライトなどの文脈を追加するのに役立つかどうかを判断します。
これらの追加要素は慎重に使ってください。ナビゲーションはあくまでナビゲーションとして機能する必要があるため、補足コンテンツを増やしすぎてリンクを見つけにくくしないようにします。
これらの設定では、デスクトップでブロック内のどの位置にメニューを配置するかを微調整できます。ブロックが余分なスペースを埋める場合や、より広いデスクトップレイアウトを使う場合に特に重要です。
配置の変更がわずかに感じられる場合は、まずレイアウトの選択を確認してください。レイアウトのほうが通常は大きな影響があり、配置は仕上げの調整のように働きます。
レイアウト設定
Section titled “レイアウト設定”これらの設定では、デスクトップでメニューが使用する横方向のスペース量と、行内での配置方法を制御します。左、中央、右のレイアウトはより従来型のヘッダー構成に適しており、全幅レイアウトはより広いヘッダーでナビゲーションのバランスをよく見せられます。
利用可能なスペースを埋める は、ブロックをコンパクトに保つのではなく、残りのスペースいっぱいに広げたい場合に便利です。これはデスクトップにのみ適用されるため、必ず大きい画面サイズで結果をプレビューしてください。
これらの設定では、オプションのバナーの背後にあるメディアを制御します。画像または動画の背景を使用でき、デスクトップ用アセットが小さい画面でうまくトリミングされない場合は、モバイル用メディアを別に設定できます。
メッセージを支えつつ、主張しすぎない背景メディアを選んでください。シンプルな画像や、気を散らしにくい短い動画が、ナビゲーション領域では通常最適です。
動画の設定ガイダンスについては、best practices for video filesを参照してください。
これらの設定では、バナー背景の上に重ねるコンテンツを制御します。空のフィールドは非表示のままになるため、バナーを最小限に保つことも、より充実した販促メッセージを作成することもできます。
アイコン、キャプション、見出し、サブ見出しを使って、明確なコンテンツ階層を作成します。アイコン欄では絵文字または名前付きアイコンを使用でき、控えめかつ一貫して使うと強調に役立ちます。アイコンの書式設定のヒントについては、テーマの icon guidance を参照してください。
ボタン設定では、直接的なアクションを追加し、そのスタイル、アイコンの配置、モバイルでの幅を制御できます。ブロック全体リンクスタイルを有効にすると、サブ見出しテキスト内のリンクは削除されるため、このオプションはバナー全体で訪問者を 1 つの移動先に誘導したい場合に最適です。
バナーには 1 つの主要なインタラクションパターンを選んでください。バナー全体をクリック可能にする場合は、競合する追加リンクや複雑すぎるメッセージを重ねないようにします。
バナー前景メディア
Section titled “バナー前景メディア”バナーにロゴ、バッジ、商品ビジュアル、または背景の上に配置したいその他のグラフィックが必要な場合は、前景画像を追加します。これは、背景がより雰囲気重視で、前景画像が実際の焦点を担う場合に特に効果的です。
画像の幅設定を使って、グラフィックの比率をテキストに合わせます。全幅の画像表示は大胆なアートワークには有効ですが、ロゴや補助的なビジュアルには通常、より小さい幅のほうが適しています。
前景メディアをクリック可能にする場合は、リンク先の混乱を避けるため、バナーの他の要素と一貫した移動先にしてください。
これらの設定は、このブロックに対してのみ、より広いバナーカラー設定を上書きします。バナーに別のコントラスト、より強いブランディング、またはメディア上に表示されるテキストの制御をより細かく行いたい場合に使用してください。バナーカラー設定に関するCompany XYZドキュメントを参照してください
オーバーレイコントロールは、読みやすさの向上に特に役立ちます。テキストを支えるのに必要な分だけオーバーレイを強めてください。重いオーバーレイは、バナーを平坦または密集した印象にすることがあります。
標準ブロック設定
Section titled “標準ブロック設定”表示コントロールを使って、このブロックをデバイスサイズごとに表示または非表示にします。デスクトップとモバイルで異なるナビゲーション構成にしたい場合に便利です。表示設定に関するCompany XYZドキュメントを参照してください
モバイルナビゲーションでは、メニュー系のブロックが 1 つのインターフェースにまとめられるため、表示設定を変更した後は必ずモバイル全体の結果を確認してください。
エディター設定
Section titled “エディター設定”エディタータイトルを使うと、エディターのサイドバーでブロック名を変更できます。メニュー関連のブロックが複数ある場合や、編集時にわかりやすいラベルにしたい場合に便利です。
使用上の注意
Section titled “使用上の注意”- 最上位リンクは絞り込みます。 簡潔なメニューラベルを使い、訪問者がコンテンツをより早く見つけるのに本当に役立つ場合にのみ、ドロップダウン階層を追加します。
- モバイル全体を確認します。 メニュー系ブロックはモバイルでまとめられるため、このブロックだけでなく、最終的なモバイルナビゲーション体験を評価してください。
- バナーは控えめに使います。 販促コンテンツは、メインナビゲーションと競合せずに発見を支援する場合にのみ追加します。
- 読みやすさを優先します。 画像または動画の背景を使う場合は、テキストとアクションが引き続き見やすいよう、色とオーバーレイを調整してください。
- レイアウトをヘッダーのスペースに合わせます。 メニューを広いヘッダーとバランスよく見せたい場合は、より広いレイアウトやスペースを埋めるレイアウトを使い、他のヘッダー要素を優先したい場合は、よりコンパクトなレイアウトを使います。
- 両方のブレークポイントを確認します。 デスクトップとモバイルのコントロールは、レイアウト、配置、メディアの表示可否に異なる影響を与えることがあるため、公開前に両方のサイズをプレビューしてください。
- メディアの上書きは意図的に使います。 デスクトップとモバイルの背景選択は、表示したいコンテンツとトリミングの挙動に合わせてそろえ、別々のメディアはヘッダーの他の部分からより独立して見えることを想定してください。