UX/UIデザイン用語集④｜設計補助フレーム

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

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

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

ペルソナ

UXデザインやマーケティングにおいてターゲット層を代表する架空の人物像。
年齢、職業、行動、価値観などを明確に設定することで、ユーザー理解を深め、ユーザー中心の設計判断を支える役割を果たす。

ペルソナ

ユーザー理解のための具体的なモデル

ペルソナは、実際のユーザー調査データに基づいて作成される、典型的なユーザー像です。制作チームが「誰のためにデザインするのか」を明確にし、共通認識を持つための軸となります。作成時には以下のような情報を整理します。

・デモグラフィック情報（名前、年齢、性別、職業など）
・ライフスタイル、価値観、スキル、デジタルリテラシー
・プロダクトに対する目標や、解決したい課題
・行動パターン、モチベーション、フラストレーションの傾向

これらを文章と図表でまとめたペルソナは、デザインの判断における具体的な基準となり、機能設計や優先順位付けにも影響を与えます。

よくある誤解

ペルソナは、たとえ架空の人物であっても、実際のインタビューや観察などのデータに基づき構築します。現実のユーザー像を反映しない「理想の顧客」を描くと、プロダクトの方向性が現実と乖離します。あくまで、データに裏打ちされた「代表者」として扱いましょう。

POINT

・ユーザー調査を必ずペルソナ作成の土台とする
・チーム内で共有しやすいフォーマットで展開する
・製品やユーザーが変化するにつれ、定期的に見直しを行う

ユーザーゴール

ユーザーが製品やサービスを利用することで「最終的に達成したい状態」や「満たしたい目的」を指す。
UX設計における意思決定の基準となる重要な概念。

ユーザーゴール

体験設計の判断軸となる「目的」

ユーザーゴールは、「この機能は本当に必要か？」「このUIはユーザーの目的達成に寄与しているか？」といった判断を行うための設計の軸です。

ゴールは単なる操作（タスク）ではなく、何を解決したいのかどんな状態になりたいのかといったユーザー視点の成果を表します。

たとえば、以下のような形で定義します。
・「商品を買う」ではなく「安心して納得感のある選択をしたい」
・「登録する」ではなく「すぐに使い始められる状態になりたい」

使われる場面

例えば、体験全体の方向性検討時、ユーザーフロー設計の前段階、機能の優先順位付けや要件整理、UI改善時に「何をもって成功とするか」を判断する際などに、ユーザーゴールを明確にしておくことで、作り手都合になるのを防ぎます。

POINT

・「操作」ではなく「達成したい状態」で表現する
・チーム内で言語化・共有し、判断基準として使う
・1つの体験・フローにつき1ゴールを基本とする

カスタマージャーニーマップ

顧客が製品やサービスと接触してから購入・利用・継続・推奨に至るまでの行動、思考、感情を時間軸で可視化する図。
ユーザー視点の理解とUX/CXの改善に欠かせないツール。

カスタマージャーニーマップ

顧客体験を時系列で可視化

カスタマージャーニーマップは、顧客が「認知 → 検討 → 購入 → オンボーディング → 継続・ロイヤルティ」に至る一連のプロセスを図式化したものです。主な構成要素は以下の通りです。

・ペルソナ：対象顧客を具体化した人物像
・フェーズ：ユーザーの態度変容プロセス
（例：知る→興味→検討→購入→継続）
・タッチポイント＆チャネル：Web、実店舗、サポート等の接点
・行動・思考・感情：各フェーズのユーザーの行動と何を感じているか
・課題・機会：改善すべき摩擦点と新たな施策のヒント

このツールを通じて、ユーザー中心の視点を共有し、UX設計やCX戦略の起点として活用します。

よくある誤解

「カスタマージャーニー」と「ユーザージャーニー」はしばしば同義とされますが、カスタマージャーニーは購買・継続・感想など顧客全体のライフサイクルを扱い、ユーザージャーニーは特定タスク（例：アプリ登録など）における体験にフォーカスすることが多いです。

POINT

・ペルソナとシナリオは1つに絞るとブレずに設計しやすい
・数字（解析データ）と声（インタビュー）をバランスよく含める
・1人で作らずいろんな役割のメンバーで共有して視点を広げる

ユーザーフロー

ユーザーがアプリやWebサイト上で、特定の目標を達成するまでに辿る操作ステップや画面遷移を、開始から終了まで矢印や図形で可視化した図。
UX設計で最初に描く、タスク中心の導線設計図となる。

ユーザーフロー

目的達成の道筋を可視化

ユーザーフローは、ユーザーがアプリやWebサイトで目的（例：購入、登録、情報取得など）を達成するために通る一連の操作や選択肢を、視覚的に表現した図のことです。

通常、開始地点（エントリーポイント）、各ステップ、意思決定の分岐（複数オプション）、終了地点から構成されます 。この図を設計段階で描くことで、無駄な遷移や分かりにくい流れを事前に発見でき、ユーザビリティ向上や開発効率化、コンバージョン率改善につながります 。

よくある誤解

「ユーザージャーニー」と混同されやすく、ジャーニーは感情や複数チャネルにまたがる体験全体を扱いますが、ユーザーフローは画面内での操作パスと手続きに焦点を当てて描く点が異なります。

POINT

・必ず開始地点・終了地点・分岐（意思決定ポイント）を明示する
・タスクごとに1つのフローに絞り、1フロー1目的で設計する
・ラフスケッチから始め、チームレビューや改善しながら精緻化する

情報設計（Information Architecture）

ユーザーがWebサイトやアプリなどの情報空間で必要な情報に直感的かつスムーズにアクセスできるよう、情報の構造（階層・分類）、ナビゲーション、ラベリングを体系的に設計・整理すること。

情報設計（Information Architecture）

ユーザーを想定して情報を構造化

情報設計は、ユーザーにとっての情報の「見つけやすさ（findability）」と「理解しやすさ（understandability）」を重視し、情報構造や名称、表示ルールを一貫して整える設計プロセスです。主な構成要素は以下の通りです。

・構造：カテゴリーや階層の設計
・ラベリング：メニューやボタンなどの名称設定
・ナビゲーション：サイトマップ・検索・パンくずリストなど

UX設計の初期に行われ、ユーザー調査をベースに設計・改善します。情報過多時代のデジタル体験において、認知負荷を軽減し、目的達成を支援する役割を果たします。

使われる場面

コンテンツ量が多いWebサービスやアプリの新規立ち上げ時や、サイトリニューアル時の構成の見直しの際に実施します。ユーザビリティテストに基づくナビゲーション機能や検索機能の改善、中長期を通して増える記事コンテンツなどの設計にも役立ちます。

POINT

・ユーザーが思考する順序で情報を構造化する
・表記やカテゴリ名はユーザー視点の“ことば”で統一する
・サイトマップやワイヤーフレームで視覚的に検証・共有する

ワイヤーフレーム

WebサイトやアプリなどのUI設計において、線やブロックで構成された2次元の“骨組み”図。
画面構成や機能配置を表し、ビジュアルデザインの基礎となる設計段階のドキュメント。

ワイヤーフレーム

UI構造の可視化を目的とした設計図

ワイヤーフレームは、色彩や装飾を排したモノクロまたはグレーの構造図で、ユーザーの操作フロー、情報の優先順位、ナビゲーション構造を視覚的に表現します。表層的なビジュアル表現を敢えてなくすことでUIの構造に集中して検討しやすくします。

初期段階では紙やホワイトボードによる手書きを用いることも多く、その後Figma、Adobe XDなどのデジタルツールで精度を上げていきます。

この工程により、ステークホルダー間でUI設計の認識共有が進み、開発や詳細デザインに進む前の重要な共通理解基盤となります。

使われる場面

例えば、新機能を追加する際に、まずはワイヤーフレームを作って「この情報は画面上部に置くべきか」「ユーザーがどの順番で操作するか」を低～中精度の構造で共有。その後、ユーザーテストを重ねながら改善し、プロトタイプ → モックアップへ進めていく流れが典型的です。

POINT

・必ず「これは仮の構成」と明言し、視覚デザインとの区別をつける
・まずは低精度（lo-fi）で素早く構造を伝え、改善を効かせる
・機能や情報の意図を伝える注釈やラベルを添えて明確化

プロトタイピング

製品やサービスの仕様が固まりきる前に、試作品を作り、テストと改良を短いサイクルで繰り返すことで、UI・UX設計を洗練させる工程。

プロトタイピング

アイデア検証・共有・改善を高速実施

プロトタイピングは、ワイヤーフレームや紙、クリック可能なモックアップなどで始め、ハイフィデリティ版（完成に近い精度の成果物）へと段階的に進化させます。

これは、アイデアの可視化・ユーザビリティ検証・ステークホルダーとの合意形成に役立ち、エンジニアリングに入る前に課題を発見し修正できるため、開発コストや時間を効果的に削減できます。以下、プロトタイピングの主な種類を紹介します。

・ペーパープロトタイプ：紙や付箋で画面構成を描いた初期スケッチ
・ワイヤーフレーム：構造やレイアウトに特化した低忠実度の設計図
・インタラクティブモックアップ：実際の画面遷移や動きを再現
・コードベース：HTMLなど開発環境の挙動に近い高忠実度

よくある誤解

プロトタイピングは終盤で数回実施すれば良いと思われがちですが、実際には早く、何度も実施し、4〜5回の反復セッションが推奨されます。また最終品と同じレベルでないといけないと錯覚しがちですが、むしろ初期の低品質な状態のテストの方が発見や学びを得やすいです。

POINT

・検証目的を明確にする（例：初期登録に困らないか」など）
・紙→デジタル→コードと忠実度を段階的に引き上げる
・見た目だけでなく使った感覚や行動など「体験」の情報を得る

サービスブループリント

サービス提供の全体像を可視化し、ユーザー体験と裏側の業務プロセスを一体で設計・分析する図解手法。

サービスブループリント

サービスの全体像を可視化

サービスブループリント（Service Blueprint）は、ユーザーが体験するプロセスと、それを支える組織内部の活動やリソースの流れを同時に図式化する手法です。以下のような構造で構成されます。

・顧客の行動：ユーザーが実際に行う操作や体験
・フロントステージ：ユーザーから見えるサービス提供のアクション
・バックステージ：ユーザーには見えないサービス提供の内部作業
・サポートプロセス：さらに後方のシステムや支援的業務
・物理的証拠：ユーザーが接触するモノ（ウェブページ、レシート等）

この図を用いることで、ボトルネックや改善点、役割分担が明確になり、UX向上や業務効率化に役立ちます。

使われる場面

新しいサービスを設計する際の全体フローの構築や、既存サービスの改善点の洗い出しに活用されます。また、サービスに関わるチーム間で共通理解を促進したいときや、ユーザー視点と業務視点を同時に見直したい場面でも役立ちます。

POINT

・実際のユーザー行動を基に、リアルな流れを描く
・関係者が共通認識を持つようワークショップ形式で作成する
・カラーやアイコンの活用で複雑な関係性を直感的に表現する

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

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

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

最後に

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