本日のバナートレース #01

こちらより画像を引用
本日から本格的にバナートレースとnoteでのまとめを始めます。🍠
最初から要素が多いものを選んでしまい時間がかかりましたが、学びがたくさんありました。 🌝 💭 < 次からもっとシンプルなバナーにする…

■ 選んだバナー
・サントリーオールフリーのバナー広告

■ブランドロゴ
・SUNTORY

■キャッチコピー
・おいしくなったのだ！
・Top Selling No.1

■ボタン
・「オールフリーのおいしい体験談はココからチェック！」

■ぱっと見の印象
・クリアで爽やかな印象。さっぱり新鮮。夏っぽい。だけどゆったりのんびりとしたゆるさや可愛らしさもある。

■その印象を作り出している要因
①色
・青空のような背景色と淡い黄色
・黄色のグラデーション
・背景色の次に白が占めている
②トーン
・ライトトーン〜ブライトトーンあたりを使っている
・ドミナントトーン、トーンイントーン
③配色イメージ
・クリアというよりはフレッシュナチュラル
④イラスト
・イラストを用いることで可愛らしさが出る。
・ビールのイラストだけでなく、「の」の字に似たイラストで遊ばせている。
⑤フォント
・バナー内のほとんどのフォントが細め。
・スッキリ、スタイリッシュなフォントが採用されている。
⑥その他
・余白が少ない
・明度が高い

■使用フォント
・「ココからチェック！」
→Hiragino Kaku Gothic Pro
・「オールフリーの」「体験談」「No.1」「Top Selling」「Non〜.」
→Hiragino Mincho Pro
・「オールフリー」「おいしい〜は」「おいしくなった〜だ」「ノンアルコールビールテイスト飲料」「アルコール/カロリー/糖質ゼロ」
→YuKyokasho
※「SUNTORY」はメーカー独自のフォントであったため、Hiragino Kaku Gothic Stdを代用。

■トレースをしての考察・分析

①要素の数が多い
・テキスト数が多い。バラけさせた時に、ブランドロゴを入れて16個ある。
・あしらい、イラストも多い（ビール×2、麦穂、リボン、ボタンの上下の紐、「の」の字をイラスト化）。
・要素が多いにもかかわらず窮屈さを感じにくかったり、読みたくなくなるような気持ちにならなかったりする。

②あしらいの工夫
・あしらいが多いことでポップで親しみやすい印象もある。ただ、曲線的なあしらいやテキストが、直線的なあしらいや（細身の）テキストよりも若干少ないことからフレッシュな印象の方が強く感じられる。
・バナー左下のリボンが風になびくような曲線であるため、爽やかさがあらわれている。風になびくようなリボンと空色の背景色がマッチしている。
・「の」の字のイラストのカラーがこのバナーのアクセントカラーとして使われており、くどくない。（「の」の字のイラストが別のカラーだとこのバナー内のアクセントに統一感がなくなる気がする。形でアクセントを作ったら、その形のアクセントカラーはバナー全体のアクセントカラーにした方が良いのではないか。）

③ほとんどが細身のフォント、丸みは少し
・テキストのスッキリ、スタイリッシュさが、このバナーが伝えたいノンアルコールビールのフレッシュで爽やかな印象を表している。
・Yukyokashoでmidiumだと細すぎるため、テキストによってはBoldにした方が可読性が上がりそう。
・「No.1」においては、Hiragino Mincho ProでW6だと太さが足りなかったため、Stroke0.5を用いてやや太めに設定した。
・ボタンの「ココからチェック！」が、メインの部分のテキストと比べて太くて丸め。目立つ。また、ドロップシャドウはx:y:blurを1:1:1で、他のテキストとぱっと見の違いを出している。よく見ると濃くはっきりした影。

④黄と白の組み合わせを採用している
・色彩学的には見ずらい組み合わせだが、採用している箇所（バナー左の黄色い○3つ、その中の白い文字）がこのバナーの中で主張する優先度が低い情報として扱われていると予想する。ただし、黄色の明度がやや低く見えるから、最高明度の白と比べて差が出るようにされている。
・その下の「オールフリーの」のテキストにドロップシャドウ（x:y:blurを1:1:1）が施されており、リボンの黄色い背景との区別が明確で見やすい。
・先に記述した「黄色い○3つと白い文字」と「オールフリーの」のドロップシャドウの有無で、主張したい要素かそうでない要素なのかが判断しやすい（文字が大きいほど黄×白の組み合わせの時にはドロップシャドウを入れた方が良いのかも）。
※黄色と黒の組み合わせは、白と黒同様に明度差が大きいため見やすい。

⑤明度差がある
・「No.1」などの英文や麦穂の黄色と、3つの◯/左下のリボンの黄色を比べて、前者の方が明度が高く、後者は低めのように感じる。
・これらはバナーに占める割合が大きいことから、明度が高い方を上にすることで、バナー全体が安定している印象を与えられる。
※黄色は反射する光の量が多いから明度が高い。青はその逆。そのため、黄みの橙よりも黄色の方が明度が高いので、上記のように見えると考える。

⑥グラスに入ったビールのリアルなグラデーション
・ただ上から下、下から上に流れを出しているだけでなく、斜め端から楕円形状にじんわりと広がるようなグラデーションがなされており、ゆったりとした印象を生み出している。
・右斜め上から左斜め下にかけて色相と明度のグラデーションがされており、バナー全体のバランスを邪魔しないようなグラデーションに感じた。

次回からこの形でバナートレースの分析をしていこうと思います 😊 🌻
書き方を決めたから、次からもう少し早くnoteの投稿ができるはず… 🙉
見出しの空白に入れるイラストを検討中... 💭