成功
メガメニュー
整理されたリンクと任意のプロモーションバナーコンテンツを備えた大きなドロップダウンメニューを作成します。
このブロックを使用すると、最上位のナビゲーション項目を、リンクをグループ化した大きなドロップダウンと任意のプロモーションコンテンツに変えることができます。ヘッダーに多くの遷移先を表示しながら窮屈に見せたくない場合に適しており、複数のMega menuブロックを追加して、より幅広いナビゲーションシステムを構築することもできます。テーマ構造の概要については、セクションとブロックに関するShopifyドキュメントを参照してください。追加の設定方法については、Mega menuのリファレンスを参照してください。
基本設定では、最上位のラベル、そのラベルで開くメニュー、追加のナビゲーション補助機能やプロモーションコンテンツを表示するかどうかを指定します。
Titleを、ヘッダーに表示するラベルに設定し、その項目から開くMenuを選択します。ドロップダウンからより幅広いカテゴリーのページへ利用者を誘導したい場合は、バナー、特長バー、サブメニュー用の「すべて表示」ボタンを有効にすることもできます。
これらの設定では、デスクトップで利用可能なスペース内にコンテンツをどのように配置するかを微調整します。ブロックを広く引き伸ばす場合や、より広がりのあるレイアウトを使用する場合に特に重要です。
配置を変更しても違いが小さい場合は、まずレイアウト設定を確認してください。レイアウトの選択によってブロックに割り当てられるスペースが決まり、配置は通常、そのスペース内での二次的な調整として機能します。
レイアウト設定
Section titled “レイアウト設定”レイアウト設定では、ヘッダー内でブロックが占める水平方向のスペースと、デスクトップでの位置を指定します。
このブロックを広げてヘッダー行のバランスを整えたい場合は、Fill available spaceを使用します。全体的なヘッダー構造に最も合うデスクトップレイアウトを選択してください。特に、このナビゲーション項目をより中央に配置したり、より広い幅にまたがらせたりしたい場合に有効です。
レイアウトと配置を組み合わせて確認してください。全幅または引き伸ばしたレイアウトにすると、このブロックだけでなくヘッダー全体の視覚的なバランスが変わる場合があります。
バナーを有効にすると、このグループでバナーの背後に表示するメディアを設定できます。画像または動画に加えて、デスクトップ用のアセットが小さな画面で適切にトリミングまたは拡大縮小されない場合は、モバイル用のメディアを別に指定できます。
臨場感のあるビジュアルにはCoverを、画像全体を表示したい場合はContainを使用します。ナビゲーションを引き続き簡単に確認できるよう、バナーの背景は十分にシンプルにしてください。
動画の設定方法については、動画の使用を参照してください。
このグループでは、テキスト、アイコン、メインボタンなど、バナー背景の上に重ねるコンテンツを設定します。空欄のフィールドは表示されないため、バナーを簡潔に保つのも簡単です。
選択したメディア上で最も読みやすい位置にコンテンツを配置するには、配置コントロールを使用します。ここでは、長いプロモーション文よりも、短い見出しと簡潔な補足テキストの方が通常は効果的です。
アイコンフィールドとボタンアイコンフィールドには、絵文字または対応しているアイコン名を追加できます。名前の付け方については、アイコンガイドを参照してください。
バナーを引き立て、目立ちすぎないボタンのスタイルとレイアウトを選択してください。ブロック全体をリンクにするスタイルを使用すると、サブ見出し内のリンクが削除されます。そのため、バナー全体を1つの明確な遷移先にしたい場合に適しています。
バナーは、2つ目のナビゲーションシステムではなく、簡単なプロモーション補助として扱ってください。強いメッセージとボタンを追加する場合は、周囲のメニュー構造を特に整理してください。
バナー前景メディア
Section titled “バナー前景メディア”このグループでは、背景とは別に、バナーのコンテンツ領域の上に画像を追加します。ロゴ、商品の切り抜き、小さな補足アートワークなどに便利です。
メッセージを圧倒せずメディアを引き立てられるよう、画像スタイルと最大幅を調整します。前景メディアを全幅にすることもできますが、ナビゲーション内ではドロップダウン上で目立ちすぎる可能性があるため、特に注意が必要です。
メディアにリンクを追加する場合は、メインボタンやバナー全体のリンク動作と競合しないようにしてください。
バナーカラー
Section titled “バナーカラー”これらの設定は、他のバナーのカラー設定をこのブロックに限って上書きします。このメガメニュー独自のキャンペーン用スタイルが必要な場合や、選択したメディアでより強いコントラストが必要な場合に使用してください。
オーバーレイ設定から始めるのが最も効果的な場合が多く、オーバーレイを改善すれば、すべてのテキスト要素の色を変更しなくても読みやすさを向上できます。詳しくは、バナーカラーを参照してください。
標準ブロック設定
Section titled “標準ブロック設定”表示コントロールを使用して、このブロックをデスクトップ、モバイル、または両方に表示します。画面サイズごとに異なるナビゲーションパターンを構築する場合に特に便利です。
モバイルではメニュースタイルが1つのインターフェースに統合されるため、デバイスごとの表示設定によって、利用者に完全で分かりやすいナビゲーション経路が残ることを確認してください。エディター固有の設定方法については、テーマエディターに関するShopifyドキュメントを参照してください。詳しくは、表示設定を参照してください。
使用上の注意
Section titled “使用上の注意”- 分かりやすいラベルを使用する。 利用者が各ドロップダウンに含まれるリンクの種類を予測できるよう、最上位のタイトルは短く明確にしてください。
- 両方のビューポートを確認する。 レイアウト、配置、表示、メディアを変更した後は、デスクトップとモバイルの結果を確認してください。それぞれ異なる動作をする場合があります。
- フォールバックスタイルを意図的に使用する。 空白またはデフォルトスタイルのカラーは通常、周囲のデザインを維持します。一方、明示的なカラー、グラデーション、メディアを指定すると、ブロックがより独立した印象になります。
- 読みやすさを保つ。 画像または動画の背景を使用する場合は、リンクと行動喚起を簡単に確認できるよう、オーバーレイ、カラー、コピーの長さを調整してください。
- 競合するクリック要素を制限する。 バナーにボタン、リンク付きメディア、またはブロック全体のリンクが含まれる場合でも、明確な主要アクションが1つ残るようにしてください。