こんなにあるの・・・知っておきたい UI の名前をまとめてみた

概要

一日の中で日々触れているさまざまな UI。
世の中にはいったい何種類の UI が存在するのだろう…と、ちょっと気になったので、この機会に一覧化してみました。

UIの名称一覧 〜英語の名称も添えて🍴〜

以下が Claude にも手伝ってもらい、可能な限り集めた UI たち。モリモリ集まりました 🌳
PC向け/モバイル向けUIが混在しているので、もう少し整理できたらよかったかも。

※ 以下のサンプルはレスポンシブ対応していないので、スマホからだと見づらいです

おわり

なんと、ざっと挙げただけでも83個…！
「メガメニュー」「セグメンテッドコントロール」「ピルタブ」あたりの名前は初めて知りました 😇
テーブル、アコーディオン、カルーセルにも細かく名前があるんですね…。

セレクト系は人によってさまざまに呼称している印象があったけど、あらためてまとめてみると想像以上に多かった。
大きく分けて、「ドロップダウン」「プルダウン」「セレクト」の3つがあり、そこからさらに「メニュー」「リスト」「ボックス」と様々に呼ばれているもよう 🫠

「バッジ / ラベル / タグ」については、それぞれ使い分けがあるようなので、後日違いをまとめてみたい。