Figmaでバナーデザインのトレースに挑戦

• トレース学習の目的
• トレース学習の方法

トレースは、デザインのテクニックやコツを効率よく学ぶことができる学習方法です。
目的としては、優れたデザインを模倣することでデザインスキルを向上させることです。

トレース学習の目的

1. デザインの基礎を理解する
   レイアウト、配色、タイポグラフィ、スペーシングなどの基本的なデザイン原則を学ぶ。
2. 視覚的なバランスを学ぶ
   バランスの取れたデザインがどのように見えるかを体感する。
3. スキルの向上
   手を動かしてデザインを再現することで、ツールの使い方やデザインスキルを向上させる。

トレース学習の方法

今回のトレース学習は参考のデザインをなぞる方法で行います。
写真やフォントについては同じものがない場合、近いものでかまいません。

1. トレースするデザインを探す
   デザインギャラリーサイト等（世の中のデザインをまとめて公開しているサイト）を活用し、練習になるデザインを探します。「デザイン ギャラリーサイト」と検索すれば、いくつかのウェブサイトが出てくると思います。
   
   今回は初心者向けのバナーデザインを使用します。
2. Figmaに参考デザインを配置する
   サイトからダウンロードした画像をドラッグ＆ドロップでFigmaに配置します。
3. トレース開始
   作業の行いやすいように参考のデザインの透明度を下げて、ロックをかけてトレースを始めます。
   全体の枠を作成し、細部に進んでいく方法で進めていきます。
4. テキストを追加する
   テキストを入力し、テキストの大きさ、太さや文字づめを調整して、参考通りになるようにします。
   （フォントが同じものがない場合は形が近いもので代用します。）
5. 装飾を追加する
   文字の影、枠、ボーダーなどの装飾要素を追加します。
6. 背景を追加する
   背景色を追加して枠の線を消します。
7. トレースの完成
   以下がトレースの完成したものになります。
   
   完成したトレース作品を評価し、学んだことを振り返ります。
   さらに改良すべき点を見つけ、次回のトレース学習に活かします。
8. WEBサイトのトレースについて
   WEBサイトをトレースするときには、要素を大きな括りで分けて行います。
   
   主にヘッダー、メインビジュアル、そのほかの情報、フッターで分けるとトレースの分割がしやすいです。
   またロゴなどを一からトレースする必要はなく、全体のレイアウトと文字がトレースできれば問題ないです。

以上、「トレース学習」について説明でした。

次のステップで、 「ギャラリーサイトの活用」について説明していきます。