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
50
テスト駆動開発(TDD)入門
__ymgc__
0
87
AI に特化した品質特性のテスト
__ymgc__
1
65
AIを活用したソフトウェアテスト技術 - ISTQB Foundation Level - AI Testing (CT-AI)
__ymgc__
1
72
Machines of Loving Grace - AIはどのように世界をより良く変えるか -
__ymgc__
1
82
ファシリテーションの技術
__ymgc__
2
93
(論文読み)BigCodeBench: 多様な関数呼び出しと複雑な指示を用いたコード生成のベンチマーキング
__ymgc__
1
83
(論文読み)Very Large-Scale Multi-Agent Simulation in AgentScope
__ymgc__
1
100
Other Decks in Business
See All in Business
SlackでDMを使わない方が いい理由を説明してみた
walkersumida
1
1k
社会の中のわたしの技術 ─ 自分の地図の描き方 #wttjp
yotii23
0
450
株式会社カウシェ Company Deck
kauche
2
200k
採用ピッチ資料|SBペイメントサービス株式会社
sbps
0
30k
RとLLMで自然言語処理
bob3bob3
2
380
FERMENSTATION Recruitment
fermenstation
0
400
QuickBooks Desktop Support®️ USA Contact Numbers: Complete 2025
jailynerdman
0
110
AWS Summit Japan 2025 社内コミュニティによる企業文化創り ~MAWS-UGの挑戦とこれから~
yukiogawa
2
860
Feedback in Action
lycorptech_jp
PRO
1
300
Sales Marker Culture book
salesmarker
PRO
36
57k
株式会社ボスコ・テクノロジーズ 採用ピッチ資料
boscotechrecruit
0
450
tokyo_dbt_meetup_#14_意志ある羅針盤たれ<データサイド>
t_yamaguchi
3
590
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.4k
Speed Design
sergeychernyshev
32
1k
The Pragmatic Product Professional
lauravandoore
35
6.7k
A better future with KSS
kneath
238
17k
Designing for humans not robots
tammielis
253
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
How GitHub (no longer) Works
holman
314
140k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Gamification - CAS2011
davidbonilla
81
5.4k
Thoughts on Productivity
jonyablonski
69
4.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Statistics for Hackers
jakevdp
799
220k
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