ナビゲーション用語図鑑
メニューまわりの呼び名10個を、実際に動かして覚えるページです。AIにWebページの修正を頼むときは、各項目の「AIへの指示例」をそのままコピーして使えます。
画面内の会社名、文言、リンクはすべてサンプルです。
1ページのどこにあるか
名前の付いたところを押すと、その解説へ移動します。
押すと開く
ハンバーガーメニュー
三本線（≡）のアイコンです。押すとメニューが開きます。画面の狭いスマホで、メニューをしまっておくために使います。名前は、三本線がハンバーガーに見えることからです。
ドロワーとの違い：ハンバーガーは「押すボタンの見た目」の名前です。押したあとに下へ広がるか、横から出てくるか（ドロワー）は別の話です。
AIへの指示例
画面幅768px以下では、ヘッダーのメニューをハンバーガーメニューに切り替えてください。三本線のアイコンを押すと下にメニューが開き、アイコンは×に変わるようにしてください。
いつも見えている
グローバルナビ
全ページの上部に共通で出る、メインのメニューです。どのページを開いても同じ位置、同じ並びで表示されます。
呼び方：「ヘッダーナビ」と呼ぶこともあります。AIへの指示では、どちらでも通じます。
AIへの指示例
ヘッダーにグローバルナビを置いてください。項目はホーム、サービス、料金、お問い合わせの4つです。現在表示しているページの項目だけ、色を変えてください。
サンプル株式会社
ホームのページ
どの項目を押しても、ナビの位置と並びは変わりません。
点線の部分がグローバルナビです。項目を押すと、下の本文と上のURLだけが切り替わります。
押すと開く
ドロップダウンメニュー
項目にマウスを乗せる、または押すと、すぐ下に小さな一覧が開くメニューです。子項目が3〜6個ほどのときに向いています。
メガメニューとの違い：ドロップダウンは1列の小さな一覧です。項目が多い、画像やバナーも見せたい、というときはメガメニューにします。
AIへの指示例
グローバルナビの「サービス」にドロップダウンメニューをつけてください。マウスを乗せると下に、AI研修、導入支援、コミュニティの3項目が開くようにしてください。スマホではタップで開閉してください。
サンプル株式会社
ホーム
「サービス」にマウスを乗せると開きます（スマホは押す）。枠の外へ出ると閉じます。
点線で囲んだ一覧がドロップダウンメニューです。親の項目の真下に、小さく開きます。
押すと開く
メガメニュー
画面の横幅いっぱいに大きく開くメニューです。項目を見出しごとにグループ分けして並べられ、おすすめのバナーも置けます。サービスや商品が多いサイト向けです。
AIへの指示例
「サービス」を押すと、画面幅いっぱいのメガメニューが開くようにしてください。研修と導入支援の2列に、おすすめの無料相談バナーを1つ並べてください。スマホでは2列に折り返してください。
サンプル株式会社
ホーム
「サービス」を押すと開閉します。
点線の部分がメガメニューです。横幅いっぱいに開き、列ごとに項目を分けて並べています。
押すと開く
ドロワーメニュー
画面の横からスライドして出てくるメニューです。ドロワーは「引き出し」の意味です。出ている間は背景が暗くなり、背景を押すと閉じます。
ハンバーガーとの関係：ハンバーガーアイコンを押して、ドロワーが出る形が定番です。アイコンの名前と、出てくるパネルの名前は別です。
AIへの指示例
スマホではハンバーガーアイコンを押すと、左からドロワーメニューがスライドして出るようにしてください。背景は暗くして、背景か×ボタンを押すと閉じるようにしてください。
サンプル株式会社
ホーム
点線の部分がドロワーです。×か暗い背景を押すと閉じ、三本線を押すとまた左から出てきます。
現在地と移動
パンくずリスト
「ホーム › サービス › AI研修」のように、今いるページの場所を示す道しるべです。現在のページ以外は押して戻れます。名前は童話「ヘンゼルとグレーテル」のパンくずに由来します。
AIへの指示例
ヘッダーの下にパンくずリストを置いてください。「ホーム › サービス › AI研修」のように現在地を表示し、現在のページ以外は押して戻れるようにしてください。
サンプル株式会社
点線の部分がパンくずリストです。下のボタンで先へ進み、上の名前を押して戻ってください。
いつも見えている
サイドバー
本文の横（左か右）に置く補助エリアです。カテゴリ、最近の記事、プロフィールなどを置きます。スマホでは幅が足りないので、本文の下に回すのが一般的です。
AIへの指示例
記事ページの右側にサイドバーを置き、カテゴリ一覧と最近の記事を表示してください。スマホでは、本文の下に回してください。
サイドバーの位置
サンプル株式会社
点線の部分がサイドバーです。上のスイッチで、左、右、なしを切り替えられます。
現在地と移動
アンカーリンク（ページ内リンク）
同じページ内の特定の場所へジャンプするリンクです。長いページの目次に使われます。URLの末尾に「#」で始まる文字が付くのが目印です。
AIへの指示例
ページの上部に、料金、流れ、よくある質問へのアンカーリンクを置いてください。押すとなめらかにスクロールして、各見出しへ移動するようにしてください。
現在地と移動
ページネーション
「1 2 3 …」のようなページ送りです。件数の多い一覧を、ページに分けて見せる仕組みです。現在のページの番号だけ色を変えるのが定番です。
AIへの指示例
お知らせ一覧の下にページネーションを置いてください。前へ、1から4の番号、次へのボタンを並べ、現在のページの番号だけ色を変えてください。1ページ目では「前へ」を押せないようにしてください。
お知らせ
点線の部分がページネーションです。番号や「前へ」「次へ」を押すと、上の一覧が入れ替わります。