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 のリニューアルにおいて実際に行ったプロトタイピングのフローと、考えをまとめました。

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