1on1レッスン

マンゴーのお中元販促バナー

マンゴーのお中元販促バナー

こんにちは、Yuriです。

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

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

今回のお題の詳しい内容はこちらになります!

今回のバナーの目的 マンゴーのお中元販促バナー

配信場所 GDN・YDNなど

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

雰囲気 トロピカル

サイズ 300px x 250px

画像 マンゴーの画像

配色 お任せ

文言

(必須)

  • お中元・夏ギフトに
  • 完熟マンゴー
  • 産地直送・沖縄県産・2玉 1kg
  • ご注文はこちら
  • Mango market(店舗名)

(任意)なし

(フォント)なし

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

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

 

 

 

 

 

バナー作成時に意識したことと、反省点
  • バナーの雰囲気がトロピカルだったので、配色を夏の空をイメージした水色とマンゴーのカラーに合わせた文字色や帯の色にした
  • マンゴーの写真の優先順位が高いと考え、中央に大きめに配置した
  • 文字の下に配置した円や朝顔などのあしらいは、悪目立ちしないように不透明度を調節した
  • 反省点は、フォントを明朝体で統一したのでリズムが単調になってしまった点

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

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

“改善のポイント”

写真のバランス

・写真を分割して切り抜き、大きくバランスを取って配置すると映える

ヒカルさんは、手前のカットしているマンゴーのみを切り抜き、後ろのものより大きくして配置しました。

写真を切り抜くというアイデアが、私には全くなかったのではっとしました。

そのまま使うと、意図しない隙間が生まれたり(私のバナーでは「マンゴー」の文字に周りに隙間が空いてしまっている)、拡大したときに場所をとりすぎてしまうけれど、カットすることにより解決する。

文字のメリハリ(「マンゴー」、「2玉1kg」の部分)

・文字のサイズに差を付けて、しっかり目立たせる

「マンゴー」の文字を大きく、色も濃くし、「2玉1kg」は、数字を大きくしてメリハリをつけた。

和の雰囲気が強い

・トロピカルな雰囲気を邪魔しない程度に小さく配置

「完熟マンゴー」の文字の下の円と、対称となるように「お中元夏ギフト」の文字の下の円を配置した。円が枠外にはみ出す配置だと邪魔にならず、視線が文字へ誘導できると感じました。

 

今回のレッスンも、沢山の学びを頂きました✨

写真素材は、複数のものが重なって無駄なスペースがうまれてしまうことがあり、それを切り取ってはだめな場合もあるけれど、よい場合は分解して組みやすくする!

バナーの目指す雰囲気を出せているかを確認する(今回は、和の雰囲気を出しすぎてしまっていた)。

今回教えていただいたことをしっかりと吸収し、訴求効果があり、視線誘導をスムーズに行えるバナーを作れるようになりたいと思います!