sketchを使ってInstagramをトレースしてみた（ 考察 ）
デザイン勉強中のゆんゆん（ @ynokmt ）です。
さて今回は、Instagramのホーム画面をトレースした考察を書いていこうかな、と。
やり方は割愛します。代わりに、私が参考にした記事を載せておきますね。
では早速、私もアプリの中で一番触っているのでは？というくらい愛用中の、InstagramのUIを詳しく見ていくことにします。
ちなみに私の使っているiphone6の画面の大きさ（ 375 × 667px ）で行なっています。
【 ホーム画面 】
これが実際にトレースした画面。
見ていきますよ〜☞
（ 所々0.5pxの線が出てきますが、採る部分によって色がかなり違ったりするので今回は省きます... ）
一番上から、、、
・heightは64px、背景色は#FAFAFA。
・ロゴは調べたらすぐ出てくるんですけど、Billabongというフォントを元に作られているようですね。（ ここら辺はコピペしました、、笑 ）
・カメラと紙飛行機のシンボル？は両方ともW24 × H21( px ) で造られていて、外側に対して12pxずつマージンを設けられていました。
・下部に0.5pxの線を引くことで区切られています。
次はスートーリーズ
・高さは123.5px、背景色は#FAFAFA。
・『Stories』の文字はSF Pro Text（ Semibold ）が12px、#262626で使用されていますね。
『Watch All』は、色だけ違って#909090。
・ストーリーズのアイコンの大きさは同じですね（ 直径56px ) 。その周りには0.5pxの縁あり。
・自分以外のストーリーの周りにある外円は直径64px、線の太さは1px、色は#C7C7C7。
・自分のストーリーを追加するボタンは直径15px、#3697F4。ボタンの中の + は14px、#FFF8FF。アイコンとボタンとの余白は1pxですね。
上の投稿者のアイコン、ユーザー名のところから...
・heightは54.5px、背景色は#FFFFFF。
・アイコンの直径は32px、周りに0.5pxの縁あり。外側に対して、10pxの余白あり。
・文字はSF Pro Text（ Semibold ）、12px、#3D3838。
投稿された画像について
・画像は375 × 375pxの正方形。
・写真の最上部に0.5pxの線が引かれているが、半透明なので投稿した画像の影響を受けて変化。（ 不透明度はわからなかった、、 ）
最後に切り替え部分ですね。
・これも最上部に仕切りとして0.5pxの線が引かれていますね。
・この部分のheightは45px、背景色は#FAFAFA。
・各々のコンポーネントについては、ユーザーが今どこを使っているかわかりやすくなってます。色は共通で#262626ですが、使用中の場所のシンボルは太く、又は塗りつぶ部された状態。
〈 まとめ 〉
・左側はカメラマークと自分のストーリー、右側は紙飛行機マークが各々、外側に対して12pxのマージンを設けられている
・ストーリーズまでの上部と、一番下の切り替え部分の背景色はどちらも#FAFAFAで統一されている
・ストーリーズの内円の直径が56px、外円が64px、投稿者のアイコンの直径は32pxということで、8の倍数で揃えられている
・使われたフォントはSanFransisco Pro Text と SanFransisco Pro Display、共にSemibold 、12px。
ちなみに、、、
全て（ ストーリーと投稿画面は覗く ）の画面をトレースしてみた結果
・アイコンは一部を除いて殆どが、４の倍数（の直径）で出来ている
・12pxを基準に、４の倍数で両端のマージンをおいているのが多い
・フォントは英字は全てSanFransisco Pro Text と SanFransisco Pro Display。
・角丸は3〜5 px。 角丸のあるシンボルの高さが28pxで共通だったから共通項探してみたけど、ちょっとわからなかった...。
・以下の４箇所は背景色が共通（ #FAFAFA ）
そんな感じですかね。
他にも、ここがこうだよ！みたいなのあったら是非教えていただけると、、、！
（ 間違ってるよ〜の指摘もお待ちしてます、、笑 ）
