UIトレース
いつもお願いしている超優秀なベテランデザイナーの方と話してて驚いたのが、独立して10年以上経つのに筋トレのようにサイトトレースをやり続けているということ。そりゃ強いって、、、
実務やりながら月に何個もトレースしてるらしく「御社のこの前の実績良かったっすね。もちろんトレースしました。この参考もトレースしてます。あとこれも…」って当たり前のようにほとんどトレースしてて最高だった。
font-sizeとか、
色とか
意外と黒じゃないんだ、とか
配置とか
の勉強になりそう
スクショを撮って並べる
サイズを合わせてframeを作る
コンポーネント化
意味のまとまりで分ける
html等の構造
ツールの理解
Figmaの理解
Figma AI機能
慣れてきたらOnlookとか、他のプロトタイピングを学ぶのと並行しても良い 自分でやった後に他の人のやり方を見てみるのもよいだろう
どこまで細かいところにこだわろうとしているのかがわかる
https://www.youtube.com/watch?v=HMO1AuBZn2A
なぞる、複製するのではなく、サイトのデザインを見て真似して同じクオリティを作るイメージ
なので、スクショを横に置いてやるんじゃなくて、ブラウザ上で比較すると良い
https://www.youtube.com/watch?v=8O4ViUAPTMo
海外では、UI tracingとはあまり言わないっぽい
実際youtube出てこない
gpt-4.icon
"UI Redesign Study" - 既存のUIを再現しながらデザインの学習をする場合
"UI Reverse Engineering" - 既存のUIの構造を解析しながら再現する場合
"UI Copy Practice" / "UI Replication" - そのままデザインを再現する練習の場合
"Pixel-Perfect UI Recreation" - 完全にピクセル単位で一致するように再現する場合
https://www.youtube.com/watch?v=fcWahZqGU44