日焼け止めクリームの販促バナー

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

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

今回のお題は、日焼け止めクリームの販促バナーでした。

今回のバナーの目的　日焼け止めクリームの販促バナー

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

雰囲気　シンプル・ナチュラル

サイズ　300px x 250px

画像　商品パッケージ・女性の写真

配色　青・白

文言

（必須）

・絶対焼かないあなたへ

・肌を守るUVクリーム

・SPF30＋

・PA＋＋＋

・詳しくはこちら

（任意）なし

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

バナー作成時に意識したことと、反省点

バナーの雰囲気、シンプル・ナチュラルを意識したけれど、メリハリが弱くなってしまいました。

レイアウトを区切って、リズムを付けようかと思いましたが、適切なあしらいなどを見つけることができず、背景を広げて、文言をそのまま配置しました。

レッスンの時に気付いたのですが、私は、「SPF30+」とすべき所を、「SPF30++」と誤っていました💦

指示書の確認が足りないので、気をつけます！

ヒカルさんが、この回のレッスンを紹介するツイートで、とてもわかりやすく説明してくださっています。

復習をするため、それを参考に「ブラッシュアップの流れ」を書かせていただきました。

Twitter

外部サイト

https://twitter.com/design_hikaru/status/1262902709755076608?s=20

ブラッシュアップの流れ

女性の配置を左側にする。髪の毛がパラパラとしている部分を隠し、女性の顔や肩に、スッと目がいくようにトリミングする。
日焼け止めを、右側に大きくて配置した（商品名が視認できる程度まで、大きくするとよい）。その背景を矩形で区切った。
商品の背景に、初めグラデーションを試したが高級感が出たので、ナチュラルな雰囲気にするため、単色のベタ塗りにした。
女性の写真のトーンが柔らかく、空の色が薄くあまり夏を感じないため、背景のコントラストを高くして、青空や白い入道雲を目立たせる（コントラスト、明瞭度、自然な彩度をあげる）→（写真をそのまま加工すると、女性が日焼けをしているように見えた。それを防ぐため、女性を背景から切り抜いた。そして、夏らしく加工した空の上に、女性を切り抜いたレイヤーを配置した。）
「肌を守るUVクリーム」を、小塚明朝に変更する。「UV」は、Adobe Garamond Pro に変更する。「肌を守る」の「肌・守」の文字を大きくし、ジャンプ率を高くする。
商品のから色をとって背景やシェイプなどに使うと一体感が出る。日焼け止めの背景の色を、商品からとって使用した。「絶対焼かないあなたへ」のリボンの色も、商品の金色のグラデーションから色をとって使用し、全体のバランスを締める。
「肌を守るUVクリーム」の文字を、女性の上に配置し、文字色を黒にする。黒にすることで、強い光があったってできた影のイメージとなり、夏感を出せる。
「肌を守るUVクリーム」のリボンの視認性を保つには、ある程度の大きさが必要となる。背景のレイアウトを斜めにすることで、リボンがおさまる。日焼け止めを大きくして、斜めにレイアウトした背景から飛び出させることで、リズムが出る。
SPF30＋、PA＋＋＋（フォントはAdobe Garamond Pro）を日焼け止めの隣に、縦書きで配置する。
左手の下に、「詳しくはこちら」の文言を、帯を敷いて配置する。帯は、他の色より濃い色にする。