1on1レッスン

エステサロンの販促バナー

エステサロン販促バナーのアイキャッチ

こんにちは、Yuriです。

先日で、ヒカルさんから教えていただくバナー作成のレッスンが、第29回目を迎えました✨

今回の授業もすでに、Webデザイン1on1レッスンチャンネルバナーデザイン29にて公開されています✨

アイキャッチは、エステと言えばリフレッシュできる素敵なところ…、と想像して、作ってみました。カエルのベットは、イラレ のメッシュツールを使って作りました。茜さんのnoteを、参考にさせて頂きました✨

いろいろなツールの機能があって、すごく表現を広げらるはずだけど、私は使いこなせていないと感じます💦 ショートカットキーも、よく使うものから覚えていかねば!

それでは、今回のバナーのお題の内容はこちらになります!

今回のバナーの目的 エステサロンの販促バナー

ターゲット 女性 20~30代

雰囲気 印象的・ナチュラル

サイズ 300px x 250px

画像 女性の画像

配色 白・黒・寒色系(ピンク)

文言

(必須)

  • 全身脱毛
  • 月額¥5,000
  • 初月¥0円
  • いつでもやめられるから安心
  • 天神サロン(店舗名)
  • 詳しくはこちら

(任意)なし

 

左の画像(スマホ画面では上)が、私が初めに作ったもので、右の画像(スマホ画面では下)がヒカルさんがブラッシュアップしてくださったものになります。

Yuriが作成したバナーヒカルさんがブラッシュアップしたバナー

 

 

 

 

 

バナー作成時に意識したことと、反省点
  • 女性の背景のナチュラルな感じを活かしたいと思った。でもそのまま文字を置いてしまうと視認性が悪くなるので、女性を切り抜き、背景に置くレイヤーの塗りを55%にして、その上に切り抜いた女性の画像のをおいた。

  • 全身脱毛という文字は優先順位が高いので、色を黄色にした。そのままだと印象が強かったので、塗りを80%にしてみた。

  • 「安心♪」のあしらいが過剰になっているのと、「天神サロン」が、女性にかぶってしまっているが、他に置く場所を見つけられなかった。

ヒカルさんが、この回のレッスンを紹介するツイートをしてくださっています✨

今回も、このツイートを参考にさせて頂き、教わったポイントをまとめさせていただきました。

①写真の明るさ

写真の露光を高くすると、テキストの視認性がさらに上がる。

方法:Camera Rawフィルターで、まず、背景に使うレイヤーの露光を高くし、明瞭度を下げる。切り抜いた女性の画像は、そのままだと、逆光になっていて少し暗く感じるため、露光を高くする(また、シャドウのつまみを少し右に、ハイライトは少し左に動かす。)

女性の画像の位置

  • 今回は、「全身脱毛」と、画像の女性の脇は、バナーのメインとなる。女性を右側に配置すると、脇が中央にくるため、より訴求ができる。
  • 詳しくはこちらの帯の前に、女性の画像のレイヤーを置いた。(「立体感を必ず出さなくてはいけない」という訳ではないが、今回は、背景が、女性を引き立てる感じの使い方なので、女性を前に配置した。

背景の画像の加工

画像を配置したとき、左側に画像が足りない空きができてしまったため、レイヤーマスクをかけ、グラデーションツールを使って、ふわっと消す。境界線が自然な感じになる。

②訴求ポイントの配置

「初月¥0」は訴求ポイントなので、目立たせる。また、左上に持ってくることで、文字組部分の始めで目が留まる。

「初月¥0」のテキストと組み方

  • 私は、「初月¥0」の「¥0」を、「¥5000」で使ったDIN Alternate と違うフォントを使ってしまっていたので、ヒカルさんは同じものに統一した。
  • 円の中に何かを配置するとき、バランスをとるのが難しいため、今回は円を文字に対して大きくしてバランスをとった。

「全身脱毛」と「月額¥5,000」の文字組

  • 今回は、ナチュラルな雰囲気のため、「全身脱毛」のテキストは、少し小さめにする。
  • ここの文字組が、私のバナーは、ギチギチっとした感じで、ヒカルさんの方は若干余裕があり、 今回のナチュラルの雰囲気に合っていて、少しの差で印象って変わるんだ!と、ハッとしました。

③言葉の雰囲気(「いつでもやめられるから安心」の部分)

斜めの角度を揃えて、手書きの吹き出しを添えると締まって見える。

  • テキストを斜めにするとき、私は、一列ずつ角度を付けたので少し角度がバラついてしまいました。斜めにしたいテキストが複数列あるときは、全て選択してから、角度をつけると揃う。
  • テキストを斜めにするときは、斜体をかけると読みやすくなる。

ブラシで吹き出しを作る

  • ブラシで吹き出しを作った後、書き出しが太くなっているため、レイヤーマスクをかけて、ブラシを使って、書き出しをシュッと細くする。
  • ブラシで吹き出しを作った後は、スマートオブジェクトにする。スマートオブジェクトにすると、拡大・縮小、加工をしても画像が劣化しない。

「天神サロン」のテキスト:文字間を広くとり、長体をかける(110%)

今回のレッスンも、沢山の学びを頂きました✨

今まで、「優先順位を考えて、メリハリをつけて、訴求ポイントを伝える」ことをしっかり教えてもらっていますが、私は、まだメリハリをつける力が弱いので、気をつけていきます!

今回、ハッとしたのが、「初月¥0」の部分です。私は、参考にしたバナーの文字組を、そのまま真似して使いました。もう一歩深く、「これは訴求ポイントにならないか? 目立たせるには、どんな方法があるか?」と、柔軟に考える力を身につけてゆきたいと思います!