おはよー！
デザイナーとして駆け出して2年目の管理人みっぽこです。
UIトレースを始めるとき「具体的に何をやればいいのかわからない….」と出だしでつまづいてませんか？
今回の記事は、UIトレースの基本の5つのステップをまとめました。
この記事は以下のような人におすすめ！
- UIトレースのやり方が知りたい
- デザインを始めたばかりで書き方がよくわからない
- これであっているか不安
この記事を読めば、UIデザインの基本がしっかりとつかめるでしょう。
そして、やり方がわかることでUIデザインをもっとやりたい！とワクワクな気持ちで取り組んでほしいという想いをこめました！
取り掛かるハードルを少しでも下げるために、デザイン分析シートのテンプレートも記事の最後に配布します！
UIトレース前の心構え
いよいよトレース！UIトレースで重要なポイントは2つ。
- 1pxにこだわってトレースをする
- 時間がかかりそうなところは思い切って飛ばしちゃう
いいデザインを1pxにこだわってトレースすることで、なぜこのマージン幅にしたのか、なぜこの角丸の大きさなのかデザイナーさんの細部のこだわりを学ぶことができます。
UIデザインの法則性や規則を知る上でも重要なので、1pxにこだわってトレースしましょう！
UIトレースで大事なことは、続けることです。
完璧を求めすぎてハードルが上がりすぎて、一画面も終わらせることができなかった。。
というふうに挫折してしまっては、せっかくのUIデザインを身に着けたい！というワクワクした気持ちがもったいないです。
まずはハードルをさげて取り組むことがおすすめです。
UIトレースを始めよう！3STEP
今回ご紹介する3つのステップはこちら！
- STEP１UIトレースの準備
まずは準備をしよう！
- STEP2トレース
ポイントも合わせてご紹介
- STEP3気づきをまとめる
最後にデザイン分析シートプレゼント！
UIトレースは継続が大事！
完璧にやろうとせず、まずは少しずつ肩の力を抜いて取り組みましょう！
それでは、どうぞ！
STEP1:UIトレースの準備
さっそく始めましょう！
①スクリーンショットを用意し、figma内に配置
トレースするスクリーンショットを配置します。
右側にはトレース用のFrameを同じ画面幅で配置します。
②グリッドを設定する
グリッド用のFrameを作成します。画像にあるようにグリッドを作成し、わかりやすいように赤色にします。
参考画像と、トレースしていく画面にグリッドを設定することで、要素やマージンが何ピクセルかがわかりやすくなります。
動いてやりづらい！となったらフレームをロックしましょう。
▼グリッド用のFrameを作成
設定は、Size:8, Color:#FF0000 30%
▼グリッドを配置
これでトレースの準備完了！
いざトレース！
STEP2:トレースをする
①図形をつかって画像やボタンの骨組みをざっくり配置する。
グリッドが邪魔なときは非表示にして調整しましょう！
②図形を配置した場所に画像を当てはめる
UIトレースは要素の大きさや配置、マージン、フォントサイズが重要なので、写真などはサンプルで問題ありません。
そこでおすすめなプラグイン「unsplash」をご紹介します。
プラグインを起動すると、無料の画像を使用することができます！
③図形を配置した場所にテキストを当てはめる
④細かい部分を作る
アイコンなど余力があるときは、トレースにチャレンジしてみましょう！
色は、スポイトツールを使用してそっくりそのまま表現します。
⑤トレース完了！
これでトレースは完了です。
STEP3:気づきをまとめる
分析のコツは「葉を見る」→「木を見る」→「森を見る」
デザインがなぜそうなっているのかを「見て」「言語化」するのがUIデザインの真骨頂！
1pxにこだわってトレースしたことで、デザインに穴が開くほど見たあとだからこそ、気づくことがたくさんあります。
「葉を見る」→「木を見る」→「森を見る」を意識して、なぜデザインがそうなっているかを分析してみましょう。
この分析手法は、「デザインのみかた」という本で学びました！
本書では実践を通してデザインを「見る力」と「言語化する力」を学ぶことができます。ほぼ画像やイラストを使って説明しているので、イメージしやすくすごくわかりやすい！本書をご紹介する記事も今後書きたいと思っているので、ぜひ参考にしてみてください。
いざ実践！
早速UIトレース〜分析までやってみました！
ぜひこちらの記事も見てみてください！
プレゼント
できるだけハードルを低くするために、分析シートを作ってみました！ダウンロードしてぜひ使ってみてくださいね。先程の実践の記事にも使用しています！使い方も合わせてぜひご覧ください！
まとめ
この記事では、UIトレースの3つのステップをご紹介しました。
ワクワクした気持ちで始めたUIトレースをできるだけ、長く続けて力になるようにハードルを下げて取り組むポイントもご紹介しました！
- 1pxにこだわってトレースをする
- 時間がかかりそうなところは思い切って飛ばしてハードルを下げよう
やってみて「うわー、全然完璧にできなかった」と落ち込む必要はありません。はじめから完璧にはできません。一つ学べたらラッキーくらいの気持ちで少しずつ積み重ねていきましょう！
以上、最後まで読んでいただきありがとうございました！
参考リンク
コメント