10種類のウェブサイトメニューのデザイン、カスタマイズ方法、使い方をご紹介します。
このガイドではメニューのデザイン、つまりメニューがどのように見えるか、どのように機能するかに焦点を当てています。ウェブサイトのメニューをデザインする方法、ウェブサイトの各ページにメニューを表示する方法、特定のウェブページのナビゲーションメニューを作成する方法については、別のガイドをお読みになることをお勧めします：
ナビゲーションメニューは、ウェブサイトのさまざまなページ、または特定のウェブページ内の特定のセクションにつながるリンクのリストです。各リンクはメニュー項目です。メニューは、ウェブサイトの訪問者がウェブサイトのページまたは特定のページの異なるセクション間をナビゲートするために使用されます。
一般的なヒント
>
メニューは、ウェブサイト訪問者が素早く簡単に情報を見つけられるようにすること
>
メニューは簡潔に
>
メニューの数を最小限に抑える
>
ナビゲーションバーに追加するメニュー項目は5つまでとする。
>
メニュー項目を1単語以下にする
>
その言葉は短い方がいい
>
メニュー・ナビゲーション・バーは、ウェブサイトのコンテンツからユーザーの目を逸らさせないよう、デザインしすぎないこと。
良いメニューデザインの例
メニュー・デザイン・オプション
表紙を覆う透明な静的メニュー
どのように見えるか
このようなメニューは、ウェブサイトの訪問者がコンテンツから目をそらさないようにページの上部に固定されており、ページの特定の場所に固定されているため、必要なときに簡単に見つけることができます。
このようなメニューは、ウェブサイトの訪問者がコンテンツから目をそらさないようにページの上部に固定されており、ページの特定の場所に固定されているため、必要なときに簡単に見つけることができます。
設定方法
ページにME301ブロックを追加し、以下の設定を適用する：
メイン設定 → メニュー位置の動作：
メニューの背景 → メニューの背景の不透明度：0％。
ページにME301ブロックを追加し、以下の設定を適用する：
メイン設定 → メニュー位置の動作：
メニューの背景 → メニューの背景の不透明度：0％。
ウェブサイト上の透明な静的メニューの例を見るにはここをクリック
メニュー・デザイン・オプション
固定メニュー
どのように見えるか
このようなメニューはページ上に常に表示され、ページ上のどこからでも簡単にアクセスできます。通常、ページの上部（表紙）には透明な背景があり、スクロールすると不透明になります。
このようなメニューはページ上に常に表示され、ページ上のどこからでも簡単にアクセスできます。通常、ページの上部（表紙）には透明な背景があり、スクロールすると不透明になります。
設定方法
ページにME301ブロックを追加し、以下の設定を適用する：
メイン設定 → メニュー位置の動作：
メニュー背景 → メニュー背景色。
Menu background → Menu background opacity:0%.
Menu background → Menu background opacity on scroll： 80%.
ページにME301ブロックを追加し、以下の設定を適用する：
メイン設定 → メニュー位置の動作：
メニュー背景 → メニュー背景色。
Menu background → Menu background opacity:0%.
Menu background → Menu background opacity on scroll： 80%.
ウェブサイトの固定メニューの例はこちら
メニュー・デザイン・オプション
ページ上部に固定されたメニュー、
スクロール時に表示されるメニュー
スクロール時に表示されるメニュー
どのように見えるか
このメニューは上記のものと似ている。異なるのは、スクロールすると別のメニューが表示され、さらに多くの項目があることだ。例えば、トップナビゲーションメニューには、ロゴ、異なるウェブサイトページにつながるいくつかのメニュー項目、いくつかのソーシャルメディアリンクが含まれています。ユーザーがページをスクロールすると、別のメニューバーが表示され、ロゴ、行動喚起、コールバックボタンが表示される。
このメニューは上記のものと似ている。異なるのは、スクロールすると別のメニューが表示され、さらに多くの項目があることだ。例えば、トップナビゲーションメニューには、ロゴ、異なるウェブサイトページにつながるいくつかのメニュー項目、いくつかのソーシャルメディアリンクが含まれています。ユーザーがページをスクロールすると、別のメニューバーが表示され、ロゴ、行動喚起、コールバックボタンが表示される。
設定方法
ページに2つのME301ブロックを追加し、以下の設定を適用してください：
メニュー1（ページ上部に配置）
メイン設定 → メニュー位置の動作：
Menu background → Menu background opacity: 0%.
Menu Two (appearing on scroll)
Main settings → Menu position behavior：
メイン設定 → N ピクセルスクロール後にメニューを表示
ページをピクセル単位でスクロールしたときにメニューを表示：
メニューの背景 → メニューの背景色。
メニューの背景 → メニューの背景の不透明度：70%。
ページに2つのME301ブロックを追加し、以下の設定を適用してください：
メニュー1（ページ上部に配置）
メイン設定 → メニュー位置の動作：
Menu background → Menu background opacity: 0%.
Menu Two (appearing on scroll)
Main settings → Menu position behavior：
メイン設定 → N ピクセルスクロール後にメニューを表示
ページをピクセル単位でスクロールしたときにメニューを表示：
メニューの背景 → メニューの背景色。
メニューの背景 → メニューの背景の不透明度：70%。
ウェブサイトでのメニュー例はこちら
メニュー・デザイン・オプション
ハンバーガーメニュー
どのように見えるか
ハンバーガーメニューは、画面上部にある3本の横線です。ユーザーがクリックすると開き、ナビゲーションメニューが表示されます。
何に使えるか：
このようなメニューは、訪問者に他のデザイン要素に気を取られることなくコンテンツに集中してもらいたいウェブサイトに最適です。ハンバーガーメニューは通常、ウェブサイトのモバイル版で使用されます。異なるデバイスでメニューがどのように表示されるかを設定することができます。
例えば、デスクトップ版では通常のメニューを表示させ、モバイル版ではハンバーガーメニューを表示させることができます。
ハンバーガーメニューは、画面上部にある3本の横線です。ユーザーがクリックすると開き、ナビゲーションメニューが表示されます。
何に使えるか：
このようなメニューは、訪問者に他のデザイン要素に気を取られることなくコンテンツに集中してもらいたいウェブサイトに最適です。ハンバーガーメニューは通常、ウェブサイトのモバイル版で使用されます。異なるデバイスでメニューがどのように表示されるかを設定することができます。
例えば、デスクトップ版では通常のメニューを表示させ、モバイル版ではハンバーガーメニューを表示させることができます。
設定方法
ME401/402/403/404/405ブロックをページに追加し、メニュー位置の動作、メニューアイコンの色、メニューの背景色、メニュー項目の背景色を設定します。
例えば、
メイン設定 → メニュー位置の動作：
メニューアイコン → 色。
メニュー背景 → 折りたたみメニューの背景色。
メニュー背景 →展開メニュー 背景色 。白を選択 。
ME401/402/403/404/405ブロックをページに追加し、メニュー位置の動作、メニューアイコンの色、メニューの背景色、メニュー項目の背景色を設定します。
例えば、
メイン設定 → メニュー位置の動作：
メニューアイコン → 色。
メニュー背景 → 折りたたみメニューの背景色。
メニュー背景 →展開メニュー 背景色 。白を選択 。
ウェブサイト上のハンバーガーメニューの例はこちら
メニュー・デザイン・オプション
マルチレベルメニュー
どのように見えるか
メニュー項目をクリックするとドロップダウンメニューが表示されます。
どんなことに使えるか
高度な構造を持つ大規模なウェブサイト。
メニュー項目をクリックするとドロップダウンメニューが表示されます。
どんなことに使えるか
高度な構造を持つ大規模なウェブサイト。
設定方法
メインブロックのサブメニュー項目を追加するか、ME301メニュー（またはメニュー項目を含む他のブロック）とME601を組み合わせて使用します。
メインブロックのサブメニュー項目
メニュー項目を含む任意のメニューブロックをページに追加します。
ブロックの[コンテンツ]タブ → メニュー項目のリスト → サブ項目を追加すると、メニュー項目の近くにプラスアイコンが表示されます。
サブ項目を追加したい項目の近くでプラスアイコンをクリックし、サブ項目のタイトルを入力し、リンクを割り当てます。
新しいサブ項目を追加するには、もう一度プラスアイコンをクリックします。
メニューのサブ項目は、カーソルを合わせるとドロップダウンメニューとして表示されます。モバイル版では、タップでメニューを開くことができます。
重要：メインメニュー項目自体はクリックできません。クリック可能にしたい場合は、ドロップダウンメニューに重複したサブ項目を作成してください。
ME 601 ブロック
ME301ブロックをページに追加し、上記のようにメニューを設定し、ME601ブロック（メニュー：第2レベル）を追加します。
ME601ブロックでは、メインメニュー項目にサブ項目を追加することができます。それらはホバー時にドロップダウンメニューとして表示されます。
How it works:
1) ME601ブロックの中に、#submenu:more
2) メインメニューの中に、#submenu:moreのようなリンクを書きます：
重要：メインメニューの項目自体はクリックできません。
注意："#submenu:more "にはどのような単語を使ってもかまいません：#サブメニュー:ポートフォリオ #submenu:aboutus
メインブロックのサブメニュー項目を追加するか、ME301メニュー（またはメニュー項目を含む他のブロック）とME601を組み合わせて使用します。
メインブロックのサブメニュー項目
メニュー項目を含む任意のメニューブロックをページに追加します。
ブロックの[コンテンツ]タブ → メニュー項目のリスト → サブ項目を追加すると、メニュー項目の近くにプラスアイコンが表示されます。
サブ項目を追加したい項目の近くでプラスアイコンをクリックし、サブ項目のタイトルを入力し、リンクを割り当てます。
新しいサブ項目を追加するには、もう一度プラスアイコンをクリックします。
メニューのサブ項目は、カーソルを合わせるとドロップダウンメニューとして表示されます。モバイル版では、タップでメニューを開くことができます。
重要：メインメニュー項目自体はクリックできません。クリック可能にしたい場合は、ドロップダウンメニューに重複したサブ項目を作成してください。
ME 601 ブロック
ME301ブロックをページに追加し、上記のようにメニューを設定し、ME601ブロック（メニュー：第2レベル）を追加します。
ME601ブロックでは、メインメニュー項目にサブ項目を追加することができます。それらはホバー時にドロップダウンメニューとして表示されます。
How it works:
1) ME601ブロックの中に、#submenu:more
2) メインメニューの中に、#submenu:moreのようなリンクを書きます：
重要：メインメニューの項目自体はクリックできません。
注意："#submenu:more "にはどのような単語を使ってもかまいません：#サブメニュー:ポートフォリオ #submenu:aboutus
ウェブサイトのマルチレベル・メニューの例を見るにはここをクリック
メニュー・デザイン・オプション
タブ
どのようなものか
アクティブなタブは、ユーザーがウェブページを離れることなく、そのタブにリンクされたコンテンツをブラウズすることを可能にします。
何に使えるか:
タブは、ポートフォリオ内の異なる作品カテゴリのような、同じタイプのコンテンツの複数のカテゴリを表示することができます。
アクティブなタブは、ユーザーがウェブページを離れることなく、そのタブにリンクされたコンテンツをブラウズすることを可能にします。
何に使えるか:
タブは、ポートフォリオ内の異なる作品カテゴリのような、同じタイプのコンテンツの複数のカテゴリを表示することができます。
設定方法
ページにME602またはME603ブロックを追加します。これらのブロックを使ってタブを作成し、同じページ内でユーザーがタブをクリックしたときにコンテンツを表示することができます。以下では、ユーザーが特定のタブをクリックしたときに変化するブロックを順番に追加する必要があります。
動作方法：
1.ME602またはME603ブロックのコンテンツパネルにタブタイトルを追加します。
2.タブをクリックしたときに表示されるべきブロックのIDを追加します（スペースは入れずにカンマで区切ります）。
注意：ブロックのIDは、ブロックの設定パネルでコピーできます - パネルの一番下までスクロールして見つけてください。
ページにME602またはME603ブロックを追加します。これらのブロックを使ってタブを作成し、同じページ内でユーザーがタブをクリックしたときにコンテンツを表示することができます。以下では、ユーザーが特定のタブをクリックしたときに変化するブロックを順番に追加する必要があります。
動作方法：
1.ME602またはME603ブロックのコンテンツパネルにタブタイトルを追加します。
2.タブをクリックしたときに表示されるべきブロックのIDを追加します（スペースは入れずにカンマで区切ります）。
注意：ブロックのIDは、ブロックの設定パネルでコピーできます - パネルの一番下までスクロールして見つけてください。
このメニューの例をウェブサイトでご覧になるには、ここをクリックしてください。
メニューデザインのオプション
ドットナビゲーション付きメニュー
見た目：
メニューのドットをクリックすることで、ページ上の特定のブロックにジャンプする
使用用途：
大量のコンテンツがあるページで、ユーザーを特定のセクションにリダイレクトさせる場合。
メニューのドットをクリックすることで、ページ上の特定のブロックにジャンプする
使用用途：
大量のコンテンツがあるページで、ユーザーを特定のセクションにリダイレクトさせる場合。
設定方法
メニュー・カテゴリーからME604ブロックをページに追加します。このブロックを使用することで、ページ内のセクション間を垂直に移動する機会を作ることができます。
注意：このブロックは大画面（960px以上）専用です。
仕組み
1) 各セクションの前にアンカーリンク付きブロック（その他カテゴリー）を追加します。例えば、about、team、galleryなどです。
2) メニュー項目のリストで、各セクションの名前とアンカーリンクを#記号で入力する。アンカーリンクの例#について
メニュー・カテゴリーからME604ブロックをページに追加します。このブロックを使用することで、ページ内のセクション間を垂直に移動する機会を作ることができます。
注意：このブロックは大画面（960px以上）専用です。
仕組み
1) 各セクションの前にアンカーリンク付きブロック（その他カテゴリー）を追加します。例えば、about、team、galleryなどです。
2) メニュー項目のリストで、各セクションの名前とアンカーリンクを#記号で入力する。アンカーリンクの例#について
このメニューの例をウェブサイトでご覧になるには、ここをクリックしてください。
メニュー・デザイン・オプション
パン粉
どのように見えるか
メニュー項目をクリックすると、特定のセクションまたは内部ページにリダイレクトされます。
どんな使い方ができるか
パンくずメニューを使うことで、トップページから今見ているページまでの経路を表示することができます。
メニュー項目をクリックすると、特定のセクションまたは内部ページにリダイレクトされます。
どんな使い方ができるか
パンくずメニューを使うことで、トップページから今見ているページまでの経路を表示することができます。
設定方法
Menu」カテゴリーから「ME605」ブロックをページに追加する。ブロックの[Content]タブで、[Text 1]、[Text 2]、[Text 3]フィールドに、ホームページからユーザーが表示しているページまでのナビゲーション・パスを指定します。その下のリンク1、リンク2、リンク3のフィールドで、メニュー・アイテムのページへのリンクを指定します。
仕組み
1) ページ設定 > 一般でページアドレスを指定する。
2) リンクフィールドに、メニュー項目用の別ページへのリンクを指定する。
Menu」カテゴリーから「ME605」ブロックをページに追加する。ブロックの[Content]タブで、[Text 1]、[Text 2]、[Text 3]フィールドに、ホームページからユーザーが表示しているページまでのナビゲーション・パスを指定します。その下のリンク1、リンク2、リンク3のフィールドで、メニュー・アイテムのページへのリンクを指定します。
仕組み
1) ページ設定 > 一般でページアドレスを指定する。
2) リンクフィールドに、メニュー項目用の別ページへのリンクを指定する。
メニュー・デザイン・オプション
サブセクションのあるサイドバーメニューを修正
見た目:
セクションとサブセクションを含むドロップダウンサイドバーメニュー。メニューの位置は固定されており、ページ上のどこからでもアクセスすることができます。
使用目的:
ウェブサイト内部のセクションやサブセクションの詳細なナビゲーションを作成したり、ページの検索を追加したりすることができます。
セクションとサブセクションを含むドロップダウンサイドバーメニュー。メニューの位置は固定されており、ページ上のどこからでもアクセスすることができます。
使用目的:
ウェブサイト内部のセクションやサブセクションの詳細なナビゲーションを作成したり、ページの検索を追加したりすることができます。
設定方法
ME901ブロックをページに追加し、ブロック設定でメニューの表示スタイルを設定します。
ME901ブロックでは、メインメニュー項目にサブセクションを追加することができます。
リンクとして、http:// を含むページの完全なアドレスか、相対アドレス（ページ名のみ）を指定する必要があります（/page7890.html или /aboutなど）。
ME901ブロックをページに追加し、ブロック設定でメニューの表示スタイルを設定します。
ME901ブロックでは、メインメニュー項目にサブセクションを追加することができます。
リンクとして、http:// を含むページの完全なアドレスか、相対アドレス（ページ名のみ）を指定する必要があります（/page7890.html или /aboutなど）。
ページ内にナビゲーションを作成するには、アンカーリンク（#contactsなど）を使用します。ページにアンカーを追加するには、その他カテゴリのアンカーリンクブロックを使用してください。
画面幅が1500px以上の場合、メニューは開いたままになります。
このメニューの例をウェブサイトでご覧になるには、ここをクリックしてください。
メニュー・デザイン・オプション
カート、検索、お気に入りメニュー
どのように見えるか
ショッピングカート内の商品、お気に入りに追加された商品、ナビゲーションセクション近くのメニューに検索ウィジェットが表示されます。
何に使えるか？
メニューは 商品カタログユーザーがショッピングカート、ウェブサイト検索ウィジェット、お気に入りを簡潔に表示するのに役立ちます。
ショッピングカート内の商品、お気に入りに追加された商品、ナビゲーションセクション近くのメニューに検索ウィジェットが表示されます。
何に使えるか？
メニューは 商品カタログユーザーがショッピングカート、ウェブサイト検索ウィジェット、お気に入りを簡潔に表示するのに役立ちます。
設定方法：
ME401ブロックをページに追加 → コンテンツタブ → カート、検索、お気に入り → メニューに必要なアイコンを表示するチェックボックスを選択。
メニューにのみアイコンを表示するには、「ネイティブウィジェットボタンを表示しない」チェックボックスを選択。
ME401ブロックをページに追加 → コンテンツタブ → カート、検索、お気に入り → メニューに必要なアイコンを表示するチェックボックスを選択。
メニューにのみアイコンを表示するには、「ネイティブウィジェットボタンを表示しない」チェックボックスを選択。
次に、ショッピングカートブロックST100、検索ウィジェットブロックT985、お気に入りブロックST110を追加し、ページを公開します。
この機能は、ME4XX と番号付けされたすべてのメニューブロックに対して機能する。
このメニューの例をウェブサイトでご覧になるには、ここをクリックしてください。
表示オプション:
メニューにアイコンと「お気に入り」ウィジェットボタンの両方を表示したい場合は、ME401ブロックの「コンテンツ」タブにある「ネイティブウィジェットボタンを表示しない」のチェックを外してください。
メニューにアイコンと「お気に入り」ウィジェットボタンの両方を表示したい場合は、ME401ブロックの「コンテンツ」タブにある「ネイティブウィジェットボタンを表示しない」のチェックを外してください。
ブロックST100ショッピングカートとT985検索のウィジェットアイコンを非表示にすることができます-ブロック設定の "その他の設定 "タブで、"ウィジェットボタンを表示しない "チェックボックスを選択します。ページを公開する。
完了！メニューに3つのアイコンが表示され、お気に入り用のウィジェットが別に用意されています。ショッピングカートや検索ウィジェットの表示も同様に設定できます。
このメニューの例をウェブサイトでご覧になるには、ここをクリックしてください。
メニュー・デザイン・オプション
Zero Blockブロックでオリジナルメニューを作る
Zero Block 、好きなように要素を設定し、ブロックを固定することで、オリジナルのメニューを作ることができます。
固定するには、Zero Block Settingsの編集→Position and Overflow→Fixedの値を選択してブロックを固定します。
固定するには、Zero Block Settingsの編集→Position and Overflow→Fixedの値を選択してブロックを固定します。
ブロックをページの上部または下部に固定したり、X px（アピアランス・オフセット）で表示されるように設定することができます。この場合、アニメーションの表示オプションとして「フェードイン」を選択できます。これは例えば、ウェブサイトのヘッダーを一度に表示せず、数回スクロールして表示させたい場合に便利です。
主なメニューデザインのオプションをご紹介します。新しいアイデアがあり、それを共有したい場合は、team@tilda.ccまで、件名に「メニューデザイン」と明記の上、あなたのウェブサイトへのリンクをメールでお送りください。ありがとうございました！
あなたのデザイン実験に幸あれ！
あなたのデザイン実験に幸あれ！
憧れのウェブサイトはここから始まる
