UI用語集
UIの呼び方の揺れを整理し、チーム内で同じ言葉を使えるようにするための辞書です。
モーダルとダイアログの違い
Modal vs Dialog
モーダルは背景操作を一時的に止める表示形式、ダイアログはユーザーに確認・入力・情報提示を行うUI要素として扱われます。
トーストとスナックバーの違い
Toast vs Snackbar
トーストとスナックバーはいずれも短いフィードバック通知です。スナックバーはアクションを伴う通知として扱われることがあります。
タブとタブバーの違い
Tab vs Tab Bar
タブは同一文脈内の内容切り替え、タブバーはアプリの主要セクションを切り替えるナビゲーションとして使われます。
ドロップダウンとセレクトの違い
Dropdown vs Select
セレクトはフォーム入力として選択値を決める部品、ドロップダウンはメニューや操作候補を開く広い表現として使われます。
スケルトンとスピナーの違い
Skeleton vs Spinner
スケルトンは読み込み後の形を先に示すプレースホルダー、スピナーは処理中であることだけを示すローディング表示です。
チェックボックスとラジオボタンの違い
Checkbox vs Radio Button
チェックボックスは複数選択やオン/オフ、ラジオボタンは同じ選択肢グループから1つだけ選ぶ入力に使います。
スイッチとチェックボックスの違い
Switch vs Checkbox
スイッチは即時反映される設定のオン/オフ、チェックボックスはフォーム内で選択値として送信するオン/オフに向きます。
ドロワーとサイドバーの違い
Drawer vs Sidebar
ドロワーは一時的に開閉するパネル、サイドバーは常時または半常時表示されるナビゲーション領域として使われます。
ポップオーバーとツールチップの違い
Popover vs Tooltip
ツールチップは短い補足説明、ポップオーバーは操作・詳細情報・小さなフォームを含められる浮動パネルです。
アコーディオンと折りたたみの違い
Accordion vs Collapse
アコーディオンは複数セクションを見出しで開閉するUI、折りたたみは単一領域を開閉する一般的な表現です。
ページネーションと無限スクロールの違い
Pagination vs Infinite Scroll
ページネーションは結果をページ単位で移動し、無限スクロールは下へ進むほど追加読み込みする一覧UIです。
カードとリストの違い
Card vs List
カードは独立した情報単位を視覚的にまとめ、リストは同種の項目を効率よく比較・走査する表示に向きます。
バッジとタグの違い
Badge vs Tag
バッジは状態や件数を短く示し、タグやチップは分類・属性・選択済み条件を示すために使います。
アラートとトーストの違い
Alert vs Toast
アラートは画面内で重要な状態や注意を残し、トーストは短時間で消える軽いフィードバックに使います。
ダイアログとボトムシートの違い
Dialog vs Bottom Sheet
ダイアログは中央に確認や入力を出すUI、ボトムシートは画面下から関連操作や選択肢を出すモバイル向けUIです。
パンくずリストとナビゲーションの違い
Breadcrumb vs Navigation
パンくずリストは現在位置と階層を示し、ナビゲーションは主要な移動先を選ばせるために使います。
テキストフィールドとテキストエリアの違い
Text Field vs Textarea
テキストフィールドは短い1行入力、テキストエリアは説明文やメモなど複数行入力に使います。
スライダーとステッパーの違い
Slider vs Stepper
スライダーは範囲内の感覚的な値調整、ステッパーは段階や手順を順番に進めるUIとして使われます。
空状態とエラー状態の違い
Empty State vs Error State
空状態はデータがない通常状態、エラー状態は処理失敗や取得失敗で本来の内容を表示できない状態です。
アバターとアイコンの違い
Avatar vs Icon
アバターは人や組織など主体を表し、アイコンは操作・状態・カテゴリなど抽象的な意味を表します。