UX/UIデザイン用語集⑤｜UIの構成要素と表現

この用語集は以下①〜⑧の記事で構成されています。UX/UIデザインの基本概念から設計フレーム、調査手法、UI構成要素、ドキュメント、チーム体制、開発連携に至るまで、全体を俯瞰できる用語を選定して整理しています。

様々な企業や職種が関わるプロダクト開発の現場において、UX/UIデザインへの共通理解を深め、意思決定や進行の遅れを防ぐお手伝いになれば幸いです。

＜UX/UIデザイン用語集へのリンク＞

コンポーネント設計

UIをボタンやカードなどの「部品」として整理し、何度も使えるように組み立てていくデザインの考え方。
画面づくりが効率的になり、見た目も揃えやすくなる。

コンポーネント設計

UIを小さな部品に分け組み立てる

コンポーネント設計とは、Webやアプリの画面を「部品の組み合わせ」として考える方法です。例えば、ボタンやフォームなどをひとつひとつ整理しておくと、同じ部品をいろいろな場所でくり返し使えるようになります。これによって、画面の見た目をそろえたり、変更に強くしたりすることができます。

また、デザインツール（Figmaなど）で作ったUIをもとに、React（リアクト）やVue（ヴュー）といった開発の道具を使って、実際にWeb上で動くように組み込まれます。

最近では、色や文字サイズなどのルールをまとめる「デザイントークン」や、AIで作業をサポートする仕組みも使われるようになりました。

使われる場面

デザイナーと開発者がチームで制作を進める際に部品を共通で使うために活用されます。また、アプリやWebサービスの画面数が多い場合に統一感を持たせたり、新しい画面を追加する際に既存の部品を利用して効率よく作成したりする場面でも役立ちます。

POINT

・似たUIはひとつの部品にまとめておくと便利
・名前は「使い道」や「場所」がわかるように決める
・今後、変更になっても使いやすいようにしておく

レスポンシブデザイン

ユーザーの閲覧環境（画面サイズやデバイス）に応じてレイアウトやデザインを最適化するWeb設計手法。

レスポンシブデザイン

あらゆるデバイスで快適な閲覧体験を

レスポンシブデザインは、PC、タブレット、スマートフォンなど異なるデバイスに対して、同じHTML構造を基にスタイル（CSS）を柔軟に変化させることで、最適なレイアウトを実現します。

画面幅によってレイアウトの切り替えを行う「メディアクエリ」を活用し、ユーザーがどのデバイスからアクセスしてもストレスのない操作体験を提供できます。この手法は、複数のデバイス向けに別々のサイトを構築する必要がなく、メンテナンス性やSEOの観点からも有利です。

よくある誤解

「レスポンシブ対応＝単に画面サイズを縮めるだけ」と誤解されがちですが、実際は表示要素の再配置や非表示化、フォントサイズの調整など、ユーザビリティを高める設計全般を含みます。

POINT

・モバイルファーストの設計で始める
・メディアクエリのブレークポイントは実機テストで調整する
・画像やインタラクティブ要素も可変対応する

ナビゲーション

ユーザーがウェブサイトやアプリ内で目的に応じて迷わず移動できるよう設計された一連のガイド。

ナビゲーション

ユーザーの行動をサポート

ナビゲーションは、ユーザーが必要な情報や機能にスムーズにアクセスする道筋をデザインします。代表的な形態には以下のものがあります。

・グローバルナビゲーション：サイト全体の主要セクションへアクセス（例：ヘッダーのメニュー）
・ローカルナビゲーション：現在のセクション内の移動を補助（例：サイドバー）
・パンくずリスト：ユーザーの現在地と階層を可視化

よくある誤解

「ナビゲーションは目立たせれば良い」という考えは誤りです。UIは自然に利用され、目立ちすぎず利用フローを阻害しないバランスが求められます。過剰にデザインを主張するとユーザーの導線が乱れることがあります。

POINT

・ユーザーが達成したいタスクに基づいて構造を逆算して設計する
・デバイス・利用シーンに適切なナビゲーションパターン選択
・UXライティング、認知負荷を減らすラベル、ナビ配置の一貫性

ボタン・CTA

ボタン・CTA（Call to Action）は、ユーザーに具体的な行動を促すクリック可能なインターフェース要素。
視覚的にわかりやすく配置され、コンバージョン（登録・購入など）誘導の要となる。

ボタン・CTA

ユーザーへ最後の一押し

CTAは「何をすればいいか」を明確に伝えるUI要素で、配置・色・ラベル文言・サイズがユーザー体験に大きな影響を与えます。以下の点が重要です。

・サイズ・配置：目立つ大きさ。スクロールせずに見える位置（ファーストビュー上部などに配置）
・色・コントラスト：背景との明確なコントラスト（WCAG 2.1 AA基準に準拠。アクセシビリティの担保）
・文言：具体的かつ行動を指示する動詞を使用（「今すぐ登録」「無料トライアルを開始」など）
・余白：ボタンまわりに余白を十分に設け、他要素と分離

よくある誤解

「目立たせればクリックされる」という考えは誤り。色や装飾で際立たせすぎると「広告っぽさ」や警戒を招く可能性があります。ユーザーの文脈や心理を無視したデザインは、かえって逆効果になります。

POINT

・CTAは動詞＋結果が理想（例：無料で始める・資料ダウンロード）
・主要なユーザー行動の終点や判断ポイント戦略的に配置
・配色はブランド＋アクセシビリティへ配慮。コントラストを確保

フォームUI

ユーザーが情報入力し送信する際に使う入力要素（テキストフィールド、チェックボックス、ラジオボタン、ドロップダウン、送信ボタン等）を組み合わせたUI。UXに直結するため使いやすさに配慮が必要。

フォームUI

入力体験を左右するUI

フォームUIは、情報収集の場面（会員登録、購入手続き、アンケート等）で不可欠です。UX/UI業界の最新ベストプラクティスに基づき、以下の点が重要です。

・必要最小限の項目：入力完了率を高めるため、必須項目に絞る
・一貫した単一列レイアウト：視線移動を減らしモバイル対応も容易
・インラインバリデーションと即時フィードバック：リアルタイムでのエラー通知や成功マーク表示がUXを向上
・論理的グルーピングと情報アーキテクチャ：関連項目をまとめ「易しい→難しい」順に配置
・アクセシビリティ対応：誰でも使いやすく

使われる場面

長いフォームは一画面にまとめず、複数のステップに分割すると良いです。イギリス政府のガイドラインでは「1ページ1質問」の形式が推奨されており、進捗バーを表示することでユーザーは今どの段階にいるのか把握しやすくなります 。

POINT

・本当に必要な入力項目に絞って入力負荷を軽減する
・関連項目はカテゴリー毎にまとめてわかりやすく並べる
・即時に明確なエラーメッセージのバリデーションで伝える

モーダル

ユーザーの操作を一時的に制限し、特定タスクに集中させるために表示されるオーバーレイ型のUIコンポーネント。
画面背後をグレーアウトし、他の操作をブロックする。

モーダル

他のフローを一時停止するウィンドウ

モーダル（モーダルウィンドウ）は、アプリやWebの主要画面の上に重ねられ、閉じるまでユーザーがそのモーダル内の操作を完了または明示的に中断しない限り、背後のコンテンツにはアクセスできません。主に以下の目的に使われます。

・重大な決定（例：削除の確認）
・追加入力が必要なフォーム（例：詳細編集）
・重要通知やアラート（例：緊急情報）

一方、モーダルの過剰使用はユーザーの継続的なフローを阻害し、混乱やストレスを招く可能性があるため慎重な設計が必要です

よくある誤解

よく「モーダル＝ただのポップアップ」と混同されますが、モーダルは他の操作を止めて強制的に選択を求める状態（モーダル状態）を指します。単なる通知や情報提示でOKしたら閉じるだけのものは別のUIパターンになります。

POINT

・モーダルが本当に必要な場面に限定して使う
・迷わず閉じられる設計（×ボタン、Escキー、背景クリック）
・操作する前後のフローへの復帰も含めて設計する

マイクロインタラクション

マイクロインタラクションは、特定の操作（トリガー）に対して即座に応答する小さなUX演出。
ユーザー行動に視覚・音・触覚などでフィードバックを返す仕組み。

マイクロインタラクション

ユーザーの安心感や操作理解を支える

マイクロインタラクションは、ユーザーとシステム間の短く明確なやりとりであり、主に以下の構成要素から成ります。

・Trigger（トリガー）：ユーザー操作やシステムイベントで開始
・Rule（ルール）：操作後に起こる動作や遷移を定義
・Feedback（フィードバック）：視覚・聴覚・触覚で反応を返す
・Loops & Modes：繰り返しや状態維持の定義

具体的な目的は以下ようなものです。

・システム状態・進行状況を明示（例：プログレスバー）
・ユーザー操作に確実な応答を示す（例：ボタンを押した色変化）
・注意誘導や次の行動喚起（例：ホバーハイライト）
・心理的な安心感や感情価値の創出（例：エラー時のアニメ）

これらは単なる装飾ではなく、わかりやすさや気持ちよさの要素です。

よくある誤解

「装飾的な演出」と誤解されやすいマイクロインタラクションですが、本質は「意味を伝えるため」のフィードバックです。無目的なアニメーションはUXを損ねる原因にもなり得ます。

POINT

・ユーザー操作後、300〜500ms（0.3秒〜0.5秒）以内に反応を返す
・目的に沿うシンプルな演出、ユーザーが理解しやすい設計にする
・過剰な動きは不要。情報伝達が目的であることを最優先にする

UXライティング

ユーザーインターフェース上で使用される言葉（マイクロコピー）を設計し、ユーザー体験を円滑にするライティング手法。

UXライティング

言葉で導くユーザー体験

UXライティングは、ボタンラベル、エラーメッセージ、フォームの案内文など、サービス上の「言葉」を通じてユーザーの行動を支援します。明確で親しみやすく、かつプロダクトのトーン＆マナーに沿った表現が求められます。主な特徴は以下の通りです。

・ユーザーの文脈や感情に配慮した設計
・意図を誤解させない簡潔な表現
・行動を促す自然な誘導

UIの見た目だけでなく、言葉の選び方によってもユーザー体験は大きく左右されます。

よくある誤解

「ただ短く書けばいい」と思われがちですが、UXライティングは単なる省略ではありません。ユーザーの行動や感情を理解したうえで、最適な言葉を選ぶ戦略的なプロセスです。

POINT

・常にユーザー目線で、疑問や不安に先回りする
・曖昧な表現は避け、行動の意図が伝わるように書く
・プロダクトの声（ブランドトーン）を意識して統一感を保つ

その他のUX/UIデザイン用語集へのリンク

以下の記事でもUX/UIについて紹介しています。興味を持っていただけましたらぜひご覧ください。

UIのTips集については以下よりダウンロードください。

この用語集をPDF版として見たい方は以下よりダウンロードください。

最後に

本シリーズが、みなさまのプロジェクトにおける「共通言語づくり」の一助となれば幸いです。
UX/UIデザインを「難解な専門領域」ではなく、誰もがよりよいプロダクトづくりに参加するための「思考の土台」と捉え、気になる用語や概念があれば、ぜひ実務に照らして深掘りしてみてください。