Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

43,849 views

Published on

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

Published in: Design
  • Be the first to comment

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

  1. 1. モバイルアプリの インタラクションプロトタイピング 2016.01.23 - 高速に仮説・実行・検証サイクルを回すために -
  2. 2. Keisuke Tada 多田 圭佑 デザイナー Holiday のプロダクト全般を担当 最近は iOS アプリ開発がメイン
  3. 3. ユーザに価値を届ける プロダクトをつくる
  4. 4. 価値のあるプロダクトをつくるために 速さ 品質×
  5. 5. 価値のあるプロダクトをつくるために 速さ 品質 ・価値を発見する ・ユーザの変化に適応する ・価値を正しく届ける ・価値を高める
  6. 6. 価値のあるプロダクトをつくるために 速さ 品質 ・価値を発見する ・ユーザの変化に適応する ・価値を正しく届ける ・価値を高める どうやって?
  7. 7. 仮説 実行検証
  8. 8. 仮説 実行検証 細かく 何回も
  9. 9. 仮説 実行検証 モバイルアプリの場合
  10. 10. 開発工程 画面設計 ビジュアル アニメーション 実装
  11. 11. 画面設計 ビジュアル アニメーション 実装 試行錯誤… 開発工程
  12. 12. 画面設計 ビジュアル アニメーション 実装 進めてまた 試行錯誤… 開発工程
  13. 13. 画面設計 ビジュアル アニメーション 実装 開発工程
  14. 14. 開発工程 画面設計 ビジュアル アニメーション 実装 完成!
  15. 15. 開発工程 画面設計 ビジュアル アニメーション 実装 完成?
  16. 16. なんか違う…
  17. 17. 画面設計 ビジュアル アニメーション 実装 開発工程
  18. 18. 画面設計 ビジュアル アニメーション 実装 画面設計からやりなおし… 開発工程
  19. 19. 画面設計 ビジュアル アニメーション 実装 できあがりのイメージがしづらいため それぞれの行程で問題に気づきにくい 開発工程
  20. 20. 仮説 実行検証 速くしたい!
  21. 21. 画面設計 ビジュアル アニメーション 実装 開発工程
  22. 22. 画面設計 ビジュアル アニメーション 実装 動作モック 実機で触って動かせるもの 開発工程
  23. 23. 画面設計 ビジュアル アニメーション 実装 動作モック 仮説検証を繰り返す ・議論 ・ユーザテスト、ヒアリング 開発工程
  24. 24. 画面設計 ビジュアル アニメーション 実装 動作モック 仮説検証を繰り返す ・議論 ・ユーザテスト、ヒアリング できあがりのイメージがしやすいため 早い段階で確認できることが多い 開発工程
  25. 25. ・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode 動作モック レイヤーベース ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
  26. 26. ・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode 動作モック レイヤーベース ページが切り替わる ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
  27. 27. 動作モック ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース 各レイヤーが独立して動く レイヤーベース ・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode
  28. 28. ・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode 動作モック レイヤーベース ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
  29. 29. Flinto/InVision/Prott
  30. 30. Flinto/InVision/Prott Pros Cons ・少ない手間で実機で動くモックを作れる ・チーム内での共有がしやすい ・複雑なインタラクションは作れない
  31. 31. 実際に端末で触ってみることで 画面の抜け漏れがないか確認
  32. 32. 1 2
  33. 33. 1 2
  34. 34. 1 2 複数パターンのフローを触って 遷移の分かりやすさを確認
  35. 35. ・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode 動作モック レイヤーベース ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
  36. 36. HTML + CSS + JS
  37. 37. HTML + CSS + JS Pros Cons ・実際のコンテンツを何パターンも表示しやすい ・インタラクションの表現の自由度が高い ・ページの遷移のパターンを試す用途では過剰 ・インタラクションの精度を高めるのは結構たいへん
  38. 38. 違うレイアウトで複数コンテンツを 見た時の感じ方を確認
  39. 39. ・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode 動作モック レイヤーベース ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
  40. 40. Flinto for Mac
  41. 41. Flinto for Mac Pros Cons ・普通の画面遷移から凝ったインタラクションまで ・精度の高いプロトタイプを素早く作ることができる ・表現できないインタラクションもある
  42. 42. 実際のアプリに近い動きで UI の分かりやすさを確認
  43. 43. ・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode 動作モック レイヤーベース ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
  44. 44. Xcode
  45. 45. Xcode Pros Cons ・なんでもできる ・手間がかかる
  46. 46. ユーザの入力と表示が組み合わさる 高精度プロトタイピング
  47. 47. Xcode:おまけ Tweaks(ライブラリ) ・値をアプリ上で変更できる  ・アニメーションの変数、文字サイズ、色など ・外で使っている時などに UI を調整できる  ・最後の詰めの段階で品質向上の役に立つ
  48. 48. ・Pixate ・Framer ・Flinto for Mac ・HTML + CSS + JS ・Xcode 動作モック レイヤーベース ・Flinto/InVision/Prott ・Flinto for Mac ・HTML + CSS ・Storyboard (Xcode) ページベース
  49. 49. 画面設計 ビジュアル アニメーション 実装 動作モック 仮説検証を繰り返す ・議論 ・ユーザテスト、ヒアリング 開発工程 確かめたいことによって プロトタイプを作り分ける
  50. 50. 仮説 実行検証 細かく 何回も
  51. 51. ご静聴ありがとうございました

×