人と向き合うプロトタイピング
•
106 gostaram•103,962 visualizações
Event : amana tech night Vol.2 -達人達から学ぶ。実践！プロトタイピング- Location : DeNA Sakura Cafe Date : 2015.04.22 Speaker : 割石裕太 / wariemon - UI Designer @KAYAC inc. / OH amana tech night Vol.2 -達人達から学ぶ。実践！プロトタイピング 1番目のスピーカーとして登壇させていただきました。 プロトタイピングにおいて一番大事なのは「人と向き合う」ことができることだと考え、自身の担当しているサービス Lobi のリニューアルにおいて実際に行ったプロトタイピングのフローと、考えをまとめました。
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a 人と向き合うプロトタイピング
Semelhante a 人と向き合うプロトタイピング (20)
人と向き合うプロトタイピング
- 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 のテーマ プロトタイピング
- 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 重要度
- 31. 1. 企画の理解 1. 5.3. ラフデザイン2. 遷移図 4. Prott チェック ペーパープロトタイピング ここの部分のことを指すと思いますが、
- 32. 1. 企画の理解 1. 企画の理解 5.3.2. 4. Prott ペーパープロトタイピング この部分に入る前こそ、 一番大事だと考えています。
- 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
- 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
- 90. 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
- 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%
- 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% 人と向き合うプロトタイピング ¦ まとめ プロトタイピングは 「人と向き合う」ためにある。