トレースでデザイン上達？！マネて吸収していくコツ

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

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

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

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

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

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

ガイドを引く

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

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

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

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

色をつけていく

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

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

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

まとめ

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

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

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

Written by Baycross Marketing