デザイナーの私と サービスをつくる私

Transcript of "デザイナーの私と サービスをつくる私"

1. 1. @2015 nanapi inc. ALL Right Reserved. デザイナーの私と サービスをつくる私 山田 静佳 2015/08/27 【 ヒカ☆ラボ 】nanapiのエンジニア、クリエイターの スキルチェンジ経験者3名が語る解決法！
2. 2. 2 10月 山田 静佳 広告代理店で4年間ほど働く 2014年4月 nanapi中途入社 半年間、nanapi.jpを担当 2014年10月 アンサーチームにjoin 株式会社nanapi デザイナー 自己紹介
3. 3. サービス紹介 3 即レスコミュニケーションアプリ 10代∼20代がメインのチャットコミュニティ 2013年12月 iOS版リリース 2014年5月 Android版リリース 2014年12月 Googleベストアプリ受賞
4. 4. よく聞かれる質問
5. 5. アンサーで 何のデザインをしているの？ Q
6. 6. アンサーをつくってる A
7. 7. 今日のお話 7 10月 アンサーのデザイナーが どんな仕事をしているか、 どんなことで苦労したかを、 nanapi入社前の私と比較しながら お話できればと思います
8. 8. 8 もくじ はじめに 第1章：デザインをする今までの私 第2章：サービスをつくる今の私 第3章：今と今までの違い アプリをデザインする チームをデザインする 成長をデザインする 思い描いていたデザイナー像 nanapiにおけるデザイナー像 苦労したこと おわりに
9. 9. デザインをする今までのわたし 第1章
10. 10. 経歴ご紹介 10 10月 2010年3月 : 大学卒業(美術大学 メディアデザイン専攻) 2010年4月 : 広告代理店に就職 (職種：Webデザイナー)        デコメ・待ち受け・バナー        ランディングページ・Webサイト制作        新規アプリ開発 2014年4月 : 広告代理店を退職 2014年5月 : nanapiに入社        nanapi.jp SP版リファクタリング        アンサーチームへ
11. 11. 企画 UI設計 ビジュアル デザインコンセプト デザイン タイポグラフィ HTML コーディング nanapi入社当時のスキル (2014年4月)
12. 12. やっぱり… デザイナーだったら… 12 思い描いていたデザイナー像
13. 13. ・ビジュアルデザインがさらっとできる！！ ・コンセプトデザインもお茶の子さいさい！ ・UI設計をちゃちゃっとこなせる！ ・施策をじゃじゃーーんと実現しちゃう！！ ・コーディングだってあったり前に出来ちゃう！ 13 思い描いていたデザイナー像
14. 14. nanapiにおけるデザイナー像とは 14 チームをリードして、良い影響を与えられるデザイナーは スキルに加え豊かなマインドが備わっている
15. 15. nanapiにおけるデザイナー像とは 15 チームをリードして、良い影響を与えられるデザイナーは スキルに加え豊かなマインドが備わっている リーダーシップ 企画力 仮説思考 システム思考 ファシリテーション ビジュアルデザイン コンセプトデザイン コーディング UI設計 情報設計
16. 16. nanapiに入れば… なんかすごい デザイナーになれそう！ 16 思い描いていたデザイナー像
17. 17. 漠然と理想のデザイナーを想像していた… そんな一年半前でした 17 思い描いていたデザイナー像
18. 18. アンサーくんTips アンサーくん アンサー君 （箸休めコーナー）
19. 19. サービスをつくる今のわたし 第2章
20. 20. 20 サービスをつくる今のわたし アプリをデザインする チームをデザインする 成長をデザインする
21. 21. アプリをデザインする
22. 22. アプリをデザインする 22 iOS/Androidアプリ本体だけでなく、 BlogやLP、広告やグッズなどを含めたデザイン制作
23. 23. iOS/Android開発 23 各プラットフォームにあったUI iOS Android
24. 24. iOS/Android開発 24 各プラットフォームにあったUI iOS Android マテリアル デザイン対応 メニューは タブ表示に
25. 25. iOS/Android開発 25 AndroidStudioをつかってスタイル調整
26. 26. iOS/Android開発 26 AndroidStudioをつかってスタイル調整 これがあればOK
27. 27. キャンペーン 27 一周年イベントやバレンタイン・エイプリルフールなど
28. 28. アプリ内バナー・アイコン 28 アプリ内バナーやアイコン制作
29. 29. 広告用バナー 29 FacebookやTwitter広告
30. 30. ユーザーリサーチ(退会調査) 30 1つの会話で 意見の食い違いがあった 概要
31. 31. ユーザーリサーチ(退会調査) 31 色んな会話に参加して もらう方がいいのでは？ 1つの会話で 意見の食い違いがあった 概要 仮説
32. 32. 32 実際にユーザーさんに直接お会いしてインタビューしたり ユーザーリサーチ(インタビュー) 僕は雑談とか 話をする側ではなくて 聞く側が多いです それは何故ですか？
33. 33. グッズ・PR 33 グッズを作ったり・POPを作ったり
34. 34. 34 グッズ・PR (使用例)
35. 35. 35 グッズ・PR (使用例)
36. 36. 企画 UI設計 ビジュアル デザインコンセプト デザイン タイポグラフィ HTML コーディング 今までのわたしのスキル
37. 37. 企画 UI設計 ビジュアル デザインコンセプト デザイン タイポグラフィ HTML コーディング ユーザー リサーチ ユーザー 体験設計 今のわたしのスキル
38. 38. アンサーくんTips 年齢は8歳 (年はとらない) （箸休めコーナー）
39. 39. チームをデザインする
40. 40. きっかけ 40 10月プロジェクト拡大に伴い メンバーの増加！ 突然の…
41. 41. メンバーの増加 41 ４名 (2014年10月∼2015年4月) ディレクター エンジニア ((フロント)) エンジニア ((サーバー)) デザイナー
42. 42. 42 ディレクター エンジニア×２ ((フロント)) エンジニア×２ ((サーバー)) デザイナー ４名 (∼2015年4月) ６名 (2015年4月∼) ディレクター エンジニア ((フロント)) エンジニア ((サーバー)) デザイナー メンバーの増加
43. 43. 43 メンバーの増加 メンバーが増えて能力は強くなったが… みんなが同じ方向を向いていない！
44. 44. 44 初期からいるメンバー 半年前からいるメンバー 入ってすぐのメンバー メンバーの増加
45. 45. 45 初期からいるメンバー 半年前からいるメンバー 入ってすぐのメンバー メンバーの増加 少しでも認識を合わせる為に…
46. 46. アンサーキックオフ 開発に入る前に、メンバー間でミッション・ビジョンや アプリの価値を3日間かけて話し合う
47. 47. 47 • 今のアンサーの印象を考えてみよう • ビジョン・ミッションの共有 • ミッションについてチームで噛み砕こう 2 日 1 日 3 日 • バリュー(価値)について考えよう • ペルソナについて考えよう • どうスケールしていくか考えてみよう • アンサーをひとことで表してみよう アンサーキックオフ
48. 48. キックオフ 1日目 48
49. 49. キックオフ 2日目 49
50. 50. 50 30代でも 気軽に入れる ネットリテラシー は高くない にわかな知識でも 盛り上がれる キックオフ 3日目
51. 51. 51 だいたい同じ方向を向くことができた！ なるほどな〜 ふむふむ！ こっちね〜 キックオフをやったことで
52. 52. 企画 UI設計 ビジュアル デザインコンセプト デザイン タイポグラフィ HTML コーディング ユーザー リサーチ ユーザー 体験設計 この時点での私のスキル
53. 53. 企画 UI設計 ビジュアル デザインコンセプト デザイン タイポグラフィ HTML コーディング ユーザー リサーチ ユーザー 体験設計 チームビルド この時点での私のスキル
54. 54. アンサーくんTips 身長：おにぎり3つ分 体重：おにぎり3つ分 （箸休めコーナー）
55. 55. 成長をデザインする
56. 56. value vision mission OOKK!!!! OOKK!!!!
57. 57. value vision mission 施策 OOKK!!!! OOKK!!!!
58. 58. 成長をデザインするとは 58 10月 数年後・数ヶ月後の目標に対し… MAUがこれぐらい必要で…さらには DAUには…ここまで増やしたい！
59. 59. 目標数値を確認 59 10月
60. 60. 日々のレポートを確認 60 10月
61. 61. 施策要件 61 10月
62. 62. 企画 UI設計 コンセプト デザイン タイポグラフィ HTML コーディング ユーザー リサーチ ユーザー 体験設計 チームビルド ビジュアル デザイン この時点での私のスキル
63. 63. 企画 UI設計 ビジュアル デザインコンセプト デザイン タイポグラフィ HTML コーディング ユーザー リサーチ ユーザー 体験設計 チームビルド ファシリ テーション 要件定義 この時点での私のスキル 数値をみる
64. 64. 企画 UI設計 ビジュアル デザインコンセプト デザイン タイポグラフィ HTML コーディング ユーザー リサーチ ユーザー 体験設計 チームビルド ファシリ テーション 要件定義 この時点での私のスキル 数値をみる もちろん… 私ひとりがやっている訳ではありません！！
65. 65. 企画 UI設計 ビジュアル デザイン コンセプト デザイン タイポグラフィ HTML コーディング ユーザー リサーチ ユーザー 体験設計 チームビルド ファシリ テーション 要件定義 この時点での私のスキル 数値をみる
66. 66. サービスとの相性で役割も変わり、 アンサーでは 色々な役割を経験させてもらえた！
67. 67. アンサーくんTips あ�りがとう！みんな （箸休めコーナー）
68. 68. 今と今までの違い 第3章
69. 69. もちろん… すべてが上手くできた訳でなく…
70. 70. たくさんの失敗と苦労をしました… orz
71. 71. 71 苦労したこと① キックオフをした流れで… みんなで施策を検討…みんなで相談… みんなで…みんなで…
72. 72. 72 苦労したこと① 施策検討に時間を取りすぎて スケジュールオーバー！ 結 果 ∼みんなに確認とりたい病∼
73. 73. 73 苦労したこと② よし！ここの目標に向かうぞ！ それにはこの施策を… いや、でもこれ私が決めていいの？ 確認した方が…自信ないし…うん…
74. 74. 74 苦労したこと② どこまで自分で決定して良いかわからず 決定を待って行動してしまった！ 結 果 ∼どこまでやっていいか分からない病∼
75. 75. 75 苦労したこと② どこまで自分で決定して良いかわからず 決定を待って行動してしまった！ 結 果 ∼どこまでやっていいか分からない病∼ 今までクライアントさんがいる仕事をし過ぎて 『ここまでは考えなくていい！』と 勝手にセーブしてしまう また、考えることをやめてしまう ∼どこまでやっていいか分からない病∼
76. 76. そんなこともありましたが… 今では失敗を糧に前へ進んでいます！
77. 77. コンセプト デザイン タイポグラフィ HTML コーディング 今までのわたしのスキル 企画 ビジュアル デザイン UI設計
78. 78. 企画 UI設計 ビジュアル デザインコンセプト デザイン タイポグラフィ HTML コーディング ユーザー リサーチ ユーザー 体験設計 チームビルド 今の私のスキル 要件定義 ファシリ テーション 数値をみる
79. 79. まとめ 79 今までのわたし 『デザイン』に責任がある開発者
80. 80. まとめ 80 今までのわたし 『デザイン』に責任がある開発者 今のわたし デザインができるプロダクトをつくるひと
81. 81. まとめ 81 10月 『デザイナー』という肩書きに囚われていた… 『デザイナー＝デザインするひと』 ではない！
82. 82. まとめ 82 10月 アンサーという プロダクトをつくるひとだ!!
83. 83. アンサーで 何のデザインをしているの？ Q
84. 84. アンサーをつくってる A
85. 85. アンサーはまだまだ 成長途中のプロダクトですが…
86. 86. よければ…どうぞ…どうぞ 今後ともよろしくお願いいたします！ AppStore/GooglePlayで       で検索！アンサー
87. 87. 10月 ご静聴ありがとうございました 今後ともアンサーをよろしくお願いいたします。
88. 88. アンサーくんTips 嫌いなもの：虫 (無視される) （おまけ）