Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UXデザインプロセス
Search
ymgc
October 02, 2024
Business
1
21
UXデザインプロセス
ymgc
October 02, 2024
Tweet
Share
More Decks by ymgc
See All by ymgc
Machines of Loving Grace - AIはどのように世界をより良く変えるか -
__ymgc__
1
32
ファシリテーションの技術
__ymgc__
2
25
(論文読み)BigCodeBench: 多様な関数呼び出しと複雑な指示を用いたコード生成のベンチマーキング
__ymgc__
1
27
(論文読み)Very Large-Scale Multi-Agent Simulation in AgentScope
__ymgc__
1
19
7 POWERS
__ymgc__
1
22
自己組織化系のベイズ力学
__ymgc__
1
27
エムラン・メイヤー 『腸と脳』
__ymgc__
1
23
(論文読み)不特定多数の人工知能エージェントによる自由行動の安全化に関する研究
__ymgc__
1
25
群論入門:集合と対称性の数学
__ymgc__
0
21
Other Decks in Business
See All in Business
サバノミソニLT‐AWS認定資格合格への道のり
utosun
0
210
Company Introduction Slides
recruiting
0
1k
「つい進捗してしまう」タスク分解のやり方 / How to Break Down Tasks in a Way That Naturally Leads to Progress
uenitty
1
170
SaaS開発における手戻りを減らすためのリファインメントの実践
bicstone
3
450
ログラス会社紹介資料 / Loglass Company Deck
loglass2019
6
230k
エムスリーキャリア エンジニア採用資料 / M3C Engineer Guide
m3c
1
85k
3分でわかるDomuz(採用資料)
kimpachi_d
0
14k
PROLE株式会社 COMPANY DECK
prole
PRO
0
890
サスメド株式会社 Culture Deck
susmed
0
36k
LINEヤフー新卒採用 プロダクトプランナー職種説明資料
lycorp_recruit_jp
0
2.2k
Manage-Up! A Guide for Product Builders to Understand and Influence Leadership
petra_wille
0
160
急成⻑スタートアップで働くことで得られるもの / 株式会社IVRy(社内LT会)
miyashino
0
1k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Why Our Code Smells
bkeepers
PRO
334
57k
A designer walks into a library…
pauljervisheath
202
24k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Being A Developer After 40
akosma
86
590k
Teambox: Starting and Learning
jrom
132
8.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Faster Mobile Websites
deanohume
304
30k
A Philosophy of Restraint
colly
203
16k
Producing Creativity
orderedlist
PRO
341
39k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Transcript
UXデザインプロセス 1
目次 1. 理解 2. アイデア 3. ストーリー 4. UI 5.
プロトタイプ(オプション) 6. ビジュアルデザイン 7. 開発 8. フィードバック 2
想定読者 UXデザイナー ▶ プロダクトマネージャー ▶ デザイナー ▶ 開発者 ▶ UXプロセスに興味のある方
▶ 3
まとめ UXデザインプロセスは、理解から始まり、フィードバックで終わる循環的なプロセス ▶ 各フェーズは必要に応じて前のフェーズに戻ることができる。柔軟な反復プロセスを心がける ▶ 技術調査は適宜実施し、実現不可能なアイデアを後の段階まで持ち越さない ▶ ユーザーテストは可能な限り実施し、各フェーズでのフィードバックを重視 ▶ 試作とフィードバックは常に行うことが理想的。小さな改善を積み重ねる
▶ プロセス全体を通じて、疑問点や考えの流れを記録し、チーム内で共有することが重要 ▶ 4
1. 理解 課題に対する現状、展望、分析を行い、対象ドメインを理解する ▶ これは他のデザインプロセスと最も異なる点 - ユーザーの要望を考え、情報を蓄積・整理する中でアイデアを生む ▶ 問題の中にアイデアがあるという考え方 -
理解フェーズに最も時間をかける ▶ インプットとアウトプットの段階を分けている - 5
1. 理解(続き) 主な作業: ▶ クライアントヒアリング: - 初回2時間程度だが、本音を引き出すには16時間以上必要。社内政治的な問題も考慮 - 顧客調査: -
業界調査、競合調査、ポジショニングマップ、4P分析、SWOT分析など。 - 既存の資料があれば共有を求める - ビジネスゴール設定: - KPI、ROIを理解し、具体的なアイデアにつなげる。 - ビジネスモデルキャンバスの利用も効果的 - 6
1. 理解(続き) ユーザー調査: ▶ アンケート、インタビューを実施。時間がなければ社内ユーザーに聞く。生の意見を重視 - ユーザーゴール設定: ▶ 直接的なニーズではなく、複数の問題を解決するコンセプトを目指す。対処療法的にならないよう注意 -
ペルソナ作成:細かすぎない設定 ▶ 実際のユーザーをペルソナにすると良い。ポジショニングマップを添えると理解しやすい - 既存ユーザーのジャーニーマップ理解: ▶ 1日または適用期間内の問題点を見つける。簡易的なスケッチレベルで十分 - 7
2. アイデア 理解フェーズで見つけたアイデアをチーム内で共有・可視化する ▶ アイデアを考えるフェーズではない - コンセプトを分かりやすく可視化することが目的 ▶ 問題解決型アプローチに特有の方法 -
8
2. アイデア(続き) 主な作業: ▶ ブレストの開催: - 調査フェーズで得たアイデアのネタを共有。自由にディスカッション - ブレストの準備としてファクトとオピニオンの分離を徹底する -
アイデアの検討: - ビジネスゴールとユーザーゴールを両立するアイデアを生む。問題の範囲を広く考える - コンセプトの作成: - 絵、図、文章など分かりやすい表現で可視化。壁に貼るなどして共有。インフォグラフィックも有効 - ビジョンの記述: - なぜそのサービスを提供するのかという根本的な価値観を明記。モチベーション維持にも重要 - 9
3. ストーリー ユーザーがゴールに辿り着く流れを具体化する。時間軸に沿ってメリットを可視化 ▶ 抽象的なコンセプトを具体的なサービス内容に落とし込む ▶ 10
3. ストーリー(続き) 主な作業: ▶ プロットの構成: - ペルソナの1日(または数年)をイメージし、サービスのメリットを記述。具体的なサービス内容が現れる - シナリオの作成: -
プロットを小説のように詳細化。現実的なユーザー行動を想定。楽観的にならないよう注意 - ジャーニーマップの描画: - 抽象的なタイムライン表現と具体的な個別状況の2種類を作成。全体像と詳細を把握 - ストーリーボードの作成: - 4コマ漫画のようにタスク・シナリオごとに視覚化。チーム内の認識齟齬を防ぐ - 機能要件のまとめ: - プロットやシナリオで現れたサービス内容を一覧化。具体的な機能として整理 - 11
4. UI シナリオで提示したサービス内容をUIとして図式化する ▶ ワイヤーフレームではなくモックアップをベースに考える - 12
4. UI(続き) 主な作業: ▶ スケッチ: - 画面アイデアの出発点。荒い状態で画面と遷移を同時に検討。演劇の舞台のようにメンタルモデルを考慮 - モックアップ: -
実際に操作可能な形で作成。ユーザビリティテストを繰り返し実施。根本的な設計ミスがあれば前フェーズに 戻る - 画面詳細設計: - 全体構成、共通項目、各画面詳細、エラーケースなどを記載。ワイヤーフレームよりも詳細な情報を含む - 絵コンテ: - アニメーションやインタラクションを詳細に記述。ユーザーの待ち時間や情報レベルの表現も考慮 - ガイドライン作成: - 共通項目をまとめたレイアウト、デザイン、インタラクションの指針。ただし過度に詳細にしないよう注意 - 13
5. プロトタイプ(オプション) 具体的なサービス画面の完成形イメージを共有する。ラピッドプロトタイプではなく、完成度の高いものを作成 ▶ 大型案件の場合、ステークホルダーへの実演を推奨。イメージ共有が主目的 ▶ 技術調査ではなく、イメージ共有が目的。技術的検証は前段階で済ませておくべき ▶ 14
6. ビジュアルデザイン ビジュアルイメージを具体的なアピアランスに移行する。スキンの開発を行う ▶ アイデア段階からイメージは形成されているはず。ここでは具体的な実装を行う ▶ 必ずしも6番目である必要はなく、プロジェクトの状況に応じて前後することがある ▶ 15
7. 開発 コンセプト(UX)とUIを実現する。遷移の時間感覚やアニメーションのフィーリングを細かく伝達 ▶ 小規模案件ではUI設計段階の途中から開発に着手することもある。ビジュアルデザインと並行して進めることも ▶ CI/CDの整備、良質なプログラミングの実施が重要。リリース頻度を高められるよう環境を整える ▶ 16
8. フィードバック 提供可能になったサービスのフィードバックを得る。 ▶ 継続的な改善のサイクルを確立 - ユーザーリサーチ、テスト、分析、A/Bテスト、サイト分析、コンバージョン率、SEOなどを実施。 - 定量的・定性的データを収集 -
Leanの場合、親しい顧客に先行して使用してもらい改善案を見つける。早期のフィードバックループを作る ▶ 17
用語まとめ UX: User Experience(ユーザー体験) ▶ KPI: Key Performance Indicator(重要業績評価指標) ▶
ROI: Return on Investment(投資収益率) ▶ CI/CD: Continuous Integration/Continuous Delivery(継続的インテグレーション/継続的デリバリー) ▶ SEO: Search Engine Optimization(検索エンジン最適化) ▶ Lean: リーンスタートアップ手法 ▶ ジャーニーマップ: ユーザーの体験を時系列で可視化したもの ▶ ペルソナ: サービスのターゲットユーザーを具体化した仮想の人物像 ▶ 18