2016.01.23 Cookpad TechConf 2016 http://techconf.cookpad.com/

1. モバイルアプリの
インタラクションプロトタイピング
2016.01.23
- 高速に仮説・実行・検証サイクルを回すために -

2. Keisuke Tada
多田 圭佑 デザイナー
Holiday のプロダクト全般を担当
最近は iOS アプリ開発がメイン

4. ユーザに価値を届ける
プロダクトをつくる

5. 価値のあるプロダクトをつくるために
速さ 品質×

6. 価値のあるプロダクトをつくるために
速さ
品質
・価値を発見する
・ユーザの変化に適応する
・価値を正しく届ける
・価値を高める

7. 価値のあるプロダクトをつくるために
速さ
品質
・価値を発見する
・ユーザの変化に適応する
・価値を正しく届ける
・価値を高める
どうやって？

8. 仮説
実行検証

9. 仮説
実行検証
細かく
何回も

10. 仮説
実行検証
モバイルアプリの場合

11. 開発工程
画面設計 ビジュアル アニメーション 実装

12. 画面設計 ビジュアル アニメーション 実装
試行錯誤…
開発工程

13. 画面設計 ビジュアル アニメーション 実装
進めてまた
試行錯誤…
開発工程

14. 画面設計 ビジュアル アニメーション 実装
開発工程

15. 開発工程
画面設計 ビジュアル アニメーション 実装
完成！

16. 開発工程
画面設計 ビジュアル アニメーション 実装
完成？

18. なんか違う…

19. 画面設計 ビジュアル アニメーション 実装
開発工程

20. 画面設計 ビジュアル アニメーション 実装
画面設計からやりなおし…
開発工程

21. 画面設計 ビジュアル アニメーション 実装
できあがりのイメージがしづらいため
それぞれの行程で問題に気づきにくい
開発工程

22. 仮説
実行検証
速くしたい！

23. 画面設計 ビジュアル アニメーション 実装
開発工程

24. 画面設計 ビジュアル アニメーション 実装
動作モック
実機で触って動かせるもの
開発工程

25. 画面設計 ビジュアル アニメーション 実装
動作モック
仮説検証を繰り返す
・議論
・ユーザテスト、ヒアリング
開発工程

26. 画面設計 ビジュアル アニメーション 実装
動作モック
仮説検証を繰り返す
・議論
・ユーザテスト、ヒアリング
できあがりのイメージがしやすいため
早い段階で確認できることが多い
開発工程

27. ・Pixate
・Framer
・Flinto for Mac
・HTML + CSS + JS
・Xcode
動作モック
レイヤーベース
・Flinto/InVision/Prott
・Flinto for Mac
・HTML + CSS
・Storyboard (Xcode)
ページベース

28. ・Pixate
・Framer
・Flinto for Mac
・HTML + CSS + JS
・Xcode
動作モック
レイヤーベース
ページが切り替わる
・Flinto/InVision/Prott
・Flinto for Mac
・HTML + CSS
・Storyboard (Xcode)
ページベース

29. 動作モック
・Flinto/InVision/Prott
・Flinto for Mac
・HTML + CSS
・Storyboard (Xcode)
ページベース
各レイヤーが独立して動く
レイヤーベース
・Pixate
・Framer
・Flinto for Mac
・HTML + CSS + JS
・Xcode

30. ・Pixate
・Framer
・Flinto for Mac
・HTML + CSS + JS
・Xcode
動作モック
レイヤーベース
・Flinto/InVision/Prott
・Flinto for Mac
・HTML + CSS
・Storyboard (Xcode)
ページベース

31. Flinto/InVision/Prott

32. Flinto/InVision/Prott
Pros
Cons
・少ない手間で実機で動くモックを作れる
・チーム内での共有がしやすい
・複雑なインタラクションは作れない

35. 実際に端末で触ってみることで
画面の抜け漏れがないか確認

36. 1
2

37. 1
2

38. 1
2
複数パターンのフローを触って
遷移の分かりやすさを確認

39. ・Pixate
・Framer
・Flinto for Mac
・HTML + CSS + JS
・Xcode
動作モック
レイヤーベース
・Flinto/InVision/Prott
・Flinto for Mac
・HTML + CSS
・Storyboard (Xcode)
ページベース

40. HTML + CSS + JS

41. HTML + CSS + JS
Pros
Cons
・実際のコンテンツを何パターンも表示しやすい
・インタラクションの表現の自由度が高い
・ページの遷移のパターンを試す用途では過剰
・インタラクションの精度を高めるのは結構たいへん

43. 違うレイアウトで複数コンテンツを
見た時の感じ方を確認

44. ・Pixate
・Framer
・Flinto for Mac
・HTML + CSS + JS
・Xcode
動作モック
レイヤーベース
・Flinto/InVision/Prott
・Flinto for Mac
・HTML + CSS
・Storyboard (Xcode)
ページベース

45. Flinto for Mac

46. Flinto for Mac
Pros
Cons
・普通の画面遷移から凝ったインタラクションまで
・精度の高いプロトタイプを素早く作ることができる
・表現できないインタラクションもある

48. 実際のアプリに近い動きで
UI の分かりやすさを確認

49. ・Pixate
・Framer
・Flinto for Mac
・HTML + CSS + JS
・Xcode
動作モック
レイヤーベース
・Flinto/InVision/Prott
・Flinto for Mac
・HTML + CSS
・Storyboard (Xcode)
ページベース

50. Xcode

51. Xcode
Pros
Cons
・なんでもできる
・手間がかかる

53. ユーザの入力と表示が組み合わさる
高精度プロトタイピング

54. Xcode：おまけ
Tweaks（ライブラリ）
・値をアプリ上で変更できる
・アニメーションの変数、文字サイズ、色など
・外で使っている時などに UI を調整できる
・最後の詰めの段階で品質向上の役に立つ

55. ・Pixate
・Framer
・Flinto for Mac
・HTML + CSS + JS
・Xcode
動作モック
レイヤーベース
・Flinto/InVision/Prott
・Flinto for Mac
・HTML + CSS
・Storyboard (Xcode)
ページベース

56. 画面設計 ビジュアル アニメーション 実装
動作モック
仮説検証を繰り返す
・議論
・ユーザテスト、ヒアリング
開発工程
確かめたいことによって
プロトタイプを作り分ける

57. 仮説
実行検証
細かく
何回も

58. ご静聴ありがとうございました