女子にうけるUIはどうやって作られるか？ネイルブックのデザインプロセス大公開！

confidential
女子にうけるUIはどうやって作られるか？
〜ネイルブックのデザインプロセス大公開〜
株式会社スピカ
正木友佳

Copyright © Spika Inc. 2014 all rights reserved.
confidential
株式会社スピカ
正木友佳
2
自己紹介：元エンジニアです
2年ほど前まで
アプリ作ってました
python、objective-c 書けます

confidential
3
自己紹介：ディレクターは3年目
という2サービスの
ディレクターをしています！
具体的には…
アプリやwebの企画やUI設計
SEOやASO対策、お問い合わせ対応 etc.
色々とやってます
簡単な開発やログ調査だったら自分でやっちゃいます！

confidential
4
サービスのご紹介
サービス開始 2011年4月30日
対応言語日本語・中国語・英語
対応OS iOS/Android
URL http://nailbook.jp
累計100万枚のネイルが投稿されている日本最大のネイル写真共有サービス

confidential
利用イメージ
5
1. 次のネイルデザインを検索！ 2. サロンに来店してオーダー
こんなイメージでお願いし
ます
次のネイルはこんなイメー
ジでやりたい！
• 当日サロンでデザインに悩んで施術時間が短くなる
• ネイリストにうまくイメージを伝えられず思い通りのデザインにならなかった
といった失敗を減らすことができます。

confidential
6
アプリダウンロード数
ダウンロード
有料プロモーションを行わず、クチコミで広がっています
累計120万DL
（2015.7）
累計DL
0
200,000
400,000
600,000
800,000
1,000,000
1,200,000

confidential
7
写真投稿数
写真枚数
4.5万枚/月
（2015.8）
累計102万枚
（2015.8）
ネイリスト投稿比率
ネイリスト
72%
一般
28%
ネイリストからの写真投稿が多く、
良質な写真が豊富に掲載されていま
す
0
200,000
400,000
600,000
800,000
1,000,000
累計投稿数
毎月4.5万枚以上の写真が投稿されています

confidential
8
今年6月に姉妹アプリが出ました
ネイルブックに掲載されているサロンの
検索と予約ができます
DLはコチラから

confidential
9
エンジニア上がりのディレクターなので…
デザインの話はデザイナーさんにお任せします！
• デザインプロセスについて
• デザインに迷ったら…
• UI改善の具体例
についてお話させていただきます。

confidential
10
使っているツール
制作コミュニケーション
テスト分析

confidential
ネイルブックのデザインプロセ
ス
11

confidential
12
デザインプロセス①：ペーパープロトタイピング（小）
まずはノートで1人で
ワイヤーフレームを作成
ワイヤーフレームを作るツールは
色々ありますが、手書きなのは
単にそのほうが早いし、色々と書い
て捨ててと手を動かすことで思考の
整理ができるから

confidential
13
デザインプロセス②：ペーパープロトタイピング（大）
模造紙に書いた画面の上に
付箋で補足事項や検討事項などを
貼っていく
ここはチーム全員、エンジニアもデ
ザイナーも参加
大枠が決まったら模造紙で
みんなでディスカッション

confidential
14
デザインプロセス③：モックの作成
実際に端末上で動くものを作って
操作や導線に違和感がないか確認

confidential
15
デザインプロセス④：社内ヒアリング
実装前に社内でヒアリングを実施
リテラシ低めのアルバイトやインター
ンを捕まえてやりたいことが正しく出
来ているか確認する
• 意図した通りに使ってもらえるか？
• 迷った場合は何が原因なのか？
どう改善すれば良いと思うか？

confidential
16
デザインプロセスをきっちり決めても…
各所で揉め事が起きがち
ディレクター vs デザイナー
デザイナー vs エンジニア
ディレクターが
どのデザインを選択すべきか
悩んでしまって決められない

confidential
17
デザイン決定に迷った時①
背景と目的を再確認
背景と目的や狙いを明確にし
たうえでデザインを依頼
どういう目的や意図があって
どこを変更したのかを改めて
デザイナーに確認する

confidential
18
デザイン決定に迷った時②
UXから考える
物理フィルター感性フィルター妄想フィルター
物理的な条件で絞り込む自分の感性と合うか
チェックする
どういう体験ができるか
想像する
女ゴコロフレームワーク
詳細はコチラの資料をご覧ください！

confidential
19
デザイン決定に迷った時③
第三者的視線を入れてみる
• 別チームにヒアリング
• どんなデザインがユーザに
好評だったか？
• 数値が出ていればそこも
• ユーザからの意見はないか？
• ターゲットユーザが
読んでいそうな雑誌を眺める

confidential
20
デザイン決定に迷った時④
とりあえずやってみる
そのためにAndroidファースト
で開発を進めている
申請がなく失敗してもすぐリカ
バリができる
ただし…
• 中途半端なことはやらない
やるなら大胆に
• しっかり振り返りを実施する

confidential
21
おまけ：デザインに対する取り組み
毎週デザイン輪読会を実施
デザイナーはもちろん
ディレクター、エンジニア
アルバイトなど業種、立場に関わらず
大勢が参加してデザインの基礎を学ぶ

confidential
22
何も特別なことはしてません
すぐにできることばかりなので
真似できるところは是非取り入れてみてください！
このプロセスでどうUI改善をしたのか
具体例を軽くご紹介します。
ディレクター×デザイナーだけではなく
デザイナー×エンジニアにも
同じことが言えると思います。

confidential
23
人気アプリのUIはどんどん盗め！
写真の拡大回数
+50%

confidential
24
何ができるかをわかりやすく
新規会員登録数
+8%
4週間後継続率
＋5%

confidential
25
とりあえずやってみた結果…
フローティングボタンを
検索導線として追加
利用回数は上部検索ボタンの
1/5

confidential
26
おまけ：女性はこんなふうに見えている！

confidential
27
まとめ
デザインプロセスを整理することで
手戻りも少なくでき、
アプリの開発、改善サイクルも早くなります。
最初は面倒かもしれませんが、後々効いてくるので
ぜひチーム・組織に合わせて考えてみてくださいね。

confidential
28
さいごに
株式会社スピカでは
デザイナーを募集しています！
ご興味ある方はこの後
声をかけていただけると嬉しいです。
Wantedlyにも採用情報を掲載してるので、
併せてご確認お願いします！
10/22（木）にヒカ☆ラボでも登壇します。
サロンブックについての話を聞きたい方は
チェックしてみてください。

女子にうけるUIはどうやって作られるか？ネイルブックのデザインプロセス大公開！

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to 女子にうけるUIはどうやって作られるか？ネイルブックのデザインプロセス大公開！ (20)

女子にうけるUIはどうやって作られるか？ネイルブックのデザインプロセス大公開！