こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第48回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン48にて公開されています✨
今回のバナーのお題は、スチームクリーナーの販促です。
なんとなく存在を知っているだけで、実際に使ったことがなかったので、ケルヒャーのWebサイトで性能などを調べました。
油汚れを落とせたり、防カビや除菌に有効だったりと、スチームクリーナーの頼もしさを知りました。
そして、今回のアイキャッチは、iPad Proにいれたアプリ、Procreateで作ってみました。以前から憧れていたiPad、「今は我慢」と気持ちを封印していたんですが、お正月のSALEの前にゆるんでしまい..。
今まで、MacBook Airしか持っていなかったので、学習するとき活用したり、Procreateなどのアプリも少しずつ触っていきます✨
お題の詳しい内容はこちらになります！
今回のバナーの目的 スチームクリーナーの販促バナー
配信場所 GDN・YDNなど
ターゲット 男性・女性、30～50代
雰囲気 清潔・信頼
サイズ 300px x 250px
画像 スチームクリーナーの画像
配色 お任せ
文言
（必須）
- 年末の大掃除に
- STEAM CLEANER MAX（商品名）
- 99.9%除菌※
- ※すべての菌を除菌する訳ではありません
- 詳しくはこちら
（任意）なし
（フォント）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものです。
- 商品画像と、性能が伝えたいことの優先順位が高いと考え、大きくした。
- 写真の上に置いたテキストの視認性をあげるため、グラデーションツールで画像の一部を消した。
- 商品本体の配色が黒と黄色なので、文字に黒、帯に黄色を使用した。
- 反省点は「除菌」のイメージを、もっと表現すべきだったかもというところ。
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①見出しの文字組み
・もう少し角度を付けて和文を少し工夫すると勢いが出る
私の作成したバナーでは、先に帯の角度を決めて、そこに「STEAM CLEANER MAX」というテキストを配置した。
ヒカルさんは、フォントの縦の線が垂直になるように配置してから、それに合わせて帯の傾きを決めた。そうすると、違和感がなくなり勢いが出る。
上に空いた空間をいかして、「年末」の文字を強調した（また、助詞を小さくしてジャンプ率をつけている）。
②コピーの文字組み
・文字のサイズを整えて周囲の余白を整えると違和感が薄れる
「※すべての菌を除菌する訳ではありません」を、右下の空いた空間に、改行して配置する。
「除菌」の文字サイズを大きくして、左側に配置する。
③配色のまとまり
・黒を選んだほうがまとまる
黒にすると、しまった感じになり全体のバランスがまとまる。余白のバランスを見て、帯の高さを30pxにした（私のバナーは、26pxだった）
レッスンのまとめで、視線の流れを考え、誘導をできるように、また、余っている空間の整え方を意識するようにとアドバイスを頂きました。✨
ブロックごとだけを意識して全体を見れていなかったので、次から頂いたアドバイスを活かせるようにしていきます！
