ヒカラボさんで登壇させて頂いた資料です。 事業会社のデザイナーとして働かせて頂いて、体験したことや苦労したことを話させて頂きました。 2015/08/27 【 ヒカ☆ラボ 】nanapiのエンジニア、クリエイターのスキルチェンジ経験者3名が語る解決法！

1. @2015 nanapi inc. ALL Right Reserved.
デザイナーの私と
サービスをつくる私
山田 静佳
2015/08/27
【 ヒカ☆ラボ 】nanapiのエンジニア、クリエイターの
スキルチェンジ経験者3名が語る解決法！

2. 2
10月
山田 静佳
広告代理店で4年間ほど働く
2014年4月 nanapi中途入社
半年間、nanapi.jpを担当
2014年10月 アンサーチームにjoin
株式会社nanapi デザイナー
自己紹介

3. サービス紹介
3
即レスコミュニケーションアプリ
10代∼20代がメインのチャットコミュニティ
2013年12月 iOS版リリース
2014年5月 Android版リリース
2014年12月 Googleベストアプリ受賞

4. よく聞かれる質問

5. アンサーで
何のデザインをしているの？
Q

6. アンサーをつくってる
A

7. 今日のお話
7
10月
アンサーのデザイナーが
どんな仕事をしているか、
どんなことで苦労したかを、
nanapi入社前の私と比較しながら
お話できればと思います

8. 8
もくじ
はじめに
第1章：デザインをする今までの私
第2章：サービスをつくる今の私
第3章：今と今までの違い
アプリをデザインする
チームをデザインする
成長をデザインする
思い描いていたデザイナー像
nanapiにおけるデザイナー像
苦労したこと
おわりに

9. デザインをする今までのわたし
第1章

10. 経歴ご紹介
10
10月
2010年3月 : 大学卒業(美術大学 メディアデザイン専攻)
2010年4月 : 広告代理店に就職 (職種：Webデザイナー)
デコメ・待ち受け・バナー
ランディングページ・Webサイト制作
新規アプリ開発
2014年4月 : 広告代理店を退職
2014年5月 : nanapiに入社
nanapi.jp SP版リファクタリング
アンサーチームへ

11. 企画
UI設計
ビジュアル
デザインコンセプト
デザイン
タイポグラフィ
HTML
コーディング
nanapi入社当時のスキル (2014年4月)

12. やっぱり…
デザイナーだったら…
12
思い描いていたデザイナー像

13. ・ビジュアルデザインがさらっとできる！！
・コンセプトデザインもお茶の子さいさい！
・UI設計をちゃちゃっとこなせる！
・施策をじゃじゃーーんと実現しちゃう！！
・コーディングだってあったり前に出来ちゃう！
13
思い描いていたデザイナー像

14. nanapiにおけるデザイナー像とは
14
チームをリードして、良い影響を与えられるデザイナーは
スキルに加え豊かなマインドが備わっている

15. nanapiにおけるデザイナー像とは
15
チームをリードして、良い影響を与えられるデザイナーは
スキルに加え豊かなマインドが備わっている
リーダーシップ
企画力
仮説思考
システム思考
ファシリテーション
ビジュアルデザイン
コンセプトデザイン
コーディング
UI設計
情報設計

16. nanapiに入れば…
なんかすごい
デザイナーになれそう！
16
思い描いていたデザイナー像

17. 漠然と理想のデザイナーを想像していた…
そんな一年半前でした
17
思い描いていたデザイナー像

18. アンサーくんTips
アンサーくん
アンサー君
（箸休めコーナー）

19. サービスをつくる今のわたし
第2章

20. 20
サービスをつくる今のわたし
アプリをデザインする
チームをデザインする
成長をデザインする

21. アプリをデザインする

22. アプリをデザインする
22
iOS/Androidアプリ本体だけでなく、
BlogやLP、広告やグッズなどを含めたデザイン制作

23. iOS/Android開発
23
各プラットフォームにあったUI
iOS Android

24. iOS/Android開発
24
各プラットフォームにあったUI
iOS Android
マテリアル
デザイン対応
メニューは
タブ表示に

25. iOS/Android開発
25
AndroidStudioをつかってスタイル調整

26. iOS/Android開発
26
AndroidStudioをつかってスタイル調整
これがあればOK

27. キャンペーン
27
一周年イベントやバレンタイン・エイプリルフールなど

28. アプリ内バナー・アイコン
28
アプリ内バナーやアイコン制作

29. 広告用バナー
29
FacebookやTwitter広告

30. ユーザーリサーチ(退会調査)
30
1つの会話で
意見の食い違いがあった
概要

31. ユーザーリサーチ(退会調査)
31
色んな会話に参加して
もらう方がいいのでは？
1つの会話で
意見の食い違いがあった
概要
仮説

32. 32
実際にユーザーさんに直接お会いしてインタビューしたり
ユーザーリサーチ(インタビュー)
僕は雑談とか
話をする側ではなくて
聞く側が多いです それは何故ですか？

33. グッズ・PR
33
グッズを作ったり・POPを作ったり

34. 34
グッズ・PR (使用例)

35. 35
グッズ・PR (使用例)

36. 企画
UI設計
ビジュアル
デザインコンセプト
デザイン
タイポグラフィ
HTML
コーディング
今までのわたしのスキル

37. 企画
UI設計
ビジュアル
デザインコンセプト
デザイン
タイポグラフィ
HTML
コーディング
ユーザー
リサーチ
ユーザー
体験設計
今のわたしのスキル

38. アンサーくんTips
年齢は8歳
(年はとらない)
（箸休めコーナー）

39. チームをデザインする

40. きっかけ
40
10月プロジェクト拡大に伴い
メンバーの増加！
突然の…

41. メンバーの増加
41
４名
(2014年10月∼2015年4月)
ディレクター エンジニア
((フロント))
エンジニア
((サーバー))
デザイナー

42. 42
ディレクター エンジニア×２
((フロント))
エンジニア×２
((サーバー))
デザイナー
４名
(∼2015年4月)
６名
(2015年4月∼)
ディレクター エンジニア
((フロント))
エンジニア
((サーバー))
デザイナー
メンバーの増加

43. 43
メンバーの増加
メンバーが増えて能力は強くなったが…
みんなが同じ方向を向いていない！

44. 44
初期からいるメンバー 半年前からいるメンバー 入ってすぐのメンバー
メンバーの増加

45. 45
初期からいるメンバー 半年前からいるメンバー 入ってすぐのメンバー
メンバーの増加
少しでも認識を合わせる為に…

46. アンサーキックオフ
開発に入る前に、メンバー間でミッション・ビジョンや
アプリの価値を3日間かけて話し合う

47. 47
• 今のアンサーの印象を考えてみよう
• ビジョン・ミッションの共有
• ミッションについてチームで噛み砕こう
2
日
1
日
3
日
• バリュー(価値)について考えよう
• ペルソナについて考えよう
• どうスケールしていくか考えてみよう
• アンサーをひとことで表してみよう
アンサーキックオフ

48. キックオフ 1日目
48

49. キックオフ 2日目
49

50. 50
30代でも
気軽に入れる
ネットリテラシー
は高くない
にわかな知識でも
盛り上がれる
キックオフ 3日目

51. 51
だいたい同じ方向を向くことができた！
なるほどな〜 ふむふむ！
こっちね〜
キックオフをやったことで

52. 企画
UI設計
ビジュアル
デザインコンセプト
デザイン
タイポグラフィ
HTML
コーディング
ユーザー
リサーチ
ユーザー
体験設計
この時点での私のスキル

53. 企画
UI設計
ビジュアル
デザインコンセプト
デザイン
タイポグラフィ
HTML
コーディング
ユーザー
リサーチ
ユーザー
体験設計
チームビルド
この時点での私のスキル

54. アンサーくんTips
身長：おにぎり3つ分
体重：おにぎり3つ分
（箸休めコーナー）

55. 成長をデザインする

56. value
vision
mission
OOKK!!!! OOKK!!!!

57. value
vision
mission
施策
OOKK!!!! OOKK!!!!

58. 成長をデザインするとは
58
10月
数年後・数ヶ月後の目標に対し…
MAUがこれぐらい必要で…さらには
DAUには…ここまで増やしたい！

59. 目標数値を確認
59
10月

60. 日々のレポートを確認
60
10月

61. 施策要件
61
10月

62. 企画
UI設計
コンセプト
デザイン
タイポグラフィ
HTML
コーディング
ユーザー
リサーチ
ユーザー
体験設計
チームビルド
ビジュアル
デザイン
この時点での私のスキル

63. 企画
UI設計
ビジュアル
デザインコンセプト
デザイン
タイポグラフィ
HTML
コーディング
ユーザー
リサーチ
ユーザー
体験設計
チームビルド
ファシリ
テーション
要件定義
この時点での私のスキル
数値をみる

64. 企画
UI設計
ビジュアル
デザインコンセプト
デザイン
タイポグラフィ
HTML
コーディング
ユーザー
リサーチ
ユーザー
体験設計
チームビルド
ファシリ
テーション
要件定義
この時点での私のスキル
数値をみる
もちろん…
私ひとりがやっている訳ではありません！！

65. 企画
UI設計
ビジュアル
デザイン
コンセプト
デザイン
タイポグラフィ
HTML
コーディング
ユーザー
リサーチ
ユーザー
体験設計
チームビルド
ファシリ
テーション
要件定義
この時点での私のスキル
数値をみる

66. サービスとの相性で役割も変わり、
アンサーでは
色々な役割を経験させてもらえた！

67. アンサーくんTips
あ�りがとう！みんな
（箸休めコーナー）

68. 今と今までの違い
第3章

69. もちろん…
すべてが上手くできた訳でなく…

70. たくさんの失敗と苦労をしました…
orz

71. 71
苦労したこと①
キックオフをした流れで…
みんなで施策を検討…みんなで相談…
みんなで…みんなで…

72. 72
苦労したこと①
施策検討に時間を取りすぎて
スケジュールオーバー！
結 果
∼みんなに確認とりたい病∼

73. 73
苦労したこと②
よし！ここの目標に向かうぞ！
それにはこの施策を…
いや、でもこれ私が決めていいの？
確認した方が…自信ないし…うん…

74. 74
苦労したこと②
どこまで自分で決定して良いかわからず
決定を待って行動してしまった！
結 果
∼どこまでやっていいか分からない病∼

75. 75
苦労したこと②
どこまで自分で決定して良いかわからず
決定を待って行動してしまった！
結 果
∼どこまでやっていいか分からない病∼
今までクライアントさんがいる仕事をし過ぎて
『ここまでは考えなくていい！』と
勝手にセーブしてしまう
また、考えることをやめてしまう
∼どこまでやっていいか分からない病∼

76. そんなこともありましたが…
今では失敗を糧に前へ進んでいます！

77. コンセプト
デザイン
タイポグラフィ
HTML
コーディング
今までのわたしのスキル
企画
ビジュアル
デザイン
UI設計

78. 企画
UI設計
ビジュアル
デザインコンセプト
デザイン
タイポグラフィ
HTML
コーディング
ユーザー
リサーチ
ユーザー
体験設計
チームビルド
今の私のスキル
要件定義
ファシリ
テーション
数値をみる

79. まとめ
79
今までのわたし
『デザイン』に責任がある開発者

80. まとめ
80
今までのわたし
『デザイン』に責任がある開発者
今のわたし
デザインができるプロダクトをつくるひと

81. まとめ
81
10月
『デザイナー』という肩書きに囚われていた…
『デザイナー＝デザインするひと』
ではない！

82. まとめ
82
10月
アンサーという
プロダクトをつくるひとだ!!

83. アンサーで
何のデザインをしているの？
Q

84. アンサーをつくってる
A

85. アンサーはまだまだ
成長途中のプロダクトですが…

86. よければ…どうぞ…どうぞ
今後ともよろしくお願いいたします！
AppStore/GooglePlayで で検索！アンサー

87. 10月
ご静聴ありがとうございました
今後ともアンサーをよろしくお願いいたします。

88. アンサーくんTips
嫌いなもの：虫 (無視される)
（おまけ）