こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、60回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン60にて公開されています✨
今回のお題の詳しい内容はこちらになります！
今回のバナーの目的 春のバーゲンセールバナー
配信場所 GDN・YDNなど
ターゲット 女性、20～30代
雰囲気 シンプル or ナチュラル
サイズ 300px x 250px
画像 女性の画像
配色 お任せ
文言
（必須）
- GW SPRING SALE
- 最大70%割引
- 2021 4.29 – 5.5
- apparel net town（店舗名）
（任意）なし
（フォント）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものです。
- 優先順位が一番高いのが「70%割引」という文言だと考え、フォントサイズを大きくした。
- 女性の影が立体感を出すのによいと考えた、そのままだと影が濃すぎたので不透明度を落として使用した。
- 目指す雰囲気が、「シンプルもしくは、ナチュラル」のため、あしらいを抑え、配色で春を表現した。
- 反省点は、配色で淡い色を使用したため、視認性がよくないところ
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①視認性
・背景色を白にすると、パステル色でも読みやすくなる
私は、女性の画像（背景はグレー）をそのまま使用したため、パステル色の文言の視認性が低かった。
また、ヒカルさんは、女性の画像をCamera Rawフィルターで、ハイライトのつまみを少し左へ、シャドウのつまみを右へ調節し、露光量をあげた。パステル色にあう雰囲気になったと感じました。
②強調と配色（最大70%割引の部分）
・色は統一して「最大」を少し小さくすると、ぱっと内容が伝わる
強調したいのは「割引」の部分だが、私の作成したバナーでは小さく、色もピンクと黄緑というように変化していて認識しずらかった。ピンクに統一すると、全体の配色も整う（黄緑は下の縁だけに使用する）。
③文字の配置（「apparel net town」の部分）
・帯の中に収めると、リズムが変わって読みやすい
周りの縁を細くした方が、中の空間を広くとれる（縁が太いと、中に文言を配置したとき圧迫感がある）。しかし今回は細くすると、配色のよさが崩れると考え、縁は太くしつつ、「apparel net town」という文言を帯の中に収めた。
今回のレッスンも、沢山の学びを頂きました✨
パステルカラーを使うときの背景色の選び方や、バナー全体の雰囲気に合わせた画像の処理の仕方、帯に文言を配置してリズムを変えるなどなど。
そして、ヒカルさんにブラッシュアップしていただいたバナーと、自分のものを見比べたとき、「70％割引」という文言の優先順位が高いと考えていたのに、女性の画像にまず視線が誘導される仕上がりになっていることに気が付きました。
作った後も、自分で考えた優先順位で視線が誘導できているかを確認し、改善できるようになりたいと思います。
