バナー模写#1

WEBデザイナー目指し勉強中のるるです。
本日はバナー模写を行いました。

見本

模写

トレースの方法については、こちらのNoteを参考にしました。

制作の流れ

①見本用と模写用でアートボードを２つ作成
②写真やテキストの要素を一通り配置する
③背景や図形のサイズ、カラーを覚える⇨模写
④近いフォントを探す⇨適用
⑤テキストのサイズ、トラッキング、太さを覚える⇨模写
⑥余白やレイアウト、整列を覚える⇨模写

見本をじっくり観察した後、見本を見ない状態でデザインを進め、分からなくなったら再度見本を観察・・・
これを繰り返すことで、「デザインを覚える」ことを意識しながら制作に臨みました。

考察の目的：好きなデザインを学ぶため

バナーの目的：抽選への応募を増やす。潜在顧客の確保

印象：クール、スタイリッシュ、おしゃれ、シンプル、高級感、きれいめ

その印象を想起させる要素
・青と黒のカラー：＃01a0c0
・太いゴシック体
・スクリプト体のあしらい
・モダンでスマートなサンセリフ体
・単色のフラットデザイン
・カラフルでシンプルなコップが整列した画像

ターゲット：一人暮らしの大学生の男性。
シンプルかつきれいめのライフスタイルに憧れている。
彼女や友達を家に呼ぶ機会が多く、食器が多めに必要。
Instagramで「シンプル」「おしゃれ」「一人暮らし」「インテリア」といったワードを検索することが多い。

目的達成のための工夫
・「MONTHLY GIFT」→「抽選で毎月５名さまにプレゼント！」「応募はONE LUMINEから「８月のキーワード」を入力！」→「８月のキーワード」→「８月のギフト」の順で目線が遷移するようになっている。
一目でプレゼントキャンペーンであることが伝わり、文字の大きさや太さの調整により思考の流れに沿った視線誘導となっている。

・ブルーとで構成されたのクールな配色や、モダンでスマートな印象の太いゴシック体など、男性的な要素を取り入れている。

・写真で５種類のカラー展開を見せることで、ピンクのコップは彼女用、赤や緑は同性の友達用など、相手によって使い分けができるイメージを持たせる。

気付き
・どんな商品かは写真で伝わるため、商品名の優先度は低い。ただし、他の文字より太くして差別化している。

・ユーザーがじっくり見るであろうキーワードは、他の文字よりトラッキングを広くして視認性を高めている。

感想

・最初にやり方を試行錯誤していたらかなり時間がかかってしまった。
数をこなし、１時間以内には完成させられるようにしたい。

・トラッキングの調整が最も大変だった。
自分で考えて進めてみると見本とかなり乖離している事が多く、適切な字間の感覚を掴めるようになることが今後の課題であると感じた。

・完全一致するフォントが見当たらず類似フォントで製作を進めたが、従来よりも横幅の比率を広げたり、かなりの微調整が必要だった。
マッチフォントでも似たフォントをなかなか見つけられず、フォント探しにも時間がかかってしまった。