2人で楽しくサービスやアプリを作る話

2人で楽しくサービスやアプリを作る話

1. 1. 2人で楽しく サービスやアプリを作る話 id:kamadango THX pairs: yusukebe , hoyo , ken , yamasan and yassang(illustration) 子供のころは、秘密基地作ってる最中が一番楽しかったり しました。小さいサービスやアプリを2人で作るときに、 企画・設計・開発を「2人で」楽しく進められるように、 いくつかのサービスで行ってきた具体的な事例をベースに、 簡単にできる方法を話します。
2. 2. 2 目次 #### アイスブレイク #### ものづくりのフローを楽しく - ものづくりのフロー - ブレストの基本 - ホワイトボードの基本的な使い方 - スケジュール調整の基本 #### イメージをすり合わせて一緒に形にしていく - リード・ファーストフォロワーを2人で使い分ける - アドホックペルソナと簡易シナリオ #### リアルの時間を楽しく過ごす - メッセージやりとり - 開発合宿 朝イチなので 楽しくいきましょう
3. 3. 3 アイスブレイク
4. 4. 4 自己紹介 慶應義塾大学総合政策学部卒業。在学中は奥出直人研究室に所属。 ウェブ・映像・デザイン・Flash・DTPの技術から、チームマネジ メントまでを広く学ぶ。同研究室にて、六面体映像デバイスの特許 を取得。共同卒業制作の枕型通信デバイスがNHKデジタルスタジア ムで紹介される。電波少年をはじめとした、ドキュメントバラエティ が好きで、自身も47都道府県を軽トラックで廻ったり、自転車で 日本を横断するなど旅好き。卒業後は日本テレビ放送網株式会社に 就職。音楽番組の制作に従事。日本テレビ退職後、ウェブデザイン 会社トロッコ株式会社を共同で設立、同取締役に就任。翌年12月 に、株式会社オモロキを設立、同代表に就任。一番すごいと思う仕 組みは、伊勢神宮の式年遷宮。写真で一言ボケてを立ちあげる。 職歴 株式会社オモロキ 代表取締役 2007-12 - 日本テレビ放送網株式会社 2005-04 - 2007-03 鎌田武俊 id:kamadango 出身：静岡県熱海市 1982年 生まれ 4
5. 5. 5 @yusukebeさんと。Podcast 「だんごゆっけの平和な話」収録中の一枚。撮影@941さん。 Rebuildfmに触発されて始めたPodcastは近況共有兼ねて2年半。 一緒に働いて8年。出会って15年。
6. 6. 6 ヤギのカスミに優しく話しかけるyusukebe氏
7. 7. 7 卵焼きと思いきや、ネギのついたポテトを食べる yusukebe氏
8. 8. 8 美味しかっただろう顔
9. 9. 9 ご縁なのか同じ部屋でこの後yusukebe氏が お話します
10. 10. 10 ものづくりの フロー
11. 11. 11 コンセプト → デザイン → プロトタイピング
12. 12. 12 コンセプト → デザイン → プロトタイピング 仕組→設計→実装 日本語で言うと
13. 13. 13 コンセプト → デザイン → プロトタイピング 仕組→設計→実装 ←「何を作るか」なのでここが肝
14. 14. 14 少人数ほど「何を作るか」 の意思疎通がしやすい。 2人のメリットは、 仕組みづくりを楽しく深く できること
15. 15. 15 コンセプト＝仕組み を作るときには
16. 16. 16 デザイン思考が便利
17. 17. 17 哲学 → ビジョン → アイデア → モデル → コンセプト → デザイン → プロトタイピング デザイン思考のフロー 仕組 設計 実装→ → 仕組みを細分化しているので、 「何で・何のために・どうやって・どう組み合わせて作るか」 を2人で話せる。作るものを言語化するので共通理解が得られ 差し戻しやブレがなくなる→最初時間掛かるけど結果楽
18. 18. 18 哲学 何が好きでしょうがないか love to 哲学 → ビジョン → アイデア → モデル → コンセプト → デザイン → プロトタイピング
19. 19. 19 ビジョン 世界をどう変えたいか want to 哲学 → ビジョン → アイデア → モデル → コンセプト → デザイン → プロトタイピング
20. 20. 20 アイデア ビジョンを実現する仕掛け parts for concept 哲学 → ビジョン → アイデア → モデル → コンセプト → デザイン → プロトタイピング
21. 21. 21 モデル 既にある仕組みにたとえると model for concept 哲学 → ビジョン → アイデア → モデル → コンセプト → デザイン → プロトタイピング
22. 22. 22 コンセプト ビジョンを実現する仕組み assemble ideas 哲学 → ビジョン → アイデア → モデル → コンセプト → デザイン → プロトタイピング
23. 23. 23 デザイン 現実に落とし込む設計 UML・UI/UX 哲学 → ビジョン → アイデア → モデル → コンセプト → デザイン → プロトタイピング
24. 24. 24 ユースケース図 シーケンス図 クラス図 ユーザーはこのサービスで 実際何ができるのか ユーザーはこのサービスで実 際どういう流れをとるのか パーツをどのように分けて、 つなげて、振るまわせるか UML
25. 25. 25 プロトタイピング 設計したものを動かす programing 哲学 → ビジョン → アイデア → モデル → コンセプト → デザイン → プロトタイピング
26. 26. 26 哲学 思想:先人が世に残した言葉 経験:強く影響を受けた出来事 ビジョン コンセプト デザイン（設計） プロトタイピング（実装） バックグラウンド:今やる理由 ミッション:解決されうる社会的問題 モデル:社会に認知されている仕組み アイデア:ビジョンを実現する仕掛け フィールドワークに出かける→ コンセプトを言語化し、ワンワードにしていく ペルソナ・シナリオ:利用され るシーンを物語で記述 デザインメタファー:社会に認知され ているデザインのモデル ものづくりのフロー フィールドワークに出かける→ 哲学に戻りブラッシュアップしながら再度ループ UML:実装可能な具体的な設計 UI/UX:コンセプトとユーザー のつながりを設計
27. 27. 27 哲学：笑いが好き 思想:落語は人の業を肯定する 経験:笑いで学生時代救われた ビジョン：面白い人が大活躍 コンセプト：写真に一言ボケる ウェブサービス デザイン（設計） プロトタイピング（実装） バックグラウンド:ネットができた ミッション:面白い人がもっと評価される モデル:集合知・教科書の落書き アイデア:写真にボケる・良い評価だ け・ランキング 先行事例調査・友人と紙面でやってみる ペルソナ・シナリオ:利用され るシーンを物語で記述 デザインメタファー:学校 ボケての場合 α版公開→作ったものを目のまえで使ってもらっ てどこにつまづくかを見ながらヒアリング UML:実装可能な具体的な設計 UI/UX:コンセプトとユーザー のつながりを設計
28. 28. 28 ものづくりの フローを楽しく
29. 29. 29 ものづくりを 進めていく上で
30. 30. 30 大事なことは
31. 31. 31 楽しさ
32. 32. 32 その鍵を 握るのは
33. 33. 33 ブレスト
34. 34. 34 ブレストする 意味って何だろう
35. 35. ブレストの意味？ブレストの意 味？ブレストの意味？ブレスト の意味？ブレストの意味？ブレ ストの意味？ブレストの意味？ ブレストの意味？ブレストの意 味？ブレストの意味？ブレスト の意味？ブレストの意味？ブレ ストの意味？ブレストの意味？ 35 な ん だ ろ う ？
36. 36. 36 答えは
37. 37. 37 ２人の経験 は違うから
38. 38. 38 キ ュ ピ ー ン ！
39. 39. 39 例えばポストを対象にとったとき ・赤い ・鉄でできている ・郵送物を入れる場所 こういう機械論的な記述は、誰にでもわかり、再現性がある。 でもこれは知識であって、経験の記述ではないんですよね。 1人でできること。 2人でブレストする場合は現象学的なアプローチが取れる。 ・つるつるしてて冷たそうだな ・懐かしいな ・上に乗って遊んでる子を見たことあるな ・錆びた塗装の上に塗装を重ねてたな これは個人の純粋な経験からくること。 自分じゃない人の経験を加えることで、2人で作る楽しさが増す。
40. 40. 40
41. 41. 41 対象に対して 想起するものが違うから
42. 42. 42
43. 43. 43 2人でやる 意味がある
44. 44. 44 ブレストのルール
45. 45. 45 ❶ 量を出す ❷ 肯定する ルール ルール 100点満点中 5点でいいから 相手と自分は 経験が違うから 哲学 → ビジョン → アイデア → モデル → コンセプト → デザイン → プロトタイピング ・フローを分けることによって、ブレストの領域が切られて散らからなくなる
46. 46. 46 5点の案が 次の10点出す 土台になる
47. 47. 47 次は
48. 48. 48 ホワイトボードの 使い方
49. 49. 49 これは好み ありますが
50. 50. 50 僕はこんな 感じ
51. 51. 51 これがホワイトボード だとすると
52. 52. 52 ←ビニールテープ or マーカーで線
53. 53. 53 作業エリア確定エリア
54. 54. 54 会議タイトル 日時 場所 ・決めること ・決まったこと ・決めること ・決まったこと ・決めること ・決まったこと 次回日程・宿題 今話していることのタイトル 作業エリア確定エリア 表現しずらいもの図示 ・箇条書きで5点の案を書く ・箇条書きで5点の案を書く ・箇条書きで5点の案を書く ・箇条書きで5点の案を書く ・箇条書きで5点の案を書く ・箇条書きで5点の案を書く ・箇条書きで5点の案を書く ・箇条書きで5点の案を書く ・箇条書きで5点の案を書く ・箇条書きで5点の案を書く ・箇条書きで5点の案を書く ・箇条書きで5点の案を書く 表現しずらいもの図示 ←良い案でたら左側へ 写メ撮って右側は消す
55. 55. 55 ストレスが あると
56. 56. 56 楽しくない
57. 57. 57 ストレス だわ～ってなる
58. 58. 58 ホワイトボード ストレスあるある
59. 59. 59 ・ボードが汚い
60. 60. 60 ・書いたら書けない
61. 61. 61 ・界面活性剤➕雑巾で始める前にボードを 真っ白に。ボードの種類に応じて洗剤選択 ・ホワイトボードマーカーは1本36円～ なので、出なくなったら率先して捨てる
62. 62. 62 ストレスを ケアする 手間がストレス
63. 63. 63 この解決は
64. 64. 64 これはもう 愛情しか ないと思う
65. 65. 65 人生の
66. 66. 66 醍醐味 だと思って
67. 67. 67 愛とは何かを 考えながら
68. 68. 68 ホワイトボー ド綺麗にしま しょう
69. 69. 69 ノートは こんな感じ
70. 70. 70
71. 71. 71 次は
72. 72. 72 スケジュール調整 の基本
73. 73. 73 スケジュール 調整は
74. 74. 74 超大事
75. 75. 75 スケジュール 調整も ストレス要因
76. 76. 76 ストレス だわ～ってなる
77. 77. 77 スケジュール ストレスあるある
78. 78. 78 ・いつ空いてる？
79. 79. 79 ・どこがいいかな？
80. 80. 80 スケジュール 調整の基本は
81. 81. 81 ×紳士 ○押し紳士
82. 82. 82 こんな感じ
83. 83. 83
84. 84. 84
85. 85. 85 ・相手のルーティーンの予定を把握して、確 度の高い日程、場所を押す。 ・各駅にあつまれる場所を知っておく ・日時は曜日まで入れると優しい ・場所は店まで入れると優しい ・時間は24時間表記 ・喫茶店とかの場合タベログ市民権ある
86. 86. 86 確定させるの は自分という
87. 87. 87 押し紳士
88. 88. 88 お互いに
89. 89. 89 イメージをすり合わせ 一緒に形にしていく
90. 90. 90 リード・ファーストフォロワーを 使い分ける
91. 91. 91 おかしなこと を言って
92. 92. 92 スルー されると
93. 93. 93 ストレス だわ～ってなる
94. 94. 94 2人しかいな いんだぜ…
95. 95. 95 デレク・シヴァーズ 「社会運動はどうやって起こすか」 https://www.ted.com/talks/derek_sivers_how_to_start_a_movement?language=ja&utm_source=twitter.com&utm_medium=social&utm_campaign=tedspread
96. 96. 96 やろうぜ！ やろう！
97. 97. 97 やろうぜ！：リード やろう！：ファーストフォロワー
98. 98. 98 どっちかの やろうぜ！ だけだと
99. 99. 99 ストレス だわ～ってなる
100. 100. 100 最初のユーザー はお互い。 大切にしよう
101. 101. 101 ・「あたり」をつける人←勇者!!!! ・ホワイトボードを書記する人 ・スケジュールを設定する人 ・外部と交流設定する人 ・上記に気持ち良く賛同する人
102. 102. 102 これが回ると すごく 気持ちいい
103. 103. 103 楽しい
104. 104. 104 後光も 見えるようになるかも
105. 105. 105 割合は 2人の感覚で
106. 106. 106 アドホックペルソナと 簡易シナリオ
107. 107. 107 ペルソナ・シナリオ はインタラクション デザインをするのに 有用
108. 108. 108 問題は コストがかかる 時間➕手間
109. 109. 109 週末に2人で やる際のハードル高い
110. 110. 110 もちろん やれるなら ちゃんとやった方がいい
111. 111. 111 アドホックペルソナと簡易シナリオ 事情により調査が行えない場合には、手持ちのデー タと推測によって作られる暫定ペルソナ（アドホッ クペルソナ）が用いられる。 アドホックペルソナにより、想定であたりをつけ たユーザーのあたりをつけたシナリオを書く。
112. 112. 112 2人の特権 = 最大公約数が大きい
113. 113. 113 アドホックペルソナに 共通の友人を置く
114. 114. 114 〇〇くんだったら こうやるよねと 今までの付き合いの コンテキストから 簡易シナリオ書く
115. 115. 115 ・持っているデバイスが何なのか ・日常接しているメディアが何なのか ・使用頻度 →想定するユーザーを2人で対象に取れること →想定するシナリオが共通にあること
116. 116. 116 そしてその友人が 3人目のユーザーに
117. 117. 117 リアルの時間を 楽しく過ごす
118. 118. 118 良いものを作りたい のと同じくらい 良い時間を過ごすこと が大事
119. 119. 119 メッセージやりとり
120. 120. 120 週末だけだと メッセンジャーや Slackのやりとり 多くなる
121. 121. 121 ありがとう言えてるか
122. 122. 122 悪いねに置き換わって ないか
123. 123. 123
124. 124. 124 もともと僕も例えば エレベーターで先に 降りさせてもらった時
125. 125. 125 すいませんって 言っていたので 少しずつ寄せてきました
126. 126. 126 自分のスキルで 誰かに感謝されると 嬉しいので
127. 127. 127 一番身近な人が メッセージやりとりで 明確にやるといいです
128. 128. 128 開発合宿
129. 129. 129 今までやってきて 開発合宿は 有効だと思う
130. 130. 130 人生有限なので
131. 131. 131 プライベートな空間を 共有すること
132. 132. 132 わりと無意識的に 相手を大事にするよう になる
133. 133. 133
134. 134. 134
135. 135. 135 ただ
136. 136. 136 開発合宿は
137. 137. 137 段取りが大変
138. 138. 138 予算・場所・期間
139. 139. 139 熱海いいよ！
140. 140. 140 ・品川→熱海 新幹線40分 / 東海道線120分 ・圧倒的な宿泊施設の量と質 ・海(7/9-海開き) ・花火（夏 7/24/29・8/5/8/18/21/26) ・温泉 ・釣り ・ゆったりしたい時は南熱海もおすすめ http://www.ataminews.gr.jp/ 熱海観光協会公式サイト
141. 141. 141 熱海温泉ホテル旅館協同組合公式サイト 熱海温泉お宿ナビ http://www.atamispa.com/ 宿泊料金早見表ページ秀逸
142. 142. 142 ありがとうございました！