読者です 読者をやめる 読者になる 読者になる

きしこの研究

日々の勉強をアウトプットする用だよ。

UIデザイントレース@MERY

MERYのUIデザインをトレースしました。

(現在、MERYは非公開になっています。非公開前にトレースをしていました。ギリギリ)

 

f:id:kisico0418:20170102190745p:plain

まとめ(文章にするより図でまとめていこうと思います)

 

f:id:kisico0418:20170102184755j:plain

 

f:id:kisico0418:20170102190533p:plain

 

元画像とトレースの比較↓

(文字に関してはほぼほぼ正確にできたと思う。)

 

f:id:kisico0418:20170102190905g:plain

 

←元画像 トレース→

f:id:kisico0418:20170102193232p:plain

 

 

気づいたこと

①フォントについて

日本語:多分、ヒラギノゴシック系のフォントを使用している

    →小ぶりな印象?

英数字:丸っぽいフォントを使用している

    →ガーリーな印象?

 

②角丸

他のアプリを開いてからMERYを開くと、画面全体に角丸が使用されているため

女性らしい柔らかい丸い印象を持つ。

サムネイル画像に角丸をつかうアプリはたまに見かけるが、画面全体に角丸を使用しているだけで随分と印象が違うことに気づいた。

 

③女性を徹底的に観察されている

MERYのユーザーは流行に敏感な女性が大多数です。

そのため、ネイルをしている女性も多いことを配慮して設計されデザインしているそうです。その視点で見てみると、感覚を広めにデザインされている印象がありました。

特にメニューバー。

 

画面デザインを「かわいい」だけで終わらせるだけではなくユーザーの使用環境もきちんと観察して設計できるようになりたいです。