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

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-

7. つくっているもの | 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% 人と向き合うプロトタイピング ¦ まとめプロトタイピングは「人と向き合う」ためにある。

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

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

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(20)

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

Similar to 人と向き合うプロトタイピング(20)

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