【特別授業レポート】デザイントレースでセンスもスキルも身に付けよう！｜STUDIO宇都宮

デザイントレースとは、既存のデザインやイラストを手本に、同じように再現すること。デザイン初心者にとっては、作品の意図やテクニックを学ぶための最適な方法です。デザインのバランス感覚を養うことができ、アイデアの引き出しを増やすことにもつながるので、効果的にデザインの基礎を身につけることができます。

ということから、デザイン力アップを目指す受講者を対象に「デザインの引き出しを増やそう講座vol.1　デザイントレースWeb編」を開催。臼井トレーナーにトレースする際のポイントや便利な機能について教えていただきました。

デザインの引き出しを増やそう講座vol.1
デザイントレースWeb編

Webデザインのトレースに役立つステップ

グラフィックデザインツールの習得
Webデザインでは、Figma、XD、Illustrator、Photoshopなどから、制作物に特化したツールを使い分けています。今講座のデザイントレースではIllustratorを使用しました。ガイドラインの作り方やワンクリックで整列させる方法、ショートカットキーなどの基本的な機能を理解することで、効率良く作業を進めることができます。

Illustratorはベクターベースのグラフィックソフトウェアで、紙物からデジタルデザイン、ウェブデザインまで幅広い分野で利用されています。さまざまなデザインニーズに対応できる優れたツールなので、受講生からも「使えるようになりたい！」と特別授業のリクエストが多いソフトです。
デザインの収集
Webデザインの優れた例やテンプレートを収集し、トレースの対象となるデザインを選びます。今回は著作権を考慮し、テンプレートを使用しました。自主トレではデザインギャラリーを活用すると良いでしょう。

※トレースする上で気を付けたいのが著作権。デザインのトレースはスキル向上の一環ですが、トレースしたものを作品や商品として利用するのは著作権の侵害にあたるため注意が必要です。
トレースの手順
選んだデザインを見て、基本的な構造や配置を確認します。各要素のサイズや間隔（余白）はどれくらい？どんな配色？見出しやテキストのサイズは？という感じに、各部分を観察してからトレースするのがポイント。例えば「どうして見出しは太字なの？」「なぜなら、テキストと区別させたいから」と、感じたことを言語化してみましょう。

他にも、デザインの4原則「近接」「整列」「反復」「対比」のどれに当たるのかな？と観察してみましょう。配置やバランスの取り方のヒントになります。デザインには理由や法則があることを知り、理解を深めていくと、アイデアの引き出しも増えていきます。

「余白はどのくらいが丁度いい？」。Webデザインの悩みどころの１つ「余白」については、「最低でも１文字分は余白を作りましょう」とのアドバイスがありました。さらに、画像配置のデモンストレーションを交えて、目には「見えない余白」について解説してくれたので、余白の取り方による見え方の違いを実際に見比べることができ、理解を深めることができたようです。制作にに役立てたいとの声をいただきました。

さまざまなデザインをトレースしてみよう！
多様なデザインスキルを身に付けるためにも、一つのスタイルだけでなく、異なるスタイルのデザインをトレースするのがオススメです。真似こそセンス磨きの近道。トレースすることでデザイン力は伸ばせます。実際のデザインで、フォントサイズや余白の取り方、写真の配置に応用し、ご自分のものにしていきましょう。

正確に言うと、手本を真似して再現する「模写」、手本を下絵に上からなぞる「トレース」とに分けることができ、今講座では前者を行いました。バナーやロゴ、イラストなど、「どうやって作ってるの？」「こういうのを作ってみたい」と思った時がタイミングです。ぜひご自分に合う方法で試してみてくださいね！