ナビゲーション
ボトムバー
Bottom Bar
共通
上級
画面下部に配置されるバー状のUI全般を指す名称。主要操作や状態表示をまとめるときに使う。
タブバーやボトムナビゲーションより広い言い方として整理したい。
STUDY LEVEL
似た名称の違いまで理解する段階
上級のUI名称を、
一覧でやさしく学べる。
似た名称の違いや文脈差まで、より深く整理できます。
UI TERMS
上級のUI名称一覧
覚えた項目は非表示にできます。まだ迷うUI名称だけを残して、集中して確認できます。
0/30
ナビゲーション
アプリバー
App Bar
Android寄り
上級
アプリ上部または下部に置かれる主要なバーUI。タイトル、ナビゲーション、主要操作をまとめる。
ナビゲーションバーやツールバーと比較しやすい。
ナビゲーション
ツールバー
Toolbar
共通
上級
よく使う操作やツールを横並びで配置するバーUI。編集画面や業務画面で出番が多い。
アプリバーやナビゲーションバーと役割が近い。
ナビゲーション
タイトルバー
Title Bar
デスクトップ寄り
上級
ウィンドウ上部で画面名や状態を示すバーUI。デスクトップアプリ文脈でよく使われる。
モバイル中心の人には新しく感じやすい。
ナビゲーション
サブナビゲーション
Sub Navigation
Web寄り
上級
主要ナビゲーションの下層で、より細かな移動先を示すUI。セクション内移動に使う。
ナビゲーションの階層を理解するのに役立つ。
ナビゲーション
メガメニュー
Mega Menu
Web寄り
上級
多数の移動先を大きなパネルでまとめて表示するメニューUI。情報量の多いサイトで使われる。
通常のドロップダウンより規模が大きい。
ナビゲーション
コマンドパレット
Command Palette
Web寄り
上級
キーボード操作でコマンドや移動先を検索して呼び出すUI。生産性ツールでよく使われる。
名称を知っていると設計会話で強い上級UI。
選択UI
フィルターバー
Filter Bar
Web寄り
上級
一覧の表示条件を絞り込むための選択UIを横並びにまとめたバー。
ソートメニューとの役割の違いを整理したい。
選択UI
ソートメニュー
Sort Menu
Web寄り
上級
一覧の並び順を変更するためのUI。新着順や価格順などを切り替える。
フィルターバーとは目的が違う。
入力フォーム
オートコンプリート
Autocomplete
Web寄り
上級
入力中の文字に応じて候補を自動表示するUI。候補の補完と選択を助ける。
コンボボックスやサジェストリストと比較したい。
入力フォーム
サジェストリスト
Suggestion List
共通
上級
入力内容や文脈に応じて候補を一覧表示するUI。選択の補助として使う。
オートコンプリートより広い表現として扱える。
入力フォーム
リッチテキストエディタ
Rich Text Editor
Web寄り
上級
文字の装飾や画像挿入などを行える入力UI。ブログ投稿や社内ツールで使われる。
単なるテキストエリアとの違いを理解したい。
入力フォーム
インラインエディット
Inline Edit
Web寄り
上級
表示中の内容をその場で編集できるUI。編集画面へ遷移せず、直接書き換えられる。
表示と編集が切り替わる文脈を押さえたい。
選択UI
セグメントボタン
Segmented Button
共通
上級
ボタン群の中から状態や表示方式を切り替えるUI。複数の近い選択肢を一目で切り替えられる。
セグメントコントロールとの違いを比較したい。
選択UI
フィルターチップ
Filter Chip
Android寄り
上級
絞り込み条件を小さなチップで表し、オンオフや選択状態を切り替えるUI。
チップより用途が限定される。
情報表示
チャート
Chart
共通
上級
数値や関係性を視覚的に表現するUI。棒、線、円などを含む広い概念として使う。
グラフとの言い分けが曖昧になりやすい。
情報表示
グラフ
Graph
共通
上級
数値や変化を図として表すUI。会話ではチャートと近い意味で使われることも多い。
チャートとの呼び分けを実務文脈で整理したい。
情報表示
カンバン
Kanban
Web寄り
上級
カードを列ごとに並べて進行状況を管理するUI。タスク管理ツールでよく使われる。
リストやテーブルと構造が異なる。
リスト・構造
マスターディテール
Master Detail
共通
上級
一覧と詳細を組み合わせて表示するUI構成。選んだ項目の内容を隣や下に表示する。
上級で理解が深まる構造概念。
リスト・構造
スプリットビュー
Split View
iPhone寄り
上級
画面を複数領域に分けて、一覧と詳細などを同時に見せるUI。タブレット文脈でよく使う。
マスターディテールと近いがレイアウト面を強く持つ。
モーダル・オーバーレイ
サイドシート
Side Sheet
Web寄り
上級
画面の横から現れる補助パネルUI。詳細表示や追加設定に使う。
ドロワーやサイドバーと区別したい。
モーダル・オーバーレイ
シート
Sheet
共通
上級
画面に重なって表示される面状の補助UIを広く指す名称。表示位置や文脈で種類が分かれる。
抽象度が高いので上級向き。
モーダル・オーバーレイ
フルスクリーンダイアログ
Full-screen Dialog
Android寄り
上級
画面全体を使って表示されるダイアログUI。入力量が多いときや集中させたいときに使う。
通常のダイアログとの大きさの違いを押さえたい。
モーダル・オーバーレイ
ノンモーダルダイアログ
Non-modal Dialog
デスクトップ寄り
上級
表示中も背後の画面操作を完全には止めないダイアログUI。補助的な設定や確認で使う。
モーダルとの違いを説明しやすい。
モーダル・オーバーレイ
ホバーカード
Hover Card
Web寄り
上級
ホバー時に補足情報を小さく表示するUI。ツールチップより情報量が多いことがある。
ツールチップとポップオーバーの中間的に捉えると理解しやすい。
フィードバック
バナー
Banner
共通
上級
画面上部や内容の近くに継続的な案内を表示するUI。重要なお知らせや警告に使う。
アラートやインライン通知との違いを整理したい。
フィードバック
インライン通知
Inline Notification
共通
上級
関連するコンテンツの近くに差し込んで表示する通知UI。文脈を保ったまま注意や結果を伝える。
バナーより局所的な通知。
フィードバック
ステータスバー
Status Bar
モバイル寄り
上級
端末やアプリの状態情報を表示するバーUI。時刻や通信状況、バッテリーなどを示す。
UI部品としては抽象的で、文脈理解が必要。
情報表示
インスペクターパネル
Inspector Panel
デスクトップ寄り
上級
選択中の要素の情報や設定を確認・調整するパネルUI。デザインツールや業務ツールで使う。
プロパティパネルと近いので比較したい。
情報表示
プロパティパネル
Properties Panel
デスクトップ寄り
上級
対象の属性や数値設定をまとめて編集できるパネルUI。デザインや編集ツールでよく使う。
インスペクターパネルとセットで覚えると理解しやすい。
QUIZ