バナートレース

◇トレースしたバナー

スキンケアブランド米肌さんのバナーをトレースしました。

◇バナーの分析

バナーの配色・トレースを通じて気付いたことをまとめました。

◇工夫したところ

1．正確にトレースをするためのカーニング

漢字・カタカナ・英語・数字では、同じ文字間でも見え方が違うので微調整を繰り返し雰囲気が変わらないように工夫しました。

2．画像の選択

元のバナーの雰囲気を壊さないような画像を探しました。「美白」をテーマにしたバナーだったので、白を基調としたスキンケアのバナーを選択しました。

3．視認性をあげる文字の加工

視認性をあげるために、文字の周りに枠がついていたので同じように枠を付けました。また、女性向けの洗練された印象に合うようにそのまま枠を付けずにぼかし、柔らかい雰囲気を意識しました。

4．揃える

文字間隔やアンダーラインなどが揃うように工夫しました。

◇学んだこと

1．目線を気にした配置

「ロゴ」や「2,200円」、「クリックボタン」がZの目線を意識したものになっていてクリックしたくなるように誘導が出来ている。

2．既存のバナーを分析する

似たようなテーマの既存のバナー、イメージしているバナーを沢山分析する。「など、このような配色になっているのか」「なぜ、この写真が使われているのか」など自分で考える事でデザインの引き出しを増やすことが出来る。

3．フォントの選択

ひとつのバナーの中でもいくつものフォントが使い分けられている。右側の文言は、女性の繊細な印象のフォントが使われていて、「プレゼント付き！」は視認性を意識したフォントが使われている。

4．視認性を意識した文字

注目してほしい「2,200」の数字の部分は目立つように文字が大きめに設定されている。また、右側の文言では「”」を使用したり、色を変えることで見た瞬間に注目してもらえるように工夫されている。