こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、62回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン62にて公開されています✨
今回のお題の詳しい内容はこちらになります！
今回のバナーの目的 犬用レインコートの販促バナー
配信場所 GDN・YDNなど
ターゲット 男性・女性、20～50代
雰囲気 ポップ
サイズ 300px x 250px
画像 レインコートを着た犬の画像
配色 お任せ
文言
（必須）
- ペット用レインコート
- 梅雨も楽しくお散歩できる
- 反射テープで安全
- PET FRIENDS（店舗名）
（任意）なし
（フォント）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものです。
- キャッチコピーのフォントに「森と湖の丸明朝」を選び、ポップさを出した。
- 梅雨をイメージし、配色に水色や青色を選んだ。
- 背景のレイアウトを中央で分けて、リズムを出した。
- 右側の背景に雨のイラストを配置し、左側に足跡のイラストを配置し、ポップさを出した。
- 反省点は、文言のサイズがほぼ同じで、イラストを多用しているためごちゃつき、視線誘導がうまくできていないところ。
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①写真の配置
・背景を左右に分割するなら、写真（犬の画像）はどちらかに寄せた方が見やすい
私のバナーの配置では、犬の画像が白背景の部分にものっていて、黄色のレインコートの部分の視認性が低くなってしまっている。
ヒカルさんは、左側の背景の水色を私よりも濃い水色にして、右側の白とコントラストをつけた。
また、私はレイアウトを垂直に分割していたが、ヒカルさんはアンカーポイントを中央に追加して、そのポイントを右に移動してアールをつけた。アールにすることでポップさが出て、右と左がうまくつながってみえる。
右側の雨粒のイラストは、私の使用したサイズより少し大きくし、文字の視認性を保つため不透明度を37%に下げた。（私のバナーと比べ、視線誘導を妨げなくなったと感じました。）
②文字のメリハリ（「ペット用レインコート」の部分）
・背景を左右に分割する場合は縦書きを使うと文字のサイズを上げられる
「ペット用レインコート」という文言の優先順位が一番高いので、縦書きにして文字のサイズを大きくした。「梅雨も楽しくお散歩できる」という文言は、補助的なコピーなので、フォントサイズを小さくした。
③文字色の選び方（「反射テープで安全」の部分）
・商品（犬のレインコート）と同じ黄色を使うと一体感が出て目立つ
私のバナーでは、文字色が青色のため、背景と馴染んでしまっている。
④左側のグループにある犬の足跡のイラスト
私のバナーでは、足跡のイラストが左上に一つあるだけで、浮いて見えた。ヒカルさんは、イラストもう二つ足し、一つだけ浮いて見えるのを防いだ。
今回のレッスンも、沢山の学びを頂きました✨
背景のレイアウトを分割してリズムを出したいとき、バナーの雰囲気に合わせた方法で分割する。
コピーと商品との関係が、どの位置でどの配色だったら一番伝わるかを考える。
コピーの優先順位を決めて、ジャンプ率をつけたり配色を選び視線誘導をスムーズに行う、などなどです。
今回教えていただいたことをしっかりと吸収し、優先順位を自分なりにきちんと考察して、視線誘導をスムーズに行えるバナーを目指します！
