アクション補助
ボタン
Button
共通
初級
押すことで画面遷移、送信、保存などの主要な操作を実行するUI。
初級で最優先。押して操作を起こすUIとして理解させる。
STUDY LEVEL
新人がまず覚えたい30個
初級のUI名称を、
一覧でやさしく学べる。
カタカナ名と英語名を見比べながら、基礎のUI名称をやさしく整理できます。
UI TERMS
初級のUI名称一覧
覚えた項目は非表示にできます。まだ迷うUI名称だけを残して、集中して確認できます。
0/30
情報表示
アイコン
Icon
共通
初級
機能や意味を小さな記号や図形で表すUI。
単体で操作対象になる場合もあれば、意味を補助する表示になる場合もある。
ナビゲーション
タブ
Tab
共通
初級
並んだ項目の中から1つを選び、表示内容を切り替えるためのUI要素そのもの。
バー全体ではなく、切り替え項目そのものを指す。
ナビゲーション
タブバー
Tab Bar
iPhone寄り
初級
画面下部に並び、主要な画面やセクションを切り替えるためのUI。
タブそのものではなく、タブが並ぶバー全体を指す。
別名: ボトムタブ
ナビゲーション
ナビゲーションバー
Navigation Bar
共通
初級
画面上部にあり、タイトルや戻る操作などを表示するUI。
タブバーとは位置も役割も違うため、説明文で差をはっきり出す。
ナビゲーション
サイドバー
Sidebar
Web寄り
初級
画面の側面に配置され、項目一覧や補助ナビゲーションを表示するUI。
Web画面で頻出。ナビゲーションレールやサブナビゲーションと混同しやすい。
ナビゲーション
パンくずリスト
Breadcrumb
Web寄り
初級
現在どの階層やページにいるかを、道順のように表示するUI。
現在地を示す役割が中心で、移動先一覧を見せるUIとは違う。
別名: パンくず
入力フォーム
テキストフィールド
Text Field
共通
初級
1行程度の短い文字を入力するための基本UI。
複数行入力のテキストエリアとは分けて覚える。
別名: 入力欄
入力フォーム
テキストエリア
Text Area
Web寄り
初級
複数行の長めの文章を入力するためのUI。
見た目は似ていても、テキストフィールドより入力量が多い。
別名: 複数行入力
入力フォーム
検索バー
Search Bar
共通
初級
キーワードを入力して情報を探すためのUI。
入力欄の一種だが、用途が検索に特化している。
別名: 検索欄
選択UI
チェックボックス
Checkbox
Web寄り
初級
複数の項目を同時に選択できる四角い選択UI。
単一選択のラジオボタンやON/OFFのトグルと区別する。
選択UI
ラジオボタン
Radio Button
Web寄り
初級
複数の候補の中から、1つだけ選ぶための丸い選択UI。
複数選択できるチェックボックスとは用途が違う。
選択UI
トグル
Toggle
共通
初級
設定や機能をオンとオフで切り替えるためのUI。
選択肢を選ぶUIではなく、状態を切り替えるUIとして理解する。
別名: スイッチ
選択UI
ドロップダウン
Dropdown
Web寄り
初級
候補一覧を開いて、その中から1つを選ぶためのUI。
入力補完があるコンボボックスとは区別する。
別名: プルダウン / セレクトメニュー
情報表示
カード
Card
共通
初級
関連する情報をひとまとまりの箱として見せるUI。
リストより独立したまとまりとして扱うことが多い。
情報表示
バッジ
Badge
共通
初級
件数や状態、注目ポイントを小さく添えて示すUI。
情報の補助表示として使うことが多い。
情報表示
チップ
Chip
Android寄り
初級
小さなまとまりで、属性表示や簡単な選択に使われるUI。
バッジより操作性があり、ボタンより軽い役割で使われやすい。
情報表示
アバター
Avatar
共通
初級
ユーザー本人やアカウントを表すための画像や記号のUI。
単なる機能記号のアイコンとは役割が違う。
情報表示
プログレスバー
Progress Bar
共通
初級
処理の進み具合や達成状況を棒状で示すUI。
読み込み中だけを示すスピナーとは役割が少し違う。
別名: 進捗バー
情報表示
ツールチップ
Tooltip
Web寄り
初級
要素の近くに短い補足説明を一時的に表示するUI。
補足情報が中心で、メニュー表示のポップオーバーとは違う。
フィードバック
アラート
Alert
共通
初級
注意や警告など、見逃してほしくない情報を伝えるUI。
通知よりも強めに注意を促す文脈で使われやすい。
フィードバック
エラーメッセージ
Error Message
共通
初級
入力や処理に問題があることを明確に伝えるUI。
アラート全般より、エラー内容を具体的に伝える役割が強い。
フィードバック
ローディングスピナー
Loading Spinner
共通
初級
読み込みや処理中であることを回転などで示すUI。
進捗量を示すより、待機状態を示す役割が強い。
別名: スピナー
フィードバック
トースト
Toast
Android寄り
初級
一時的に短い通知を表示して、しばらくすると自動で消えるUI。
補助アクションを持たないことが多く、スナックバーと区別しやすい。
フィードバック
スナックバー
Snackbar
Android寄り
初級
短い通知に加えて、補助アクションも出せる一時的なUI。
トーストより操作性があり、画面下部に出ることが多い。
モーダル・オーバーレイ
モーダル
Modal
Web寄り
初級
背景の上に重なって表示され、元の操作をいったん止めるUI。
重なって表示される点が特徴で、シートやダイアログとの違いも意識する。
モーダル・オーバーレイ
ダイアログ
Dialog
共通
初級
確認、選択、警告などを小さなウィンドウで示すUI。
モーダルと重なる場面はあるが、確認用途の文脈が強い。
モーダル・オーバーレイ
ポップオーバー
Popover
iPhone寄り
初級
特定の要素の近くに現れ、追加情報や操作を表示するUI。
ツールチップより情報量が多いことがある。
リスト・構造
アコーディオン
Accordion
Web寄り
初級
項目を開閉して、必要なときだけ詳細を見せるUI。
一覧表示ではあるが、開閉の動きがある点が特徴。
リスト・構造
リスト
List
共通
初級
複数の項目を縦や横に並べて一覧表示するUI。
カードやテーブルより構造がシンプルな一覧として覚える。
QUIZ