Instagram画面をXdでトレースしてみた
今回はInstagram画面をAdobeXdでトレースしました。
準備としてiPhoneでInstagramのスクショを撮ってXdに配置します。
ここでXd特有の機能を発見しました。
ドラックで配置すると、1枚1枚が重ならず、横一列に整列して配置されました！これは便利。
この中からトレースして面白そうな画面を選びます。
次にアートボードを作成します。
アートボードサイズですが、スクショはiPhone7（750px-1334px）なのでアートボードもこのサイズで作成します。
Xd既存のアートボードサイズ一覧からiPhone7を選ぶと、1/2サイズの375-667で作成されるので、これを2倍のサイズにすると750px-1334pxになります。
いつも迷うのですが、1/2サイズでトレースするのか？実サイズでトレースするのか？が、分かりません。でも下記の様な記事を見つけたので私は実サイズでトレースしています。
ーーーーーーー
qiita.com
[ピクセル：描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要がある]
[ポイント：boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成する]
ーーーーーーー
UIトレースをされている方に聞いてみたいのですが、みなさんはどのサイズでトレースしていますか？ご意見・ご指摘下さい。
さて、アートボードの用意ができました。左は見本、右はトレース用です。
使用されているフォントを調べてみると、「San Francisco（サンフランシスコ）」というシステムフォントです。
iOS9からこのSan Franciscoが採用されているようです。
San Franciscoはこちらからダウンロードできます。
また、San Franciscoについて説明されている分りやすい記事を２つ見つけました。
要点をまとめると。
San Franciscoは、iPhone, iPad, Mac用の「San Francisco」と、Apple Watch用の「San Francisco Compact 」があり、各デバイスサイズで読みやすい設計になっている。
さらにサブファミリーとしてDisplay（見出し用）とText（本文用）があり、こちらはフォントサイズ（20px）を境に、システムが自動的に切り替えてくれる。
※デザイナーはこのような仕様があることを理解した上でデザインする必要がある。
実は私...上記の仕様を知らず、フォントをダウンロードして全てのテキストに対して「Display」を使ってトレースしていました！
次回からトレースする時は、見出し用の「Display」と本文用の「text」を使い分けようと思います..。
「フォントはデザインとエンジニアリングの交差点にあります。」と記述されている通り、デザインする際にはフォントの知識も必要だと気付きました。
それでは、トレースして気づいたことをまとめます。
トレースして気づいたこと
まずはこちらの画面。
XdにあるUIkitにはこのナビマークが無かったのでSketchのUIテンプレートからXdにコピペできるかな？と思い試しにコピペしてみると、壊れることなく貼れました。しかも編集できるパスの状態でです。Sketch→Xdへはできる様です。逆にXd→Sketchへは、ペーストはできるがパスは画像化され編集できなくなりました。
テキストもぴったり合わせていきます。
赤文字部分のトレース結果は下記になりました。
和文＝24pt/Regular
英文=26pt/Regular
行間=36pt
（疑問：Xdの編集パネルって単位が書かれていないけど、ptでいいのかな？）
ケイ線はよくよく見たら透けている。
今回衝撃的だった事実。右側列の画像の横幅だけ1px狭い。
デバイスの横幅は750px。
画像1枚のサイズは249-249の正方形。
画像と画像の間の余白は2px空き。
これで計算すると、249（画像横幅）×3（枚）+4（2pxの余白が2箇所）=751。
1px多くなってしまいました。
この1pxを削るために、右側列だけ横幅が248になっているのだと思われます。
1px狭くても、全部正方形に見える。人の目は1pxの差なら気づかないのですね。
次にこちらの画面です。
テキストの三点リーダーは、San Franciscoだと下付きになってしまった。
なので本文と三点リーダーを別のテキストボックスで作り、グループ化しました。
（書体によって中央だったり下付きだったりと変わるんですね）
全部同じ高さでもいい気がするけど、なぜ違うんだろう？
ロゴタイプはBillabongというフォントが似ています。
Instagram風の書体を使いたい時は参考になりそう。
今回は以上です。
細かくやろうと思えばどこまでも細かくできますが、1つのトレースに時間をかけるより、多くのアプリをトレースをしたいので、良き所で切りをつけます。
最後に。
Instagramのロゴが現在のデザインにリニューアルするまでの試行錯誤が、動画で紹介されています。ロゴってこれだけの行程と時間をかけて完成するものなんだと改めて感じます。動画もおしゃれだな。
今後の課題：
フォントの理解
px,pt,dpiの理解
ではまた〜
