UXデザインプロセス

Transcript

1. UXデザインプロセス 1
2. 目次 1. 理解 2. アイデア 3. ストーリー 4. UI 5. プロトタイプ（オプション） 6. ビジュアルデザイン 7. 開発 8. フィードバック 2
3. 想定読者 UXデザイナー ▶ プロダクトマネージャー ▶ デザイナー ▶ 開発者 ▶ UXプロセスに興味のある方 ▶ 3
4. まとめ UXデザインプロセスは、理解から始まり、フィードバックで終わる循環的なプロセス ▶ 各フェーズは必要に応じて前のフェーズに戻ることができる。柔軟な反復プロセスを心がける ▶ 技術調査は適宜実施し、実現不可能なアイデアを後の段階まで持ち越さない ▶ ユーザーテストは可能な限り実施し、各フェーズでのフィードバックを重視 ▶ 試作とフィードバックは常に行うことが理想的。小さな改善を積み重ねる ▶ プロセス全体を通じて、疑問点や考えの流れを記録し、チーム内で共有することが重要 ▶ 4
5. 1. 理解 課題に対する現状、展望、分析を行い、対象ドメインを理解する ▶ これは他のデザインプロセスと最も異なる点 - ユーザーの要望を考え、情報を蓄積・整理する中でアイデアを生む ▶ 問題の中にアイデアがあるという考え方 - 理解フェーズに最も時間をかける ▶ インプットとアウトプットの段階を分けている - 5
6. 1. 理解（続き） 主な作業: ▶ クライアントヒアリング： - 初回2時間程度だが、本音を引き出すには16時間以上必要。社内政治的な問題も考慮 - 顧客調査： - 業界調査、競合調査、ポジショニングマップ、4P分析、SWOT分析など。 - 既存の資料があれば共有を求める - ビジネスゴール設定： - KPI、ROIを理解し、具体的なアイデアにつなげる。 - ビジネスモデルキャンバスの利用も効果的 - 6
7. 1. 理解（続き） ユーザー調査： ▶ アンケート、インタビューを実施。時間がなければ社内ユーザーに聞く。生の意見を重視 - ユーザーゴール設定： ▶ 直接的なニーズではなく、複数の問題を解決するコンセプトを目指す。対処療法的にならないよう注意 - ペルソナ作成：細かすぎない設定 ▶ 実際のユーザーをペルソナにすると良い。ポジショニングマップを添えると理解しやすい - 既存ユーザーのジャーニーマップ理解： ▶ 1日または適用期間内の問題点を見つける。簡易的なスケッチレベルで十分 - 7
8. 2. アイデア 理解フェーズで見つけたアイデアをチーム内で共有・可視化する ▶ アイデアを考えるフェーズではない - コンセプトを分かりやすく可視化することが目的 ▶ 問題解決型アプローチに特有の方法 - 8
9. 2. アイデア（続き） 主な作業: ▶ ブレストの開催： - 調査フェーズで得たアイデアのネタを共有。自由にディスカッション - ブレストの準備としてファクトとオピニオンの分離を徹底する - アイデアの検討： - ビジネスゴールとユーザーゴールを両立するアイデアを生む。問題の範囲を広く考える - コンセプトの作成： - 絵、図、文章など分かりやすい表現で可視化。壁に貼るなどして共有。インフォグラフィックも有効 - ビジョンの記述： - なぜそのサービスを提供するのかという根本的な価値観を明記。モチベーション維持にも重要 - 9
10. 3. ストーリー ユーザーがゴールに辿り着く流れを具体化する。時間軸に沿ってメリットを可視化 ▶ 抽象的なコンセプトを具体的なサービス内容に落とし込む ▶ 10
11. 3. ストーリー（続き） 主な作業: ▶ プロットの構成： - ペルソナの1日（または数年）をイメージし、サービスのメリットを記述。具体的なサービス内容が現れる - シナリオの作成： - プロットを小説のように詳細化。現実的なユーザー行動を想定。楽観的にならないよう注意 - ジャーニーマップの描画： - 抽象的なタイムライン表現と具体的な個別状況の2種類を作成。全体像と詳細を把握 - ストーリーボードの作成： - 4コマ漫画のようにタスク・シナリオごとに視覚化。チーム内の認識齟齬を防ぐ - 機能要件のまとめ： - プロットやシナリオで現れたサービス内容を一覧化。具体的な機能として整理 - 11
12. 4. UI シナリオで提示したサービス内容をUIとして図式化する ▶ ワイヤーフレームではなくモックアップをベースに考える - 12
13. 4. UI（続き） 主な作業: ▶ スケッチ： - 画面アイデアの出発点。荒い状態で画面と遷移を同時に検討。演劇の舞台のようにメンタルモデルを考慮 - モックアップ： - 実際に操作可能な形で作成。ユーザビリティテストを繰り返し実施。根本的な設計ミスがあれば前フェーズに 戻る - 画面詳細設計： - 全体構成、共通項目、各画面詳細、エラーケースなどを記載。ワイヤーフレームよりも詳細な情報を含む - 絵コンテ： - アニメーションやインタラクションを詳細に記述。ユーザーの待ち時間や情報レベルの表現も考慮 - ガイドライン作成： - 共通項目をまとめたレイアウト、デザイン、インタラクションの指針。ただし過度に詳細にしないよう注意 - 13
14. 5. プロトタイプ（オプション） 具体的なサービス画面の完成形イメージを共有する。ラピッドプロトタイプではなく、完成度の高いものを作成 ▶ 大型案件の場合、ステークホルダーへの実演を推奨。イメージ共有が主目的 ▶ 技術調査ではなく、イメージ共有が目的。技術的検証は前段階で済ませておくべき ▶ 14
15. 6. ビジュアルデザイン ビジュアルイメージを具体的なアピアランスに移行する。スキンの開発を行う ▶ アイデア段階からイメージは形成されているはず。ここでは具体的な実装を行う ▶ 必ずしも6番目である必要はなく、プロジェクトの状況に応じて前後することがある ▶ 15
16. 7. 開発 コンセプト（UX）とUIを実現する。遷移の時間感覚やアニメーションのフィーリングを細かく伝達 ▶ 小規模案件ではUI設計段階の途中から開発に着手することもある。ビジュアルデザインと並行して進めることも ▶ CI/CDの整備、良質なプログラミングの実施が重要。リリース頻度を高められるよう環境を整える ▶ 16
17. 8. フィードバック 提供可能になったサービスのフィードバックを得る。 ▶ 継続的な改善のサイクルを確立 - ユーザーリサーチ、テスト、分析、A/Bテスト、サイト分析、コンバージョン率、SEOなどを実施。 - 定量的・定性的データを収集 - Leanの場合、親しい顧客に先行して使用してもらい改善案を見つける。早期のフィードバックループを作る ▶ 17
18. 用語まとめ UX: User Experience（ユーザー体験） ▶ KPI: Key Performance Indicator（重要業績評価指標） ▶ ROI: Return on Investment（投資収益率） ▶ CI/CD: Continuous Integration/Continuous Delivery（継続的インテグレーション/継続的デリバリー） ▶ SEO: Search Engine Optimization（検索エンジン最適化） ▶ Lean: リーンスタートアップ手法 ▶ ジャーニーマップ: ユーザーの体験を時系列で可視化したもの ▶ ペルソナ: サービスのターゲットユーザーを具体化した仮想の人物像 ▶ 18