はじめてのアプリUIトレース：Instagram編
今回は、みんな大好きInstagramをトレースしました！
最近のアップデートでアカウントページのナビゲーションバーが結構変わりましたね👀
新しい機能である ネームタグ が追加され、 コレクション が下からナビゲーションバーに追加され、 プロフィール編集 の右にあった設定がなくなり ・・・ としてこれもナビゲーションバーに追加されました。
ボリューミーになったので、全部右に敷き詰めてアカウント名を左に置いた、という感じなんですかね。（友達追加アイコンも地味にアウトライン化されてる…!）
こんなにナビゲーションバーにアクションがあるアプリってなかなかなさそう…。しかも割と脈絡ないものが並べられてる感。
さて、トレースですが今回は以下の4画面（iPhoneX）をsketchでトレースしました。（トレース過程は省きます！）
- タイムライン
- アカウントページ
- コレクション
- フォロワー
トップページの構成要素について
トップページは以下の要素で構成されています。
・ナビゲーションバー
・ストーリーズ
・タイムライン
・タブバーナビゲーションバー中央にはインスタのロゴが鎮座していますね！リリース当初から変わらない気がします。ナビゲーションバーの形?内容はページによって結構変わりますね。
少し脱線しますが、インスタのUIの変遷（主になぜタブバーの中央カメラアイコンがプラスマークに変わったのかについての考察）をまとめている方の記事を見つけたのでシェア。
📌On Instagram’s Inverted UX Iceberg
こちらの記事めちゃくちゃ面白かったので、僕が翻訳して公開していいかお願いしてみました！（快諾いただいたので今度翻訳記事書きます！I will translate this article into Japanese ASAP~~;)）
一つ一つのパーツの形の意図を考える
パーツを並べてみたらこんな感じになりました。
タイムライン
アカウントページ
フォロワーページ
- 写真（インスタのコンテンツの主役）👉 四角
- アイコンやバッジ 👉 丸
- その他のボタン系 👉 角丸の四角（丸みはバラバラ…）
というような感じで、前回トレースしたメルカリと同じように形に役割を持たせて、何を一番見せたいのか、そのために他の要素とどう差別化させているのか、というのがわりました。
大きは特に何かの倍数で統一されている感じではなさそう。（iPhoneXだからとか関係あるのかな…）
また、文字は（トレースした画面の中で）一番小さいのが、プロフィール画面の 翻訳するで8ptでした。そこまで重要ではない（翻訳の精度もそこまで高くない?）ので小さいけれど、一番太いウェイトになっていたので見やすさは確保されている感じでした。
色の意図を考える
使われている色をざっくりまとめて見ました！
色味が少ないですね〜！。やっぱり写真を生えさせるために白を貴重としている感じがします。いつかのアップデートで「白っ！」ってなったのを覚えています。
アクセントカラーは赤色とオレンジ紫のグラデーションカラー。色味は少ないながらアクセントカラーにインスタの個性がバッチリある印象。
結構びっくりしたのが、ナビゲーションバーの色がフォロワーのページだけちがうところ....!なんでだろう...ページごとにアップデートがかかっているのかな...すごく微妙にですが、色が違いました、、
間隔・余白を考える
インスタグラムは各ページによって左右のマージンがバラバラ（ナビゲーションバーも）iPhoneXだから…?
👇トップページ
👇アカウントページ
写真の大きさは同じでしたが、間隔が微妙に違う。右の方が左よりも0.1pt広い。
また、中央のアイコンは真ん中から1pt左に寄っている…アイコン自体左右でウェイトが違うから視覚効果的に左に寄せているのかな..?
タブバーのアイコンたちはこんな感じ。
ハート以外は52pt間隔で整列している。中央プラスボタンのアイコンもきっちり真ん中に配置されている。
マージンなどではあまり共通点的なのを見出せなかった、、iPhoneXだったからかな...（3回目）
まとめ
インスタグラムは写真を主役にすべくミニマルなUIでありながら、しっかりと個性が（ブランド）が色やロゴ、それぞれのアイコンの形から伝わるデザインだなあと思いました。レギュレーション決めるの超大事。あとはリリース当初からあえて変えずにしているもので個性を確立していたりも..?
いろんな事に挑戦しているインスタグラムだからUIとかも色々実験的な部分とかあるんだろうなあ。各ページでタブバー以外のレイアウトが結構異なるから、どういうプロセスを経ているのか気になる。
でも、FBに買収された時社員数がたったの13人だったってすごすぎる。今何人いるんだろう、デザイナーさんはどれくらいいるのだろう（ググり力足りなかった。）色々と気になることがトーレースをしてみて出てきました。とりあえずオフィスに行きたい。
今回はこんな感じで終わりにしようと思います！あまり考察できんかった...!
ブログを書くと、いつも大したこと書いてないのに長くなってしまう、ので次回はもっとサクッと別のスタイルでトレースしよう。（次はiPhone8の画面でトレースしよっと）
P.S.
前回書いたメルカリトレース記事にて、トップページの商品一覧の画像のマージンが右だけ2px多めにとってある謎について、 スクロールバーを考慮した隙間ではないか と会社の先輩にコメントいただきました..!
確かにスクロールバーの幅にぴったりなのでそうかもしれません！謎が解けた😲
トレースは静止画を見つめてしまうので、動かした時も観察すると良さそう..!と思いました😊
