デザインスキルを上げるには、良いデザインを真似ること。私が尊敬するデザイナーの先輩達は皆口を揃えてそう言います。
１日ひとつdribbbleなどからかっこいいロゴや名刺などを選んでトレースすると良い。 そのときに、なんで自分がかっこいいと思ったのかを考えること。
デザイナーになる秘訣！Time Ticketで、石嶋未来さんに会ってきた - NOGA BLOG
UIデザイナーで、本当にスキルを身に着けたい人は、新規事業とかのキラキラした仕事を求めるのではなく、TwitterとFacebookアプリをSketch3で完コピして、何故このUIなのか背景を理解して、Prottで動かして触って、iOSのガイドラインを読み込むと早いと思うよ。
— Tomo Tsubota (@tsubotax) 2016年6月12日
とはいえ、これからUIを学ぼうという方には、どうやってトレースをすれば良いのかもわからないと思うので、Sketchでトレースするやり方を説明します。
できるだけ丁寧には書いていますが、超基本的な使い方は省きました。初めての方は、以下の記事を参考にしてもらえればと思います。以前、ASCIIさんに寄稿させていただいた初めての方向けのチュートリアルです。
SketchでTwitterのプロフィール画面をトレースしよう
さあ、はじめましょう！Twitterのプロフィール画面をトレースします。
スクリーンショットを用意してください。
トレースの準備
Insert > Artboard（ショートカット：A）からスクリーンショットと同じ端末のアートボードを、見本用とトレース用に2枚配置します。今回は、iPhone 6で作っています。
スクリーンショットを Insert > Imageから読み込み、アートボードに配置します。iPhone 6は解像度が2倍なので、スクリーンショットは半分のサイズにします。
ここら辺の解像度の話は、この記事がわかりやすかったです。
準備完了！
四角で画像やボタンを配置する
まずは、ヘッダー画像です。スクリーンショットの上で四角（ショートカット：R）をヘッダー画像と同じサイズになるように描きます。
拡大しながら、1ptもずれないように...!
四角が描けたらコピーして、トレース用のアートボードを選択してペーストすると、見本のアートボードと同じ座標で配置できます。（アートボード左上のアートボード名をクリックすると選択できます。ちゃんとアートボードを選択しないと、適当な位置にペーストされてしまいます。）
サムネイル画像は、同じように四角を配置したら、右のインスペクターのRadiusで角を丸くします。
この作業を繰り返します。
画像をはめ込む
Craftというプラグインを使って、ヘッダー画像とサムネイルに実際の画像をはめ込みます。
プラグインのPhotos > Web に、今回トレースするページのURLを入力します。サムネイルの四角を選択した状態で、Craft内に表示されているサムネイル画像をクリックすると四角の塗りに画像が適用されます。
（ ※ 画像のCraftはアップデート前のちょっと古いバージョンです。）
サムネイル画像に、線はついていないのでBorderは外しましょう。
ヘッダー画像はうまく読み込めなかったので、WebのとなりのタブにあるUnsplashを使いました。カテゴリを選んでPlace Photosを押すと、Web上からランダムに画像を引っ張って配置してくれます。
ヘッダー画像に真っ白な画像を設定するとわかるのですが、画像の上に黒透過のグラデーションがかかっています。
細かくやりたい人は、Fillsの+ボタンからグラデーションの塗りを追加しましょう。
ボタンを塗る
スポイトを使って、同じ色に塗ります。スポイトで拾った色は、色のウィンドウの下の方にある、Document Colorsの＋ボタンを押して保存しましょう。
トレースで色を拾うときは、画面内に何種類の色が使われているか、似ているのに実は違う色がないか注意しながらやると良いです。
テキストを配置
文字も同様に配置していきます。ぴったり重なっているか分かるように色を変えています。フォントはシステムフォントなので、英字はSF UI Text 和字はヒラギノ角ゴです。
SF UI TextはAppleのデベロッパーページからダウンロードできます。
ぴったり重ねるのはなかなか難しいですが、サイズ・ウェイト・文字間・高さに気を使いながら丁寧にトレースします。
その他を仕上げる
セグメンテッドコントロール（ツイートとかメディアを切り替えるやつ）は以下の図のように分解すると作りやすいです。
左ボタンの四角は左側だけ角が丸くなっています。をダブルクリックすると、角を個別に選択できるので、左の角だけ選択して丸くしましょう。
アイコンのトレースは今回は省略します。アイコンの代わりに同じサイズの四角を配置しても良いですし、複製したスクリーンショットから、アイコンの部分だけ切り抜いて使っても良いと思います。（切抜く場合は、スクリーンショットの画像をダブルクリックすると画像の編集モードになり、範囲を選択して切り抜くことができます。）
こんな感じです！
タブバーとりゅうちぇるのツイートも同様にトレースしてください。
完成ー！
オブジェクトを選択した状態でoptionを押しながら、他のオブジェクトにカーソルを合わせると、オブジェクト同士の間隔を測れます。サイズや間隔に同じ数値は使われていないか、何かの倍数になっていたり、共通するルールはないか探してみましょう。
トレースして気づいたこと
以下、私がトレースをして気付いたことです。
セグメンテッドコントロールとボタンの角丸は同じ
両方とも5ptです。ただしボタンの高さは30pt、セグメンテッドコントロールの高さは31ptで同じではありませんでした。
プロフィール内のサムネイル画像のと、ツイート内のサムネイル画像は角丸の比率を合わせている
今回はたまたまプロフィール画像の背景が白だったので見えませんが、実際はプロフィールのサムネイルに白いボーダーが付いています。ボーダーを除いた実際のアイコンサイズで画像の大きさを同じにして重ねると、角丸の比率が同じであることがわかります。
同一文章内でも英字と和字のフォントサイズが違う
プロフィール内の文章は、和字が1pt小さくなっていました。和字は英字より大きく見えるため、見た目上のバランスが整うようにしているのだと思います。Instagramも同様、文字サイズを変えていました。
文章内の水色は若干暗い
文字は塗りに比べて面積が小さい分、色が薄く見えてしまうので、見た目上同じになるように調整しているのかなと思ったのですが、セグメンテッドコントロールやタブバーの文字は暗くなっていませんでした。単純に、可読性を高めるために暗くしているのかもしれません。
サイズのルールはあまり見つけられなかった...
両端に12pxマージンを取って揃えていることくらいですね。他のページも何枚かトレースをすれば、もう少し何か見えてくるかもしれません。
次はあなたの番だ！
慣れれば時間はそんなにかからないです。トレーニングとしてはかなり最適だなと改めて感じました。人に勧めてないで、私もちゃんとやります...
[追記]
はてぶされないなあ...(ちらっ