designjp prototyping 20160825
TRANSCRIPT
納得感のあるプロトタイピングのコツ20選@yukio_andoh
Design-JP
LT: 納得感のあるプロトタイピングのコツ10選@yukio_andoh
Design-JP
納得感のあるプロトタイピングのコツ10選 34選@yukio_andoh
Design-JP
×
安藤幸央（あんどうゆきお） 4安藤幸央（あんどうゆきお）
プロトタイピングのコツ5
1Fidelity(忠実度)を考える必要以上に細かすぎない
プロトタイピングのコツ6
プロトタイピングのコツ7
2誰に見せるのか？適材適所と作業時間
8
誰に見せるのか？
自分だけ
— 見た目— 素早さ— 試行の数— 捨てる
チーム
— 話し合い— 実装— 共有— 編集
テスト用
— 見た目— 理解— 印象— 共感
お客様
— 見た目— 完成度— 承認— 安心感
Low Fidelity ← -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ → Hi Fidelity
9h1p://jp.techcrunch.com/2010/09/26/20100923will-‐you-‐try-‐my-‐paper-‐iphone-‐app/
プロトタイピングのコツ10
3完璧なツールは無い目的に応じて使い分ける
11h1ps://www.cooper.com/prototyping-‐tools
12h1ps://www.cooper.com/prototyping-‐tools
どこでも素早く仕事したいなら、ネイティブツール (Prott も近々.....
13
Pixate Principle Flinto For Mac
Apple Keynote
14誰もが持っている。使える。編集できる。
プロトタイピングのコツ15
4早く作りすぎない打ち合わせの場で作る
16
事例
プロトタイピングのコツ17
5アイデアを人に提示するアイデアを元に進める段階
プロトタイピングのコツ19
6譲れない要素、譲れる要素単に悪いでなく、なぜ悪い
プロトタイピングのコツ20
7プロトの前に情報設計37signales の UI Flow
21h1ps://signalvnoise.com/posts/1926-‐a-‐shorthand-‐for-‐designing-‐ui-‐flows
見えるもの＿＿＿＿＿＿
やること
UI Flows
22
Information Architecture
23
見るべき視点
1. ユーザを知る2. 明確さ3. 一貫性4. 効率、手数5. 協調、信頼6. 美しさ
プロトタイピングのコツ24
8うまく出来ないこともあるアニメーション、遅延
プロトタイピングのコツ25
9作ってしまうカーブを描いて説明する
26
ease-out, in; ease-in, out
27
ease-out, in; ease-in, out
h1p://babich.biz/funcJonal-‐animaJon-‐in-‐ux-‐design-‐what-‐makes-‐a-‐good-‐transiJon/
プロトタイピングのコツ28
10アニメーションは良くも悪くも記憶に残る
プロトタイピングのコツ29
11キモとなる動きは作ってしまう
プロトタイピングのコツ30
12コンセプトや思想ありき悩んで決まらなくてもいい
31
process explained
プロトタイピングのコツ32
13ダミーテキストではなくコンテンツの意味を知る
33
dummy text
プロトタイピングのコツ34
14素振りは重要常日頃から真似の練習
35
practice
36
practice
37
Paper Prototyping
38
角丸を素早く描けるように
1 2 3
プロトタイピングのコツ39
15パターンを活かす部品を活かす
40
Mobile UI template
プロトタイピングのコツ41
16再利用できる部品をたくさん蓄積しておく
プロトタイピングのコツ42
17失敗した事例を貯めておく、説得材料に
プロトタイピングのコツ43
18安価な紙やペンでもったいなくないように
44
Paper Prototyping
プロトタイピングのコツ45
19実機で確かめよう立って、歩いて使ってみる
プロトタイピングのコツ46
20デザイン検討と、実装検討は、別々に
プロトタイピングのコツ47
21ポニー会議決定権のある人を巻き込む
プロトタイピングのコツ48
22悩んだらエクストリーム極端なユーザーを考える
プロトタイピングのコツ49
23実装してから問題がある？プロトが足りてない
プロトタイピングのコツ50
24正解は無い常に代案、違う案を用意
プロトタイピングのコツ51
25ブリーフィングシートは別に考える（色、ブランド
52
Briefing Sheet
UX戦略
プロトタイピングのコツ53
26コミュニケーションのため捨てる、変わること前提
プロトタイピングのコツ54
27プロトで検討しないこと色、設定画面、フォント
プロトタイピングのコツ55
28どこを評価、検討するの？どこを見て欲しいのか？
プロトタイピングのコツ56
29まずは一人で使えるものソーシャルは、その後
プロトタイピングのコツ57
30一人で製作と評価する時白黒で見る、遠くから見る
プロトタイピングのコツ58
31全部の画面を作らないあるストーリーを辿る
プロトタイピングのコツ59
32狩野モデルで考える当たり前と、魅力と
60
KANO Model
プロトタイピングのコツ61
33完成していると思わせないもう出来ているんでしょ？
プロトタイピングのコツ62
34どんな完璧なプロトもそれは本物では無い
63
Thank You@yukio_andoh