【デザイン力UP】 Webデザイントレースの手順まとめ【トレース編】

2750

こんにちは、デザイナーのしんはるみです。

今回は、前の記事【準備編】に引き続き、Webデザイントレースのやり方【トレース編】を紹介していきます。
Webデザイントレースを実際にしていきながら手順を解説していきたいと思います。

Webデザイントレースをする前に必要な準備はこちら▼

準備が完了したら、実際のトレースに移っていきます。

今回は私なりのトレースの手順をまとめてみました。

ただただ数をこなしてトレースするより、どこに注意するべきかをしっかり意識しながら
トレースしていく方が短期間で多くを学べますので、是非参考にしながらトレースしてみてください!

では参りましょう!

トレースの際に意識すべきこと

まず、トレースに入る前に、トレースしながら注目すべき点をいくつかご紹介いたします。

トレース中は、あまり無心にならないように注意して、常に以下のことに注目しながらトレースしましょう。

  • ヘッダー / フッターの縦幅は何px?
  • ボタンのサイズは1サイトの中で何種類ある?縦横サイズは何px?
  • 余白は何px?
  • カラムごとの幅は?
  • どのような配色?
  • 全体の構成は?
  • 見出しのフォントサイズは?テキストのフォントサイズは?
  • 各要素、何px / 何ptを超えると違和感を感じるか?   などなど

トレースをすればするほど、注目できる点はどんどん増えていきます!
根気よくやっていきましょう。

ガイドを引く

ではさっそくトレースの手順に入っていきます。

まずはお手本のスクリーンショットを不透明度を下げてロックします。
その後、お手本のワイヤーに合わせてガイドを引いていきます。

この時点で、サイト全体を通して、余白がどのようにデザインされているか、
どこで揃えてあるかなどを明確化することができます。

ガイドを押し込むと、そのガイドが区切っているピクセル数を表示できますので、
その数値をその度確認しながら進めていきます。

ひたすらトレース

ここまできたら後はひたすらトレースしていきます。

フォントは全く同じフォントがあると限らないので、大体同じものを探しつつ、
できればChromeの拡張機能What Fontで実際何のフォントを使っているのか把握しておきます。

Mimitを使っていれば、使われているフォントが一覧で出てくるので、それでみていくのでも問題ありません。

 

復習をする

トレースが完成したら、学んだことをまとめておいて、復習するようにしましょう。今回の学びや気付きを
忘れることのないようにファイルデータ内にメモで残しておくと良いかもしれません。

 

いかがでしたでしょうか?

今回は私なりのWebトレースの方法をまとめてみました。

本当にレベルもまだまだで、これからも続けていきたいと思います。

最後に私が大変勉強になった!と思ったお勧めの記事をご紹介いたします。

デザイナーがwebサイトを模写する際に見るべき8つの学習ポイント

大変勉強になる上、まだまだだなと気づかされます。

是非読んでみてください!

今回の記事がすこしでもお役に立てれば幸いです。

これからもブログ更新頑張って参りますので、
よろしければInstagramをフォローして頂けると嬉しいです!

Instagramをフォローする

よろしくお願い致します!

Designer
申 晴 (しん はるみ)
2018年よりグラフィックデザイナーとして活動。27歳。1歳7ヶ月になる娘がいる。
【ご依頼受付中!】
・ロゴやポスター、パンフレットなど紙媒体のデザイン制作
・一眼レフによる写真撮影
・WordpressをつかったWebサイト制作
・中国語・英語の翻訳業務
ご質問等もご気軽にご連絡ください!
hshin@kyoto-itsuki.com

関連記事