7つのウェブサイトメニューデザインをご覧ください。
このガイドではメニューのデザイン、つまりメニューがどのように見えるか、どのように機能するかに焦点を当てています。ウェブサイトのメニューをデザインする方法、ウェブサイトの各ページにメニューを表示する方法、特定のウェブページのナビゲーションメニューを作成する方法については、別のガイドをお読みになることをお勧めします：
ナビゲーションメニューは、ウェブサイトのさまざまなページや特定のウェブページ内の特定のセクションにつながるリンクのリストです。ウェブサイトの訪問者がウェブサイトのページまたは特定のページの異なるセクション間を移動するのに役立ちます。
一般的なヒント
>
メニューは、ウェブサイト訪問者が素早く簡単に情報を見つけられるようにすること
>
メニューは簡潔に
>
メニューの数を最小限に抑える
>
ナビゲーションバーに追加するメニュー項目は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%.
ウェブサイトの固定メニューの例はこちら
メニュー・デザイン・オプション
ページ上部に固定されたメニュー、
スクロール時に表示されるメニュー
スクロール時に表示されるメニュー
どのように見えるか
このメニューは上記のものと似ている。異なるのは、スクロールすると別のメニューが表示され、さらに多くの項目があることだ。例えば、トップナビゲーションメニューには、ロゴ、異なるウェブサイトページにつながるいくつかのメニュー項目、いくつかのソーシャルメディアリンクが含まれています。ユーザーがページをスクロールすると、別のメニューバーが表示され、ロゴ、行動喚起、コールバックボタンが表示される。
このメニューは上記のものと似ている。異なるのは、スクロールすると別のメニューが表示され、さらに多くの項目があることだ。例えば、トップナビゲーションメニューには、ロゴ、異なるウェブサイトページにつながるいくつかのメニュー項目、いくつかのソーシャルメディアリンクが含まれています。ユーザーがページをスクロールすると、別のメニューバーが表示され、ロゴ、行動喚起、コールバックボタンが表示される。
設定方法
ページにME301ブロックを追加し、以下の設定を適用してください：
メニュー1（ページ上部に配置）
メイン設定 → メニュー位置の動作：
Menu background → Menu background opacity: 0%.
Menu Two (appearing on scroll)
Main settings → Menu position behavior：
メイン設定 → ページが下にスクロールされたときにメニューを表示するピクセル数：
メニューの背景 → メニューの背景色。
メニュー背景 → メニュー背景の不透明度：70%。
ページにME301ブロックを追加し、以下の設定を適用してください：
メニュー1（ページ上部に配置）
メイン設定 → メニュー位置の動作：
Menu background → Menu background opacity: 0%.
Menu Two (appearing on scroll)
Main settings → Menu position behavior：
メイン設定 → ページが下にスクロールされたときにメニューを表示するピクセル数：
メニューの背景 → メニューの背景色。
メニュー背景 → メニュー背景の不透明度：70%。
ウェブサイトでのメニュー例はこちら
メニュー・デザイン・オプション
ハンバーガーメニュー
どのように見えるか
ハンバーガーメニューは、画面上部にある3本の横線です。ユーザーがクリックすると開き、ナビゲーションメニューが表示されます。
何に使えるか：
このようなメニューは、訪問者に他のデザイン要素に気を取られることなくコンテンツに集中してもらいたいウェブサイトに最適です。ハンバーガーメニューは通常、ウェブサイトのモバイル版で使用されます。異なるデバイスでメニューがどのように表示されるかを設定することができます。
例えば、デスクトップ版では通常のメニューを表示させ、モバイル版ではハンバーガーメニューを表示させることができます。
ハンバーガーメニューは、画面上部にある3本の横線です。ユーザーがクリックすると開き、ナビゲーションメニューが表示されます。
何に使えるか：
このようなメニューは、訪問者に他のデザイン要素に気を取られることなくコンテンツに集中してもらいたいウェブサイトに最適です。ハンバーガーメニューは通常、ウェブサイトのモバイル版で使用されます。異なるデバイスでメニューがどのように表示されるかを設定することができます。
例えば、デスクトップ版では通常のメニューを表示させ、モバイル版ではハンバーガーメニューを表示させることができます。
設定方法
ME401/402/403/404/405ブロックをページに追加し、メニュー位置の動作、メニューアイコンの色、メニュー項目の文字色を設定します。
例えば、
メイン設定 → メニュー位置の動作：
メニュー項目 → 色。
メニュー背景 → 折りたたみメニューの背景色。
メニュー背景 →展開メニュー 背景色。 白を選択 。
ME401/402/403/404/405ブロックをページに追加し、メニュー位置の動作、メニューアイコンの色、メニュー項目の文字色を設定します。
例えば、
メイン設定 → メニュー位置の動作：
メニュー項目 → 色。
メニュー背景 → 折りたたみメニューの背景色。
メニュー背景 →展開メニュー 背景色。 白を選択 。
ウェブサイト上のハンバーガーメニューの例はこちら
メニュー・デザイン・オプション
マルチレベルメニュー
どのように見えるか
メニュー項目をクリックするとドロップダウンメニューが表示されます。
どんなことに使えるか
高度な構造を持つ大規模なウェブサイト。
メニュー項目をクリックするとドロップダウンメニューが表示されます。
どんなことに使えるか
高度な構造を持つ大規模なウェブサイト。
設定方法
ME301ブロックをページに追加し、上記のようなメニューを設定し、ブロックのコンテンツパネルにサブ項目を追加する。
1.ブロックのコンテンツパネルを開く → Menu items → Add subitems.
2.項目の横にあるプラスアイコンをクリックし、サブ項目のタイトルを入力し、リンクを割り当てます。
3.ブロックの設定パネル → サブメニュー設定を開きます。第二階層のメニューアイコンを表示する」チェックボックスを選択します。
なお、メインメニュー項目自体はクリックできません。クリックできるようにしたい場合は、ドロップダウンメニューに重複したサブ項目を作成してください。
ME301ブロックをページに追加し、上記のようなメニューを設定し、ブロックのコンテンツパネルにサブ項目を追加する。
1.ブロックのコンテンツパネルを開く → Menu items → Add subitems.
2.項目の横にあるプラスアイコンをクリックし、サブ項目のタイトルを入力し、リンクを割り当てます。
3.ブロックの設定パネル → サブメニュー設定を開きます。第二階層のメニューアイコンを表示する」チェックボックスを選択します。
なお、メインメニュー項目自体はクリックできません。クリックできるようにしたい場合は、ドロップダウンメニューに重複したサブ項目を作成してください。
ウェブサイトのマルチレベル・メニューの例を見るにはここをクリック
メニュー・デザイン・オプション
タブ
どのようなものか
アクティブなタブは、ユーザーがウェブページを離れることなく、そのタブにリンクされたコンテンツをブラウズすることを可能にします。
何に使えるか:
タブは、ポートフォリオ内の異なる作品カテゴリのような、同じタイプのコンテンツの複数のカテゴリを表示することができます。
アクティブなタブは、ユーザーがウェブページを離れることなく、そのタブにリンクされたコンテンツをブラウズすることを可能にします。
何に使えるか:
タブは、ポートフォリオ内の異なる作品カテゴリのような、同じタイプのコンテンツの複数のカテゴリを表示することができます。
設定方法
ページにME602またはME603ブロックを追加します。これらのブロックを使ってタブを作成し、同じページ内でユーザーがタブをクリックしたときにコンテンツを表示することができます。以下では、ユーザーが特定のタブをクリックしたときに変化する順序でブロックを追加する必要があります。
動作方法：
1.ME602またはME603ブロックの「コンテンツ」パネルにタブタイトルを追加します。
2.タブをクリックしたときに表示するブロックのIDを追加します（スペースは入れずにカンマで区切ります）。
注意：ブロックの「設定」パネルでブロックのIDをコピーできます。パネルの一番下までスクロールして見つけてください。
ページにME602またはME603ブロックを追加します。これらのブロックを使ってタブを作成し、同じページ内でユーザーがタブをクリックしたときにコンテンツを表示することができます。以下では、ユーザーが特定のタブをクリックしたときに変化する順序でブロックを追加する必要があります。
動作方法：
1.ME602またはME603ブロックの「コンテンツ」パネルにタブタイトルを追加します。
2.タブをクリックしたときに表示するブロックのIDを追加します（スペースは入れずにカンマで区切ります）。
注意：ブロックの「設定」パネルでブロックのIDをコピーできます。パネルの一番下までスクロールして見つけてください。
このメニューの例をウェブサイトでご覧になるには、ここをクリックしてください。
メニュー・デザイン・オプション
カート、検索、お気に入りメニュー
どのように見えるか
ショッピングカート内の商品、お気に入りに追加された商品、ナビゲーションセクション近くのメニューに検索ウィジェットが表示されます。
何に使えるか？
メニューは 商品カタログユーザーがショッピングカート、ウェブサイト検索ウィジェット、お気に入りを簡潔に表示するのに役立ちます。
ショッピングカート内の商品、お気に入りに追加された商品、ナビゲーションセクション近くのメニューに検索ウィジェットが表示されます。
何に使えるか？
メニューは 商品カタログユーザーがショッピングカート、ウェブサイト検索ウィジェット、お気に入りを簡潔に表示するのに役立ちます。
設定方法：
ME401ブロックをページに追加 → コンテンツタブ → カート、検索、お気に入り → メニューに必要なアイコンを表示するチェックボックスを選択。
メニューにのみアイコンを表示するには、「ネイティブウィジェットボタンを表示しない」チェックボックスを選択。
ME401ブロックをページに追加 → コンテンツタブ → カート、検索、お気に入り → メニューに必要なアイコンを表示するチェックボックスを選択。
メニューにのみアイコンを表示するには、「ネイティブウィジェットボタンを表示しない」チェックボックスを選択。
次に、ショッピングカートブロックST100、検索ウィジェットブロックT985、お気に入りブロックST110を追加し、ページを公開します。
この機能は、ME4XX と番号付けされたすべてのメニューブロックに対して機能する。
このメニューの例をウェブサイトでご覧になるには、ここをクリックしてください。
表示オプション:
メニューにアイコンと「お気に入り」ウィジェットボタンの両方を表示したい場合は、ME401ブロックの「コンテンツ」タブにある「ネイティブウィジェットボタンを表示しない」のチェックを外してください。
メニューにアイコンと「お気に入り」ウィジェットボタンの両方を表示したい場合は、ME401ブロックの「コンテンツ」タブにある「ネイティブウィジェットボタンを表示しない」のチェックを外してください。
ブロックST100ショッピングカートとT985検索のウィジェットアイコンを非表示にすることができます-ブロック設定の "その他の設定 "タブで、"ウィジェットボタンを表示しない "チェックボックスを選択します。ページを公開する。
完了！メニューに3つのアイコンが表示され、お気に入り用のウィジェットが別に用意されています。ショッピングカートや検索ウィジェットの表示も同様に設定できます。
このメニューの例をウェブサイトでご覧になるには、ここをクリックしてください。
主なメニューデザインのオプションをご紹介します。新しいアイデアがあり、それを共有したい場合は、team@tilda.ccまで、件名に「メニューデザイン」と明記の上、あなたのウェブサイトへのリンクをメールでお送りください。ありがとうございました！
あなたのデザイン実験に幸あれ！
あなたのデザイン実験に幸あれ！
憧れのウェブサイトはここから始まる
