デザイン初学者必見！効果的なトレースの方法（実践問題あり！）

ほしちゃん毎日頑張っているね♪
トレースの効果的な方法についてまだ説明してなかったね。。。
僕が今から説明するから安心して💪

それでは説明していくよ♪

結論から言っちゃうと効果的なトレースの方法は次の4ステップだよ！

①トレースの目的を理解する
②毎日コツコツと積み上げる

それではトレースの目的と具体的なトレースの方法見ていこう♪

トレースの方法について説明する前に、そもそもトレースってなぜするのかという目的を説明していくね！
目的をきちんと理解した上で、学習することで効果的に学習することができるからしっかり読んでね♪

そうだよほしちゃん！！
トレースの目的を理解せずにやっているとつまらなくてすぐにやめてしまうことが多いからしっかりと目的意識を持って頑張ろうね💪

それでは、お待ちかねの効果的なトレースの方法を紹介していくよ♪
実際に手を動かしながら一緒にやってみよう！

まずはじめにトレースするデザインを探していくよ♪

僕のおすすめのギャラリーサイトがあるからその中から自分の好みに合うサイトを探してみてね♪

自分の好きなデザインで学習する方がモチベーションが維持できるからおすすめだよ！！！

自分で決めたサイトのURLに飛んだらChromeの拡張機能の「Full Page Screen Capture」を使用してページ全体のキャプチャーを取っていくよ♪

ほしちゃん！前にも説明したことあるけど、忘れちゃったかな？
もしわからない方は『Chromeの拡張機能「Full Page Screen Capture」の使い方』を読んでからやってね♪

キャプチャーが撮れたら、figmaに画像を入れていこう♪
※無料ですぐに使用できるため今回はfigmaを使用していきます。

画像の挿入が完了したら、次に挿入した画像の幅(width)を1440pxに変えていくよ♪
1440pxにしている理由は、ウェブデザインをするときに使用することが多い幅の一つだからだよ♪

画像の大きさを1440pxに変えることができたら、続いては1440pxのフレームに画像を入れよう♪

ほしちゃん！！
フレームの中に画像することができたかな！？

次にフレームをもう一つ作成してね♪

★この時のフレームは画像を作成したフレームと全く同じ大きさにしてね！
大きさが違うとトレースができなくなってしまうのでしっかり同じ大きさにすることを忘れないで！！！！

さあ、いよいよトレースしていくよ♪
画像を用意する方法から説明していくね！！

この方法を知るだけで、好きなサイトにある画像と全く同じ画像を簡単に用意することができるからしっかり覚えておいてね♪

トレースな主な手順はこの流れだよ♪

①画像やテキストを左側の画像の上に重ねる
②command+cでコピーをする
③右側のフレームを選択してcommand+vでペーストをする。

いよいよ最後の説明だよ♪
フォントサイズやカラーは検証ツールを使用して確認していくんだ！！
ちょっと難しいかもしれないけど落ち着いて動画のようにやれば確認できるから頑張ろう♪

大丈夫💪
確認してほしいところはこの場所だけなんだ！

このような作業をなんども繰り返してトレースをしていくんだ！

最初は慣れなくて大変だけどコツコツと積み上げることでとても成長ができるから頑張ろう💪