1on1レッスン

おせちの販促バナー

おせちの販促バナーのアイキャッチ

こんにちは、Yuriです。

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

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

今回のバナーのお題は、おせちの販促です。今まで気にしてこなかったおせちの由来や歴史について少し知ることができ、新鮮な気持ちになりました✨

今回のバナーの目的 おせちの販促バナー

配信場所 GDN・YDNなど

ターゲット 男性・女性30~60代

雰囲気 和風・高級

サイズ 300px x 250px

画像 おせちの画像

配色 文字色:白・金、背景:黒・赤

文言

(必須)

  • 料亭福岡のおせち 2021
  • 特選三段重
  • 22,800円
  • 3人前/冷凍/和風
  • ご予約はこちら

(任意)なし

(フォント)明朝体

 

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

Yuriが作成したバナーヒカルさんがブラッシュアップされたバナー

 

 

 

 

 

バナー作成時に意識したこと
  • 優先順位の高いテキストのフォントサイズを大きくしてジャンプ率をあげたり、配色を金色にして目立たせた。
  • おせちの画像の下に、金の輪を配置することでレイアウトを区切った。配置するとき、目立ちすぎないよう、不透明度を下げた。
  • 反省点は、和の雰囲気という指定だったので、縦書きの方が雰囲気が出ると思ったが、うまくいかず、全て横書きにしてしまった。

ヒカルさんが、この回のレッスンを画像を使って解説するツイートをしてくださっています✨

ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。

“改善のポイント”

文字のリズム(「おせち」の部分

・特徴的なフォントに変更して、自由に文字組みするとリズムが出る

昭和書体さんの「闘竜」というフォントを使用した。

自由に文字組みをしたので、予備のためコピーをとってから(後から文字を大きくする可能性があるため)、「おせち」の3文字をスマートオブジェクト化して、グラデーションオーバーレイの効果をかけた。

商品画像の配置

・商品の間に少し余白を設けると、3つのお重という事が伝わりやすい

私がしたようにお重をくっつけて配置すると、ひとつに合体して見えてしまう。

商品画像の角度

・角度は45°に設定すると余った部分の形も整ってあまりめだたなくなる

画像を配置するとき、90°や45°にするときれいに見える。

バナーに四角形の画像を配置すると、余白ができてしまう。その余白の量が多いとそちらに視線が誘導されてしまうので、なるべく気にならない大きさにする(ヒカルさんは、45°になるように設定したため、余白にできた二等辺三角形が同じような形・サイズとなり目立ちにくくなった)

三段のお重の中身で、魅力を感じさせる具(伊勢海老・アワビなど)の入った2つのお重を全て見えるよう配置し、残りのお重はトリミングしたが、カニの爪など映える具材を見えるようにした。

「3人前/冷凍/和風」という情報は、優先順位的に高くないため、価格の横に配置した。

今回、文字のフォントの選び方や文字組みの仕方で印象を強めることができること、そして画像をトリミングをするときのポイントを学びました✨

今までのレッスンでも、フォント選びや文字組みをするときのポイント、画像のトリミングで沢山のポイントを教えていただいているので、書き出してまとめ、それを参考にし、作成するバナーにいかしていけるようにします✨