人と向き合うプロトタイピング

Transcript

• 1. Speaker No.01 / KAYAC inc. 割石 裕太 Yuta Wariishi 達人たちから学ぶ。実践！プロトタイピング
• 2. 自己紹介 | Profile @KAYAC inc. 割石 裕太 Yuta Wariishi KAYAC inc. | Art Director / UI Designer
• 3. 自己紹介 | Profile @OH @wariemon OH | Personal Design Project http://wariemon.com | ohmake.it@gmail.com
• 4. つくっているもの | Lobi -Chat & Game Community-
• 5. つくっているもの | Lobi -Chat & Game Community-
• 6. つくっているもの | Lobi -Chat & Game Community-
• 7. つくっているもの | FILTERS app
• 8. つくっているもの | FILTERS app
• 9. つくっているもの | FILTERS app
• 10. 前段 ¦ プロトタイピングをなぜするのか amana tech night Vol.2 のテーマ プロトタイピング
• 11. 前段 ¦ プロトタイピングをなぜするのか みなさんは、何のために プロトタイピングをしてますか？
• 12. 前段 ¦ プロトタイピングをなぜするのか ぼくは、 「人と向き合う」ために プロトタイピングはあると考えています。
• 13. 前段 ¦ プロトタイピングをなぜするのか まずは当然、ユーザーと向き合うためです。 ユーザー
• 14. 前段 ¦ プロトタイピングをなぜするのか ユーザー ユーザーにとって必要な企画か？ ユーザーにとって使いやすいものであるか？
• 15. 前段 ¦ プロトタイピングをなぜするのか 常にユーザーのことを考えて制作する ためにも、プロトタイピングは有効です。 ユーザー
• 16. 前段 ¦ プロトタイピングをなぜするのか 制作チーム そして、チームと向き合うためでもあります。 ユーザー
• 17. 前段 ¦ プロトタイピングをなぜするのか 制作チームでお互いの認識のズレをなくすため、 効率のよい無駄のない開発を行うため、 制作チームユーザー
• 18. 前段 ¦ プロトタイピングをなぜするのか プロトタイピングは、チームが気持ちよく開発 するためにも有効な手段なのです。 制作チームユーザー
• 19. 前段 ¦ プロトタイピングをなぜするのか 自分 そして、忘れがちなのが、 自分と向き合うためでもあるということです。 制作チームユーザー
• 20. 前段 ¦ プロトタイピングをなぜするのか 今作ろうとしているものは、本当にベストか？ 全てにおいて自分は説明できるか？ 自分制作チームユーザー
• 21. 前段 ¦ プロトタイピングをなぜするのか 自分自信に嘘をつかない、自分をごまかさない。 自分と向き合うためにも有効なのです。 自分制作チームユーザー
• 22. 前段 ¦ プロトタイピングをなぜするのか ということで、ここから本編となります！ 自分制作チームユーザー
• 23. 人と向き合う プロトタイピング
• 24. 人と向き合うプロトタイピング 1. 企画の理解 2. 遷移図 3. ラフデザイン 4. Prott チェック 5. 作り込む ペーパー プロトタイピング
• 25. 人と向き合うプロトタイピング 1. 企画の理解 5.3.2. 4. Prott ペーパー プロトタイピング 50% 重要度
• 26. 人と向き合うプロトタイピング 1. 企画の理解 5.3.2. 遷移図 4. Prott ペーパー プロトタイピング 50 40% 重要度 重要度
• 27. 人と向き合うプロトタイピング 1. 企画の理解 5. 作り込む3. ラフデザイン2. 4. Prott チェック ペーパー プロトタイピング 50 40 10% 重要度 重要度 重要度
• 28. 人と向き合うプロトタイピング 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 重要度 重要度 重要度
• 29. 1. 企画の理解 1. 企画の理解 5.3.2. 4. Prott ペーパー プロトタイピング 50% 40 10 重要度
• 30. 1. 企画の理解 プロトタイピングというと、
• 31. 1. 企画の理解 1. 5.3. ラフデザイン2. 遷移図 4. Prott チェック ペーパープロトタイピング ここの部分のことを指すと思いますが、
• 32. 1. 企画の理解 1. 企画の理解 5.3.2. 4. Prott ペーパープロトタイピング この部分に入る前こそ、 一番大事だと考えています。
• 33. 1. 企画の理解 実際に着手し始める前に、 見極めておきたい3点があります。
• 34. 1. 企画の理解 ユーザーのゴールを明確にする ゴールにつながっているか 抵抗はないか
• 35. 1. 企画の理解 この3点を意識して企画を 見直してみましょう。
• 36. 1. 企画の理解 ¦ ユーザーのゴールを明確にする ユーザーのゴールを明確にする ゴールにつながっているか 抵抗はないか
• 37. 1. 企画の理解 ¦ ユーザーのゴールを明確にする 企画には必ず 対象ユーザー がいます。
• 38. 1. 企画の理解 ¦ ユーザーのゴールを明確にする 本当にそのユーザーのために なっている企画ですか？
• 39. 1. 企画の理解 ¦ ユーザーのゴールを明確にする ユーザーの目的「体験のゴール」 はどこになるかを明確にしましょう。
• 40. 1. 企画の理解 ¦ ユーザーのゴールを明確にする Lobiの大方針としてのゴール 「ゲームを通じて人と繋がる」
• 41. 1. 企画の理解 ¦ ユーザーのゴールを明確にする これをブレイクダウンすると、 ・ユーザーがオープンなコミュニティでチャットする ・ユーザー同士が興味を持ち、フォローし合う ・ユーザーがプライベートチャットで話し合う…
• 42. 1. 企画の理解 ¦ ユーザーのゴールを明確にする …など、どんどん明確なゴールが 見えてきます。
• 43. 1. 企画の理解 ¦ ユーザーのゴールを明確にする 具体的なゴールであればあるほど 具体的なアクションがとれます。
• 44. 1. 企画の叩き ¦ ゴールにつながっているか ユーザーのゴールを設定する ゴールにつながっているか 抵抗はないか
• 45. 1. 企画の理解 ¦ ゴールにつながっているか ゴールを設定したら、次は企画が ゴールにつながっているかを見直します。
• 46. 1. 企画の理解 ¦ ゴールにつながっているか 企画時点で、ゴールにつながらない 開発・改修がないかを確認していきます。
• 47. 1. 企画の理解 ¦ ゴールにつながっているか 実作業に入り出す前に、 不必要な部分を削ぎ落とすことで、
• 48. 1. 企画の理解 ¦ ゴールにつながっているか 作業の無駄、認識のズレ、使いずらくなる、 などの無駄を省くことができます。
• 49. ユーザーのゴールを設定する ゴールにつながっているか 抵抗はないか 1. 企画の理解 ¦ 抵抗はないか
• 50. 1. 企画の理解 ¦ 抵抗はないか リニューアルや改善では、 大きく分けて2種類のユーザーがいます。
• 51. 1. 企画の理解 ¦ 抵抗はないか 新規ユーザー 既存ユーザー リニューアルレベルの大きな企画では
• 52. 1. 企画の理解 ¦ 抵抗はないか 新規ユーザー 既存ユーザー 新規ユーザー向けの企画が多いと思います。
• 53. 1. 企画の理解 ¦ 抵抗はないか それを意識した上で、大事なのは、 そのもう一方のユーザーのこと。
• 54. 1. 企画の理解 ¦ 抵抗はないか 新しい機能は、 既存のユーザーの機能でもあります。
• 55. 1. 企画の理解 ¦ 抵抗はないか 企画の意図とは別に、今まで通りの 機能が問題なく使えるか？ 
• 56. 1. 企画の理解 ¦ 抵抗はないか その新しい機能は、 既存ユーザーに抵抗はないか？
• 57. 1. 企画の理解 ¦ 抵抗はないか UIの設計に着手する前に、 この点を見過ごしてしまうと、
• 58. 1. 企画の理解 ¦ 抵抗はないか 大きく修正、場合によっては 企画の根本からの見直しになります。
• 59. 1. 企画の理解 ¦ 抵抗はないか 見過ごしがちですが、 もっとも重要な点です。
• 60. 1.5. ペーパープロトタイピング 1. 5.3.2. 4. Prott ペーパー プロトタイピング 50 40 10
• 61. 1.5. ペーパープロトタイピング ペーパープロトタイピングは、 チームが大人数の場合に
• 62. 1.5. ペーパープロトタイピング チームと向き合うために、 最大の効果を発揮します！
• 63. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 利点 その1 批評モードを避けられる
• 64. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 作りきったデザインを チームレビューにかけると、
• 65. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる チームメンバー個々のイメージと 違う結果になり、
• 66. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる きつい議論が起きたり、 巻き戻りが発生したりしますよね。
• 67. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 人数が多いチームだと、 その分意見の数も増えます。
• 68. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる これは「具体的すぎる」 ということが原因だったりします。
• 69. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 絵が出来上がった状態だと、 その絵の良し悪しの議論になりがち。
• 70. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる その絵に至った経緯や考え方より、 絵自体に話が終始しがちです。
• 71. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる プロトタイピングでは絵の美しさ より、考え方、設計が大事です。
• 72. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる その絵に至った経緯や考え方より、 絵自体に話が終始しがちです。
• 73. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる ペーパープロトタイピングは、 いわば骨組みの状態です。
• 74. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 修正可能・参加可能なフェーズ なので、批評モードではなく、
• 75. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる 最小限の工数で、チーム全体に 「考え」を伝えることができます。
• 76. 1.5. ペーパープロトタイピング ¦ 利点その1 : 批評モードを避けられる ユーザーのためになるアクションを、 無駄な議論で不意にせず済みます。
• 77. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ 利点 その2 個々のイメージの擦り合わせ
• 78. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ ペーパープロトタイピングでは 職種は関係ありません。
• 79. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ 画面自体の必要性、要素の確認…
• 80. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ エンジニア目線からの挙動や実装 を考慮したアイデアなど、
• 81. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ あとで入りそうな意見も、 先に吸収できるチャンスです。
• 82. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ そしてみんな当事者になったことで 個々の認識を共有でき、
• 83. 1.5. ペーパープロトタイピング ¦ 利点その2 : 個々のイメージの擦り合わせ 大人数のチームでも、 イメージのすり合わせを行えます！
• 84. 1.5. ペーパープロトタイピング ¦ まとめ 利点 その1 批評モードを避けられる 利点 その2 個々のイメージの擦り合わせ
• 85. 1.5. ペーパープロトタイピング ¦ まとめ プロトタイピング用ペーパーは、
• 86. 1.5. ペーパープロトタイピング ¦ まとめ ネット上でも簡単にゲットできるので、
• 87. 1.5. ペーパープロトタイピング ¦ まとめ 印刷してつかってみましょう！
• 88. 2. 遷移図 1. 5.3.2. 遷移図 4. Prott ペーパー プロトタイピング 50 40% 10
• 89. 2. 遷移図 ペーパープロトタイピングは、 プロジェクトが進むにつれ、
• 90. 2. 遷移図 放置される可能性があるので、 (更新コスト / 更新を伝えるのも面倒)
• 91. 2. 遷移図 ここでおすすめするのが、 マインドマップによる遷移図です！
• 92. 2. 遷移図 実際の必要な画面と、 要素の洗い出しをすることで
• 93. 2. 遷移図 自分の中での振り返りと、 抜け漏れのないUI設計を行なえます。
• 94. 2. 遷移図 ペーパープロトタイピングの有無 に関わらず、遷移図は重要！
• 95. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 利点 その1 頭の中の整理 と 現状把握
• 96. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 いきなりデザインを起こすと、 要素やページの抜け漏れ、
• 97. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 現状把握が不十分なまま、 デザインを追加することになりがち。
• 98. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 デザインを捨てたり、 更新を繰り返すのはすごいコスト。
• 99. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 遷移図を書くと 頭の中の整理 と 現状把握 ができます。
• 100. 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 ページ名だけではなく その中の要素も書くのが大事。
• 101. t 2. 遷移図 ¦ 利点その1 : 頭の中の整理 と 現状把握 Mindmeister https://www.mindmeister.com おすすめのツール
• 102. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 利点 その2 行き止まりとエラーの発見
• 103. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 単純に画面遷移をまとめるだけでも 便利なのですが、
• 104. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 その他にも、0件表示やエラーなど 行き止まりの存在を把握できることが
• 105. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 遷移図がもたらす最たるもの だと考えています。
• 106. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 ユーザーの目線に立って、 行き止まりを見つけたとき、
• 107. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 どんな提案があれば、気持ち良く サービスを体験できるか。
• 108. 2. 遷移図 ¦ 利点その2 : 行き止まりとエラーの発見 要件以上の +αの部分まで 考える土台が出来上がります。
• 109. 2. 遷移図 ¦ まとめ 利点 その1 頭の中の整理 と 現状把握 利点 その2 行き止まりとエラーの発見
• 110. 3. ラフデザイン 1. 企画の叩き 5.3. ラフデザイン2. 4. Prott ペーパー プロトタイピング 50 40 10
• 111. 3. ラフデザイン ここからは実際に使っている ツールのお話をさくさくと。
• 112. ここから作り込むところまで Sketch というツールを使っていきます。 t 3. ラフデザイン ¦ Sketch
• 113. t 3. ラフデザイン ¦ Sketch プロトタイピング / UIデザインに向いている 大きな利点が3つあります。
• 114. t 3. ラフデザイン ¦ Sketch の利点その1 : データ・挙動の軽さ 利点その1 : データ・挙動の軽さ iOS-templete.sketch 655 KB
• 115. t 3. ラフデザイン ¦ Sketch の利点その1 : データ・挙動の軽さ 画像をいれれば重くなるのはPhotoshop などと同じですが、 iOS-templete.sketch 655 KB
• 116. t 3. ラフデザイン ¦ Sketch の利点その1 : データ・挙動の軽さ 基本的なファイルサイズが圧倒的に違います！ そして挙動も軽い。 iOS-templete.sketch 655 KB
• 117. t 3. ラフデザイン ¦ Sketch の利点その2 : 画面を並べて作業できる 利点その2 : 画面を並べて作業ができる ArtBoard
• 118. t 3. ラフデザイン ¦ Sketch の利点その2 : 画面を並べて作業できる ページ数・パターン出しが多くなりがちな UIデザインにはこの機能、うってつけなのです。 ArtBoard
• 119. t 3. ラフデザイン ¦ Sketch の利点その3 : 素材書き出しが簡単 利点その3 : 素材書き出しが簡単 Output
• 120. t 3. ラフデザイン ¦ Sketch の利点その3 : 素材書き出しが簡単 @2x, @3xなども簡単に書き出せるほか、 レイヤーをドラッグ&ドロップで書き出せます！ Output
• 121. 3. ラフデザイン ¦ Sketch まとめ 利点その3 : 素材書き出しが簡単 利点その2 : 画面を並べて作業ができる 利点その1 : データ・挙動の軽さ
• 122. 3. ラフデザイン ¦ Sketch まとめ もちろん導入するにあたっての デメリットもあります。
• 123. 3. ラフデザイン ¦ Sketch まとめ ベクターツールも使い勝手は やはりIllustrator .sketch というオリジナルの拡張子 ウォークスルーなど作り込みは やはりPhotoshop Photoshop使い泣かせのショートカット
• 124. 3. ラフデザイン ¦ Sketch まとめ それでも挑戦してみてほしい 魅惑のデザインツールです！
• 125. 4. Prott チェック 1. 企画の叩き 5.3.2. 4. Prott チェック ペーパー プロトタイピング 50 40 10
• 126. t 4. Prott チェック KAYAC ではプロトタイピングツール として Prott を採用しています。
• 127. t 4. Prott チェック Flinto などと同じで、 ユーティリティツールのプロトタイプにぴったり！
• 128. 4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能 利点その1 : オーガナイゼーション機能
• 129. 4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能 KAYAC ではクライアントワークなども含めて 多数のアプリ制作が行われています。
• 130. 4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能 オーガナイゼーションで共有されたプロジェクトは 社内のデザイナーなら誰でも、チェックできます！
• 131. 4. Prott チェック ¦ 利点その1 : オーガナイゼーション機能 これで簡単にデザインチームでの UIレビューや、進行の確認などができます。
• 132. 4. Prott チェック ¦ 利点その2 : iOSアプリでネイティブのような快適さ 利点その2 : iOSアプリでネイティブのような快適さ t
• 133. 5. 作り込む 1. 企画の叩き 5. 作り込む3.2. 4. Prott ペーパー プロトタイピング 50 40 10%
• 134. 5. 作り込む 基本的にこのフェーズも Sketch を使って進めていきます。
• 135. 5. 作り込む ¦ ツールの使い分け ウォークスルー（チュートリアル） ストアのスクリーンショットなど作り込み要素 t Adobe Photoshop
• 136. 5. 作り込む ¦ ツールの使い分け t Adobe Illustrator アイコンやベクターデータで製作するものは、 スピード優先で Illustrator を使用
• 137. t 5. 作り込む ¦ ツールの使い分け Sketch Sketchを基軸に適したツールを使いつつ、 画面を作りこんでいきます。
• 138. 人と向き合うプロトタイピング ¦ まとめ 1. 企画の叩き 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10%
• 139. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ 表面のインタラクションや、 ビジュアルデザインなどの見た目に、
• 140. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ 目が向きがちですが、
• 141. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ インターフェース・サービスは 人と向き合うもの。
• 142. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ 企画自体が本当にユーザーのため になっているか。
• 143. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ もっと歩み寄った設計や、 アイデアを盛り込めないか。
• 144. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ 自分自身に嘘をつかず、 チーム全員の理解を深めながら ユーザーと向き合って開発をする。
• 145. 1. 企画の理解 5. 作り込む3. ラフデザイン2. 遷移図 4. Prott チェック ペーパー プロトタイピング 50% 40% 10% 人と向き合うプロトタイピング ¦ まとめ プロトタイピングは 「人と向き合う」ためにある。