デザイントレースがおすすめ！伸び悩むデザイナーへ
デザイントレースはWebデザインのスキル向上に欠かせない練習。
本記事では、伸び悩むデザイナーの方々に向けて、デザイントレースの具体的な方法と、それがデザインスキルの向上にどのように役立つのかを解説します。デザインの上達に行き詰まりを感じているなら、ぜひデザイントレースに挑戦してみてください。
目次
デザイントレースとは？→優れたデザインから学び、自分のデザインに昇華させる
デザイントレースとは、優れたWebサイトやバナーを見本として、忠実に再現することで、デザインの構成要素や技法を実践的に学ぶ効果的な方法です。ポイントは徹底的に観察し、模写すること。
僕はデザインをみるとき、いつも「盗めるポイントはないか？」と探し出します。グリッドの使い方、要素の配置とバランス、コントラストの使い方（配色）、フォントの選択と組み合わせ（タイポグラフィ）などなど。
デザイントレースではこれらの要素を徹底的に観察し、模写することで、優れたデザインの技法を「盗む」（言い方が悪いですが）ことが、トレースの主な目的なのです。そして、トレースで得た学びを自分のデザインに応用し、テストすることが重要です。
トレースで得た知識はどんどん実践で試していき、その効果を確認する。もしうまくいかない部分は改善し、さらなる学びにつなげる。このサイクルを繰り返すことが、デザインスキルの着実な向上につながっていくのです。
上達にデザイントレースが必要な理由
視覚的な感覚を養い、原則を学べる
優れたデザイン事例を観察し様々なデザインに触れながらトレースしていくことで、美しさやバランス、調和といった視覚的な要素に対する感覚が自然と磨かれていきます。
「キレイだな」「見やすいな」と思うデザインはかならず何かしらの法則があります。デザイントレースを通じて、今まで言葉にできていないかった「視覚的な感覚」をデザインの法則やルールを理解することできます。
デザインをつくる「思考プロセス」を学べる
デザイントレースを行う場合、デザイナーの意図や考え方を読み取ることが重要です。なぜそのようなレイアウトなのか、なぜその配色が選ばれたのか、余白の取り方、写真の配置方法など、デザインをつくる思考プロセスを自分なりで考えて手を動かすことで、理解につながります。
自分の引き出しを増やす
与えたい印象や目的に応じてデザインテイストを幅広く使い分ける（＝引き出し）を増やしておくと強いデザイナーになります。実際僕の周りの活躍しているデザイナーのほとんどがスタイリッシュからポップ、和風までどんなテイストも作れます。
様々なジャンルや業種のWebサイトをトレースすることで、幅広いデザイン要素や構成方法を経験し、自分の引き出しを増やすことができます。
そして多様なスタイルのデザインをトレースし、その特徴を理解することで、自分のオリジナルのデザインスタイルを確立することができます。
制作スピードの向上
デザイントレースを繰り返すことで、デザインツールの操作に習熟し、制作スピードを上げることができます。効率的な制作ワークフローを身につけることは、プロのWebデザイナーにとって重要なスキルです。
トレースは「気づきを得るために」←やりっぱなしはNG
トレースの目的はあくまで「学習」です。だから単に模倣することが目的になってはいけません。トレースは最終的には学ぶことで「気づき」を自分のものにし、実践に活かしていくことがとても重要なのです。
ここではトレースから学びを得るためのポイントをいくつか挙げますね。
目的意識を持ってトレースする
目的意識がないトレースは、ただ単にデザインを模写するだけの作業になってしまい、上達や成長にはつながりにくいです。（手段と目的が逆になる現象）
一方、目的意識を持ってトレースすると、「どの部分を学びたいのか」「なぜそのデザインを選んだのか」と観察と分析を続けることで、デザインの細部に隠された意図や戦略を読み解き、短時間で多くの気づきを得ることができます。
またトレースの目的を意識すれば、得た気づきをどのように自分のデザインに活かせるかを考えるようになります。「この写真の配置方法を自分のデザインに取り入れたい」「このナビゲーションの構成は参考になる」など、具体的な応用方法をイメージすることで、実践的なスキルが身につきます。
気づきをメモする
トレースしながら気づいたことをメモしていったほうがいいです。デザインの良いところ、疑問点、自分だったらどうするかなど、思ったことを言語化することで、学びを自分のものにしていくことができます。
応用方法を考える
トレースで得た気づきを、自分のデザインにどう活かせるかを考えましょう。フォントの使い方、色の組み合わせ、レイアウトの構成など、具体的な応用方法をイメージすることで、学びが定着します。
実際に制作して試す
トレースで得た知識を実際の制作で試してみましょう。自分のデザインに取り入れてみて、効果を確認します。うまくいかない場合は、改善点を考え、調整していきます。試行錯誤の過程で、デザインスキルが磨かれていきます。
フィードバックを得る
自分で制作したデザインを他の人に見てもらい、フィードバックをもらいましょう。他者の視点から得られる気づきは、自分では気づかない点があるかもしれません。フィードバックを受け止め、デザインの改善に活かしていきます。
デザイントレースにはどんなツールを使うのがおすすめ？
結論、Figmaもしくはphotoshopの二択です。
今業界的には、多くのデザイン制作現場でFigmaが採用されており、おそらく今後Webデザインの業界標準ツールになるかも、と踏んでます。だからこそツールの基本操作を学ぶためにもFigmaを使ったほうがいいとは思っています。
ただ表現的な自由度はPhotoshopのほうが高く、クオリティを高めていきたいならPhotoshopがいいです。またPhotoshopがWebデザインのトレースに適している大きな理由の一つが、ラスタ形式を採用しているからです。ラスタ形式とは、画像を色のついた点（ピクセル）の集合体で表現する手法です。一般的なパソコンのモニターやWebサイトで使用される画像も、このラスタ形式で表示されます。つまり、Photoshopで作成した画像は、そのままWebサイトで使用することができるのです。
トレースの仕方（ステップ）
01.参考にするWebサイトやバナーを探す（デザインギャラリーorPinterest）
Webデザインの練習目的に合った、自分なりに真似たいWebサイトやバナーを探します。ここでポイントとなるのは、レイアウト、配色、タイポグラフィなど「これ真似したいな・学びたいなあ」と直感的に思うデザインを選ぶべきです。
デザイン上達のために「自分の得意」をまず伸ばすのが大事。だからこそトレースするWebサイトやバナーも「こんなデザインやってみたいな」と心踊るものを選ぶようにしてみてください。
ちなみにここでポイントとなるのは、最初のトレースは余白をしっかりとったシンプルなレイアウトを選んだほうがいいです。
僕が普段Webデザインで参考にしているのは下記のサイト。
なおデザインの初学でツールの使い方やデザインノウハウを知らない方は、バナーのようにデザイン領域が少ないものからやっていくのがおすすめ。
僕が普段バナーで参考にしているのは下記のサイト。
デザイントレース作業【いざ実践】
デザイントレースの具体的な方法を、Photoshopを使った手順で説明します。
- Chrome拡張機能の「FireShot」または「Full Page Screen Capture」を使ってサイトを1枚画像でスクショして保存します。
- Photoshopで新規ドキュメントを作成し、カンバスサイズを決めアートボードを2つ用意します。
- トレースしたいWebデザイン・バナーを1つ目のアートボードに貼り付けます。
- 2つ目のアートボードに、同じWebデザイン・バナーをコピーして貼り付けます。
- 2つ目のアートボードのバナーの不透明度を50%程度に下げます。これにより、トレース作業がしやすくなります。
- 2つ目のアートボードに新しいレイヤーを作成し、トレースを始めます。
- まずは、文字のトレースから始めましょう。最初はモノクロでトレースすると、見本との区別がつきやすくなります。
- 文字をトレースする際は、ガイドを引いて字間や行間を確認しながら、細かい調整を行います。
- 文字のトレースが完了したら、次に背景や画像などの要素をトレースしていきます。
- 色を付ける際は、スポイト Tool を使って見本の色を取得し、正確に色を再現するようにします。
- すべての要素のトレースが完了したら、ガイドを使ってレイアウトの調整を行います。要素の配置や間隔が見本と同じになるように調整します。
- トレースが完了したら、見本と並べて比較してみましょう。違いがある部分は修正し、より精密にトレースするようにします。
- 完成したトレース画像を、JPEGやPNGなどのWeb用の画像形式で保存します。
こんなことを考えながらトレースしよう！
トレース対象のデザインに対して常に疑問を持ち、「なぜ？」を繰り返し問いかけることが大切。
レイアウト
- グリッドシステム：デザインがグリッドシステムに基づいているか確認します。列の数、幅、間隔などを分析します。
- 要素の配置：各要素（テキスト、画像、ボタンなど）の配置を観察します。中央揃え、左揃え、右揃えなどの配置方法や、要素間の間隔を確認します。
- 余白：要素間の余白の取り方を分析します。余白の大小によって、デザインの印象が変わります。
配色
- カラーパレット：デザインで使用されている色の数と、その組み合わせを確認します。
- 色の役割：各色の役割を考察します。強調色、アクセント色、背景色などの使い分けを理解します。
- コントラスト：色のコントラストが適切に使用されているか確認します。読みやすさや視認性に影響します。
タイポグラフィ
- フォントの選択：使用されているフォントの種類（serif、sans-serif、display等）を特定します。
- 書体の組み合わせ：見出しと本文の書体の組み合わせを観察します。
- 文字サイズとスペーシング：文字サイズ、行間、字間などを分析します。階層構造と読みやすさに注目します。
画像とグラフィック
- 画像の選択：使用されている画像の種類（写真、イラスト、アイコンなど）と、その役割を考察します。
- 画像の配置：画像の配置方法と、他の要素との関係性を観察します。
- グラフィックの一貫性：アイコンやボタンなどのグラフィック要素のデザインの一貫性を確認します。
全体的な一貫性
- デザインの統一感：デザイン全体の一貫性と、ブランドアイデンティティの反映を確認します。
- 視覚的な階層：情報の優先順位が視覚的な階層で表現されているか観察します。
- ユーザーの動線：デザインがユーザーを適切に誘導し、目的の行動へと導いているか考察します。
