こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第47回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン47にて公開されています✨
今回のバナーのお題は、福袋の販促です。最近の福袋事情を知りたいと思い、「イエモネ」さんで、2021年の福袋特集を覗いてみました。
いろんな種類の福袋があり、手軽な値段のものがあったり、どれもお得感があって、人気がある理由がわかりました。
お題の詳しい内容はこちらになります！
今回のバナーの目的 雑貨屋の福袋販促バナー
配信場所 雑貨屋のECサイト内
ターゲット 女性、20～40代
雰囲気 可愛らしい
サイズ 300px x 250px
画像 福袋の画像
配色 お任せ
文言
（必須）
- 福袋
- HAPPY BAG 2021
- 数量限定 1/4 mon START
- sundry goods shop（店舗名）
- 詳しくはこちら
（任意）なし
（フォント）なし
左の画像（スマホ画面では上）が、私が初めに作ったもので、右の画像（スマホ画面では下）がヒカルさんがブラッシュアップしてくださったものになります。
- 干支のイラストを選ぶとき、雑貨屋の福袋であることや、目指す雰囲気の「可愛らしい」を意識して選んだ。
- 福袋の画像の優先順位が高いと考え、大きく使用した。
- 反省点は、「2021 HAPPY BAG」と「数量限定」というテキストの両方にアーチがかかっていて、リズムが単調になっているところ。
- 日付のテキストの色が背景に近く、視認性がよくない。
ヒカルさんが、この回のレッスンを画像で分かりやすく解説するツイートをしてくださっています✨
ヒカルさんのツイートを参考にさせて頂きつつ、改善のポイントをまとめます。
“改善のポイント”
①配色の統一（「2021」、「HAPPY BAG 」という部分）
・文字とリボンの色を揃えると一体感が増して目が留まる
私は、差別化しようと文字とリボンを異なる色にしたが、それだとブロック感がなくバラバラとした印象を与えた。
②コントラスト（「 1/4 mon START」の部分）
・背景とのコントラストを高くすると視認性が上がる
福袋を中央に配置したことにより、「 １月４日🈷 START」を配置するスペースが狭くなったため、「1/4」という文字組みで配置した。
また、文字色を茶色にすることにより背景とのコントラストを高くした。
③モチーフの配置（福袋の画像）
・思い切って複数配置すると印象が整ってレイアウトも調整しやすい
福袋のイラストのテイストが他のものと違い、唯一手書き風なので、私のバナーのように一つ置くだけだと浮いて見える。また、真四角で大きめのサイズのため、レイアウトをとってしまう。
少し小さくして複数配置することで、同じテイストのイラストが増え、浮いてみえなくなる。また真四角の形状を崩すことができる。
又、「 2021」と「HAPPY BAG」が、中央揃えでアーチになっているため、下のコンテツは、中央に配置されると収まりがよい。（中央に配置しないならば、レイアウトを左右に色でわけるレイアウトにしてもよかった）
そのため、ヒカルさんは、福袋を中央に配置した。
④モチーフの配置（あかべこと扇子の画像）
私のバナーは、テキストやイラストをただ配置しており、立体感がなく、平面的な印象になっていた。ヒカルさんは、あかべこのイラストや扇子を帯に重ねて立体感を出した。あかべこのイラストの使い方も、全体を使うとそちらに目がいきすぎてしまうため（印象的な体の模様があったりするので）、トリミングして使用した。
今回のレッスンも沢山の学びを頂きました✨
イラストのテイストを考慮して選ぶこと、もしテイストが違うものを用意したときは浮いてしまわないように配置すること。
メインにしたテキストの組み方と、それに伴うレイアウトとの相関関係を意識すること。
空間に合わせた文字組みを考えることなどなどです。
以前、イラストを使用したときバナーの回があるので、今回学んだことと結びつけられるよう、復習したいと思います✨
