知っておくべきUI用語
UI/UX

知っておくべきUI用語

ユーザーインターフェース（UI）デザインは、ウェブサイトやアプリを直感的に使いやすくするための重要な要素です。しかし、「モーダル」や「ワイヤーフレーム」などの専門用語は、初心者にとって理解のハードルになる場合があります。

本記事では、UIデザインに必須のの用語を厳選し、デザイナーや中小企業が即活用できるようにわかりやすく解説します。各用語は、ユーザビリティやデザイン効率化の課題と結びつけ、どのように役立つかを簡潔に説明。UIデザインを学び、プロジェクトを成功させましょう！ 

 

【ア行】

日本語英語解説
アコーディオンAccordionクリックで開閉するUI要素。FAQやメニューに使用し、スペースを節約。
アフォーダンスAffordance「押せる」「スワイプできる」など、使い方を直感的に示す特性。
インフォメーションアーキテクチャInformation Architecture情報の構造や階層を設計し、ナビゲーションを効率化。
アイコンIcon機能やアクションを表す小さな画像で、直感的な理解を促す。
アニメーションUIAnimated UI視覚効果を用いて操作感を滑らかにするデザイン。
アラートAlert重要なメッセージを強調表示するUI要素。
アクセスキーAccess Keyキーボード操作で特定のUIを素早く選択する機能。
アップロードボタンUpload Buttonファイル選択・送信を行うためのUI要素。

 

【カ行】

日本語英語解説
カードCard画像やテキストをまとめたコンポーネント。
カルーセルCarouselスライド形式で表示するUI。
キービジュアル（KV）Key Visualブランドの第一印象を決めるビジュアル。
クリック可能Clickable操作できる要素であることを明示。
カラーピッカーColor Picker色を選択できるUI。
グリッドレイアウトGrid Layout規則的に配置されたレイアウト手法。
コントラスト比Contrast Ratioテキストや背景の視認性を左右する数値。
コンポーネントComponentUIの再利用可能な部品。

 

【サ行】

日本語英語解説
サジェスト機能Suggest Function入力補助を行う検索UI。
視認性Visibilityデザイン要素の見やすさ。
チェックボックスCheckbox複数選択可能な入力要素。
スライダーSlider値を調整するUI（音量、価格帯など）。
スクロールバーScrollbarコンテンツを上下左右に移動するためのUI。
サイドバーSidebar画面横に設置する補助メニュー。
スケルトンスクリーンSkeleton Screen読み込み中に表示する仮レイアウト。
サムネイルThumbnailコンテンツの縮小版イメージを表示。

 

【タ行】

日本語英語解説
ダイアログDialog確認や警告に使うポップアップ。
ドロワーメニューDrawer Menuスライド式で表示されるメニュー。
タブTabコンテンツを切り替えるUI。
トグルスイッチToggle SwitchON/OFFを切り替える操作要素。
ツールチップTooltipアイコンやボタンにカーソルを合わせると表示される補足情報。
タイポグラフィTypographyフォント設計による読みやすさとデザイン性。
タグクラウドTag Cloud頻度や重要度を反映したラベル群の表示。

 

【ナ行】

日本語英語解説
ナビゲーションバーNavigation Barサイト内の移動を支援するメニュー。
ノーティフィケーションNotification更新や警告をユーザーに伝える。
ナッジUINudge UI自然に行動を促す微妙なデザイン工夫。
ナビゲーションドロップダウンNavigation Dropdownメニュー階層を展開して表示。
ナイトモードNight Mode視認性向上のため背景を暗くする配色。
ナビゲーションボタンNavigation Buttonページ移動を明示するUI要素。

 

【ハ行】

日本語英語解説
パンくずリストBreadcrumbs現在位置を示すナビゲーション。
ハンバーガーメニューHamburger Menu三本線アイコンのメニュー。
ビジュアルデザインVisual Design見た目を決定するデザイン要素。
フォームバリデーションForm Validation入力の妥当性を確認する機能。
プログレスバーProgress Bar処理進捗を示すUI要素。
ページネーションPaginationコンテンツを分割するUI。
プロトタイプPrototypeUIの試作品。
プルダウン（メニュー／リスト）Dropdownリストから選択するUI。
パネルPanelコンテンツを区切るコンテナUI。
プレースホルダーPlaceholder入力欄に例示するテキスト。

 

【マ行】

日本語英語解説
マイクロインタラクションMicrointeraction小さな操作反応を演出するUI。
モーダルModal操作を強制的に中断して入力を促すUI。
マテリアルデザインMaterial DesignGoogle提唱のUIデザイン指針。
マルチステップフォームMulti-step Form入力を複数画面に分けたフォーム。
マーカーMarkerハイライトや位置を示す要素。
マグネットUIMagnetic UIドラッグ操作が自動的に整列されるUI。

 

【ラ行】

日本語英語解説
ラジオボタンRadio Button単一選択の入力UI。
レスポンシブデザインResponsive Designデバイス対応のレイアウト設計。
ローディングスピナーLoading Spinner読み込み中を示す回転アイコン。
レイアウトグリッドLayout Grid要素を揃えるためのガイド線。
ラベルLabel入力欄の説明を示すテキスト。
ランディングページUILanding Page UI広告や集客用ページ専用のUI設計。

 

【ヤ行】

日本語英語解説
ユーザビリティUsability使いやすさを示す指標。
ユーザーフローUser Flow操作の流れを設計する図。
ユーザーテストUser Testing実際の利用者でUIを検証。
ユーザーオンボーディングUser Onboarding初回利用を支援するUI設計。
ユーザーアカウントUIUser Account UIプロフィールや設定画面のUI。
ユーザー入力補助Input Assistance自動補完やサジェストで操作を軽減。

 

【ワ行】

日本語英語解説
ワイヤーフレームWireframeUIの骨組み設計。
ワークスペースUIWorkspace UIダッシュボードや業務画面のUI。
ワードラップWord Wrapテキストを自動改行する仕組み。
ワンクリック操作One-click Action操作を1回で完結させるUI。
ワークフローUIWorkflow UIタスクの流れを支援するインターフェース。

 

【アルファベット】

日本語英語解説
A/BテストA/B Testingデザインの効果を比較検証。
CTA（行動喚起）Call to Action行動を促すボタンやリンク。
GUIGraphical User Interfaceアイコンや画像で操作するUI。
UXUser Experience製品やサービスを通じた体験全体。
UI KitUI Kitデザインに必要なUIパーツのセット。
APIドリブンUIAPI-driven UI外部APIのデータを利用して動的に変化するUI。
KPIダッシュボードKPI Dashboard成果指標を可視化するUI。
VR UIVirtual Reality UI仮想空間に適応したユーザーインターフェース。

 

まとめ

UIデザインの用語を理解することは、使いやすく魅力的なプロダクトを作るための基礎です。本記事で紹介した知識を活用すれば、操作性の向上やデザイン効率化が可能になり、ブランド価値の強化にもつながります。まずは小規模なプロジェクトや無料ツールで実践し、ユーザーからのフィードバックを反映させながら改善していくことが成功への近道です。

UI
UX
UI/UX