初心者向けルート

このルートを読むべき人

• UX設計を何から学べばよいか分からない初心者
• UIは触っているが、リサーチから設計までの流れに自信がない人
• 独学で学んでいて、知識を体系的に整理したい人

学習時間の目安

既存記事を読むだけであれば比較的短時間で進められますが、学習記事を見ながら自分でも整理したり、簡単に手を動かしたりすると理解が深まりやすくなります。

この順番で学ぶ理由

UX設計は、いきなり画面を作り始めるよりも、ユーザー理解 → 構造化 → 具体化 → 検証 → 仕上げの順番で考えたほうが、設計の質が安定します。 このルートでは、まずUXの考え方と全体像を押さえ、そのあとでユーザー理解を深め、ペルソナやジャーニーで課題を構造化し、ワイヤーフレームやプロトタイプで形にしていきます。 最後にテスト結果を反映し、仕様書やハイファイデザインとして仕上げるところまでを学びます。 順番通りに進めることで、各工程が前の工程を土台にして成り立っていることを理解しやすくなります。

学ぶ順序

1. UXの定義・目的を押さえる
2. ユーザーリサーチとインタビュー
3. ペルソナ・ユーザーストーリー作成
4. カスタマージャーニー設計
5. ワイヤーフレームの作り方
6. インタラクション・プロトタイプの作り方
7. ユーザーテストとフィードバック
8. デザイン仕様書とハイファイデザインのまとめ方

読み終えるとできること

• UXとUIの違いを理解し、体験設計の目的を説明できる
• 課題に対して、いきなり画面を作るのではなく、ユーザー理解から順に考えられる
• ペルソナ、ユーザーストーリー、ジャーニー、ワイヤーフレーム、プロトタイプの役割を整理できる
• テスト結果をもとに改善を考え、設計へ反映する視点を持てる
• レビューや説明の場で、「なぜこの設計なのか」を言語化しやすくなる

ステップ一覧

1. 1

   UXの定義・目的を押さえる

   参照記事あり

   40〜60分

   Step 1

   学ぶこと

   UXとは何か、UIとの違いは何か、体験設計がなぜ必要なのかという全体像をつかみます。

   なぜこの段階で読むのか

   最初に全体の考え方を理解しておかないと、その後のリサーチや設計が「画面を整える作業」になりやすいためです。

   読み終えるとどうなるか

   見た目を作ることと、体験を設計することの違いを理解し、これから学ぶ各工程の意味をつかみやすくなります。

   成果物

   UXとUIの違い、体験設計の目的を自分の言葉で整理したメモ

   主記事

   UIデザイン完全ガイド｜原則・UX心理・UIコンポーネントを体系化

   ブログ

   補助記事

   • UX心理学119の法則｜UI/UXデザインに使える心理学・認知バイアス完全ガイド
     参照

     メイン記事を把握した後に深入りする前提知識

2. 2

   ユーザーリサーチとインタビュー

   参照記事あり

   45〜75分

   Step 2

   学ぶこと

   ユーザーを理解するための基本的な調査手法と、インタビューで「なぜ」を引き出す考え方を学びます。

   なぜこの段階で読むのか

   ペルソナやジャーニーは、調査なしで作ると想像や思い込みに引っ張られやすくなるためです。まずは事実を集める視点を身につけます。

   読み終えるとどうなるか

   ユーザー理解の土台となる情報をどのように集めるべきかが分かり、以降の設計に根拠を持たせやすくなります。

   成果物

   調査観点の整理メモ、またはインタビュー質問案

   主記事

   UXリサーチ完全ガイド｜定性・定量×行動・態度の4象限で手法を体系化

   ブログ

   補助記事

   • ユーザーインタビュー完全ガイド｜「なぜ」を引き出す質問設計と実践技法
     参照

     概要を押さえた後に補強として読む実践技法

3. 3

   ペルソナ・ユーザーストーリー作成

   学習記事あり

   30〜60分

   Step 3

   学ぶこと

   集めた情報をもとに、誰のために、どのような状況で、どんな価値を届けるのかを整理する方法を学びます。

   なぜこの段階で読むのか

   調査結果をそのまま眺めているだけでは設計に活かしにくいためです。ユーザー像と利用文脈を整理し、設計に使える形に変換します。Step 2で集めた調査結果を、設計に使えるユーザー像へ整理する段階です。

   読み終えるとどうなるか

   ユーザー課題を設計の視点で捉え直し、誰に向けて何を作るのかを言語化しやすくなります。

   成果物

   簡易ペルソナとユーザーストーリー

   主記事

   ペルソナとユーザーストーリーの作り方

   学習記事
4. 4

   カスタマージャーニー設計

   学習記事あり

   45〜75分

   Step 4

   学ぶこと

   ユーザーが目的を達成するまでの流れを可視化し、行動、感情、課題、機会を整理する方法を学びます。

   なぜこの段階で読むのか

   ペルソナだけではユーザーの動きや文脈は見えにくく、どの接点で何が問題になるのかも整理しづらいためです。Step 3で整理したユーザー像をもとに、体験の流れと課題の発生箇所を可視化する段階です。

   読み終えるとどうなるか

   ユーザーがどこで迷い、どこで期待し、どこで離脱しやすいかを流れで捉えられるようになります。

   成果物

   簡易カスタマージャーニー

   主記事

   カスタマージャーニー設計の作り方

   学習記事
5. 5

   ワイヤーフレームの作成

   学習記事あり

   45〜90分

   Step 5

   学ぶこと

   整理した情報を画面構成へ落とし込み、情報の優先順位や導線を考えながらワイヤーフレームを作る方法を学びます。

   なぜこの段階で読むのか

   ジャーニーや課題整理を経たあとで画面を構成することで、見た目先行ではなく目的に沿ったUI設計がしやすくなるためです。Step 4で見えた行動導線や課題を、画面構成へ落とし込む段階です。

   読み終えるとどうなるか

   必要な情報や操作を整理しながら、構造としてのUIを組み立てる視点が身につきます。

   成果物

   画面構成ラフ、またはワイヤーフレーム案

   主記事

   ワイヤーフレームの作り方

   学習記事
6. 6

   インタラクション・プロトタイプ作成

   学習記事あり

   45〜90分

   Step 6

   学ぶこと

   ワイヤーフレームをもとに、画面遷移や操作感を確認できるプロトタイプへ発展させる考え方を学びます。

   なぜこの段階で読むのか

   静的な画面だけでは分からない操作体験や導線の自然さを、動きのある形で検証する必要があるためです。Step 5で整理した画面構成を、実際の操作体験として検証できる形へ進める段階です。

   読み終えるとどうなるか

   単なる画面の並びではなく、ユーザーの操作体験として設計を考える意識が持てるようになります。

   成果物

   遷移確認用の簡易プロトタイプ

   主記事

   インタラクション・プロトタイプの作り方

   学習記事
7. 7

   ユーザーテストとフィードバック

   既存記事で学べる

   40〜70分

   Step 7

   学ぶこと

   実際の利用を観察し、どこでつまずくのか、どんな改善余地があるのかを見つけるテストの考え方を学びます。

   なぜこの段階で読むのか

   設計したものは、作って終わりではなく、検証して改善することで初めて体験の質が上がるためです。

   読み終えるとどうなるか

   思い込みではなく観察と反応をもとに改善を考える姿勢が身につき、設計の精度を高めやすくなります。

   成果物

   テスト結果のメモと改善課題一覧

   主記事

   ユーザビリティテスト完全ガイド｜5人で85%の問題を発見する実践手法

   ブログ

   補助記事

   • ユーザビリティテスト
     参照

     リサーチガイドライン内の関連章として補強

8. 8

   デザイン仕様書・ハイファイデザイン完成

   学習記事あり

   45〜90分

   Step 8

   学ぶこと

   テスト結果を反映しながら、完成形としてのデザインを整え、実装や共有に耐えられる仕様へ落とし込む考え方を学びます。

   なぜこの段階で読むのか

   仕様やハイファイデザインは、ユーザー理解と検証を踏まえた上でまとめることで、見た目だけで終わらない設計成果物になるためです。

   読み終えるとどうなるか

   デザインを仕上げるだけでなく、他者に伝わり、実装へつなげやすい状態まで整理する視点が身につきます。

   成果物

   ハイファイデザインと仕様整理メモ

   主記事

   デザイン仕様書とハイファイデザインのまとめ方

   学習記事

   補助記事

   • デザインと実装が壊れない設計
     参照

     仕様書と実装の橋渡しとして参照するUIデザイン原則

   Step7のテスト結果を反映し、仕様書として仕上げる想定。