トレースについて（スキルアップ）

こんにちは！インターン生（デザインチーム）のH.Fです！

今回はFinal Answerのデザインチームがスキル向上のためにやってきた「トレース」について紹介します！

トレースとは？

Final Answerではデザインスキル向上のために、インターンに参加当時にWebサイトの「トレース」を行ってもらっています。

私たちが行っている「トレース」とは、実際に存在しているWebサイトを見本にしながら、全く同じデザインのWebサイトを XDを使用して制作してもらうことです！

私も実際にインターン参加当時に、「トレース」を行いました！

トレースをするメリット

・デジタルツールに慣れる

・デザインの引き出しが増える

・自分で１からサイトをデザインしたという達成感を味わえる

・デザインの4原則（近接、整列、反復、コントラスト）を意識するようになる。

などが身に付くのかなと思います！私もいくつか「トレース」を行ったことで今まで気にしていなかった「フォントサイズや余白」の統一感を意識するようになったり、徐々に効率良くサイトを「トレース」できるようになっていき、成長を実感しました！

トレースのフロー

綾鷹（https://www.ayataka.jp/）

上記の画像は実際に私がトレースしたものです！

トレースをするフローは下記の通りです。

１、トレースしたいサイトをGoogleの拡張機能（GoFullPage）を用いてスクリーンショットします。

２、見本のサイトを横に置き、XDを使用して制作します。

３、フォント/フォントサイズ/画像などのサイトの詳細情報はデベロッパーツールで調べ、見本のサイトに近いデザインをします。

POINT

・画像が配置されているところにはまず長方形を配置し、簡単なレイアウトを作りました。

・デザインの4原則（近接、整列、反復、コントラスト）

・制作をしながら、「なぜ」このレイアウトなのか、「なぜ」このフォントなのかを考えながらデザインするように意識しました。

最後に

Final Answerがデザインスキルアップのために行っているトレースについて紹介しました！

「まだ１からデザインする自信がない」、「デジタルツールの使い方がわからない」などといった方にはぜひ行ってもらいたいです！