こんにちは、Yuriです。
先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第29回目を迎えました✨
今回の授業もすでに、Webデザイン1on1レッスンチャンネルのバナーデザイン29にて公開されています✨
アイキャッチは、エステと言えばリフレッシュできる素敵なところ…、と想像して、作ってみました。カエルのベットは、イラレ のメッシュツールを使って作りました。茜さんのnoteを、参考にさせて頂きました✨
いろいろなツールの機能があって、すごく表現を広げらるはずだけど、私は使いこなせていないと感じます💦 ショートカットキーも、よく使うものから覚えていかねば!
それでは、今回のバナーのお題の内容はこちらになります!
今回のバナーの目的 エステサロンの販促バナー
ターゲット 女性 20~30代
雰囲気 印象的・ナチュラル
サイズ 300px x 250px
画像 女性の画像
配色 白・黒・寒色系(ピンク)
文言
(必須)
- 全身脱毛
- 月額¥5,000
- 初月¥0円
- いつでもやめられるから安心
- 天神サロン(店舗名)
- 詳しくはこちら
(任意)なし
左の画像(スマホ画面では上)が、私が初めに作ったもので、右の画像(スマホ画面では下)がヒカルさんがブラッシュアップしてくださったものになります。
-
女性の背景のナチュラルな感じを活かしたいと思った。でもそのまま文字を置いてしまうと視認性が悪くなるので、女性を切り抜き、背景に置くレイヤーの塗りを55%にして、その上に切り抜いた女性の画像のをおいた。
-
全身脱毛という文字は優先順位が高いので、色を黄色にした。そのままだと印象が強かったので、塗りを80%にしてみた。
-
「安心♪」のあしらいが過剰になっているのと、「天神サロン」が、女性にかぶってしまっているが、他に置く場所を見つけられなかった。
ヒカルさんが、この回のレッスンを紹介するツイートをしてくださっています✨
今回も、このツイートを参考にさせて頂き、教わったポイントをまとめさせていただきました。
①写真の明るさ
写真の露光を高くすると、テキストの視認性がさらに上がる。
方法:Camera Rawフィルターで、まず、背景に使うレイヤーの露光を高くし、明瞭度を下げる。切り抜いた女性の画像は、そのままだと、逆光になっていて少し暗く感じるため、露光を高くする(また、シャドウのつまみを少し右に、ハイライトは少し左に動かす。)
女性の画像の位置
- 今回は、「全身脱毛」と、画像の女性の脇は、バナーのメインとなる。女性を右側に配置すると、脇が中央にくるため、より訴求ができる。
- 詳しくはこちらの帯の前に、女性の画像のレイヤーを置いた。(「立体感を必ず出さなくてはいけない」という訳ではないが、今回は、背景が、女性を引き立てる感じの使い方なので、女性を前に配置した。
背景の画像の加工
画像を配置したとき、左側に画像が足りない空きができてしまったため、レイヤーマスクをかけ、グラデーションツールを使って、ふわっと消す。境界線が自然な感じになる。
②訴求ポイントの配置
「初月¥0」は訴求ポイントなので、目立たせる。また、左上に持ってくることで、文字組部分の始めで目が留まる。
「初月¥0」のテキストと組み方
- 私は、「初月¥0」の「¥0」を、「¥5000」で使ったDIN Alternate と違うフォントを使ってしまっていたので、ヒカルさんは同じものに統一した。
- 円の中に何かを配置するとき、バランスをとるのが難しいため、今回は円を文字に対して大きくしてバランスをとった。
「全身脱毛」と「月額¥5,000」の文字組
- 今回は、ナチュラルな雰囲気のため、「全身脱毛」のテキストは、少し小さめにする。
- ここの文字組が、私のバナーは、ギチギチっとした感じで、ヒカルさんの方は若干余裕があり、 今回のナチュラルの雰囲気に合っていて、少しの差で印象って変わるんだ!と、ハッとしました。
③言葉の雰囲気(「いつでもやめられるから安心」の部分)
斜めの角度を揃えて、手書きの吹き出しを添えると締まって見える。
- テキストを斜めにするとき、私は、一列ずつ角度を付けたので少し角度がバラついてしまいました。斜めにしたいテキストが複数列あるときは、全て選択してから、角度をつけると揃う。
- テキストを斜めにするときは、斜体をかけると読みやすくなる。
ブラシで吹き出しを作る
- ブラシで吹き出しを作った後、書き出しが太くなっているため、レイヤーマスクをかけて、ブラシを使って、書き出しをシュッと細くする。
- ブラシで吹き出しを作った後は、スマートオブジェクトにする。スマートオブジェクトにすると、拡大・縮小、加工をしても画像が劣化しない。
「天神サロン」のテキスト:文字間を広くとり、長体をかける(110%)
今回のレッスンも、沢山の学びを頂きました✨
今まで、「優先順位を考えて、メリハリをつけて、訴求ポイントを伝える」ことをしっかり教えてもらっていますが、私は、まだメリハリをつける力が弱いので、気をつけていきます!
今回、ハッとしたのが、「初月¥0」の部分です。私は、参考にしたバナーの文字組を、そのまま真似して使いました。もう一歩深く、「これは訴求ポイントにならないか? 目立たせるには、どんな方法があるか?」と、柔軟に考える力を身につけてゆきたいと思います!