ナビゲーションの画面部品（パンくずリストなど）（navigation components）

分類: テクノロジ系ユーザーインタフェース
出る試験: ITパスポート基本情報応用情報
重要度: ★★★☆☆

いま居る場所と、どこへ行けるかを示す部品。パンくずリストは場所を示し、ハンバーガーメニューは押すとメニューを開く。

もう少し詳しい説明

場所を示す部品

部品	見え方	役割
パンくずリスト	「ホーム＞商品一覧＞コーヒー」	いま居る場所を階層で示す。上へ戻れる
グローバルナビゲーション	画面の上に横並びのメニュー	サイト全体の主な行き先
サイドメニュー	画面の横に縦並びのメニュー	その区画の中の行き先
ハンバーガーメニュー	横3本線の印	押すとメニューが開く。狭い画面で使う
タブ	横並びの見出し	同じ場所の中で表示を切り替える
ページネーション	「1 2 3 … 次へ」	複数ページに分かれた一覧を移る
ステップ表示	「1.入力 → 2.確認 → 3.完了」	手続きの何番目かを示す

パンくずリストの名前は、童話で道にパンを落として帰り道の目印にした話から来ています。

ハンバーガーメニュー

横3本線の印を押すとメニューが開く形です。見た目がハンバーガーに似ているところから、この名前になっています。

良い点	難しい点
画面の場所を取らない	中身が見えない。押すまで何があるか分からない
狭い画面に収まる	操作が1回増える
項目をたくさん入れられる	大事な行き先が気づかれにくくなる

よく使う行き先は、開かずに見える場所に置くという使い分けがあります。

知らせを出す部品

部品	見え方	使いどころ
トーストメッセージ	画面の端に短く出て、自動で消える	「保存しました」のような、確認が要らない知らせ
モーダルウィンドウ	画面の上に重なり、他の操作を止める	消してよいかの確認のように、答えてもらう必要があるもの
インラインメッセージ	その項目のすぐ横に出る	入力の誤りの指摘

止める必要があるときだけ、重ねて止めます。 保存の知らせを毎回重ねて止めると、操作が止まります。

狭い画面での置き方

画面の幅	置き方
広い（パソコン）	メニューを横に並べて見せる
狭い（携帯電話）	ハンバーガーメニューにまとめる／下に並べる

同じ画面を幅によって作り替える形を、レスポンシブデザインと呼びます。

迷わせないための考え方

示すこと	使う部品
いまどこに居るか	パンくずリスト、ステップ表示、選ばれているタブ
どこへ行けるか	メニュー、リンク
どうやって戻るか	パンくずリスト、戻るボタン

この3つのどれかが欠けると、利用者が止まります。 階層の深い画面では、特に「いまどこに居るか」が必要になります。

試験ではこう出る

科目A（旧・午前）では、部品の名前と役割の対応が問われます。場所を示すのがパンくずリスト、押して開くのがハンバーガーメニューです。

午後や応用情報（情報システム開発）では、画面設計の説明の中に出てきます。選択肢の中に入力の部品と混ぜて並べられるので、値を入れる部品か、移る部品かで切り分けます。

ミニクイズ

「ホーム＞商品一覧＞コーヒー」のように、いま表示している画面が全体のどこに位置するかを示す部品はどれか。

正解は 1番：パンくずリスト

パンくずリストは、上位の階層から順に並べて、いま居る場所を示す部品です。たどってきた道筋を見せる形なので、上の階層へ戻るのにも使えます。ハンバーガーメニューは横3本線の印で、押すとメニューが開きます。ページネーションは複数ページに分かれた一覧の切り替え、トーストメッセージは一時的に表示される短い知らせです。

間違えた用語の復習リストを見る →

この分野をまとめて解く → システム開発とユーザーインタフェースのミニテスト（全40問）

最終更新：2026-11-09