こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、56回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン56にて公開されています✨
ヒカルさんから、仕事では〆切を意識することが必要だから、「最初の３時間でできたものを残し、引き続き完成させる」というご提案をいただきました。
私は、時間を意識することは重要と分かりつつも、ついおろそかにしがちでした。
そこで、「To Dee」という、〆切効果を利用した、タイマーによるカウントダウンと ToDoのセットのWEBアプリを使い始めました。TOPECONHEROESダーヤマさん制作のアプリです✨
BGMを自由に決められたり、HINTが励ましてくれたり、ログが残ったりとありがたいです。
私の場合は、ピアノ演奏を小さめの音量で流すと、集中力アップにつながっているような気がします✨
今回のお題の詳しい内容はこちらになります！
今回のバナーの目的 空気清浄機の販促バナー
配信場所 GDN・YDNなど
ターゲット 男性・女性、20～60代
雰囲気 信頼・安心
サイズ 300px x 250px
画像 空気清浄機の画像、花粉・ウイルスの画像
配色 お任せ
文言
（必須）
- 微粒子を99%除去
- 花粉＆ウイルスバスターモード搭載
- 12畳対応／おやすみモード／オフタイマー
- 詳しくはこちら
（任意）なし
（フォント）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものです。
- 花粉とウイルスのイラストと文字を組み合わせて使用した。
- 「99」のサイズを大きくし、「微粒子を」を吹き出しにいれて、長方形になるよう文字組みした。
- 空気清浄機の画像が長方形だったため、リズムが単調にならないように、性能の部分を円の中にそれぞれ配置した。
- 空気清浄機の画像が白色だったため、本体にシャドウをつけ、背景にもグラデーションをつけ、目立たせた。
- 反省点は、どの要素も色や大きさで同じくらい強調してしまい、
視線誘導がスムーズにできていないところ。
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①文字と絵の差別化(「花粉＆ウイルスバスターモード搭載」の部分)
・キャッチコピーと絵を分けて表現すると、内容が伝わりやすい
私の作成したバナーでは、「花粉＆ウイルス」と「バスターモード搭載」が、両方ともイラストに白抜き文字を配置しており、差別化ができていなかった。
ヒカルさんは、「花粉」の文字を置く帯をイラストと同じオレンジ、「ウイルス」の文字を置く帯を紫にして、繋がりをもたせ、意味を伝わりやすくした。そして、サイズを小さくして、「バスターモード搭載」を大きくし、ジャンプ率をつけた。
花粉とウイルスのイラストを、私はそれぞれ一つだけ使用したが、複数配置することにより、雰囲気が伝わる。
②テキストの配色（「微粒子を99%除去」「12畳対応／おやすみモード／オフタイマー」の部分）
・色を合わせた方が商品も引き立ち全体のバランスも良くなる
私はこの部分の配色を、グレー、黄、青と、複数使ったため、違うブロックとして見えた。
ヒカルさんは、配色を青にまとめ、また、「 99」の文字を大きくしたことで、視線誘導がスムーズになっている。
また、「99」の文字、「微粒子を」の吹き出し、「12畳対応／おやすみモード／オフタイマー」の円、レイアウトを区切った下側の青の背景にグラデーションをかけて、トーンを揃えた。
「12畳対応／おやすみモード／オフタイマー」の円を、一直線ではなく、レイアウト下側の背景のカーブに沿わせていることで、バナーとして全体のまとまりが出ている！と感じました。
③レイアウトの切り分け(「花粉＆ウイルスバスターモード搭載」と「詳しくはこちら」の背景を青色にしてパスを曲線にして、レイアウトを切り分けたところ)
・背景に帯を敷いて上下に切り分けると内容をパッと把握しやすい
私の作成したバナーでは、各ブロックをそのまま配置し、大きさのメリハリがなく、色もバラバラでまとまっておらず、目が留まりにくかった。
このレイアウトを切り分けるという方法は、以前のレッスンで、洗顔ソープの販促バナーのブラッシュアップしてくださったときにも、教えていただきました。
ヒカルさんがブラッシュアップしてくださったバナーこのときのレッスンを、しっかり復習しようと思います！
今回のレッスンも、沢山の学びを頂きました✨
「レイアウトを切り分ける」という方法を、以前のレッスンで教えていただいたのに、今回私はそれを活用できていなかったので、きちんと自分の引き出しにいれるようにします。
また、視線誘導をスムーズにするには、配色が肝になるんだと学びました。
私は、一度作成したら考えが固まってしまって、アイデアが出せないところがあるので、時間を意識しつつ、改善の案を少しでも出せるようになりたいと思います！
