Webパーツ辞典

ナビゲーション

サイトの中を移動するための部品。ヘッダーやハンバーガーメニュー、パンくずリストなど「どこにいて、どこへ行けるか」を示すもの。

  • ヘッダーHeader

    ページのいちばん上に置く帯。ロゴと主要なメニューを入れ、どのページでも同じ場所に同じものが出るようにする。

    • 骨格
    • 全ページ共通

  • グローバルナビゲーションGlobal navigation

    全ページに同じ内容で置く、サイトの主要な行き先の一覧。サイト全体の地図の役割をする。

    • 骨格
    • 全ページ共通

  • ハンバーガーメニューHamburger menu

    横三本線のアイコンを押すとメニューが開く仕掛け。線がバンズと具に見えることからこの名前になった。

    • 開閉
    • スマホ

  • ドロワーメニューDrawer

    画面の端から引き出しのように滑り出してくるメニュー。ハンバーガーボタンと組で使うことが多い。

    • 開閉
    • スマホ

  • パンくずリストBreadcrumb

    トップページから今いるページまでの道すじを、階層順に並べたリンク。童話で道に落としたパンくずが由来。

    • 現在地
    • SEO

  • タブTabs

    同じ場所に複数の内容を重ねて置き、見出しを押して切り替える部品。書類のインデックスが由来。

    • 切り替え
    • 省スペース

  • ページネーションPagination

    一覧を何ページかに分けて、番号や「次へ」で行き来できるようにする部品。

    • 一覧
    • 移動

  • サイドバーSidebar

    本文の横に細長く置く領域。同じ階層のページ一覧や、絞り込み条件を並べる。

    • 骨格
    • 一覧

  • フッターFooter

    ページのいちばん下に置く領域。全ページ共通のリンク、運営者情報、著作権表示を入れる。

    • 骨格
    • 全ページ共通

  • アンカーリンクAnchor link

    同じページの中の特定の見出しへ飛ぶリンク。長いページの冒頭に目次として置くことが多い。

    • 移動
    • 目次

  • ページトップボタンBack to top

    ページの下の方まで進んだときに出てきて、押すと先頭まで戻るボタン。

    • 移動
    • 追従

  • ボトムナビゲーションBottom navigation

    スマートフォンの画面の下端に固定し、アイコンと短い名前を3〜5個並べたメニュー。アプリの主要な画面を親指ひとつで行き来させる。

    • スマホ
    • 追従

  • メガメニューMega menu

    グローバルナビの項目を押すと画面幅いっぱいの大きなパネルが開き、下層ページへのリンクを見出しつきで何列にも並べて見せるメニュー。

    • 開閉
    • 大規模

  • ステップ表示Step indicator

    入力・確認・完了のように、手続きがいま何番目の段階にあるかを番号つきの丸と線で示す部品。申し込みや購入の画面で見かける。

    • 現在地
    • 手順

  • 無限スクロールInfinite scroll

    一覧のいちばん下までスクロールすると、次の件数を自動で読み込んで継ぎ足していく仕組み。押して継ぎ足す「もっと見る」ボタン方式もある。

    • 一覧
    • 自動

  • 言語切り替えLanguage switcher

    地球儀のアイコンといま表示中の言語名を並べたボタン。押すと、各言語をその言語自身の文字で書いた一覧が開き、同じページの別の言語版へ移れる。

    • 多言語
    • 開閉

  • メニューバーMenubar

    「ファイル」「編集」「表示」のように、アプリの操作を種類ごとの見出しで横に並べた帯。見出しを押すと、その下に操作の一覧が垂れ下がる。

    • アプリ
    • 開閉

  • ツールバーToolbar

    元に戻す・切り抜き・削除のようなアイコンのボタンを横一列に並べ、種類ごとに区切り線で分けた帯。押しっぱなしの道具は押された見た目で残る。

    • 操作
    • アプリ

  • アプリランチャーApp launcher

    ヘッダーの右上にある、点が3×3に並んだボタン。押すと同じ会社のほかのアプリやサービスが、アイコンと名前のタイルで並んで開く。

    • 開閉
    • 切り替え

見分け方