こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第18回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン18にて公開されています✨
バナーのお題の内容はこちらになります。
今回のバナーの目的 エアコンクリーニングのキャンペーンバナー
ターゲット 女性・20〜30代
雰囲気 ポップ
サイズ 300px x 250px
画像 エアコンクリーニングの画像 / 女性スタッフの画像
配色 青
文言
(必須)
・エアコンクリーニング
・分解洗浄キャンペーン
・5月末まで
・12,900円
・女性スタッフ対応可能
・詳しくはこちら
(任意)なし
左の画像(スマホ画面では上)が、私が初めに作ったもので、右の画像(スマホ画面では下)がヒカルさんがブラッシュアップをしてくださったものになります。
- 一番強調したいポイントは、キャンペーンで安くなった値段だと考え、フォントサイズを大きくした。
- レイアウトの上部分の背景には、エアコンクリーニングでより澄んだ空気になるイメージでイラストを選んだ。
- 「女性スタッフ」という文言の横の点線を、背景色を少し濃くした色にして馴染ませ、悪目立ちせず文言を強調させた。
- 反省点は、上のレイアウトにある文言の余白がなく、詰まった印象になっていること。
- エアコンの写真が、圧迫感を出してしまっていること。
ヒカルさんが、この回のレッスンを紹介するツイートで、とてもわかりやすく説明してくださっています。
復習をするため、それを参考に「ブラッシュアップの流れ」を書かせていただきました。
ブラッシュアップの流れ
・エアコンを、パスで切り抜く。
・エアコンの画像が暗めの印象なので補正をする。露光をあげ、シャドウの値を少し右へ、ハイライトの値を少し左へ調整する。
・エアコンの画像をコピーする(加工した後に、もう一度やり直すときのため)。ラスタライズして、マスクをかける。描画色を黒、背景色を白にする。グラデーションツールで、「描画色から透明に」を選択し、洗浄ノズルを握る手の部分をフワッと消していく。スマートオブジェクトをかける。
・女性を配置する。(人の視線は顔に行きやすいので、顔を大きく配置すると視線を誘導できる。)画像に、補正をかけて明るくする(露光を上げる)。
・「分解洗浄」という言葉が目を引くポイントなので、「キャンペーン」の文字の大きさとジャンプ率をつける。
・「エアコンクリーニング」の下に帯をしいて、「分解洗浄キャンペーン」との差別化をする → リズム感が出て、引き締まる。
・金額は、イタリック体、太字にする。分解洗浄の色味と合わせ、少しビビッドなピンクにする。
・風をイメージした背景のイラストは、塗りを薄くする(あるかないかわからない程度にする)。
・詳しくはこちらの帯を配置する。文言のフォントは、15pxから、12pxへ変更する。
・旗は、長さを短くすることで、バランスをよくする。旗の下に金額を潜り込ませると、まとまりがでる。配置する位置をバナーの下部へ移動すると収まりが良くなる。
・女性対応スタッフ可能の文字を配置する。
・「分解洗浄」という文字の上に泡をのせる。(すっと泡が目に入り、「分解洗浄」へと視線誘導ができる)
・「分解洗浄キャンペーン」の文字のグラデーションのかけ方が強く、文字が見辛くなっているので、明るい部分の色を、もう少し落ち着いた色に変更する。
・詳しくはこちらの帯の色が私が選んだ青は、信頼感や、伝統を感じさせる青。爽やかさのある青に変更する。
ヒカルさんがブラッシュアップしてくださって、どんどん磨かれ、メリハリがあり、細部まで気を配られたバナーになるまでの過程を見せていただき、毎回、ワクワクし感動します✨!
これまでのレッスンで、「画像は補正して使うこと」と教えて頂いていたのに、今回はすっかり抜け落ちて、エアコンも、女性も、補正をかけることなく使用してしまいました。
商品の良さであったり、伝えたいことをきちんと届けるために、画像を補正する。
また、エアコンを切り抜くというアイデアも思いつけませんでした。まず、切り抜いてみるとレイアウトが取りやすいということ教えていただきました。
自分に、まだまだ応用力がないことを把握して、コツコツ復習しつつ、考え方や技術を身につけていきたいと思います!