DesignJP prototyping 20160825

1. 納得感のある
プロトタイピングのコツ
20選
@yukio_andoh
Design-JP

2. LT: 納得感のある
プロトタイピングのコツ
10選
@yukio_andoh
Design-JP

3. 納得感のある
プロトタイピングのコツ
10選 34選
@yukio_andoh
Design-JP
×

4. 安藤幸央（あんどうゆきお） 4
安藤幸央（あんどうゆきお）

5. プロトタイピングのコツ
5
1
Fidelity(忠実度)を考える
必要以上に細かすぎない

6. プロトタイピングのコツ
6

7. プロトタイピングのコツ
7
2
誰に見せるのか？
適材適所と作業時間

8. 8
誰に見せるのか？
自分だけ
— 見た目
— 素早さ
— 試行の数
— 捨てる
チーム
— 話し合い
— 実装
— 共有
— 編集
テスト用
— 見た目
— 理解
— 印象
— 共感
お客様
— 見た目
— 完成度
— 承認
— 安心感
Low Fidelity ← -­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐-­‐ → Hi Fidelity

9. 9h1p://jp.techcrunch.com/2010/09/26/20100923will-­‐you-­‐try-­‐my-­‐paper-­‐iphone-­‐app/

10. プロトタイピングのコツ
10
3
完璧なツールは無い
目的に応じて使い分ける

11. 11h1ps://www.cooper.com/prototyping-­‐tools

12. 12h1ps://www.cooper.com/prototyping-­‐tools

13. どこでも素早く仕事したいなら、ネイティブツール (Prott も近々.....
13
Pixate Principle Flinto For Mac

14. Apple Keynote
14
誰もが持っている。使える。編集できる。

15. プロトタイピングのコツ
15
4
早く作りすぎない
打ち合わせの場で作る

16. 16
事例

17. プロトタイピングのコツ
17
5
アイデアを人に提示する
アイデアを元に進める段階

18. 18
みんなではじめるデザイン批評

19. プロトタイピングのコツ
19
6
譲れない要素、譲れる要素
単に悪いでなく、なぜ悪い

20. プロトタイピングのコツ
20
7
プロトの前に情報設計
37signales の UI Flow

21. 21h1ps://signalvnoise.com/posts/1926-­‐a-­‐shorthand-­‐for-­‐designing-­‐ui-­‐flows
見えるもの
＿＿＿＿＿＿
やること
UI Flows

22. 22
Information Architecture

23. 23
見るべき視点
1. ユーザを知る
2. 明確さ
3. 一貫性
4. 効率、手数
5. 協調、信頼
6. 美しさ

24. プロトタイピングのコツ
24
8
うまく出来ないこともある
アニメーション、遅延

25. プロトタイピングのコツ
25
9
作ってしまう
カーブを描いて説明する

26. 26
ease-out, in; ease-in, out

27. 27
ease-out, in; ease-in, out
h1p://babich.biz/funcJonal-­‐animaJon-­‐in-­‐ux-­‐design-­‐what-­‐makes-­‐a-­‐good-­‐transiJon/

28. プロトタイピングのコツ
28
10
アニメーションは
良くも悪くも記憶に残る

29. プロトタイピングのコツ
29
11
キモとなる動きは
作ってしまう

30. プロトタイピングのコツ
30
12
コンセプトや思想ありき
悩んで決まらなくてもいい

31. 31
process explained

32. プロトタイピングのコツ
32
13
ダミーテキストではなく
コンテンツの意味を知る

33. 33
dummy text

34. プロトタイピングのコツ
34
14
素振りは重要
常日頃から真似の練習

35. 35
practice

36. 36
practice

37. 37
Paper Prototyping

38. 38
角丸を素早く描けるように
1 2 3

39. プロトタイピングのコツ
39
15
パターンを活かす
部品を活かす

40. 40
Mobile UI template

41. プロトタイピングのコツ
41
16
再利用できる部品を
たくさん蓄積しておく

42. プロトタイピングのコツ
42
17
失敗した事例を
貯めておく、説得材料に

43. プロトタイピングのコツ
43
18
安価な紙やペンで
もったいなくないように

44. 44
Paper Prototyping

45. プロトタイピングのコツ
45
19
実機で確かめよう
立って、歩いて使ってみる

46. プロトタイピングのコツ
46
20
デザイン検討と、
実装検討は、別々に

47. プロトタイピングのコツ
47
21
ポニー会議
決定権のある人を巻き込む

48. プロトタイピングのコツ
48
22
悩んだらエクストリーム
極端なユーザーを考える

49. プロトタイピングのコツ
49
23
実装してから問題がある？
プロトが足りてない

50. プロトタイピングのコツ
50
24
正解は無い
常に代案、違う案を用意

51. プロトタイピングのコツ
51
25
ブリーフィングシートは
別に考える（色、ブランド

52. 52
Briefing Sheet
UX戦略

53. プロトタイピングのコツ
53
26
コミュニケーションのため
捨てる、変わること前提

54. プロトタイピングのコツ
54
27
プロトで検討しないこと
色、設定画面、フォント

55. プロトタイピングのコツ
55
28
どこを評価、検討するの？
どこを見て欲しいのか？

56. プロトタイピングのコツ
56
29
まずは一人で使えるもの
ソーシャルは、その後

57. プロトタイピングのコツ
57
30
一人で製作と評価する時
白黒で見る、遠くから見る

58. プロトタイピングのコツ
58
31
全部の画面を作らない
あるストーリーを る

59. プロトタイピングのコツ
59
32
狩野モデルで考える
当たり前と、魅力と

60. 60
KANO Model

61. プロトタイピングのコツ
61
33
完成していると思わせない
もう出来ているんでしょ？

62. プロトタイピングのコツ
62
34
どんな完璧なプロトも
それは本物では無い

63. 63

64. Thank You
@yukio_andoh