知っておくべきUI用語30選

金, 08/15/2025 - 14:53

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

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

【ア行】

日本語	英語	解説
アコーディオン	Accordion	クリックで開閉するUI要素。FAQやメニューに使用し、スペースを節約。中小企業はコンテンツ整理でユーザビリティを向上。
アフォーダンス	Affordance	オブジェクトが「押せる」「スワイプできる」など、使い方を直感的に示す特性。ボタンの立体感などで実現。直感的な操作を支援。
インフォメーションアーキテクチャー（IA）	Information Architecture	情報の構造や階層を設計する手法。ユーザーがコンテンツを見つけやすくし、ナビゲーションを効率化。中小企業はサイト整理に活用。
アイコン	Icon	機能やアクションを表す小さな画像。視認性を高め、スペースを節約。中小企業は簡潔なデザインに活用。

【カ行】

日本語	英語	解説
カード	Card	画像やテキスト、ボタンをまとめたUIコンポーネント。ブログや商品一覧に使用し、視覚的に情報を整理。中小企業は一覧性を強化。
カルーセル	Carousel	スライド形式でコンテンツを表示するUI。トップページのバナーなどに使用。中小企業は注目コンテンツを効果的に提示。
キービジュアル（KV）	Key Visual	サイトやアプリの第一印象を決めるメインビジュアル。ブランドイメージを強化し、ユーザーの関心を引く。
クリッカブル	Clickable	クリック可能な要素。ボタンやリンクに適用し、操作性を明確化。中小企業は直感的なデザインで離脱を防止。

【サ行】

日本語	英語	解説
サジェスト機能	Suggest Function	検索時にキーワード候補を表示する機能。ユーザーの入力負担を軽減し、検索効率を向上。中小企業は顧客体験を強化。
視認性	Visibility	デザイン要素の瞬間的な見やすさ。フォントや色で調整し、ユーザーの認知を支援。中小企業はシンプルなデザインで効果を最大化。
チェックボックス	Checkbox	複数選択可能な入力要素。フォームや設定画面に使用。中小企業は規約同意などでユーザビリティを向上。

【タ行】

日本語	英語	解説
ダイアログ	Dialog	ユーザーにメッセージや選択を促すポップアップウィンドウ。確認や警告に使用し、操作の明確化を支援。
ドロップダウン	Dropdown	クリックでリストを表示する選択要素。フォームやメニューに使用し、スペース効率を向上。中小企業は簡潔なUIに活用。
ドロワー	Drawer	スライドで表示されるメニュー（ハンバーガーメニュー）。モバイルでナビゲーションを整理し、ユーザビリティを強化。

【ナ行】

日本語	英語	解説
ナビゲーションバー	Navigation Bar	サイト内の移動を支援するメニュー。グローバルナビなどで使用し、ユーザーの導線を明確化。中小企業は迷わないUIを実現。
ノーティフィケーション	Notification	ユーザーへの通知やアラート。更新や警告を表示し、注意を引く。中小企業は顧客エンゲージメントを向上。

【ハ行】

日本語	英語	解説
パンくずリスト	Breadcrumbs	サイト内の現在位置を示すナビゲーション。階層を可視化し、ユーザーの移動を支援。中小企業はサイト構造を明確化。
ハンバーガーメニュー	Hamburger Menu	三本線アイコンで表示されるメニュー。モバイルでスペースを節約し、ナビゲーションを簡潔に。
ビジュアルデザイン	Visual Design	UIの見た目（色、フォント、レイアウト）を設計。ブランドイメージを強化し、ユーザーの第一印象を向上。
フォームバリデーション	Form Validation	フォーム入力の妥当性をチェックする機能。エラーメッセージでユーザーを誘導し、正確な入力を支援。
プログレスバー	Progress Bar	処理の進行状況を示すUI要素。アップロードやフォーム送信時に使用し、ユーザーの不安を軽減。
ページネーション	Pagination	コンテンツをページ分割するナビゲーション。リストや検索結果に使用し、読み込み速度を向上。
プロトタイプ	Prototype	UIの動作を確認する試作品。Figmaなどで作成し、ユーザー体験を事前検証。中小企業は低コストで改善可能。

【マ行】

日本語	英語	解説
マイクロインタラクション	Microinteraction	ボタンのホバー効果など、小さな操作に対する反応。ユーザー体験を向上し、操作を楽しく。中小企業は印象を強化。
モーダル	Modal	他の操作を遮断し、特定のアクションを促すウィンドウ。確認や入力に使用し、焦点を集中。

【ラ行】

日本語	英語	解説
ラジオボックス	Radio Box	単一選択の入力要素。フォームや設定で使用し、明確な選択を支援。中小企業は簡潔なUIに活用。
レスポンシブデザイン	Responsive Design	デバイスに応じてレイアウトを最適化する設計。PCやモバイルで一貫した体験を提供し、ユーザビリティを向上。

「ヤ行】

ユーザビリティ

Usability

UIの使いやすさ。直感的な操作や一貫性でユーザーの満足度を向上。中小企業は顧客維持に活用。

【ワ行】

ワイヤーフレーム

Wireframe

UIの骨組みを示す設計図。レイアウトや機能を初期段階で確認し、開発効率を向上。中小企業は低コストで設計可能。

【アルファベット】

日本語	英語	解説
A/Bテスト	A/B Testing	2つのデザインを比較し、効果を検証する手法。ボタンの色や配置をテストし、コンバージョン率を向上。
CTA（行動喚起）	Call to Action	購入や登録を促すボタンやリンク。「今すぐ購入」など明確な指示で、ユーザーの行動を誘導。
GUI	Graphical User Interface	画像やアイコンで操作するUI。視覚的な操作性を提供し、初心者にも使いやすく。中小企業は直感的なアプリに活用。

まとめ

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