Web サイトでよく見る UI パーツの名前まとめ（図つき）
「あの、押すと横から出てくるやつ」「クリックで開いたり閉じたりするやつ」。 Web サイトを作るときや人に説明するとき、見たことはあるのに名前が出てこない UI パーツをまとめました。
一覧
| 名前 | ひとことで言うと |
|---|---|
| ハンバーガーメニュー | ≡ を押すと横からメニューが出てくる |
| パンくずリスト | 「ホーム › ブログ › 記事」の現在地表示 |
| カルーセル | 横に並んだ画像をスライドして切り替える |
| モーダル | 閉じるまで他を操作できないポップアップ |
| アコーディオン | 押すと隠れていた中身が開閉する |
| ラジオボタン | 選択肢から 1 つだけ選ぶ丸いボタン |
| プルダウンメニュー | 押すと下に選択肢の一覧が出る |
ハンバーガーメニュー
3 本線（≡）などのアイコンをクリックすると、メニューが横からスライドして出てくるもの。 3 本線がハンバーガー（パン・肉・パン）に見えることからこう呼ばれます。
よく使う場面：画面の狭いスマホで、メニューをふだんは隠しておきたいとき。
パンくずリスト
サイトの上部などに階層構造でリストが表示され、現在地がわかったり、前のページに戻れたりするもの。 童話『ヘンゼルとグレーテル』で、帰り道がわかるようにパンくずを落としていった話が由来です。
よく使う場面：ブログのカテゴリーや、通販サイトの商品ページなど、階層が深いサイト。
カルーセル
複数の画像が横に並んでいて、スクロール（スライド）して切り替えて見ることができるもの。 回転木馬（carousel）のようにぐるぐる回ることから。下の点（インジケーター）で今どれを見ているかがわかります。
よく使う場面：トップページのメイン画像、おすすめ商品の一覧。
モーダル
クリックするとポップアップ画面が表示され、それを閉じるまで他の操作ができなくなるウィンドウのこと。 後ろの画面を暗くして、「先にこれに答えてね」と注目させるのが特徴です。
よく使う場面：送信・削除などの確認、ログイン画面、画像の拡大表示。
アコーディオン
タップ（クリック）することで、隠れていたコンテンツ（文章など）が開閉するもの。 楽器のアコーディオンのように伸び縮みすることから。
よく使う場面：よくある質問（FAQ）、長い説明を折りたたんでおきたいとき。
ラジオボタン
複数の選択肢の中から「1 つだけ」を選ばせたいときに使う丸いボタン。 昔のラジオの選局ボタン（1 つ押すと他が戻る）が由来です。複数選べるようにしたいときは、四角い チェックボックス を使います。
よく使う場面：配送方法・支払い方法・性別など、答えが 1 つに決まる質問。
プルダウンメニュー
クリックすると、下に向かって複数の選択肢が一覧で表示されるもの。 「ドロップダウンメニュー」とも呼ばれます。
よく使う場面：都道府県や生年月日など、選択肢が多くて全部並べると場所を取るとき。
おわりに
名前を知っておくと、デザインの相談や検索がぐっと楽になります。 「ハンバーガーメニュー CSS」「アコーディオン HTML」のように名前で検索すれば、作り方もすぐ見つかります。