化粧品の継続広告のバナー｜日々の小さな一歩

こんにちは、yuriです。

今回、ヒカルさんから教えていただくバナー作成のレッスンが、第９回目を迎えました✨

今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン９にて公開されています✨

今回のお題は、化粧品の継続広告のバナーでした。

今回のバナーの目的　化粧品の継続広告

ターゲット　女性・30〜40代

雰囲気　上品な女性

サイズ　300px x 250px

画像　化粧品の画像（Adobeストック：218892521）/ シルクの背景素材（Adobeストック：267856057）

配色　背景色白、ピンク系 / メインカラー・灰、ピンク系

文言

（必須）

・うるおいキープ肌を実感

・トラブル肌のあなたに

・お試しセット2週間分

・今すぐ試す

・SAMPLE SKIN（ブランド名）

（任意）送料無料

左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップをしてくださったものになります。

私が、バナーを作ったあと感じた反省点は、文字の視認性が低いことと、ジャンプ率をあげているフォントの大きさが同じになってしまっていることでした。

初めに、ヒカルさんが指摘してくださったこと

バナー広告は、一瞬しか見ないもの。目をとめて貰うにはメリハリが必要になる。

今回の私が作成したバナーは、視認性が悪く、リズムが単調になっている

ブラッシュアップの流れ

文字の色の、青みをあげて視認性を良くする（文字の色を濃くしても、グラデーションをつけると、背景色と馴染む）
「トラブル肌のあなたに」の部分が、背景が薄く、文字が濃ゆい → 他の文言と表現が同じになっていてリズムが出ないため、背景を濃く文字を薄くする
「トラブル肌のあなたに」のリボンのピンクにグラデーションをつけると、白い文字の視認性が低くなる

文字に境界線で背景の色をつけると良い→境界線を入れることで、背景のグラデーションの明るいところで文字がぼけない
カタカナは、そのままだと間隔があいているのでしっかりカーニングする
長音符（カタカナ「ー」）は、バランスを見て水平比率を85%にした
「送料無料」の円の中の文字を小さくする

通常、円や四角という図形を、高級感のあるものに使う時は、周りに余白をつける

この時、文字を小さくすることで視認性が下がったならば、フォントのウェイトをあげるとよい
商品を、バランスをみて、大きく配置する（商品の形を隠さない置き方にする）
「今すぐ試す」のフォントを他と合わせて明朝体にする
「を実感！！」の「実感！！」を大きくして強調する

フォントサイズや、！の傾きを調節して、余白を埋める
トラブル肌のあなたにのリボンを傾けると動きが出る
メインの文言（うるおいキープ肌を実感）と、「お試しセット２週間」の文字サイズと配色が似ている

→お試しセット・送料無料のところから、白の帯をしいて背景を区切る

　今すぐ試すをボタンにして、リズムを変える
背景のシルクの素材の配置を決める