週1 UI トレース Instagram編

Instagramのアプリ(iOS版)のホーム・検索ページ・マイページ・投稿ページをトレースしました！全体的にはこんな感じです。

検索ページを除き、パッと見た印象としてはホワイトスペースが多めな方だなと思ったのと特にホームは写真のインパクトが大きいなという点です。それでは詳しく見てみましょう。

詳しくみてみる

ホーム

検索ページ

マイページ

投稿ページ

使っている色

トーレスをしてみて思ったこと
●文字のメリハリがあまりないけど文字と写真のメリハリがある
●ハートマークでいいね
●ホームの写真サイズは大きめだけどそんなに窮屈に見えない
●ホームアイコンがちょっと変わっている
●さりげない色使い

文字のメリハリが少ない
文字サイズの幅は10〜15pxといった感じでした。他のサービスと比べると割と小さめだなと感じます。でも、Instagramの特性を考えると文字よりも写真を大切にしてるイメージがあるので写真と文字とのメリハリはちゃんとあるなと思いました。

ハートマークでいいね
色々なサービスでハートマークが浸透しつつありますが同じハートマークでも「スキ」だったり「お気に入り」だったりと意味は様々になっています。Instagramもハートマークを使用していますがこちらは「いいね」という意味でのハートマークでした。

ホームの写真サイズの話
iPhone6sでホームを見ると画面の半分以上が写真になるほど大きいんです。でも、窮屈に感じないのはホワイトスペースの使い方だったり、文字のメリハリの話でも書いた文字サイズが小さめなことが関係してくるのかなと思いました。

ホームアイコンがちょっと変わっている
上の３つの話から比べると話の重要度としては低い話になりますがInstagramのホームアイコンは屋根が飛び出ていなくて積み木みたいな形なんです。色々なアプリのメニューバーでホームのアイコンを良く見かけますがそれらもサービスらしさを表しているのかなと思いました。
なお、TtmblrもInstagram同様のホームアイコンでした。

さりげない色使い
アプリアイコンや未読のストーリーのところで使われているオレンジと紫のグラデーションカラー、単体で見るとすごく派手な色だと思います。でもストーリーのところに使われているグラデーションは画面全体を見てもちょっも目立つぐらいで全然浮かないのが色の使い方が上手いなと感じました。

まとめ

●文字よりも写真を大事にしているサービス
●写真と文字のメリハリがある
●派手な色も派手に見せない