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
12
UXデザインプロセス
ymgc
October 02, 2024
Tweet
Share
More Decks by ymgc
See All by ymgc
群論入門:集合と対称性の数学
__ymgc__
0
4
(論文読み)データ強化LLMアプリケーションの包括的調査
__ymgc__
1
10
FRAM - 複雑な社会技術システムの理解と分析
__ymgc__
1
6
Go言語総合ガイド- 初学者のための学習資料
__ymgc__
1
42
GO言語-Java対応チートシート-用語編-
__ymgc__
1
15
GO言語-Java対応チートシート-実装編-
__ymgc__
1
20
考える技法
__ymgc__
2
27
プロダクトマネージャーとして「十分に技術的」になるには
__ymgc__
1
16
プロダクト改善の方法論
__ymgc__
1
17
Other Decks in Business
See All in Business
タウンWiFi会社紹介資料 (2024/09/12)
townwifi
1
5.5k
Continuous Stewardship - effective, humane services enriched by software - Fast Flow Conf 2024 - London - Matthew Skelton
matthewskelton
PRO
5
450
トラックレコード式採用ブランディング
trackrecords
PRO
1
110
アジャイルの知見の少ないメンバーの多いチームづくりの1年半をふりかえる
jnuank
1
280
コーポレートストーリー(新規投資家様向け会社説明資料)
gatechnologies
1
8.4k
エンジニアと関係組織をつなぐ社内 DevRel のとりくみ / Why DevRel works in-house
nttcom
3
520
20240914_CMCKochi_6
hideki_ojima
1
390
楽観的スクラムマスター
tonionagauzzi
0
150
株式会社gecogeco 会社紹介資料
gecogeco
1
2.1k
必要なのは客観性。組織変革をもたらす、より良い「対話」を生み出すための活動 #scrummikawa
nulabinc
PRO
3
680
Cloud Run で作るサーバーレス アーキテクチャ 30 連発 - これのときはこう!
googlecloudjapan
24
7.4k
わわわ理念制作所 紹介資料
yuadachi
0
190
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1365
200k
Facilitating Awesome Meetings
lara
49
6k
Navigating Team Friction
lara
183
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
1
240
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
The Invisible Customer
myddelton
119
13k
Design by the Numbers
sachag
278
19k
How to name files
jennybc
77
98k
Making Projects Easy
brettharned
114
5.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.5k
A better future with KSS
kneath
235
17k
Scaling GitHub
holman
458
140k
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