デイトラ デザイン 初級編 Day10 動画解説のまとめ

デイトラ デザイン 初級編 Day10では
トレース（模写）練習の一つとして
バナートレースについて解説されています。

このページではバナートレースの
動画解説をまとめました

■バナートレース練習の流れ

1.お手本となるサイトを探す
※東フリ公式サイトのバナー

2.バナー画像をダウンロードする

3.バナー画像をFigmaに読み込む

4.バナー画像の大きさでアートボードを作成する

5.読み込んだバナー画像をコピペして
不透明度を50%程度に設定したものを
アートボードの最下層に配置する

6.透過配置したバナー画像を参考にアートボードにガイドラインを引く
※コンテンツ幅など

7.透過配置したバナー画像を非表示にする

8.ロゴや画像などの素材をダウンロードする

9.上から順にトレースする
※まず先に要素を全て配置する

10.透過配置したバナー画像を表示してロックする
※透過画像は最下層に配置しているので隠れて見えない場合は
適宜、背景オブジェクトなども一旦透過させる

11.要素を調整する
※透過したバナー画像を参考に各要素の
配置、サイズ、色などを細かく調整する

12.透過配置したバナー画像を非表示にする
※透過した背景オブジェクトの不透明度も戻す

13.トレースを見本と組み比べて抜け漏れがないかチェックする

14.完成したトレースを分析する

バナー画像の分析方法 

その1 要素を分解して構成を把握する
・ロゴ、キャッチコピー、ボタンなど
どこまでがどの要素のカタマリ（ブロック）
になっているかを整理する

その2 バナー画像のイメージを明確にする
・パッと見でどんな印象を受けるかを言葉で表す

その3 要素を詳細に分解して仕組みを確認する
・その2で感じたイメージはなぜそう感じるのか？
どんな要素やディティールがそれを演出しているのか？
という事をテクニック面から整理する