UXデザインの総合実践
学んだすべてを適用し、リサーチからデザインシステムまで、AIを各ステージで活用して完全なユーザー体験を設計する。
プレミアムコースコンテンツ
このレッスンはプレミアムコースの一部です。Proにアップグレードすると、すべてのプレミアムコースとコンテンツを利用できます。
- すべてのプレミアムコースを利用
- 1,000以上のAIスキルテンプレート付き
- 毎週新しいコンテンツを追加
すべてを統合する
🔄 Quick Recall: 7つのレッスンで、ユーザーリサーチ、ペルソナ構築、ワイヤーフレーム、UXコピー、アクセシビリティ、デザインシステムにAIを活用する方法を学んだ。各スキル単体でも価値がある。しかし本当のパワーはそれらを完全なワークフローに組み合わせることから生まれる。
このキャップストーンでは、ゼロから完全なユーザー体験を設計する。各レッスンがどうつながるか、AIワークフローが数週間の作業を数日に圧縮する過程を体験しよう。
課題:フリーランサー向け請求書アプリの設計
プロダクト: フリーランサー向けのモバイルファースト請求書アプリ 問題: フリーランサーは請求書の作成、支払いの追跡、未収金の管理に何時間も費やす。多くの請求書ツールは経理チームを持つ企業向けで、複数クライアントをジャグリングする個人フリーランサー向けではない。 ターゲットユーザー: 月5〜20件のクライアントに請求する独立フリーランサー(デザイナー、開発者、ライター、コンサルタント) 主な制約: 通勤中にスマホを片手で使えること
各フェーズをAIアシスタントで実際に進めてほしい。
フェーズ1:リサーチとディスカバリー
問題空間を理解することから始める。
演習1:競合ランドスケープ
フリーランサー向けモバイル請求書アプリを設計中。
競合ランドスケープを分析してください。
競合:
- freee(日本市場のクラウド会計)
- Money Forward クラウド請求書
- Misoca(弥生グループ)
- Square 請求書
- PayPal インボイス
各競合について:
1. 主要ターゲットユーザー
2. フリーランサーにとっての強み
3. フリーランサーにとっての弱み
4. 料金体系
5. モバイル体験の質
すべての競合に共通するギャップ、
差別化の最大の機会を特定。
演習2:リサーチクエスチョン
競合分析に基づき、ユーザーリサーチ計画を生成:
1. フリーランサーの請求ワークフローについて
インタビュー質問10問
2. 観察したい行動データは?
3. 問題を定量化するアンケート質問は?
4. 検証が必要な前提は?
フェーズ2:ペルソナ開発
演習3:2つのペルソナを作成
フリーランサー請求書アプリの
ユーザーペルソナを2つ作成:
ペルソナ1:頻繁に請求するフリーランサー
(月15件以上のクライアント)、速さを最重視
ペルソナ2:たまに請求するフリーランサー
(月3〜5件のクライアント)、プロセスのガイダンスが必要
各ペルソナに含める:
- 名前、年齢、職業
- ゴール(請求に何を求めるか)
- フラストレーション(現在のプロセスの何が壊れているか)
- 行動パターン(現在の請求方法)
- アプリを使うシナリオ
- 意思決定要因(現在のソリューションからの切り替え条件)
リアルな日本のフリーランサー体験に基づいて。
フェーズ3:情報アーキテクチャ
演習4:IAを定義
フリーランサー請求書アプリの情報アーキテクチャを設計:
コア機能:
- 請求書の作成・送信
- 支払いステータスの追跡
- クライアントディレクトリの管理
- 収益とレポートの表示
- 支払い方法の設定(銀行振込等)
- 請求書テンプレートとカスタマイズ
- 定期請求書
- 支払いリマインダー
提供してください:
1. アプリナビゲーション構造(モバイル用タブバー)
2. 画面階層
3. コンテンツモデル(データオブジェクトとその関係)
4. 上位3タスクのユーザーフロー
ナビゲーションは最大4〜5つのプライマリ項目。
フェーズ4:ワイヤーフレーム
演習5:ワイヤーフレームコンセプトの生成
請求書アプリの最重要3画面のワイヤーフレームコンセプト:
画面1:ホーム/ダッシュボード
- 両ペルソナが価値を見出す必要あり
- 表示必須:未収金合計、期限超過請求書、最近の活動
- 制約:スマホ片手操作
画面2:請求書作成
- リピートクライアントなら60秒以内で完了
- フィールド:クライアント、明細、金額、期日、備考
- モバイルでの入力を最小化
画面3:請求書詳細/支払いステータス
- 1つの請求書の完全な詳細
- ステータス表示(下書き、送信済み、閲覧済み、支払済み、期限超過)
- アクション:リマインダー送信、支払い済みマーク、編集、複製
各画面に2つの構造アプローチ、コンテンツ階層、
インタラクションパターンを提供。
✅ Quick Check: ここまでで持っているもの:競合分析、2つのペルソナ、情報アーキテクチャ、3つの主要画面のワイヤーフレームコンセプト。各フェーズが次にフィードする。ペルソナがワイヤーフレームに。IAがナビゲーションに。リサーチが機能セットに。AIが各フェーズを加速したが、あなたのデザイン判断がそれらを接続する。
フェーズ5:UXコピー
演習6:主要なUXコピーを書く
フリーランサー請求書アプリのUXコピー。
ボイス:親しみやすく、効率的、自信を構築
(フリーランサーはお金の話に気まずさを感じがち
——アプリが請求をプロフェッショナルで簡単に感じさせる)
以下のコピーを書いてください:
1. ダッシュボード空状態(初回ユーザー)
2. 請求書作成フロー(画面タイトル、フィールドラベル、
送信ボタン、送信後確認メッセージ)
3. 期限超過通知(プッシュ通知、アプリ内バナー、
ワンタップで送れるクライアント向けリマインダー)
4. エラー状態(送信失敗、メール無効、支払い方法未設定)
5. 成功状態(送信完了、入金確認、定期請求設定完了)
フェーズ6:アクセシビリティ監査
演習7:デザインを監査
フリーランサー請求書アプリの
アクセシビリティレビューを実施:
カラー:
- プライマリアクション:#2563EB(青)
- 成功/支払済み:#059669(緑)
- 警告/期限超過:#D97706(琥珀)
- エラー/失敗:#DC2626(赤)
- テキスト:#111827 on #FFFFFF
チェック:
1. 全テキスト/背景のカラーコントラスト
2. ステータス表示の色独立性
3. アイコンベース要素のARIAラベル
4. スワイプジェスチャーの代替手段
5. タッチターゲットサイズ
6. ダッシュボードのスクリーンリーダーフロー
フェーズ7:デザインシステム基盤
演習8:コンポーネントライブラリの定義
フリーランサー請求書アプリの
コアコンポーネントライブラリを定義。
カテゴリ別に整理:
- ファンデーション(トークン、タイポグラフィ、スペーシング)
- ナビゲーション(タブ、ヘッダー)
- 入力(テキストフィールド、ドロップダウン、トグル)
- 表示(カード、バッジ、リスト、チャート)
- フィードバック(アラート、トースト、ローディング)
- アクション(ボタン、FAB、メニュー)
各コンポーネントに:
1. 名前
2. 必要なバリアント
3. プロパティ/設定オプション
4. アクセシビリティ要件
5. 1行の使用ガイドライン
MVP画面を実現するために最初に構築すべき
10コンポーネントを優先順位付け。
振り返り:AIワークフローの効果
このキャップストーンで達成したこと:
| フェーズ | 従来の所要時間 | AI活用の所要時間 |
|---|---|---|
| 競合分析 | 2〜3日 | 30分 |
| ペルソナ開発 | 1〜2日 | 1時間 |
| 情報アーキテクチャ | 1日 | 30分 |
| ワイヤーフレーム探索 | 2〜3日 | 2時間 |
| UXコピー | 1〜2日 | 1時間 |
| アクセシビリティ監査 | 1日 | 30分 |
| デザインシステム基盤 | 2〜3日 | 1時間 |
合計:10〜15日が1〜2日に圧縮。
重要なのは品質が下がっていないこと。同じ作業をしている。時間を使う場所が変わった——リサーチ統合やドキュメント作成の機械的作業ではなく、判断と意思決定に。
構築したもの(あなたのUXツールキット)
このコースで組み立てたAIプロンプトとワークフローのツールキット:
- リサーチ統合 — インタビュー、アンケート、競合データの分析
- ペルソナ構築 — データ駆動ペルソナの作成と維持
- ワイヤーフレーム — 構造オプションとコンポーネント設計の探索
- UXコピー — ボタン、エラー、空状態、マイクロコピーの執筆
- アクセシビリティ — コントラスト、ARIA、キーボード、色独立性の監査
- デザインシステム — コンポーネントのドキュメント化と一貫性の維持
各スキルは再利用可能。最良のプロンプトを保存し、プロダクトに合わせて改善し、AI活用UXワークフローの個人ライブラリを構築しよう。
次のステップ
このコースがメソッドを教えた。マスタリーは実践から来る:
- 今週: このコースのテクニック1つを現在のプロジェクトに適用
- 今月: 最もよく行うUXタスクの完全なプロンプトライブラリを構築
- 今四半期: AI活用ワークフローをチームの標準プラクティスとして確立
- 継続的に: AIツールの進化に合わせてプロンプトを改善——今日機能するものは明日さらに良く機能する
Key Takeaways
- AIはUXのプロセス時間を品質を落とさず圧縮——メカニクスではなく判断に時間を使う
- UXデザインのすべてのフェーズがAIの恩恵を受ける:リサーチ、ペルソナ、ワイヤーフレーム、コピー、アクセシビリティ、システム
- AIにより人間のデザイナーの価値は増大——判断力、共感力、クリエイティブビジョンがこれまで以上に重要
- 繰り返し使うUXタスクの再利用可能なプロンプトライブラリを構築する
- AI出力は必ず実際のユーザーデータとドメイン知識で検証する
- 最初からのアクセシビリティは後付けより安価で効果的
- AIドキュメンテーションで維持されるデザインシステムはより長く生き続ける
コース修了おめでとうございます。 誰かの1日を少し楽にするものを設計しよう。
理解度チェック
まず上のクイズを完了してください
レッスン完了!