成功
メインナビゲーション
柔軟なメニュー、検索、ブランディング、モバイル向けレイアウト制御を使って、メインナビゲーションをカスタマイズします。
- ハンバーガーメニューブロックに関するCompany XYZのドキュメント
- ロゴブロックに関するCompany XYZのドキュメント
- Main menuブロックに関するCompany XYZのドキュメント
- メガメニューブロックに関するCompany XYZのドキュメント
- Searchブロックに関するCompany XYZのドキュメント
- アカウントアイコンブロックに関するCompany XYZのドキュメント
- カートブロックに関するCompany XYZのドキュメント
- Buttonブロックに関するCompany XYZのドキュメント
- Localization selectorsブロックに関するCompany XYZのドキュメント
- Icon with textブロックに関するCompany XYZのドキュメント
- Rich textブロックに関するCompany XYZのドキュメント
- Social media iconsブロックに関するCompany XYZのドキュメント
- セクション背景設定に関するCompany XYZのドキュメント
- セクションの余白設定に関するCompany XYZのドキュメント
- 区切り線設定に関するCompany XYZのドキュメント
- 表示設定に関するCompany XYZのドキュメント
- レイアウト幅設定に関するCompany XYZのドキュメント
- セクションとブロックに関するShopifyドキュメント
- セクションのカスタマイズに関するShopifyドキュメント
- テーマエディターに関するShopifyドキュメント
メニュー、ブランディング、検索、ユーティリティの各ブロックを、表示したい順序で組み合わせて、メインナビゲーションを構築します。ブロックの順序は全体のレイアウトを決定し、各ブロックはデスクトップとモバイルで別々に配置できるため、より細かく制御できます。テーマのセクションとブロックの仕組みについての概要は、セクションとブロックに関するShopifyドキュメントをご覧ください。
これらの設定は、セクション全体で訪問者がナビゲーションをどのように操作するかに影響します。
メニューの操作
Section titled “メニューの操作”サブメニューをクリックで開くか、ホバーで開くかを選択します。意図的に操作したい場合はクリックのほうが通常は安全な選択で、ホバーはポインタベースのデバイスではより速く感じられることがあります。
ナビゲーションにより深いメニュー構造やプロモーション用のドロップダウンコンテンツが含まれる場合、クリックで開く方法のほうが通常は制御しやすく、誤ってメニューが変わる可能性も低くなります。
モバイルメニューの初期状態
Section titled “モバイルメニューの初期状態”最初のモバイルメニュー項目を、最初から開いた状態で表示できます。これは、最上位の最初の項目が優先度の高いカテゴリーやコレクションにつながる場合に適していますが、最初の項目にリンクが多すぎると見た目が煩雑になることがあります。
これらの設定は、このセクション内のナビゲーションのテキストとアイコンに対する、より広範なテーマの色設定を上書きします。ナビゲーションがカスタム背景の上にある場合や、デフォルトのスタイルより強いコントラストが必要な場合に特に有用です。
対応ブロックタイプ
Section titled “対応ブロックタイプ”- アカウントアイコン
- ボタン
- カート
- ハンバーガーメニュー
- アイコン付きテキスト
- ローカライズセレクター
- ロゴ
- メインメニュー
- メガメニュー
- 検索
- リッチテキスト
- ソーシャルメディアアイコン
ブロックのレイアウトと共通のブロック動作
Section titled “ブロックのレイアウトと共通のブロック動作”このセクションのほとんどのブロックは、同じ配置ロジックを使用します。レイアウト設定で、メイン行の左、中央、右のどのグループに配置するかが決まり、ブロックの順序で各グループ内の並び順が決まります。一部のブロックは、別の全幅行に移動することもできます。
配置設定は通常、補助的なものです。最も重要なのは、ブロックが利用可能なスペースを埋める場合や、全幅行に配置される場合です。
デスクトップとモバイルのレイアウト
Section titled “デスクトップとモバイルのレイアウト”多くのブロックでは、デスクトップとモバイルで異なる位置を選択できます。これは、より充実したデスクトップヘッダーにしたい一方で、メニュー切り替え、ロゴ、検索、カートを優先する、より絞り込まれたモバイルレイアウトにしたい場合に便利です。
利用可能なスペースを埋める
Section titled “利用可能なスペースを埋める”一部のブロックは、デスクトップ行の残りのスペースを埋めるように広がることができます。ロゴ、メニュー、検索などのブロックでレイアウトの基準点にし、他のアクションを外側へ押し出したい場合に特に適しています。
ブロックの表示
Section titled “ブロックの表示”多くのブロックには独自の表示コントロールがあります。セクション全体を複製せずに、デバイスごとにユーティリティの表示を変えたい場合に使用します。
主要ブロックタイプ
Section titled “主要ブロックタイプ”ハンバーガーメニュー
Section titled “ハンバーガーメニュー”ハンバーガーメニュー は、ナビゲーションをモバイルで開くためのトリガーです。モバイルでメインナビゲーションを機能させるために必須なので、任意ではなく重要な要素として扱う必要があります。
モバイルでは、左側またはロゴの横など、見やすく予測しやすい位置に配置してください。モバイルで非表示にするのは、訪問者がナビゲーションを開く明確な別手段がある場合に限ってください。
モバイルで Hamburger menu block を削除または非表示にすると、訪問者がメインナビゲーションを開くための使える方法がなくなる場合があります。
ロゴ はブランドマークを表示し、ロゴ画像が設定されていない場合はストア名が表示されます。デスクトップとモバイルで幅のコントロールを分けることで、小さな画面を圧迫せずにブランディングを表示できます。
コンパクトなモバイルロゴが、通常は最もすっきりした結果になります。ロゴを広げすぎると、より重要なアクションが画面外に押し出されることがあります。
メインメニューとメガメニュー
Section titled “メインメニューとメガメニュー”標準的なドロップダウンナビゲーションには メインメニュー を、より大きく、より編集的なフライアウトが必要な場合には Mega menu block を使用します。モバイルでは、すべての Main menu ブロックと Mega menu ブロックが 1 つのナビゲーションインターフェースに統合されます。
どちらのブロックタイプにもバナーと特徴バーを含められるため、閲覧だけでなく販促にも役立ちます。Mega menu では、サブメニュー内に任意の親レベルの「すべて表示」リンクを含めるなど、構造化されたナビゲーションをより強く制御できます。
バナーとプロモーションコンテンツ
Section titled “バナーとプロモーションコンテンツ”メニューとメガメニューブロックには、独自の背景メディア、前面コンテンツ、ボタン、補助画像を含めることができます。季節のキャンペーン、特集コレクション、または特に目立たせたい主要な導線に使用します。
モバイルの動作
Section titled “モバイルの動作”複数のメニューベースのブロックが 1 つのモバイルインターフェースに統合されるため、デスクトップとモバイルは関連しつつも異なる体験として扱ってください。カテゴリーラベルを明確に保ち、デスクトップのナビゲーションを複数のメニューブロックに分ける場合は、統合後のモバイル結果を確認してください。
検索 は、ストア全体検索をナビゲーションに追加します。アイコンのみのトリガー、または小さなフィールドとして表示でき、スペースを確保するためにモバイルでの動作を個別に設定できます。
予測候補を有効にしている場合、デフォルトおよび補助の結果メニュー、さらに任意のプロモーションコンテンツも定義できます。これにより、検索は単なる直接検索だけでなく、発見にも役立ちます。
ユーティリティとアクションのブロック
Section titled “ユーティリティとアクションのブロック”これらのブロックは、主要なナビゲーションの周囲に一般的な補助アクションを追加します。
- アカウントアイコン はサインインとアカウントアクセス用
- カート はカートアクセス用で、色の上書きを任意で設定可能
- ボタン は、プロモーションや特別な入口など、強調したいアクション用
- ローカリゼーションセレクター は、国、通貨、言語の切り替え用
コンパクトなヘッダーでは、より小さなコントロールやアイコンのみのコントロールが通常は最適です。これらのブロックがメニューやロゴとスペースを競合する場合は、モバイル向けのレイアウトやブロックの表示を使って、小さな画面での体験を簡潔にしてください。
情報系とソーシャルのブロック
Section titled “情報系とソーシャルのブロック”これらのブロックは、ナビゲーションがユーティリティバーやメッセージバーのようにも機能する場合に役立ちます。
- アイコン付きテキスト は、短い訴求ポイントや信頼要素用
- リッチテキスト は、短い整形済みコンテンツ用
- ソーシャルメディアアイコン は、設定済みアカウントからのソーシャルリンク用
これらはメインナビゲーションでは控えめに使用してください。セカンダリ行や全幅レイアウトで最も効果的で、主要な閲覧導線と競合せずにヘッダーを補助できます。
標準セクション設定
Section titled “標準セクション設定”セクション背景設定
Section titled “セクション背景設定”セクション背景設定 を使用して、ナビゲーションの背後に色、グラデーション、画像、または動画を追加します。これらの設定により、より強いブランド化されたヘッダーを作成できますが、ページ上部の見た目の余白や視覚的な重みも変わることがあります。
オーバーレイコントロールは、メディア背景の上でもテキストを読みやすく保つのに役立ちます。モバイルで異なる背景メディアを使用する場合は、ナビゲーションは利用頻度が高い領域なので、両方のブレークポイントを慎重に確認してください。エディターでこれらの設定を調整する場合は、セクションのカスタマイズに関するShopifyドキュメント で、セクション設定がテーマエディターでどのように編集されるかを説明しています。
余白設定 を使用して、ナビゲーションコンテンツの上下のスペースを調整します。ここを少し変えるだけで、ヘッダーをよりコンパクトにも、よりゆったりにもできます。
このセクションはサイト全体で表示されるため、適度な余白のほうが一貫して維持しやすいです。デフォルトの余白は控えめです。ロゴやブロック構成により広いスペースが必要な場合を除き、実用的な出発点になります。
区切り線設定
Section titled “区切り線設定”区切り線設定 を使用して、ナビゲーションの上または下に線を追加します。ヘッダーと周囲のコンテンツの境界を、全面背景を使わずにすっきり見せたい場合に便利です。
区切り線の色が透明のままの場合、このセクションではより広範な枠線の色設定が使用されます。既定の枠線色では十分なコントラストが得られない場合のみ、カスタムの区切り線色を設定してください。
表示設定 を使用して、デバイスタイプごとにセクション全体を表示または非表示にします。これは、デスクトップとモバイルで別々のヘッダー構成にしたい場合に特に有用です。
一部の要素だけを変更する場合は、ブロックレベルの表示を使用します。特定のデバイス範囲でナビゲーション構造全体を置き換えたい場合は、セクションレベルの表示を使用します。
幅設定 を使用して、コンテンツ幅とセクション全体のラッパー幅の両方を調整します。これは、ナビゲーションに背景、広いメニューレイアウト、または全幅行が含まれる場合に特に重要です。
コンテンツ幅は、ナビゲーション項目をどこまで広げられるかを決める主なコントロールで、セクション幅はセクション自体に背景処理がある場合に最も重要です。エディターでは幅の変更が実際より控えめに表示されることがあるため、最終確定前に公開中のストアフロントを確認してください。利用できるエディターコントロールの概要については、テーマエディターに関するShopifyドキュメント をご覧ください。
使用上の注意
Section titled “使用上の注意”- モバイルでのアクセスを優先します。 ハンバーガーメニューブロックは表示したまま、すぐ届く位置に保ち、小さい画面でも訪問者がいつでもナビゲーションを開けるようにします。
- レイアウトグループで設計します。 まず左、中央、右のブロック配置を使い、その後でブロックの順序とスペースを埋める設定を調整し、配置だけに頼らないようにします。
- メニューは見やすく保ちます。 複数のメニューベースのブロックを使う場合は、統合後のモバイルメニューを確認し、カテゴリーが明確で過度に分割されていないか確認してください。
- プロモーションコンテンツは選択的に使います。 バナー、ボタン、特徴メッセージは、ナビゲーションを妨げるのではなく支える場合にのみ追加します。
- 公開結果を確認します。 背景、カスタムカラー、幅の変更を加えた後は、ストアフロントでコントラスト、余白、幅を確認してください。
- 検索の両方の状態を確認します。 入力前の検索状態と、検索語を入力した後の体験を比較し、予測候補、既定のコンテンツ、プロモーション項目が同じ顧客導線を支えているか確認してください。
- デバイスごとのレイアウトを個別にテストします。 ブロック位置、表示、配置を変更した後は、デスクトップとモバイルの両方を確認してください。2 つの表示は異なる動作をする場合があります。
- メディアの上書きに注意します。 背景画像、動画、またはデスクトップとモバイルで別のメディアを追加した場合は、トリミング、代替表示、読みやすさが引き続き適切に機能することを確認してください。