このページの中だけを絞ります。ページは移りません。
UI部品の混同されやすい語
UI部品で境界が曖昧になりやすい語の対。全 189 組・64 語。
| この語 | と混同されやすい語 | 違い |
|---|---|---|
| Accordion（アコーディオン） | Disclosure（ディスクロージャー） | ディスクロージャーは単一の開閉 |
| Tab（タブ） | タブは排他的で、同じ領域を共有する | |
| Dropdown（ドロップダウン） | ドロップダウンは重なって表示される | |
| Alert Banner（アラートバナー） | Toast（トースト） | トーストは自動で消える |
| Dialog（ダイアログ） | ダイアログは操作を遮断する | |
| Error Message（エラーメッセージ） | エラーメッセージは項目ごとの文言 | |
| Avatar（アバター） | プロフィール画像 | ほぼ同義。文脈で使い分ける |
| Badge（バッジ） | バッジは状態や件数を示す | |
| アイコン | アイコンは機能や概念を示す記号 | |
| Badge（バッジ） | Chip / Tag（チップ） | チップは押せる、または削除できる |
| ラベル | 一般的な表示要素 | |
| Toast（トースト） | トーストは一時的な通知 | |
| Breadcrumb（パンくずリスト） | Global Navigation（グローバルナビゲーション） | グローバルナビはサイト全体の区分 |
| 履歴 | ブラウザの戻る操作がたどる経路 | |
| Stepper（ステッパー） | ステッパーは手順の進捗 | |
| Button（ボタン） | Link（リンク） | リンクは移動、ボタンは動作 |
| CTA | CTA は役割の名前 | |
| Icon Button（アイコンボタン） | 文字を持たないボタン | |
| Card（カード） | Card Layout（カードレイアウト） | カードレイアウトは並べ方の構成 |
| Common Region（共通領域） | 共通領域は知覚の法則 | |
| パネル | より大きな区画。カードは反復される単位 | |
| リスト項目 | 境界を持たない一覧の1行 | |
| Carousel（カルーセル） | Tab（タブ） | タブは並列の内容を選ばせる |
| ギャラリー | 画像を一覧して個別に拡大する | |
| Slider（スライダー） | 値を選ぶフォーム部品 | |
| Checkbox（チェックボックス） | Radio Button（ラジオボタン） | ラジオは1つだけ選べる |
| Toggle Switch（トグルスイッチ） | トグルは即座に設定が反映される | |
| Filter（フィルター） | フィルターは絞り込みの機能 | |
| Chip / Tag（チップ） | Badge（バッジ） | バッジは押せない表示専用 |
| Button（ボタン） | ボタンは主要な操作 | |
| Checkbox（チェックボックス） | チェックボックスは標準の選択部品 | |
| Combobox（コンボボックス） | Select（セレクト） | セレクトは入力できない |
| Search Field（検索フィールド） | 検索は結果を表示する。コンボボックスは値を選ぶ | |
| オートコンプリート | 入力補完の機能名。コンボボックスの一側面 | |
| Command Palette（コマンドパレット） | Search Field（検索フィールド） | 検索は内容を探す |
| Combobox（コンボボックス） | コンボボックスは値を選ぶ | |
| メニュー | 階層をたどる | |
| CTA（Call To Action） | Button（ボタン） | ボタンは部品 |
| Conversion Rate（コンバージョン率） | コンバージョン率は成果の指標 | |
| Microcopy（マイクロコピー） | マイクロコピーは短い文言全般 | |
| Data Table（データテーブル） | リスト | 1項目1行で、属性の比較を目的としない |
| Card Layout（カードレイアウト） | カードは1件の全体像を見せる | |
| グリッド（レイアウト） | 版面の分割体系 | |
| Date Picker（デートピッカー） | Text Field（テキストフィールド） | 直接入力させる |
| カレンダー表示 | 予定を閲覧するための表示 | |
| Constraint（制約） | 選択不可を示す仕組み | |
| Dialog（ダイアログ） | Modal（モーダル） | モーダルは背後を遮断する性質 |
| Alert Banner（アラートバナー） | バナーは流れの中に置かれ、遮断しない | |
| Toast（トースト） | トーストは応答を求めない | |
| Disclosure（ディスクロージャー） | Accordion（アコーディオン） | アコーディオンは複数が並ぶ |
| Progressive Disclosure（段階的開示） | 段階的開示は設計方針 | |
| Tooltip（ツールチップ） | ツールチップは hover で出て自動で消える | |
| Drawer（ドロワー） | Sidebar（サイドバー） | サイドバーは常時表示 |
| Modal（モーダル） | モーダルは中央に出ることが多い | |
| ボトムシート | 下から出るドロワーの呼称 | |
| Dropdown（ドロップダウン） | Select（セレクト） | フォームの入力部品 |
| Popover（ポップオーバー） | 任意の内容を出す仕組み | |
| Accordion（アコーディオン） | 開いた内容が流れの中に入り、下の要素を押し下げる | |
| Empty State（空状態） | Error State（エラー状態） | エラーは問題が起きた状態 |
| Loading State（読み込み状態） | 読み込み中はまだ結果が出ていない | |
| Error Message（エラーメッセージ） | Error State（エラー状態） | エラー状態は画面の状態 |
| 警告 | 進めるが注意が必要な場合 | |
| Helper Text（ヘルプテキスト） | ヘルプテキストは事前の説明 | |
| Error Prevention（エラー予防） | Form Validation（フォーム検証） | 検証は入力後に判定する |
| Constraint（制約） | 制約は予防の手段の一つ | |
| Error Message（エラーメッセージ） | エラーメッセージは発生後の対応 | |
| Error State（エラー状態） | Error Message（エラーメッセージ） | エラーメッセージは文言 |
| Empty State（空状態） | 空はデータがないだけで、失敗ではない | |
| Alert Banner（アラートバナー） | バナーは通知の部品 | |
| FAB（フローティングアクションボタン） | Icon Button（アイコンボタン） | アイコンボタンは流れの中に置かれる |
| 固定バー | 画面下端に横幅いっぱいで固定される帯 | |
| Button（ボタン） | 通常のボタンは流れの中 | |
| File Upload（ファイルアップロード） | ドロップゾーン | ドラッグ＆ドロップの受け皿 |
| Progress Indicator（プログレスインジケーター） | 進捗の表示部品 | |
| Filter（フィルター） | Search Field（検索フィールド） | 検索は語句で探す |
| 並び替え | 順序を変えるだけで件数は変わらない | |
| Taxonomy（分類体系） | 分類体系はフィルターの前提となる構造 | |
| Focus Trap（フォーカストラップ） | キーボードトラップ | 出られなくなる不具合 |
inert 属性 | 指定した範囲を操作対象から外す | |
| Focus（フォーカス） | フォーカスの管理全般 | |
| Form Validation（フォーム検証） | Constraint（制約） | 制約は入力自体を防ぐ |
| Inline Validation（インライン検証） | インライン検証は項目ごとに即時判定する方式 | |
| Error Message（エラーメッセージ） | エラーメッセージは伝える文言 | |
| Global Navigation（グローバルナビゲーション） | ローカルナビゲーション | 現在のセクション内の移動 |
| Breadcrumb（パンくずリスト） | パンくずは階層内の位置を示す | |
| Mega Menu（メガメニュー） | メガメニューはグローバルナビの展開形式 | |
| Hamburger Menu（ハンバーガーメニュー） | Drawer（ドロワー） | ドロワーは開いた先の表示形式 |
| ケバブ / ミートボール | 縦3点・横3点のアイコン。項目の操作メニュー | |
| Mega Menu（メガメニュー） | メガメニューは大きく展開する形式 | |
| Helper Text（ヘルプテキスト） | Placeholder（プレースホルダー） | プレースホルダーは入力すると消える |
| Label（ラベル） | ラベルは項目名 | |
| Error Message（エラーメッセージ） | エラーメッセージは誤りが起きた後 | |
| Tooltip（ツールチップ） | ツールチップは操作しないと出ない | |
| Icon Button（アイコンボタン） | Button（ボタン） | 文字ラベルを持つ |
| FAB | 画面に固定される主要操作用の丸いボタン | |
| Pictogram（ピクトグラム） | ピクトグラムは記号そのもの | |
| Infinite Scroll（無限スクロール） | Pagination（ページネーション） | ページネーションは分割して番号で移動 |
| 「もっと見る」ボタン | 押すと追加される。制御が利用者にある | |
| 仮想スクロール | 表示範囲だけを描画する実装技法 | |
| Inline Validation（インライン検証） | Form Validation（フォーム検証） | フォーム検証は仕組み全体 |
| 送信時検証 | 送信後にまとめて判定する方式 | |
| Helper Text（ヘルプテキスト） | ヘルプテキストは事前の説明 | |
| Label（ラベル） | Placeholder（プレースホルダー） | プレースホルダーは入力すると消える |
| Accessible Name（アクセシブルネーム） | 読み上げに伝わる名前。ラベルはその供給源の一つ | |
| 見出し | 見出しはセクションの名前 | |
| Link（リンク） | Button（ボタン） | ボタンは動作、リンクは移動 |
| Navigation（ナビゲーション） | ナビゲーションはリンクの集合 | |
| アンカー | 同一ページ内の位置への移動 | |
| Live Region（ライブリージョン） | Toast（トースト） | トーストは視覚的な部品 |
aria-busy | 処理中であることを示す属性 | |
| Loading State（読み込み状態） | Skeleton Screen（スケルトンスクリーン） | スケルトンは表示方式の一つ |
| Empty State（空状態） | 空は結果が確定してデータがない状態 | |
| Mega Menu（メガメニュー） | Dropdown（ドロップダウン） | ドロップダウンは1列の一覧 |
| Sitemap（サイトマップ） | サイトマップは独立したページ | |
| Hamburger Menu（ハンバーガーメニュー） | ハンバーガーは畳む仕組み | |
| Modal（モーダル） | Dialog（ダイアログ） | ダイアログは対話の窓。モーダルはその性質 |
| Drawer（ドロワー） | ドロワーは端から現れる。モーダルにもなりうる | |
| Popover（ポップオーバー） | ポップオーバーは背後を遮断しない | |
| Navigation（ナビゲーション） | Information Architecture（情報設計） | 情報設計は構造そのもの |
| Sitemap（サイトマップ） | サイトマップは全体の一覧 | |
| Link（リンク） | リンクは個々の要素 | |
| Pagination（ページネーション） | Infinite Scroll（無限スクロール） | 無限スクロールは自動で追加読み込み |
| 「もっと見る」ボタン | 押すと追加される。中間的な方式 | |
| Placeholder（プレースホルダー） | Label（ラベル） | ラベルは常時表示される項目名 |
| Helper Text（ヘルプテキスト） | ヘルプテキストは常時表示される説明 | |
| Skeleton Screen（スケルトンスクリーン） | 読み込み中の仮表示 | |
| 初期値 | 実際に入力された値。送信される | |
| Popover（ポップオーバー） | Tooltip（ツールチップ） | ツールチップは説明のみで、操作要素を含まない |
| Modal（モーダル） | モーダルは背後を遮断する | |
| Dropdown（ドロップダウン） | ドロップダウンは開く仕組みの総称 | |
| Primary / Secondary / Tertiary（ボタン階層） | Variant（バリアント） | バリアントは型の総称。階層はその一種 |
| Dominance（主従） | 主従は画面全体の力関係 | |
| CTA | CTA は行動を促す役割 | |
| Progress Indicator（プログレスインジケーター） | Spinner（スピナー） | スピナーは進捗が分からない不確定型 |
| Skeleton Screen（スケルトンスクリーン） | スケルトンは読み込む内容の形を先に示す | |
| Stepper（ステッパー） | ステッパーは利用者が進める手順 | |
| Radio Button（ラジオボタン） | Checkbox（チェックボックス） | チェックボックスは複数選べる |
| Select（セレクト） | セレクトは畳まれている | |
| Toggle Switch（トグルスイッチ） | トグルは2値の即時切り替え | |
| Search Field（検索フィールド） | Filter（フィルター） | フィルターは既存の一覧を絞り込む |
| Combobox（コンボボックス） | コンボボックスは値を選ばせる | |
| サイト内検索 | 対象範囲を示す呼称 | |
| Select（セレクト） | Dropdown（ドロップダウン） | ドロップダウンは開いて何かを出す仕組み全般 |
| Combobox（コンボボックス） | コンボボックスは入力しながら絞り込める | |
| Radio Button（ラジオボタン） | ラジオは選択肢がすべて見えている | |
| Sidebar（サイドバー） | Drawer（ドロワー） | ドロワーは普段隠れていて、操作すると現れる |
| Column（カラム） | カラムはグリッドの分割単位 | |
| パネル | 一般的な区画の呼称 | |
| Skeleton Screen（スケルトンスクリーン） | Spinner（スピナー） | スピナーは形を示さない |
| Placeholder（プレースホルダー） | プレースホルダーは入力欄のヒント | |
| Empty State（空状態） | 空状態はデータがない状態 | |
| Skip Link（スキップリンク） | Landmark（ランドマーク） | ランドマークは支援技術向けの領域指定 |
| ページ内リンク | 一般的なアンカーリンク | |
| Breadcrumb（パンくずリスト） | パンくずは階層の位置 | |
| Slider（スライダー） | Progress Indicator（プログレスインジケーター） | 進捗表示は操作できない |
| Text Field（テキストフィールド） | 数値を直接入力する | |
| レンジスライダー | つまみが2つあり範囲を指定する | |
| Snackbar（スナックバー） | Toast（トースト） | トーストは操作を含まない |
| Alert Banner（アラートバナー） | バナーは自動で消えない | |
| Dialog（ダイアログ） | ダイアログは事前に確認する | |
| Spinner（スピナー） | Progress Indicator（プログレスインジケーター） | 進捗表示は完了までの見通しを示す |
| Skeleton Screen（スケルトンスクリーン） | スケルトンは内容の形を示す | |
| State Transition（状態遷移） | Transition（トランジション） | トランジションは CSS の実装 |
| Variant（バリアント） | バリアントは設計者が選ぶ型 | |
| 画面遷移 | 別ページへの移動 | |
| Stepper（ステッパー） | Progress Indicator（プログレスインジケーター） | 進捗表示は処理の進み具合 |
| Breadcrumb（パンくずリスト） | パンくずは階層の位置 | |
| Tab（タブ） | タブは順序を持たない | |
| Tab（タブ） | Accordion（アコーディオン） | アコーディオンは複数を同時に開ける |
| Navigation（ナビゲーション） | ナビは別ページへ移動する | |
| セグメント切り替え | 表示形式の切り替え（一覧・地図など） | |
| Target Size（ターゲットサイズ） | Fitts's Law（フィッツの法則） | フィッツは到達時間の法則 |
| 見た目の大きさ | 視覚的な寸法 | |
| タップ領域 | ほぼ同義。モバイル文脈での呼称 | |
| Text Field（テキストフィールド） | Textarea（テキストエリア） | 複数行の入力 |
| Combobox（コンボボックス） | 入力と選択を組み合わせたもの | |
| Search Field（検索フィールド） | 検索に特化した入力欄 | |
| Textarea（テキストエリア） | Text Field（テキストフィールド） | 1行の入力 |
| リッチテキストエディタ | 装飾や書式を扱える入力欄 | |
contenteditable | 任意の要素を編集可能にする属性 | |
| Toast（トースト） | Snackbar（スナックバー） | スナックバーは操作を1つ含められる |
| Alert Banner（アラートバナー） | バナーは自動で消えず、流れの中に置かれる | |
| Dialog（ダイアログ） | ダイアログは応答を求める | |
| Toggle Switch（トグルスイッチ） | Checkbox（チェックボックス） | チェックボックスは送信して反映 |
| Radio Button（ラジオボタン） | ラジオは3つ以上の選択肢を扱える | |
| セグメント切り替え | 2つ以上の排他的な表示切り替え | |
| Tooltip（ツールチップ） | Popover（ポップオーバー） | ポップオーバーは操作要素を含められる |
| Helper Text（ヘルプテキスト） | ヘルプテキストは常時表示 | |
title 属性 | ブラウザ標準の補足。表示の制御ができない |