モーダル・オーバーレイ
ボトムシート
Bottom Sheet
Android寄り
中級
画面下からせり上がって表示される補助パネルUI。選択肢や追加操作をまとめて見せるときに使う。
モーダルやアクションシートとの違いを説明しやすい中級UI。
STUDY LEVEL
実務でよく見る名称を追加
中級のUI名称を、
一覧でやさしく学べる。
初級の次に、実務でよく見るUI名称を追加で整理できます。
UI TERMS
中級のUI名称一覧
覚えた項目は非表示にできます。まだ迷うUI名称だけを残して、集中して確認できます。
0/30
モーダル・オーバーレイ
アクションシート
Action Sheet
iPhone寄り
中級
主にiPhoneで、画面下から表示される操作選択用のUI。複数の行動候補を安全に選ばせたいときに使う。
iOS文脈の名称として押さえたい。ボトムシートと比較すると学びやすい。
ナビゲーション
ドロワー
Drawer
Android寄り
中級
画面端から引き出して表示するナビゲーションUI。メニューや補助導線をまとめて見せる。
サイドバーやサイドシートとの違いを整理したい。
ナビゲーション
ボトムナビゲーション
Bottom Navigation
Android寄り
中級
画面下部に主要な移動先を並べるナビゲーションUI。アプリの中心的な画面切り替えに使う。
タブバーやボトムバーと近いので区別して覚えたい。
ナビゲーション
ページネーション
Pagination
Web寄り
中級
一覧を複数ページに分けて移動できるようにするUI。件数の多い一覧や検索結果でよく使う。
インフィニットスクロールとの違いが説明文問題に向く。
ナビゲーション
ナビゲーションレール
Navigation Rail
Android寄り
中級
縦方向に主要な移動先を並べるナビゲーションUI。広めの画面で使いやすい。
ドロワーやサイドバーと位置・役割の違いを整理したい。
選択UI
セグメントコントロール
Segmented Control
iPhone寄り
中級
複数の選択肢を横並びで切り替えるUI。近い意味の選択肢をすばやく切り替えるときに使う。
タブやセグメントボタンとの違いが大事。
選択UI
セレクトメニュー
Select Menu
Web寄り
中級
選択肢の一覧から一つを選ぶためのUI。フォーム入力や設定変更でよく使う。
ドロップダウンやコンボボックスと比較したい。
選択UI
コンボボックス
Combobox
Web寄り
中級
入力と候補選択を組み合わせたUI。テキスト入力しながら候補を絞って選べる。
セレクトメニューより自由入力寄りという違いを押さえたい。
選択UI
スライダー
Slider
共通
中級
つまみを動かして数値や範囲を調整するUI。音量や明るさなど連続値の変更で使う。
画像でも説明文でも出題しやすい。
選択UI
ステッパー
Stepper
共通
中級
数を一段ずつ増減させるUI。数量指定や順番付きの進行表示で使われることがある。
数値入力用か進行表示用かで文脈差が出やすい。
入力フォーム
デイトピッカー
Date Picker
共通
中級
日付を選ぶためのUI。カレンダーや回転ホイールなどで日付入力を補助する。
タイムピッカーとの違いをセットで覚えたい。
入力フォーム
タイムピッカー
Time Picker
共通
中級
時刻を選ぶためのUI。予約や通知時間の設定などで使う。
デイトピッカーと役割が近いので比較しやすい。
入力フォーム
カラーピッカー
Color Picker
Web寄り
中級
色を選択するためのUI。デザインツールや設定画面で使われる。
UI初心者でも見覚えはあるが名称が出にくい代表。
入力フォーム
ファイルアップロード
File Upload
Web寄り
中級
画像や書類などのファイルを送信するためのUI。添付やインポートで使う。
入力フォーム系の実務頻出UI。
アクション補助
FAB
Floating Action Button
Android寄り
中級
画面上に浮かんで見える主要操作ボタン。新規作成など、強く促したい行動に使う。
Android文脈で名前が出やすい。
アクション補助
アイコンボタン
Icon Button
共通
中級
アイコンだけ、またはアイコン中心で操作を表すボタンUI。ツールバーやカード内でよく使う。
ボタンとの違いを言語化したい。
アクション補助
スピードダイヤル
Speed Dial
Android寄り
中級
主要ボタンから複数の関連操作を展開するUI。FABの拡張形として使われることが多い。
FABとの関係で覚えると理解しやすい。
情報表示
カルーセル
Carousel
共通
中級
複数のカードや画像を横方向に切り替えて見せるUI。おすすめ表示や導入セクションでよく使う。
スライダーという言葉と混同しやすい。
情報表示
テーブル
Table
Web寄り
中級
行と列で情報を整理して見せるUI。比較や一覧確認に向いている。
データテーブルより広い概念として扱う。
情報表示
データテーブル
Data Table
Web寄り
中級
並び替えや選択など、操作を伴う表形式のUI。管理画面や業務画面でよく使う。
テーブルより機能性が高いことを区別したい。
情報表示
タイムライン
Timeline
共通
中級
出来事や手順を時間や順番に沿って並べて見せるUI。履歴表示や進行説明に使う。
リストやステッパーとの違いを説明しやすい。
フィードバック
エンプティ・ステート
Empty State
共通
中級
表示するデータがまだない状態を案内するUI。次に何をすればよいかを伝える役割もある。
実務で重要だが、名称が出にくい代表。
フィードバック
プレースホルダー
Placeholder
共通
中級
入力欄や表示枠に仮の内容や見本を示すUI表現。まだ入力やデータがないときの手がかりになる。
エンプティ・ステートやスケルトンスクリーンと混同しやすい。
フィードバック
スケルトンスクリーン
Skeleton Screen
共通
中級
読み込み中に完成形の骨組みだけを見せるUI。待ち時間の不安を減らすために使う。
ローディングスピナーより内容の予感を出せる。
フィードバック
インラインバリデーション
Inline Validation
共通
中級
入力中や入力直後に、その場で正誤や注意点を示すUI。フォームの迷いを減らす。
エラーメッセージとの関係を説明したい。
モーダル・オーバーレイ
ポップアップメニュー
Popup Menu
共通
中級
ボタンやアイコンの近くに小さく表示される選択メニューUI。補助操作をまとめるときに使う。
コンテキストメニューやアクションシートと比較したい。
モーダル・オーバーレイ
コンテキストメニュー
Context Menu
共通
中級
対象を長押しや右クリックしたときに、その対象に関連する操作を表示するUI。
出し方に文脈があることを押さえたい。
リスト・構造
インフィニットスクロール
Infinite Scroll
Web寄り
中級
スクロールに応じて次の項目を自動で読み込むUI。SNSや記事一覧でよく使われる。
ページネーションとの比較で理解が深まる。
リスト・構造
ツリー表示
Tree View
Web寄り
中級
親子関係のある項目を階層的に表示するUI。ファイル構造や設定項目でよく使う。
一覧構造の理解に役立つUI名称。
QUIZ