バナートレース：スキンケア用品

-目次-

1. このバナーを選んだ理由

2. トレースしたバナー

3. 配色・観察と分析まとめ

4. 工夫した点

5. 制作を通して学んだこと

1.　このバナーを選んだ理由

KOSEのスキンケアブランド『米肌』のバナーをトレースしました。情報量が多いにも関わらずすっきり洗練した作りのバナーのため、ブランドイメージを保ちつつ訴求力を持たせるための工夫を学ぶことができると思い、このバナーを選びました。

2.　トレースしたバナー

スマホを何となく触っている時に、わざわざ手を止めてこのバナーを見るのはどんな人か想像しながらターゲットを設定しました。

ターゲット・目的の設定理由

バナーの大部分を商品写真が占めていることから、洗練されたシンプルなパッケージデザインや、写真から伝わる透明感に魅力を感じる人が主なターゲットだと考えました。

また、下部の訴求文言でお得なキャンペーンを実施していることを強調し、クリックマークでサイトへの遷移を誘導していることから、ターゲットに定期便の契約をしてもらい、最終的には商品の継続利用者を増やすことが目的だと考えました。

3.　配色・観察と分析まとめ

4.　工夫した点

１）トレース

トレースで使用した写真を、見本バナーに合わせて青白い色合いになるよう調整しました。また、写真がバナーのサイズよりも小さかったため「コンテンツに応じた塗りつぶし」で自然な背景に仕上げました。

また、マッチフォントを使用して見本に近いフォントを選んだほか、プレゼントのアイコンをIllustratorで自作したり、下部の緑地に施されている薄い斜めストライプもトレースしたりと、細かい部分にまで着目し、可能な限り完全なトレースになるよう努めました。

２）分析まとめ資料

デザイン4原則を意識して作成しました。また、背景や文字色もバナーの配色と合わせることで統一感を持たせました。分析内容に関しては、デザインの特徴を１つ１つ言語化することに加えて「それぞれのデザインがどのような効果をもたらしているのか」という点まで考えまとめました。

5.　制作を通して学んだこと

１）ブランドバナーの工夫

ブランドイメージを保ちつつバナーに訴求力を持たせる手法の一例として、

• 商品内容を伝える箇所を多めに取り、訴求箇所はコンパクトかつ視認性の高いデザイ　　ンでまとめる
• 反対色 × 同一トーンの配色でメリハリと統一感を同時に持たせる
• 商品内容を伝える箇所と訴求箇所をはっきり分けて、情報を読み取りやすくする（レイアウト、フォントの使い分け等）

などがあることを学びました。

２）読むのをやめさせない工夫

バナー内の商品やサービスに関心を持ってもらったりクリックしてもらったりするには、バナーを目にした人がスムーズに情報を得られるレイアウトを組む必要があることを学びました。（今回は視線誘導のZ型）

３）基本的なあしらいの表現方法

写真の加工方法（色調補正、背景の拡張）、簡単なアイコンや「期間限定」バッジの作成方法を１つ１つ調べ、自分のものにしていく力が身につきました。

今後もバナー分析を続けていく上で、工夫されている点を言語化するだけでなく、なぜ自分がそのバナーに関心を持ったか／持たなかったのかという点まで考え、説得力のあるデザインの引き出しを増やしていきたいです。