おはよう！
デザイナーとして駆け出して2年目の管理人みっぽこです。
UIデザインのスキルアップによくおすすめされるUIトレース。
私もfigmaの勉強もしながらUIデザインのスキルを高めたい！と始めてみました！
勉強を始めたばかりの同志のみなさんと一緒に頑張っていけたらと思います！
本記事では、一つのアプリをお題として取り上げ、トレースごとにどんな風にトレースし、どのように分析したのか実践した内容をまとめていきます。
最近始めたばかりでどのようにUIデザインを勉強しよう、他の人はどんな風にやっているのかな…と思っている方の参考になれたら嬉しいです！
私もまだ駆け出したばかりですので、ツッコミどころ満載の初心者目線ですが暖かい目で見ていただけますと幸いです…
UIトレースのやり方がわからない！そんな方向けにUIトレースのやり方を紹介した記事をアップしています！
こちらもぜひ参考にご覧ください！
本記事でも使用しているUI分析シートもダウンロードして使用できるように配布していますので要チェック！
いざ実践！cookpadのUIトレース
並べて見ると、文字の色や太さ大きさ、マージンの大きさが完璧にトレースできていないことに気付きました。
要素通しを重ねて確認しているのですが、まだまだ細かい部分に目がいっていないのだなと実感。
アイコンはなんとかそれなりにトレースできたのでは！？
cookpadの雰囲気にあった可愛らしいアイコンだったので、トレースも頑張ってみました。
分析をしてみる
ここからは、デザインを「葉」→「木」→「森」に沿って分析してみました。
シャドウや色にも一つ一つ役割があって、使いやすいデザインの重要な要素を担っているのだなと、細部のこだわりを見て感じました。
特に、「シャドウで要素を区切る」は、自分でデザインするときにも使えそうだなと思いました！
まとめ
ただ画面で触っているだけではわからない、デザインの細やかな工夫が見えてくることが、UIトレースの最大の魅力だなと感じました。
分析をしてみると、なぜそれになったの？を探るにはもっと前提の知識のインプットが必要になってくるなと感じました。
また、デザインのテクニックを学べるので法則化することで次制作するデザインに応用ができて一石二鳥だと学びました。
まだまだ始まったばかりのUIトレースチャレンジ！数をこなしてどんどんデザインをスキルアップしていきたいと思います！
まだ始めたばかりの同志の皆さん、一緒に頑張っていきましょ〜〜！！！
それではまた次回！
コメント