こんにちは、yuriです。
2月27日に、ヒカルさんが運営されている、Webデザイン1on1レッスンチャンネルが公開されました!!
ポートフォリオ制作から始まり、毎レッスン、丁寧に教えていただいて沢山の学びを頂いています。その学びを学習者の皆さんと共有できることがとても嬉しいです!
今回は、 すでにチャンネルで公開されました、バナーデザイン8の回について記事を書きたいと思います。今回のお題は、不動産会社の新生活応援キャンペーンのバナー制作でした。
ヒカルさんが、この回について素晴らしいnoteを書いてくださいましたが、自分でブログの記事を書くと理解が深められると思い、ここへ書きたいと思います。
今回のバナーの目的 不動産会社の新生活応援キャンペーン
ターゲット 大学生・新社会人・20代
雰囲気 ポップ
サイズ 300px x 250px
画像 生活家電のイラスト(Adobeストック:255891773)
配色 背景色 春色 / メインカラー 春色
文言(必須)
・春の新生活応援キャンペーン
・3.6 FRI → 4.1 WED
・ご契約者さま全員に生活家電プレゼント
・どれかひとつ!
・電気ケトル・電子レンジ・炊飯器
・〇〇〇不動産
(任意)詳しくはこちら
左の画像(スマホ画面では上)が、私が初めに作ったもので、右の画像(スマホ画面では下)がヒカルさんがブラッシュアップをしてくださったものになります。
私が、バナーを作ったあと感じた反省点は、不動産の広告というのが伝わりにくいかもと思いました。家のモチーフを入れたりすべきだったかも?と。
初めに、ヒカルさんが指摘してくださったこと
ジャンプ率が低めになっている
ブラッシュアップの流れ
-
まずは、メインでおきたい文言の文字の置き方を考える(今回私は、生活家電プレゼントがメインだと考えた)
-
A-OTF 見出ゴMB31 は、ウェイトが1つしか選べないので若干扱いにくい
今回は、Noto Sans CJK JPを使用した
-
文字色が赤寄りなので、印象を合わせる目的で背景と同系色の茶色へ寄せる
-
家電のイラストは、円を敷かない方が大きくできる(細長い形状の家電など、要素が違うものがある場合は、図形を敷いてあげるとまとまりがでる)
-
イラストの形状から家電の種類は察せるので、名称は小さく文字色も背景と馴染む色にする(全てを大きく、濃くするとメリハリをつけられない)
-
「一つ選べる」につける線は、点線にするとかわいい雰囲気になる
-
日付は、曜日よりも日付を大きくして目立たせる
-
「新生活応援キャンペーン」を、楕円を使って文字にアールをつける。キャンペーンの「ヤ」を小さくし、「ー」を水平比率80%にする。
トラッキングを、使おう
文字詰めをするとき、私は、トラッキングを使わずに、矢印キーで感覚のみでカーニングしていました💦
ヒカルさんはまずトラッキングで文字詰めをして、必要なものはカーニングされていました(カタカナなど)
1on1レッスンチャンネルでは、ヒカルさんの思考の流れも追える上、ツールの細かな操作まで追えるので、今までのレッスンも、復習します!
ヒカルさんが、最後のまとめのとき、私の「不動産の広告というのが伝わりにくいかも」という考えに答えてくださいました。
例えば有名な不動産だと、会社のロゴを置くだけでバナーを見た人に伝わる。
しかし、そうでないときは、例えば「福岡中央区でお住まいをお探しなら〇〇不動産」というように、キャッチコピーを置くと良いかもしれない。
反省点なのですが、今回ヒカルさんから教えて頂いた「ジャンプ率を思い切りよくする」は、今までもアドバイスを頂いていること。
私は力が足りなくて、要素を並べるだけになってしまったり、ツールを使って表現する力が低くできなかったりします。
ヒカルさんのレッスンを受けて、小さなブラッシュアップの一つでどんどん良い方に変化しているのを見るといつもワクワクします。
力がないのを言い訳にせず、反省と改善を一つ一つ積み重ねていきたいと思います!