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

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

- MERY編 -

2015.10.7 UI Crunch

田中翔子 (Goodpatch インタラクションデザイナー)

2000万UU / 2.5億PV

- 月間 -

webだけ

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

2014.10 2015.05 2015.10

運用・改善

GP join リリースiOS・Android

設計・デザイン

PJ終了

プロジェクトスケジュール

Q : MERYアプリ、

どんな人が作っているの？

♂ ♂ ♂ ♂

♂♂

ほぼ男性が「女の子の毎日をかわいく。」やってます。

UIデザイナー

ユーザーインタビュー

女子を知るためデザインを決めるため使い心地を保証するため

ユーザーアンケートユーザーQA

MERY女子の心を知るためにやったこと

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

- MERY編 -

抜粋3つ

本当はもっといっぱいある

１. 女子に媚びない

こういうの、やめた。

ピンク・デコデコ・キラキラ・パステル…etc

ユーザー層の拡大ECにむけて、大人の女性も

使ってもらえるように

コンテンツを邪魔する要素は

徹底的に断捨離

コンテンツをより主役に

なんで、やめたの？

original web redesign iOS

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

#FC7C79 #EB6A7A

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

ユーザーに選ばせすぎないユーザーが選択してもらう色を絞る、見た目をコントロール

#EB6A7A #808284

何百種類２色

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

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

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

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

3. 長い爪を考慮

爪長ユーザー

Q:指の使い方違うの

わかりますか？

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

ボタン押すで削除

爪に引っかかり

スワイプ削除できない

波紋で大きく

爪でアイコンがかぶる

LOVEよく見えない

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

女子に媚びないでも、さりげにかわいく長い爪を考慮

1 2 3

MERY女子の心をつかむ新機能 COMING SOON!

とくにAndroidやばい

震える！！

?

告知

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

Design