2015.10.07 (水) @DeNA 渋谷ヒカリエ UI Crunch - Girls’ Night / 女子の心をつかむUIデザインのコツ http://ui-crunch.connpass.com/event/20562/ にて登壇した内容。 1年間iOSとAndroidのアプリの設計デザイン・運用・改善フェーズに関わったMERYアプリを元に「女子の心をつかむUIデザインポイント」をお話ししました。 MERYは、トレンドに敏感な女の子のためのサービスです。ファッション、メイク、ヘアスタイルなど女の子のためになる記事が毎日読めて、記事で紹介されたファッションアイテムなど買うことができます。 iOS https://itunes.apple.com/jp/app/mery-meri-nuno-zinotameno/id884484921?l=en&mt=8 Android https://play.google.com/store/apps/details?id=jp.peroli.mery&hl=ja

1. 女子の心をつかむUIデザインポイント
- MERY編 -
2015.10.7 UI Crunch
田中翔子 (Goodpatch インタラクションデザイナー)

3. 2000万UU / 2.5億PV
- 月間 -
webだけ

4. 無料カタログ 1位
- App Store -

5. 2014.10 2015.05 2015.10
運用・改善
GP join リリース
iOS・Android
設計・デザイン
PJ終了
プロジェクトスケジュール

6. Q : MERYアプリ、
どんな人が作っているの？

8. ♂ ♂
♂ ♂
♂
♂
ほぼ男性が「女の子の毎日をかわいく。」やってます。
UIデザイナー

9. ユーザーインタビュー
女子を知るため デザインを決めるため 使い心地を保証するため
ユーザーアンケート ユーザーQA
MERY女子の心を知るためにやったこと

10. 女子の心をつかむUIデザインポイント
- MERY編 -
抜粋3つ
本当はもっといっぱいある

11. １. 女子に媚びない

13. こういうの、やめた。
ピンク・デコデコ・キラキラ・パステル…etc

14. ユーザー層の拡大
ECにむけて、大人の女性も
使ってもらえるように
コンテンツを邪魔する要素は
徹底的に断捨離
コンテンツをより主役に
なんで、やめたの？

15. original web redesign iOS

16. original web redesign iOS

17. ピンクを少なく
印象を「幼いピンク」→「洗練された白」へ
#FC7C79 #EB6A7A

18. 情報を詰め込みすぎない
ゆったり余白をもつ、文字・写真を大きく

19. ユーザーに選ばせすぎない
ユーザーが選択してもらう色を絞る、見た目をコントロール
#EB6A7A #808284
何百種類 ２色

20. 2. でも、さりげにかわいく

21. 角を丸く
画面・線・画像・アイコンを優しく

22. ぷるぷるのLOVE
ほどよく動きに特徴をもたせる

23. 言い方ポジティブ
「応援」と伝える、強制的に誘導させない

24. 3. 長い爪を考慮

25. 爪長ユーザー

26. Q:指の使い方違うの
わかりますか？

27. A: 指の側面で操作
指の腹使えない！

28. ボタン押すで削除
爪に引っかかり
スワイプ削除できない

29. 波紋で大きく
爪でアイコンがかぶる
LOVEよく見えない

30. 女子の心をつかむUIデザインポイント - MERY編 -
女子に媚びない でも、さりげにかわいく 長い爪を考慮
1 2 3

31. MERY女子の心をつかむ新機能
COMING SOON!
とくにAndroidやばい
震える！！
?
告知

32. 今後とも、MERYをどうぞよろしくお願いします！