【1~2ヶ月目】　トレース・バナー

１、トレース
　１−１、トレースをする意味
　１−２、ど素人さんのために、講師がくれたもの
　１−３、トレースから学んだこと

２、バナー
　２−１、バナーデザインを学ぶ意味
　２−２、バナーで難しいこと
　２−３、バナーデザインから学んだこと

**************

１、トレース

１−１、トレースをする意味

完成したランディングページのPSDデータ（フォトショップデータ）を見て、それをそっくりそのまま真似して作ること。

フォントの大きさも、余白も、色も、全て。
ーWebページがどういう仕組みで出来上がっているのかの基礎を知る
ーツールの使い方を学ぶ（何を使ったら、そのデザインができるのか）
をOJTで体に叩き込むイメージです。

そして、デザインは（デザインに限らないかもですが）一生真似。いいなと思ったデザインを要素分解して、インプットする。それを自分らしく味付けをしてまたアウトプットしていくことの繰り返し。そんなふうに私は捉えています。

free web hopeの代表　相原はこう言います。

「トレースができれば、なんでも盗める。一生学べる。一生レベルアップできる」

スクールをを卒業しても、トレースする力さえあればレベルアップの継続が可能だと言います。

＜私の実際の制作物＞

左から順に、1週目・2週目・3週目のトレースです。同じ作業時間にもかかわらず明らかに作業スピードが上がって、作れる量が増えたことがわかります。マスクやパターン、装飾など使えるツールもだんだん増えていきました。

１−２、ど素人の私を救った、「トレース動画」

フォトショップ をさわれない私は、どこをどう操作すれば良いのかさっぱり分かリませんでした。

講師の先生は、課題のトレースを実際にやってくれその操作画面を録画して残してくれました。ひたすらその動画通りに作業をしていきます。

私はかつて本を買って独学でフォトショ を学ぼうとしました。

が、本とにらめっこしていても、どうしても断続的な画面しか本には乗っていないので、「ここの状態に行き着くには、どうしたらいいの？涙」という状況に陥りました。

動画にしてくれた先生、ありがとうございます！

１−３、トレースから学んだこと

・ツールの使い方
・デザインの作られ方

私たち1期生は、トレースを4つ、最初の4週間みっちり行いました。

２、バナー

2ヶ月目は、バナーからスタートです。

２−１、バナーを学ぶ意味

LPは基本的にWeb広告を併用させて、ユーザーを流入させるのでバナークオリティも重要なポイントです。
「広告」概念をしっかり自分の頭に入れ込むためにも、バナー作成は有効だと感じました。

結局Webデザイナーって、「綺麗なデザインを作る」ことがゴールではなく、「ユーザーの悩みを解決できるデザイン」「企業に利益をもたらすデザイン」のように、「結果」を出せなくては存在意義が薄まると考えるからです。（私は）

なので、「何のためのデザインをしているのか」の目的意識をもちならがデザインすることを体になじませるためにはバナー作成カリキュラムは大切でした。

２−１、バナーの難しかったところ

限られたサイズの中で、どんなデザインとコピーを入れるべきかの「情報精査」は苦労しました。結局LPのキービジュアルにそわせるのが一番なのですが、特に私は情報過多になりがちなので、「余白」「グルーピング」といったデザインの基本的なルールを実践するのが結構難しかったです。

クリックしたくなるバナー　
┝わかりやすい訴求　
┝自分のための広告かもと思わせる
　
という、「クリックさせるため」の視点はもちろん必要なのですが、ターゲット以外の人に無駄にクリックされて、LPに遷移したものの離脱してしまうのは広告費の無駄遣い。

ターゲットに合ったユーザーにクリックしてもらうためのバナー
　┝LPのデザインと大きく違わないテイスト
　┝LPに興味を持ってもらえそうなターゲットに響きそうなコピー＆デザイン

も必要です。

バナーは限られた情報しか載せられないので、
・どの情報を載せるのか
・どうやってクリックしたくなる仕掛けを取り込むか
に悩みました。

課題作成の流れとしては、
① 参考バナー決定
②ラフ作成（手書き）、配色案
→一旦ここで、先生に提出してフィードバックをもらいます。
③デザイン着手、他のバナーサイズへの展開
→完成。フィードバックもらう
④修正

です。

＜実際の制作物＞

こちらが私の1本目のバナーです。

「車のためのサービスだ」ということを伝えないと！と考えた私は、車の写真を大きくあしらいました。が、先生からのフィードバックで「ドライブレコーダーとそのシステム」の広告なので、車が目立ちすぎると「車そのものを買うため」のバナーとも捉えられかねない。もっとドライブレコダーの商品そのものを表示させたほうが良い。とアドバイスをいただき、右のように修正しました。あとは、クリックしやすいようにCTAボタンを大きく表示させました。

２−２、バナーで学んだこと

・Web広告〜LP制約（コンバージョン）までのユーザーの動きの理解とデザインができること / すべきこと　の考え方の基礎
・余白とグルーピングの重要性
・参考デザインを選び、それを真似して作ること

バナー制作は3つ取り組み、2週間を使いました。
うち一つはランサーズに実際に案件として落ちていたものを使用。クライアントからどのような情報が提供されるのか、少し実戦的な現場を垣間見ることができました。