Figmaを使ってデザイントレースを行っていただきます。
ツールに慣れていただくことがメインですが、せっかくなのでデザインについてもあわせて学んでいきましょう。

①導入

トレースは「そっくり作れるようになる」ためではなく「観察できるようになる」ための目の練習です。ただ写すのではなく、意図を考えながら行いましょう。

②トレースの基本的な進め方

トレースはデザイン制作と同じ流れで進めることがおすすめです。

1. 要素を全部配置する
2. 何を伝えたいか、情報の優先度を考えながらレイアウトを組む
3. 色を入れる
4. 装飾を加える

スポイトツールで色をひろったり、数値を見るのではなく、まずは自分の目や感覚で行いましょう。その後で数値を見て、どう違うかを確認していくと、目が育っていきます。

③クオリティアップ

小さな部分で、デザインの印象は大きく変わります。

• 行間
• 文字間
• 角丸
• シャドウ

④まとめ

• トレースで鍛えるのは「観察力」と「言語化力」

• “なんとなく違う”を言語化しよう