よく広告や、雑誌、街に溢れる心惹かれるデザインに触れては、「デザインがうまくなるには、どうしたらいいんだろう…?」と考えますが、マネをすることは上達に繋がっているのだろうな、と感じる事が多かったりします。
分からなければ理想をマネすることから、まず形から入るということですね。

そこで、今回は「デザイントレース」についてご紹介したいと思います!

サイト全体のスクリーンショットを撮る

まず、トレースをするにあたり、参考にしたいデザインのサイト全体のスクリーンショットを、1枚でまるっと画像として保存します。
特に期間限定の企画サイトなどは、無くなってしまうのが早かったりもするので、後々のデザインストックとしても役に立ちそうですね。

Photoshopでトレースしていく前に

次に、新規オブジェクトへ見本として保存したスクリーンショットを配置します。
レイヤー名を「参考」や「見本」などに変更し、ロックしておくと分かりやすいです。
ざっくり構成が判断できるのであれば、事前にレイヤーを作成し、名前を変更しておくと便利です。

ガイドを引く

準備が完了したら、最初にガイドを作成していきましょう!

  • ヘッダー
  • コンテンツ
  • フッター

の3点は、最低限引いておきましょう。
またサイズを測って見てみると、バランスや間隔の勉強になります。

ここからは、地道にサイズを確認しつつ、オブジェクトツールを使用してワイヤーを作成していきます。

色をつけていく

ワイヤーが完成したら、実際のデザインに沿ってカンプを作成していきましょう!
色はスポイトで取っていきます。

トレースカンプを作るにあたって、気をつけておきたいポイント

  • 写真の部分はサイズが分かるように明記する
  • フォントも何を使用しているのか気を配る
    (実際のサイトのソースでチェックし、フリーなら落としておくのもオススメです)
  • テキストは省いてもOK
  • 全体のサイズ感(適当にサイズを変更するのはNG)
  • ただトレースしていくのではなく、手で覚えるためには作業時間も意識する

まとめ

今回はワイヤーからの手順をご紹介しましたが、着色ありのカンプから始める人も多いと思います。
実は私も後者だったりします。

トレースをしていると、ここでこう置くとこんなに気持ちいいのか、どういうテーマからこうしたのだろう?と、気づいたり考えたり、忙しく頭が回る気がします(笑)
この記事では紹介しませんでしたが、よくトレースしたものの配色をいじったりもするのですが、
本当に洗礼された、そのテーマやブランドにピッタリなのがよくわかったりして、すごく面白いです。

トレースは、目と手で覚えられる勉強法ではないでしょうか!
ぜひ試してみてくださいね。

Written by Ishizuka