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
45
UXデザインプロセス
ymgc
October 02, 2024
Tweet
Share
More Decks by ymgc
See All by ymgc
予測する心 - 知覚と行為の統一理論
__ymgc__
0
71
LLMのテスト時計算最適化に関する研究
__ymgc__
0
52
テスト駆動開発(TDD)入門
__ymgc__
0
88
AI に特化した品質特性のテスト
__ymgc__
1
65
AIを活用したソフトウェアテスト技術 - ISTQB Foundation Level - AI Testing (CT-AI)
__ymgc__
1
75
Machines of Loving Grace - AIはどのように世界をより良く変えるか -
__ymgc__
1
82
ファシリテーションの技術
__ymgc__
2
94
(論文読み)BigCodeBench: 多様な関数呼び出しと複雑な指示を用いたコード生成のベンチマーキング
__ymgc__
1
83
(論文読み)Very Large-Scale Multi-Agent Simulation in AgentScope
__ymgc__
1
100
Other Decks in Business
See All in Business
Nstock 採用資料 / We are hiring
nstock
29
310k
株式会社ボスコ・テクノロジーズ 採用ピッチ資料
boscotechrecruit
0
600
ties|クラウド顧客・案件管理システム - サービスのご紹介
so_kotani
2
470
エレコム株式会社 中途採用説明資料
elecom_hr
0
550
[ [Are You Struggling with QuickBooks intuit Desktop support????]]
webana2439
0
190
クリフトンストレングスを用いたチームビルディングワークショップ
chibanba1982
PRO
1
240
坂ノ途中 会社紹介資料 /Introduction
ontheslope
0
380
コミュニティでUGCを増やす技術
chlorine0528
1
280
jinjer recruiting pitch
jinjer_official
0
75k
7 Best Ways to Reach HP Printer Support Number (USA 2025) 📞 +1-888-503-6380
charlesmick
0
280
株式会社Rehab for JAPAN会社概要
rehabrecruiting
5
76k
組織を AI との協働に最適化する ~ AI と人が補完しあって成長し続ける組織の作り方 ~
yoshizaki
0
560
Featured
See All Featured
Code Review Best Practice
trishagee
69
19k
Practical Orchestrator
shlominoach
189
11k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Thoughts on Productivity
jonyablonski
69
4.7k
Optimizing for Happiness
mojombo
379
70k
It's Worth the Effort
3n
185
28k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building Adaptive Systems
keathley
43
2.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
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