UIデザイン用語辞典
レイアウト・UX・状態設計・インタラクション・AI-UIまで、プロのUIデザインで使われる用語を10カテゴリに整理しました。AIへの指示や開発者・デザイナーとのコミュニケーション精度を上げるのに活用してください。
①
レイアウト・構造Layout & Structure
画面の骨格を作る。正しい構造設計がUXの土台になる。
レイアウトLayout
基礎画面上の要素（テキスト・画像・ボタン）をどこにどう配置するかの設計。情報の優先順位を視覚的に表現する最初のステップ。
グリッド設計Grid Design
基礎ページを等間隔のカラムと行に分割して要素を整列させる手法。12カラムグリッドが Web 標準。揃えるだけで一気にプロっぽく見える。
余白設計Spacing Design
重要要素間のスペースを意図的に設計すること。余白が狭いと窮屈・多いと間延び。4px や 8px の倍数（スペーシングスケール）で統一するのが定番。
パディング / マージンPadding / Margin
基礎padding は要素の内側の余白、margin は外側の余白。CSSの基本だが「どちらで調整するか」を意識するだけでレイアウトが安定する。
コンテナ構造Container Structure
構造コンテンツを包む最大幅を持つ外枠のこと。`max-width: 1200px; margin: 0 auto;` のように中央揃えにするのが一般的。幅が広がりすぎるのを防ぐ。
セクション分割Section Division
構造ページをテーマごとのブロックに切り分けること。ヒーロー・特徴・料金・CTA などのセクションに分けることで情報が整理され、スクロールしやすくなる。
レスポンシブ対応Responsive Design
必須スマホ・タブレット・PC など画面サイズに合わせてレイアウトが変化するデザイン。CSS の `@media` クエリや Flexbox・Grid を使って実装する。
中央揃えCentering
基礎要素を水平・垂直に中央配置すること。`flexbox`（justify-content / align-items: center）または `CSS Grid` + `place-items: center` が現代的な実装方法。
２カラムレイアウト2-Column Layout
基礎画面を左右2つの縦列に分割するレイアウト。メインコンテンツ＋サイドバーや、テキスト＋画像の組み合わせに使われる。CSS Grid や Flexbox で実装し、モバイルでは1カラムに切り替えるのが標準。
ヘッダー / フッターHeader / Footer
基礎ページ上部（ヘッダー）にはロゴ・ナビゲーション、下部（フッター）にはコピーライト・補助リンクを配置するのが標準。ヘッダーはスクロールしても追従する sticky 設計が多い。
②
視覚デザインVisual Design
見た目の品質を左右する。「なんかいい感じ」の正体はここにある。
タイポグラフィTypography
基礎フォント・サイズ・行間・太さ・色を設計すること。読みやすさと美しさを両立させる。タイプスケール（12/14/16/20/24/32px など）を決めておくと一貫性が出る。
フォント階層Type Hierarchy
重要見出し（h1〜h3）・本文・キャプションなど役割ごとにフォントサイズと太さを変えること。階層が明確だと視線の動きが自然になり、情報が伝わりやすくなる。
配色設計Color Design
基礎Primary・Secondary・Accent・Semantic（success/error/warning）などを定義して色の使い方を統一すること。デザインシステムの土台になる。
コントラストContrast
必須文字色と背景色の明度差のこと。WCAG（アクセシビリティ基準）では通常テキストで 4.5:1 以上を推奨。コントラストが低いと読みにくく、高齢者や視覚障害のある人が困る。
視覚的階層Visual Hierarchy
重要「何を一番先に見てほしいか」をサイズ・色・配置で表現すること。最重要要素を大きく・目立つ色で・上に置くことで自然な視線誘導が生まれる。
デザインシステムDesign System
上級色・タイポグラフィ・コンポーネント・アイコンなどを一元管理するルールと部品の集合。Figma のコンポーネントライブラリや Tailwind の設定ファイルが実装例。
ミニマルデザインMinimal Design
スタイル余計な装飾を排除し必要な要素だけで構成するデザイン哲学。「引き算の美学」。ホワイトスペースを積極的に使い、コンテンツを際立たせる。
ホワイトスペースWhite Space
重要要素を囲む何もない空間のこと。意図的に「空白」を残すことで、情報の区切りが明確になり、上質な印象を与える。詰め込みすぎを防ぐ指標。
見出し（h1〜h6）Heading
基礎HTMLのh1〜h6タグで表現するテキストの見出し。h1はページに1つ（最重要）、h2は大見出し、h3は中見出しが基本。視覚的な大きさで階層を示しつつ、SEOにも直結するため意味的な順序を崩さないことが重要。
イメージ画像Image / Visual
基礎ページに配置する写真・イラスト・SVGなどの視覚素材。ヒーロー画像・商品写真・アイキャッチが代表例。alt属性（代替テキスト）を付けることがアクセシビリティとSEOの両方で必須。WebP形式で軽量化するのが現代の標準。
③
UX・使いやすさUser Experience
ユーザーがどう感じるかの設計。良いUXは「気づかれない」。
直感的操作Intuitive Operation
UX説明なしに使い方がわかること。ボタンはボタンらしく見える、クリックできそうなものはクリックできる。メンタルモデル（ユーザーの予想）に沿った設計が鍵。
アクセシビリティAccessibility (a11y)
必須障害のある人を含むすべてのユーザーが使えること。キーボード操作・スクリーンリーダー対応・色弱対応など。WCAG 2.1 AA がグローバル標準のガイドライン。
一貫性Consistency
UX同じ操作・同じ見た目・同じ文言がアプリ全体で統一されていること。一貫性があると学習コストが下がり、ユーザーは「次の画面でも同じはず」と予測できる。
学習しやすさLearnability
UX初めて使うユーザーが短時間でサービスを理解できる度合い。オンボーディング・ツールチップ・段階的な機能開示などで高められる。
シームレスな体験Seamless Experience
UXデバイス・チャネル・ステップの切り替えでユーザーがストレスを感じないこと。「途切れない体験」。ページ遷移が重い・入力がリセットされるなどがシームレスの反対例。
操作負担の軽減Reducing Cognitive Load
UXユーザーが一度に考える量（認知負荷）を減らすこと。選択肢を絞る・デフォルト値を設定する・ステップを分けるなどが有効。入力フォームの設計で特に重要。
④
ユーザーフローUser Flow
ユーザーがゴールに辿り着くまでの道筋を設計する。
ユーザーフローUser Flow
基礎ユーザーがサービスを使う際の画面遷移と操作の流れを図で表したもの。「登録→設定→メイン機能→完了」のように可視化し、設計の抜け漏れをなくす。
ハッピーパスHappy Path
重要ユーザーがエラーなく最短でゴールに辿り着く理想の導線。まずハッピーパスを設計してからエラーや例外ケースを追加するのがフロー設計の基本手順。
オンボーディングOnboarding
重要初回ユーザーがサービスの価値を理解し最初のアクションを完了できるまでの導線。チュートリアル・初期設定ウィザード・空状態の案内などが含まれる。
ナビゲーションNavigation
基礎ユーザーがサービス内を移動するための仕組み。グローバルナビ・サイドバー・タブバー・パンくずリストなどの種類がある。「今どこにいるか」が常にわかることが重要。
コンバージョン導線Conversion Path
重要ユーザーを購入・登録などの目標行動へ導く一連の流れ。LP→フォーム→完了ページのような設計。ボトルネック（離脱が多い箇所）を分析して改善する。
ユーザージャーニーUser Journey
上級ユーザーがサービスを認知してから継続利用するまでの時系列での体験と感情を可視化したもの。認知→検討→購入→利用→継続のフェーズで分析する。
⑤
UIコンポーネントUI Components
画面を構成する再利用可能な部品。名前を知ると指示が正確になる。
ボタンButton
基礎アクションを起こす最も基本的な UI 部品。Primary（主要アクション）・Secondary（副次）・Destructive（削除など破壊的操作）に種類を分けて設計する。
CTAボタンCall to Action Button
重要「今すぐ購入」「無料で始める」など特定のコンバージョンを促す主要ボタン。色・サイズ・コピーの組み合わせでクリック率が大きく変わる。LP で最重要の UI 要素。
入力フォームInput Form
基礎ユーザーがデータを入力するための UI。ラベル・プレースホルダー・バリデーション・エラーメッセージがセットで設計される。入力欄の数を最小限にすることが離脱防止に直結する。
モーダルModal
基礎背景を暗くして前面に表示するポップアップ。確認ダイアログ・フォーム・画像拡大などに使う。モーダルを閉じるまで背後のコンテンツを操作できない（ブロッキング）特性を持つ。
ドロップダウンDropdown
基礎クリックすると選択肢が下に展開されるメニュー。セレクトボックスとの違いは自由なデザインが可能なこと。選択肢が多い場合は検索機能付きにすると使いやすい。
カードUICard UI
基礎情報を矩形のコンテナにまとめたコンポーネント。商品・記事・ユーザーなど「1つのエンティティ」を表示するのに適している。グリッドレイアウトとの相性が良い。
ナビゲーションバーNavigation Bar
基礎ページ上部に固定表示されることが多い主要なリンクやアクションを並べたバー。スクロールしても常に見える sticky ヘッダーにするのが現代の標準設計。
サイドバーSidebar
基礎画面の左右に配置される補助ナビゲーション・フィルター・情報表示エリア。管理画面・ダッシュボードでの主要ナビ手段。モバイルでは「ドロワー」として引き出し式に変化する。
スクロールバーScrollbar
基礎スクロール可能なエリアの端に表示される位置インジケーター兼操作ハンドル。縦スクロールと横スクロールがある。CSSでスタイルをカスタマイズしたり、特定エリアのみに表示したりする設計がよく使われる。
アイコンIcon
基礎操作や概念を小さな絵記号で表したUI要素。ゴミ箱=削除、家=ホームなど直感的な意味を持つ。テキストだけより視認性が上がるが、意味が伝わらないアイコン単体の使用はアクセシビリティを下げるため、aria-labelや補助テキストとセットで使う。
タブTabs
基礎複数のコンテンツを切り替えて表示するナビゲーション。「概要 / 詳細 / レビュー」のように同一エリアで切り替えられる。ページ遷移なしで情報を整理でき、画面の縦幅を節約できるのが利点。
⑥
状態設計State Design
ここを丁寧に設計するだけでプロ品質になる。抜けがちな重要ポイント。
ローディング状態Loading State
必須データ取得・処理中であることをユーザーに伝えるUI。スピナー・プログレスバー・スケルトンUIなどがある。何も表示しないと「壊れた？」と思われるため必ず設計する。
空状態（エンプティ）Empty State
重要データが存在しないときの表示。リスト0件・通知なし・初回利用時など。「まだ何もありません＋次に取るべきアクション」のセットで設計する。放置するとユーザーが迷子になる。
エラー状態Error State
必須操作が失敗したときの表示。何が起きたか・なぜ起きたか・どうすればいいかの3つを伝える。「エラーが発生しました」だけでは不親切。
成功状態Success State
必須操作が完了したことをユーザーに伝えるUI。トースト通知・成功アイコン・確認ページなどで表現する。「送信できたのか？」という不安を即時に解消することが重要。
無効状態Disabled State
重要操作できないことを示す状態。ボタンがグレーアウトされるなど。なぜ無効なのかをユーザーが理解できるようにするのが丁寧な設計。ただ灰色にするだけでは不親切。
スケルトンUISkeleton UI
トレンドコンテンツが読み込まれる前にコンテンツの形だけを灰色のブロックで表示するローディング手法。スピナーより体感速度が速く感じられ、レイアウトシフトを防ぐ。
フォールバック表示Fallback UI
重要エラーや例外時に代替コンテンツを表示すること。画像が読み込めないときのアイコン・コンポーネントがクラッシュしたときのエラー境界など。ユーザーを白画面にさらさないための設計。
ホバー / フォーカス状態Hover / Focus State
基礎マウスオーバー時（hover）とキーボードフォーカス時（focus）の見た目の変化。操作可能であることを示す重要なフィードバック。フォーカスリングを非表示にするとアクセシビリティが著しく低下する。
⑦
インタラクションInteraction Design
操作に対する応答の設計。動きがあるだけで品質感が大きく変わる。
アニメーションAnimation
重要UI要素が時間をかけて変化すること。目的のないアニメーションは邪魔になる。状態変化を伝える・視線を誘導する・操作の確認を示すなど意味を持たせて使う。
トランジションTransition
基礎ある状態から別の状態へ滑らかに変化すること。CSS の `transition` プロパティで実装。色・サイズ・透明度の変化に使う。0.2〜0.3秒が自然な速さの目安。
マイクロインタラクションMicro Interaction
重要ボタンを押した瞬間に小さく動く・いいねのハートが弾む・スイッチがぷるんと切り替わるなど、小さな操作に応答する細かなアニメーション。これだけでアプリの品質感が大きく上がる。
フィードバック表示Feedback
必須ユーザーの操作に対して「反応した」ことを即座に伝える視覚・音・振動などの表現。フィードバックがないと「反応している？」と不安になる。ボタンのクリックリップルが典型例。
スクロール挙動Scroll Behavior
重要スクロールに連動したUI変化の設計。パララックス・スティッキーヘッダー・スクロールアニメーション（要素が順番に現れる）など。過度なスクロール演出はモバイルで酔いやすいため注意が必要。
ジェスチャー操作Gesture Interaction
モバイルスワイプ・ピンチ・ロングプレスなどタッチデバイスの操作形式。スワイプで削除・引っ張って更新（プルトゥリフレッシュ）などがモバイルUIの標準パターン。
⑧
UIテキスト（コピー）UI Writing
文言の質でUXが変わる。見た目と同じくらいテキストの設計は重要。
マイクロコピーMicrocopy
重要UI 上の小さなテキスト（ボタンラベル・エラー文・補助テキストなど）の総称。「送信する」vs「今すぐ申し込む」のように文言一つでコンバージョン率が変わる。
プレースホルダーPlaceholder
基礎入力欄に薄く表示される入力例や説明テキスト。入力すると消える。ラベルの代わりに使うと入力後に何を入れる欄かわからなくなるため、ラベルは別に用意するのが正しい設計。
バリデーションメッセージValidation Message
必須入力値が条件を満たさないときに表示するリアルタイムのフィードバック。「8文字以上で入力してください」のように具体的に何が問題かを示す。「エラーです」だけでは不十分。
エラーメッセージError Message
必須操作失敗時のメッセージ。①何が起きたか ②なぜ起きたか ③どうすればいいかの3点を含めるのが理想。「エラーが発生しました」だけでは問題が解決できない。
ツールチップTooltip
基礎アイコンや要素にカーソルを重ねると表示される短い補足説明。意味がわかりにくいアイコンボタンや、省略されたテキストの補足に使う。モバイルではタップ操作に注意。
CTA文言CTA Copy
重要CTAボタンに書くテキスト。動詞から始める・具体的・ベネフィットを含むのが原則。「送信」より「無料で資料を受け取る」の方が伝わる。A/Bテストで改善していく。
⑨
AI・次世代UIAI & Next-gen UI
AIが変えるUIの未来。今から知っておくべき設計の新概念。
パーソナライズUIPersonalized UI
AIユーザーの行動・属性・好みに応じてコンテンツやレイアウトが変化するUI。Netflixのレコメンド・Amazonの「おすすめ」が代表例。AIの精度が上がるほど体験の質が向上する。
動的UIDynamic UI
AI静的なレイアウトではなく、データや条件に応じてリアルタイムに変化するUI。AIが状況を判断して表示するボタン・ウィジェット・コンテンツを自動で切り替える。
AIアシスタントUIAI Assistant UI
トレンドChatGPT のようなテキスト入力で AI が応答するインターフェース。従来のメニュー操作に代わる新しい操作パラダイム。入力欄・ストリーミング表示・会話履歴の設計が重要。
会話型UIConversational UI
トレンドチャットやボイスで自然言語で操作できるUI。チャットボット・Siri・AI 検索がこれにあたる。複雑なフォームをなくしてユーザーの言葉でタスクを完結させる。
コンテキスト認識Context Awareness
AIユーザーの現在地・時間帯・過去の行動・デバイスなどの文脈を理解して最適な情報・操作を提示する能力。「昼食時間にレストラン検索が上位に出る」などが例。
自動最適化UIAuto-optimizing UI
未来A/Bテストを自動化し、AIがリアルタイムでレイアウトやコピーを最適化するUI。特定のユーザーセグメントに最も効果的な見た目を自動で選択し続ける。
⑩
開発・設計視点Dev & Architecture
エンジニアとの連携で出てくる用語。知っていると議論がスムーズになる。
コンポーネント設計Component Design
基礎UIを再利用可能な部品（コンポーネント）に分割して設計・実装すること。ボタン・カード・フォームなどを共通化することで、修正が1箇所で全体に反映される。
デザイントークンDesign Token
重要色・フォントサイズ・余白・角丸などのデザインの値を名前付きで一元管理したもの。`--color-primary: #2563eb` のような CSS 変数がその例。Figma と開発コードを同期するときの架け橋になる。
状態管理State Management
開発UI が持つデータ（状態）の管理方法。「ログイン中か」「カートの中身は何か」「モーダルは開いているか」などがすべて「状態」。Redux・Zustand・React Context などで管理する。
API連携UIAPI-driven UI
開発バックエンドのAPIからデータを取得して動的に描画するUI。データ取得中・成功・エラーの各状態を設計する必要がある。React Query・SWR などで実装することが多い。
パフォーマンス最適化Performance Optimization
重要ページの表示速度を改善すること。LCP（最大コンテンツ描画）・FID（入力遅延）・CLS（レイアウトシフト）がGoogleのCore Web Vitalsの指標。遅いサイトはSEOにも影響する。
拡張性 / 保守性Scalability / Maintainability
設計拡張性は機能追加が容易な設計、保守性はバグ修正・改修がしやすい設計のこと。コンポーネント化・デザイントークンの整備・命名規則の統一がその実現手段になる。