週末バナートレースはじめました（#1）

初めてのnote投稿になります。

現在銀行員として都内に勤める、sakiと申します。

９月からデジハリby ligにて、Webデザインを勉強しております。

詳しい自己紹介記事は次回更新するとして、、１０月から週末バナートレースを始めました！

デジハリの勉強は、HTML/CSSに突入しているので、デザインに触れたいな〜と、サイトトレースよりも、手軽にできそうなバナートレースに手を出してみました。

が、、手軽なんてとんでもない、、

実際に手を動かしてみて、バナー１つの中に、こだわりがわんさか詰まっていることに気がつきました。

作成者は、様々な思いを込めながらバナーを作成しているのだと、感銘を受けましたので、気づきを以下に書き留めておこうと思います。

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

理由その１：金色グラデーションを練習したかったから。

例えば、温泉のバナーや高級肉のバナー等、高級感を強調する際に金色のグラデーションがよく使われているので、その練習をしたいなと思い、このバナーをチョイスしました。

理由その２：文字量が多いから。

バナーの中で、伝えたいメッセージの優先順位付けを自分なりにして、それをどのようなデザインの手法で強調しているのか、自分なりに分析をしたかったからです。

2.伝えたいメッセージの順位付け

このバナーは、4Kを、見たくなる、録りたくなるような、体験ができる賞品がクイズに答えて当たるよ！という内容のキャンペーン用バナーです。

(A賞は、背景写真にあるアンコールワット等の旅行。イメージするに、帰って来たあとも、旅行の時にみたあの絶景を、4Kの綺麗な画面で擬似体験したくなる、みたいなそんなイメージかなと、、)

バナーにある情報としては、以下の通り。（まずは上から）

・三菱録画テレビREAL4K　RA1000シリーズ発売記念
・４Kを見たい！録りたい！キャンペーン
・クイズに正解された方から抽選
・「４K（景）から選べる絶景体験の旅」ほか素敵な賞品をプレゼント！
・応募締切：２０１８年１２月３１日

これらの情報を、デザインを見た上で、自分なりに伝えたい順に並べて見たのか以下。

⑴４Kを見たい！録りたい！キャンペーン（金色グラデーション、ヒラギノ角ゴでの一番の強調箇所）
⑵クイズに正解された方から抽選で（黄色ライン、ヒラギノ角ゴで強調）
⑶「４K（景）から選べる絶景体験の旅」ほか素敵な賞品をプレゼント！
⑷応募締切：２０１８年１２月３１日
⑸三菱録画テレビREAL4K　RA1000シリーズ発売記念

作成者は、消費者にとってメリットである、キャンペーンをやっていると言うことを、

「４Kを見たい！録りたい！キャンペーン」という印象的なフレーズと、

金色及び、太いゴシック体で強調したデザインで、強く印象付けているように感じました。

そして、その先の視線の誘導は、直下のキャンペーン詳細に移っていくと思います。

なので、一番劣後してると思われる、録画テレビの商品名は一番上、ただ、キャンペーンを実施する理由は強調する必要があったため、発売記念をアイキャッチとして赤丸で囲ったのではと考えました。

3.トレースをしてみて、気づいたこと

⑴　一番目立たせたい箇所と、他の部分でフォントの種類と、フォントの色が微妙に違う

ぱっと見、①「見たい！録りたい！〜」「クイズに正解された方から抽選で」と、②「４K（景）から選べる絶景体験の旅〜」は同じフォントだと思って作成をして、Sampleと並べてみたら、違うフォントを使用していることに気づきました。

更に、「見たい！撮りたい！〜」「クイズに正解された方から抽選で」は黒、「４K（景）から選べる絶景体験の旅〜」は濃いグレーであることに気がつきました。

ほんとうに微妙な違い。。。

パッと見ではわからないような、細かい違いにこだわることで、強調したいところとそうでないところの差をきちんと出すことができる、ということを学びました。

⑵　応募締切箇所の、文字の対比付け

「応募締切：２０１８年１２月３１日」の、日本語部分と、数字部分のフォントが同一でないことに気がつきました。

確かに、日本語で使用しているフォントのまま数字を入力するとのっぺりしていて、違いが出ずに、数字が強調されなくなってしまいます。（大きさを変えたとしても）

数字部分をNotoSans（だと思われる）に変えたことによって、消費者に締切の日付を意識付けさせることに成功しているように感じました。

4.心残りと、疑問点

心残りは、REALの文字と、４Kの文字の、正しいフォント名がわからなかったこと、、（よく見るフォントな気がするのだけど、知っている方教えてください。。）

画像のフォント探しは、みなさんどうやっているのでしょうか、、

疑問点は、最後にスマートフォンと、花束の写真を使っていること。

スマートフォン＝クイズに参加する手段だから？
花束＝賞品のイメージ？賞品の中にあるから？

と思って、調べてみたら、賞品の中にフラワーアレンジメントがちゃんとありました。笑

https://www.google.com/amp/s/kensho-everyday.com/archives/37395/amp

5.まとめ

バナー１つ、小さいからといって、侮るなかれ！

眺めているだけでは気づかない、情報の強弱、緩急を付ける為の工夫が細かく設定されていることに気がつきました。

デザインの細かい技の練習にもなるので、これからも続けていきたいと思います。