今回、ヒカルさんから教えていただくバナー作成のレッスンが、第16回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン16にて公開されています✨
今回のお題は、プロバイダーのキャッシュバックキャンペーンのバナーでした。
今回のバナーの目的 プロバイダーのキャッシュバックキャンペーン
ターゲット 女性・20〜30代
雰囲気 ポップ
サイズ 300px x 250px
画像 PCを操作する女性
配色 メインカラー ・バックグラウンドカラー:おまかせ
文言
(必須)
・工事不要
・高速インターネット
・月額2,980円〜
・最大三万円キャッシュバック
・LIGHTINGライト(プロバイダ 名)
(任意)なし
左の画像(スマホ画面では上)が、私が初めに作ったもので、右の画像(スマホ画面では下)がヒカルさんがブラッシュアップをしてくださったものになります。
今回のバナーを作成する時、女性の目線の先に一番訴求したいキャッチコピーを持ってきて、視線誘導するようにしました。
そして、後の文言を伝わりやすい並びにして、斜めの帯に配置することで、レイアウトを区切ってリズムを出すようにしました。
バナーを作成した後、反省したことは、女性の頭の上に大きなスペースがあることを改善できなかった点と、最大30,000円の「最大」と、「月額」の表現が似ているのに、違う表現にできなかった点でした。
ヒカルさんが、この回のレッスンを紹介するツイートで、とてもわかりやすく説明してくださっています。
復習をするため、それを参考に「ブラッシュアップの流れ」を書かせていただきました。
ブラッシュアップの流れ
- 室内の写真を使うときのポイントを紹介:縦の線(垂直に伸びている線)にあわせて配置する。例えば、今回の写真なら、窓の縦のサッシの線に合わせる。(ブラッシュアップの過程で、今回は写真の一部を切り取ることにより、窓の横のサッシの線に合わせることになった)
- 写真をパスで切り取る。
左側が切り取る前の写真で、右側が切り取った後の写真です。
左の写真を見ると、使いたい部分(女性がパソコンを操作するところ)以外は、ほぼ白くなっているので、余計な窓のサッシや、ぼんやりと映る景色を切り取る。今回のように、切り取った後も背景を白で使う時は、少し外側に切り取っていってもよい(通常は、1px程内側に切りとらないと、境目がジラジラしてしまう)
- 「月額2,980円〜」の「月額」を縦で組み「2,980」のフォントウェイトと同じになるように揃える。私は和文フォントで、見出ゴM31を使用したが、これは一つのウェイトしかないため、ウェイトが豊富に選べる小塚ゴシックに変更した。「円〜」を、通常の黒文字にして視認性を高める。「月額2,980円〜」を大きくして、視認性を高める。
- 工事不要のあしらいの色を、一度背景に合わせてから、少し濃い色にする。そうするとあしらいが悪目立ちしない。文字の視認性をあげるため、帯の色を薄く調整する。
- 最大3万円キャッシュバックの部分を調整する
- 「30,000円」という表記は、ゼロの個数を数える必要がある。「3万円」の表記の方が一目で伝わり、数字も大きくできる。「最大」の文字の枠の四角を角丸にして、背景を薄いピンク(上の帯と同じくらいのトーンにする)、文字色を濃いピンクにして「円」の上に配置する。「万円」のウエイトをM(小塚ゴシック)にして、「3」に視線誘導する。
- 写真の窓のサッシ(横に伸びる線)が、平行になるようにして配置する。上の黄色の帯の上に、女性の頭を少し重ねることにより、立体感を出す。
今回のバナーのレッスンでも沢山の学びがありました….!
写真の加工や、配置の仕方、訴求する文言の選び方(今回は、30,000円と3万円)、視認性を上げるための背景色と文字色を調整すること、フォントウェイトの調整でメリハリをつけることなどなど。
一回一回のレッスンで、ヒカルさんがブラッシュアップしてくださる中で、細かな調整をして、試し、よりよい方を選んでいく過程を見ることができます。
思考の方法や、表現の仕方、ツールの操作方法など、一つ一つ復習して実践して、身につけてゆきたいと思います!