女子の心をつかむUIデザインポイント - MERY編 -

133,686 views

Published on

2015.10.07 (水) @DeNA 渋谷ヒカリエ
UI Crunch - Girls’ Night / 女子の心をつかむUIデザインのコツ <

Published in: Design
  • Be the first to comment

女子の心をつかむUIデザインポイント - MERY編 -

  1. 1. 女子の心をつかむUIデザインポイント - MERY編 - 2015.10.7 UI Crunch 田中翔子 (Goodpatch インタラクションデザイナー)
  2. 2. 2000万UU / 2.5億PV - 月間 - webだけ
  3. 3. 無料カタログ 1位 - App Store -
  4. 4. 2014.10 2015.05 2015.10 運用・改善 GP join リリース iOS・Android 設計・デザイン PJ終了 プロジェクトスケジュール
  5. 5. Q : MERYアプリ、 どんな人が作っているの?
  6. 6. ♂ ♂ ♂ ♂ ♂ ♂ ほぼ男性が「女の子の毎日をかわいく。」やってます。 UIデザイナー
  7. 7. ユーザーインタビュー 女子を知るため デザインを決めるため 使い心地を保証するため ユーザーアンケート ユーザーQA MERY女子の心を知るためにやったこと
  8. 8. 女子の心をつかむUIデザインポイント - MERY編 - 抜粋3つ 本当はもっといっぱいある
  9. 9. 1. 女子に媚びない
  10. 10. こういうの、やめた。 ピンク・デコデコ・キラキラ・パステル…etc
  11. 11. ユーザー層の拡大 ECにむけて、大人の女性も 使ってもらえるように コンテンツを邪魔する要素は 徹底的に断捨離 コンテンツをより主役に なんで、やめたの?
  12. 12. original web redesign iOS
  13. 13. original web redesign iOS
  14. 14. ピンクを少なく 印象を「幼いピンク」→「洗練された白」へ #FC7C79 #EB6A7A
  15. 15. 情報を詰め込みすぎない ゆったり余白をもつ、文字・写真を大きく
  16. 16. ユーザーに選ばせすぎない ユーザーが選択してもらう色を絞る、見た目をコントロール #EB6A7A #808284 何百種類 2色
  17. 17. 2. でも、さりげにかわいく
  18. 18. 角を丸く 画面・線・画像・アイコンを優しく
  19. 19. ぷるぷるのLOVE ほどよく動きに特徴をもたせる
  20. 20. 言い方ポジティブ 「応援」と伝える、強制的に誘導させない
  21. 21. 3. 長い爪を考慮
  22. 22. 爪長ユーザー
  23. 23. Q:指の使い方違うの わかりますか?
  24. 24. A: 指の側面で操作 指の腹使えない!
  25. 25. ボタン押すで削除 爪に引っかかり スワイプ削除できない
  26. 26. 波紋で大きく 爪でアイコンがかぶる LOVEよく見えない
  27. 27. 女子の心をつかむUIデザインポイント - MERY編 - 女子に媚びない でも、さりげにかわいく 長い爪を考慮 1 2 3
  28. 28. MERY女子の心をつかむ新機能 COMING SOON! とくにAndroidやばい 震える!! ? 告知
  29. 29. 今後とも、MERYをどうぞよろしくお願いします!

×
Save this presentationTap To Close