【Sketch】TwitterのUIをトレースしながら研究しよう!(初心者向け)

UIデザイナーの、のがちゃんです!

デザインスキルを上げるには、良いデザインを真似ること。私が尊敬するデザイナーの先輩達は皆口を揃えてそう言います。 

1日ひとつdribbbleなどからかっこいいロゴや名刺などを選んでトレースすると良い。 そのときに、なんで自分がかっこいいと思ったのかを考えること。

デザイナーになる秘訣!Time Ticketで、石嶋未来さんに会ってきた - NOGA BLOG

とはいえ、これからUIを学ぼうという方には、どうやってトレースをすれば良いのかもわからないと思うので、Sketchでトレースするやり方を説明します。

できるだけ丁寧には書いていますが、超基本的な使い方は省きました。初めての方は、以下の記事を参考にしてもらえればと思います。以前、ASCIIさんに寄稿させていただいた初めての方向けのチュートリアルです。

ascii.jp

SketchでTwitterのプロフィール画面をトレースしよう

さあ、はじめましょう!Twitterのプロフィール画面をトレースします。

f:id:noga0419:20160704212322p:plain

スクリーンショットを用意してください。

 トレースの準備

f:id:noga0419:20160703013132p:plain

Insert > Artboard(ショートカット:A)からスクリーンショットと同じ端末のアートボードを、見本用とトレース用に2枚配置します。今回は、iPhone 6で作っています。

f:id:noga0419:20160702220537p:plain

スクリーンショットを Insert > Imageから読み込み、アートボードに配置します。iPhone 6は解像度が2倍なので、スクリーンショットは半分のサイズにします。

ここら辺の解像度の話は、この記事がわかりやすかったです。 

seesaakyoto.seesaa.net

 

f:id:noga0419:20160702220709p:plain

準備完了!

四角で画像やボタンを配置する

f:id:noga0419:20160702220913p:plain

まずは、ヘッダー画像です。スクリーンショットの上で四角(ショートカット:R)をヘッダー画像と同じサイズになるように描きます。

f:id:noga0419:20160702220853p:plain拡大しながら、1ptもずれないように...! 

f:id:noga0419:20160703013809p:plain

四角が描けたらコピーして、トレース用のアートボードを選択してペーストすると、見本のアートボードと同じ座標で配置できます。(アートボード左上のアートボード名をクリックすると選択できます。ちゃんとアートボードを選択しないと、適当な位置にペーストされてしまいます。)

f:id:noga0419:20160703020559p:plain

サムネイル画像は、同じように四角を配置したら、右のインスペクターのRadiusで角を丸くします。

f:id:noga0419:20160702233704p:plain

この作業を繰り返します。

画像をはめ込む

Craftというプラグインを使って、ヘッダー画像とサムネイルに実際の画像をはめ込みます。

www.invisionapp.com

f:id:noga0419:20160702233819p:plain

プラグインのPhotos > Web に、今回トレースするページのURLを入力します。サムネイルの四角を選択した状態で、Craft内に表示されているサムネイル画像をクリックすると四角の塗りに画像が適用されます。

( ※ 画像のCraftはアップデート前のちょっと古いバージョンです。)

サムネイル画像に、線はついていないのでBorderは外しましょう。

f:id:noga0419:20160702234931p:plain

 ヘッダー画像はうまく読み込めなかったので、WebのとなりのタブにあるUnsplashを使いました。カテゴリを選んでPlace Photosを押すと、Web上からランダムに画像を引っ張って配置してくれます。

ヘッダー画像に真っ白な画像を設定するとわかるのですが、画像の上に黒透過のグラデーションがかかっています。

 

細かくやりたい人は、Fillsの+ボタンからグラデーションの塗りを追加しましょう。

ボタンを塗る

f:id:noga0419:20160702235022p:plain

 スポイトを使って、同じ色に塗ります。スポイトで拾った色は、色のウィンドウの下の方にある、Document Colorsの+ボタンを押して保存しましょう。

トレースで色を拾うときは、画面内に何種類の色が使われているか似ているのに実は違う色がないか注意しながらやると良いです。

テキストを配置

f:id:noga0419:20160702235132p:plain

 文字も同様に配置していきます。ぴったり重なっているか分かるように色を変えています。フォントはシステムフォントなので、英字はSF UI Text和字はHiragino Sansです。

qiita.com

 SF UI TextはAppleデベロッパーページからダウンロードできます。

f:id:noga0419:20160703000410p:plain

ぴったり重ねるのはなかなか難しいですが、サイズ・ウェイト・文字間・高さに気を使いながら丁寧にトレースします。

その他を仕上げる 

セグメンテッドコントロール(ツイートとかメディアを切り替えるやつ)は以下の図のように分解すると作りやすいです。

f:id:noga0419:20160703001143p:plain

左ボタンの四角は左側だけ角が丸くなっています。をダブルクリックすると、角を個別に選択できるので、左の角だけ選択して丸くしましょう。

アイコンのトレースは今回は省略します。アイコンの代わりに同じサイズの四角を配置しても良いですし、複製したスクリーンショットから、アイコンの部分だけ切り抜いて使っても良いと思います。(切抜く場合は、スクリーンショットの画像をダブルクリックすると画像の編集モードになり、範囲を選択して切り抜くことができます。)

f:id:noga0419:20160703001420p:plain

f:id:noga0419:20160703001653p:plain

こんな感じです!

タブバーとりゅうちぇるのツイートも同様にトレースしてください。

f:id:noga0419:20160703004855p:plain

完成ー!

オブジェクトを選択した状態でoptionを押しながら、他のオブジェクトにカーソルを合わせると、オブジェクト同士の間隔を測れます。サイズや間隔に同じ数値は使われていないか何かの倍数になっていたり、共通するルールはないか探してみましょう。

トレースして気づいたこと

以下、私がトレースをして気付いたことです。

セグメンテッドコントロールとボタンの角丸は同じ

f:id:noga0419:20160704214453p:plain

両方とも5ptです。ただしボタンの高さは30pt、セグメンテッドコントロールの高さは31ptで同じではありませんでした。

プロフィール内のサムネイル画像のと、ツイート内のサムネイル画像は角丸の比率を合わせている

f:id:noga0419:20160704215735p:plain

今回はたまたまプロフィール画像の背景が白だったので見えませんが、実際はプロフィールのサムネイルに白いボーダーが付いています。ボーダーを除いた実際のアイコンサイズで画像の大きさを同じにして重ねると、角丸の比率が同じであることがわかります。

同一文章内でも英字と和字のフォントサイズが違う

f:id:noga0419:20160704201401p:plain

プロフィール内の文章は、和字が1pt小さくなっていました。和字は英字より大きく見えるため、見た目上のバランスが整うようにしているのだと思います。Instagramも同様、文字サイズを変えていました。

【追記】

でした!すみませんmm

文章内の水色は若干暗い

f:id:noga0419:20160704201226p:plain

文字は塗りに比べて面積が小さい分、色が薄く見えてしまうので、見た目上同じになるように調整しているのかなと思ったのですが、セグメンテッドコントロールやタブバーの文字は暗くなっていませんでした。単純に、可読性を高めるために暗くしているのかもしれません。

サイズのルールはあまり見つけられなかった...

f:id:noga0419:20160704215839p:plain

両端に12pxマージンを取って揃えていることくらいですね。他のページも何枚かトレースをすれば、もう少し何か見えてくるかもしれません。 

 

次はあなたの番だ!

慣れれば時間はそんなにかからないです。トレーニングとしてはかなり最適だなと改めて感じました。人に勧めてないで、私もちゃんとやります...

 

こちらもあわせてどうぞ!

noga0419.hatenablog.com

 

はてぶ、シェア励みになります!