バナー制作千本ノック 女性がターゲットの商品・サービス[Vol.1-1]「美容系のバナーデザインのポイントは?」

2023年02月21日

2024年07月10日

こんにちは!ASUE株式会社広報のN村です。

さて、以前大人気シリーズ(言ったもん勝ちよ)・ASUE社内向けにデザイナーが開催したバナー制作講座でバナーデザインに挑戦したN村。

せっかくなので、学んだことを継続してスキルアップを目指したい……ということで!
再び制作課の皆々様にASUE通信編集部に手を貸してもらう運びとなりました。

実はASUEでは、バナーサブスクと名付けまして広告運用中のオプションサービスとしてクライアント様の画像クリエイティブの改善を実施していて、運用中の広告のクリエイティブ改善にとっても力を入れております。そのために(ほぼ)バナー専属担当のデザイナーさんもいるんです。

そのため、日々顧客様や自社の広告用のクリエイティブの作成依頼が社内チャット内では飛び交っています。

ということで、社内のバナー作成依頼の内容を課題にしてバナーデザインの練習していきたいと思います!
※案件の詳細を伏せるため、実際の商品・サービスからは少々変更しています。実際のあれこれを元にわたしが考えているため、細かいところはご容赦ください。

課題を設定 > バナーを制作 > 2-3回のフィードバックと修正 という流れで進めつつ、最後に今回の課題で使えるポイントの解説などもご紹介します。

広報のN村

今回は初回なので、作成しやすそう(な気がする)女性向けのtoC商品・サービスのバナー制作に挑戦します!

フィードバックは、弊社制作課デザイナーのオダさんにお願いしました!

Webデザイナー・オダ

2022年6月入社。社内では主に広告用バナーの制作を担当している。N村に対して珍しく「あのミュージカル観たことあります!」と話しかけてくれた人。稀有。

オダ

よろしくお願いいたします!

 

また、わたしが軽率に4つの案件のバナーを課題として選択したら非常にブログが長くなったため、2つ〜に分けます!

課題:エステサロン

課題内容

  • ビジネス・広告の概要
    • 名古屋 栄・大阪 梅田・東京 銀座の3店舗
    • オープン記念に、期間限定で全員割引キャンペーン実施
    • U-25はさらに割引
    • サイトのメインカラーは「#ee859a」を使用
    • 若い世代も通いやすい価格帯
    • 食事指導等あり
  • メニュー内容
    • 痩身
    • ○回コースや都度払いのコースもあり
    • キャンペーン特価
      • 全身痩身10回コース:総額99,000円、月額2,280円(60回払いの場合)〜(40%オフ)
      • 初回限定お試し価格(都度払い):3,300円
    • U-25価格
      • 全身痩身10回コース:総額85,800円、月額2,030円(60回払いの場合)〜(50%オフ)
      • 全身痩身1回(都度払い):8,200円
      • 初回限定お試し価格:3,300円
  •  ターゲット
    • 10-20代の若年層女性がメイン
  • サイズ
    • 1080×1080
  • バナーに入れたい情報
    • メインコピー「オープン記念!痩身コース、大幅値引中。」
    • 無料カウンセリング予約受付中であること
    • ロゴ:

最初の課題は、エステサロンのオープン記念キャンペーンに使用するバナーです。ターゲットは10-20代の若年層の女性です。訴求は価格訴求です。

制作したバナー

初回なので、制作にあたっての大まかな流れもご紹介します。

1. 手描きのラフを作成

制作課にいた時代に上司(デザイナー)に「デザインを作るときは最初からイラレで作らずにラフを紙に描くといいよ」と言われていたので作成。情報の整理等をしつつ描きました。わたしは文字を綺麗に書くのが苦手なので、キッツキツになっていますがご愛嬌ってことで……。基調となるカラーは、Webサイトのメインカラーかつターゲットにも合いそうだったため、同じピンク色を選択することにしました。

2. 写真素材を選定→イラレでパーツ配置

写真を選択し、白黒で文字を配置して大体のバランスをとりました。

3. 配色を決定

使用する色を決定。colorbaseの「#ee859a」のページ(https://colorbase.app/ja/colors/ee859a)を参考に使用。

4. 装飾をつけてデザインを完成

この時点で、(商材を変更した関係で)エステサロンの広告について調べていた際に「痩身」を謳う際に食事制限等の指導もしてダイエットをサポートするよ!というような内容が必要だと知ったため、「食事指導付」の文言を追加しました。

(※本当は痩身っていうキーワードも怪しい気もしますが、今回はこのままいきます。)

広報のN村

LPなどにしっかり載っていればバナー上の記載が不足していても問題ないこともありますが、こういう商材・サービスのときは気をつける必要があります。

この辺りはあとで詳しく解説しますが、とりあえず以下からフィードバック&修正スタートです!

初回フィードバック

  • 写真について
    • 痩身やエステっぽさがなく、どちらかというと脱毛っぽい
    • 今回の商材であれば、体のラインが見える写真やエステの写真などがいい
  • デザイン全体について
    • 全体的に、「枠に収める」意識を感じたのはGood
    • ただ、それを意識するあまりか読みにくい文字組になりがち
    • サイトのカラーを使用して作成したのはGood
  • 細かい点
    • 「オープン記念〜」は、ユーザーを惹きつける部分でもあるのでリボンや背景付きの吹き出しにするなどもっと目立たせたほうが良い
    • 肝心の「痩身」が目立ちにくく、食事指導付も隙間に入れていることで読みにくいので、順番に読めるような順序にすると良い(ex.食事指導付 痩身全身コース 等)
    • 値引き幅は具体的に示すと効果的。具体的なパーセンテージを書いたり、元料金を記載してお得感を出すと良い。また、(税込)等の表記もつけると良い
    • 「円/月」が読みにくい
    • 「U-25ならもっとおトク」はフォントと色的に読みにくいため、色やフォントを変更すると良い

オダ

色の選び方と、枠内に収めようという意識はいいと思いますが、写真の選び方と文字の組み方が特に課題ですね!

修正 1回目

  • 写真について
    • デザインの可愛い雰囲気と合わない
    • エステっぽい写真の方が「簡単に」痩せられる!と見たユーザーが感じやすい
    • ウェアの色だけデザインに合わせて変える手もあり
  • その他
    • 「痩身コース」は独立で目立たせる
    • 金額の文字の下部を揃えるなど、文字組を整えると統一感が出る
    • 最大40%はもっと目立たせる

オダ

再び写真……!

文字の細かいところはイラレの機能だけで揃えるのではなく、目で見て綺麗に揃うように調整すると統一感がでます。

また、「/月」のスラッシュ部分はフォントが綺麗にハマらない場合は図形の描画などを利用すると綺麗に見えるかもしれません!

修正 2回目

  • 写真について
    • エステ写真の選び方はOK
    • お腹をぐりぐりしているキャビテーションっぽい写真やダイエットっぽい写真でもいいかも……
  • その他
    • 折り返したリボンの長さが長すぎるので短くする
    • 「痩身」をもっと目立たせる
    • 金額の枠の組み方がしっくりこないので例を見て要再考

オダ

写真はよくなりましたが、ダイエットっぽい写真や痩身エステっぽい写真(お腹をグリグリしているもの)に変えてもいいかもしれません。

また、もう少しテキスト情報の整理や強弱の付け方は工夫したいところです。一番目立たせたい商材そのものの「痩身」をしっかり強調したり、割引率の見せ方などの組み方を修正したいですね。価格表記の部分は添付したイラレも参考にしてみてください!

修正 3回目

3回の修正を経て完成したバナーがこちらです(写真の指摘で悩ましかったため3枚に増えてしまった)。

細かいところで修正点はまだ出てくるかと思いますが、今回はここで完成とします。最初のバナーと比べて、一目で写真とテキストからサービスの内容がわかりやすくなったと思います。

制作見本

こちらが添削してくれたデザイナー・オダ作のバナーになります。

広報のN村

フィードバックに合わせて修正を試みたので、なんとなく似た感じに近づいているような気もするけど(オダさんが寄せつつ作ってくれたのはある)、プロとの"差"を感じる。

美容系の広告バナーデザインで気をつけたいポイントは?

1. 法律を要チェック

  • 確認すべき法律
    • 景品表示法
    • 薬機法
    • 医療法    など

美容系(サロンや審美歯科、クリニックから化粧品などまで含む)のデザインを作成する場合は、特に法律などに引っかかりやすいため要注意です。

特に内容をよく知っておく必要があるのは、景品表示法と薬機法、医療法などです。

それぞれ内容がなんとなく重複しているものもありますが、美容サロン・化粧品・審美系のクリニックなどの広告に携わる方はぜひ押さえておきましょう!

ASUE通信にも関連記事があるので、詳細はそちらも合わせてご覧ください。
https://asue.jp/blog/?p=17402

景品表示法では、主に優良誤認表示と有利誤認表示に気をつける必要があります。例えば、「短期間で絶対痩せる!」と思われるような表記や根拠のないNo.1表記、実例ではないBefore/Afterの写真などがNGになります。

バナーのような限られたスペース内ではすべて適切に書ききれない場合もありますが、ユーザーに誤認させてクリックさせるような表現はできるだけなくすようにしておくのがベターです。(審査に落ちる可能性も高いので……)

薬機法は、消費者の健康などに関わる医薬品・医薬部外品・化粧品・医療機器・再生医療等製品についての運用を定める法律で、美容系の広告にも大きく関わってきます。例えば、医師や医療機関の推薦の表記や化粧品の効果効能として認められる範囲を超えた効果効能を謳うこと、他社製品と比較して優れています!ということなどが禁止されています。

また、医療法では医療機関に関する広告について規定がされています。こちらでも同様に比較広告や虚偽・誇大広告が禁止されている他、医療広告の場合は広告可能な情報が限られていたり、治療の前後の写真・イラストの掲載が禁止(詳しい情報を併記の上でならOK)されているなど、厳しい規定があります。

このような広告に関わる場合は、確実に押さえておきたいですね!

広報のN村

守っていない場合基本的にGoogle 広告等の出稿は否認されると思いますが、この辺りをきちんと消費者として知っておけば、メーカー側やクリニック側のいろんな質を判断するのに役立ちそうですね……

 

 

今回の痩身エステのバナーの場合は、(すべてバナーに盛り込めるかは別として)エステ以外に食事指導や運動などの生活改善などのアドバイスも行う等、サロンの実態に即した内容をサービスページ等にしっかりと記載しましょう。

広報のN村

本当に簡単に痩せられるなんて上手い話はないってコト……

景品表示法と薬機法については、詳しくはこちらの記事もどうぞ。(再掲)

「知らなかった」が命取り!?Web広告に関わる景品表示法・薬機法のこと
景品表示法・薬機法についての詳細はこちら
 2021年12月14日「知らなかった」が命取り!?Web広告に関わる景品表示法・薬機法のこと

2. 写真の選び方

美容系の広告で選ばれる写真は大きく分けると、「コンプレックスが表現されているような写真」か「なりたい理想を表現しているような写真」と「サービス・商品そのものの写真」の3パターンがあると思います。

例えば、ダイエット関係の広告であれば、太った人の写真・理想的なプロポーションの人の写真、痩身エステのサービスを受けている写真などが利用する写真として考えられると思います。

広告するビジネスの方針や訴求内容によっても変わってきますが、「コンプレックスが表現されているような写真」を使用する場合は注意が必要かもしれません。そのような写真を使用する場合、広告を閲覧したユーザーに不快感を与える可能性があり、媒体によっては禁止されている場合もあります(ex. Yahoo!広告で露骨にコンプレックスを表現した広告が禁止 など)。

不快感をユーザーに与えるような広告は、自社や商品・サービスのブランドを毀損する可能性もあるので、利用の前に問題がないか等を検討しましょう。

広報のN村

わたしはコンプレックス煽ってるな〜!?って思う広告を絶対にクリックしないと決めている。

記事に紛れて出てくる記事っぽい雰囲気の毛穴の写真の広告とか……

 

今回のバナー制作の場合は、サービスを必要とするような人の「理想的な姿(の写真)」と「サービスを受けている写真」を選択しました。このような写真の方が不快感を与えたりブランドを毀損する可能性が低いので、よっぽどの理由等がない限りはこのような写真の方がベターかと思います!

3. 女性向け商材の色の選び方

ブランドイメージや詳細なターゲット層によっても最適な色は変わってきます。ですが、配色は広告を見たターゲットユーザーに「自分がターゲットかも……」と感じさせるきっかけにもなりえるため、重要です。

女性向けのデザインにはどんなトーンがいい?

例えば、一般的にはペールトーンが女性に好かれやすい配色と言われています。

ペールトーンを基調とした配色にすると、かわいらしさや透明感を感じられるため、比較的若い女性がターゲットの場合などによく使われます。

さらに、健康的な雰囲気や明るい雰囲気などを出したい場合は、彩度をもう少し高くしたブライトトーンやライトトーンなどを使うと、明るく健康的な雰囲気が出やすくなります。セールやキャンペーンのお知らせなどでインパクトを出したいときは彩度の最も高いビビッドトーンなども◎

美容系のデザインであれば、この辺の明るいカラーは脱毛サロンなどでもよく見かけるかと思います。

また、落ち着いた雰囲気やスタイリッシュな雰囲気を出したかったり、大人の女性がターゲットだ、という場合は、明度を落としたライトグレイッシュトーンやソフトトーンなどを使うと良いかもしれません。美容系のデザインであれば、オーガニック系のサロンなどで利用しやすいカラーだと思います。

色から受ける印象

女性の美容関係のデザインなどでもよく使われるカラーのイメージは、一般に以下の通りです。

  • ピンク
    • 一般に幸福感やかわいらしさなどを感じさせやすい色
    • 女性向けのデザインでよく使用され、「女性がターゲットである」と示しやすいカラー

    • 購買色・刺激色などの性質がある
    • 彩度・明度の高い色はセール・キャンペーンなどの強調したいポイントに使うと◎
  • オレンジ色・黄色
    • 一般に明るさや活気を感じさせる色
    • 彩度・明度の高い色はビタミンカラーでもあり、春や夏などにおすすめ
    • 明度の高い柔らかい色はナチュラルな雰囲気にもよく合う
  • 緑色・青色
    • 沈静色の性質を持つ
      • 緑は安心感や安定感などを感じさせる色
      • 青は誠実さや信頼感、清潔感、透明感などを感じさせる色
    • 緑は植物など自然のイメージ、青は水や海のイメージ
      • 緑はサプリや健康食品などにも◎
      • 青は水のイメージからスキンケア系のものにも◎
    • それぞれ安心感や誠実さなどを感じる色なので、クリニックなどにもおすすめ

色からはそれぞれ受ける印象があります。前項のトーンごとにも受ける印象が違います。定番のピンク色は、可愛らしさや幸福感、女性っぽさを感じやすい色なので、女性向けのデザインだとよく使われます。

ただ、一口にピンクといっても青みが強く淡いピンクだとガーリーな可愛いイメージを与えますし、黄味のあるコーラルピンク系の色だと明るく親やすいイメージも出すことができます。フューシャピンクやマゼンダピンクのようなパキッとしたカラーだとインパクトが出ます。

その他の色にも一般的に与えやすいイメージがあるので、自社のブランドやキャンペーンの内容など、状況に合わせて合う色を選ぶようにしましょう!

広報のN村

もちろん色の好みは本当に人それぞれだし、例えばわたしは昔から所謂ピンク色がそんなに好きじゃないんですが、傾向として!というお話です。

色見本(一例)

適当に作った女性をターゲットにしたデザインで使えそうな配色です。配色の決め方等の詳細は、こちらも参考にどうぞ。

・デザインの配色はどう決める? 配色のキホンと困ったときに頼れるWeb配色ツール
https://asue.jp/blog/?p=18071

・それっぽい"適当な"例付き!ターゲット・商品に合わせた色選びとは?色から受ける印象
https://asue.jp/blog/?p=18101

まとめ

ということで、女性向けの痩身エステサロンの広告バナーを制作してみました。課題(社内の案件をふんわり元にした架空の商材)の設定からわたしが行ったため、ツッコミどころ等あるかと思いますが、ふんわりと温かい目でご覧いただければ幸いです。

今後もこの調子で(この調子でいいのか?)、たくさんバナーを制作してデザイン力を上げていこうと思います!

広報のN村

引き続きよろしくお願いいたします……

オダ

バナーデザインは「写真の選び方」と「写真にどれだけ寄り添えるか」が本当に重要です!

そこを踏まえつつ、今後も頑張っていきましょう!

 

 

ASUE株式会社では、WebデザインやWeb広告などWebマーケティングに関する情報を定期的にブログ・メルマガにて発信しております。

N村の今後の活躍(?)および続報興味がある方、ゆる〜くWebマーケティングの情報収集をしたい方はぜひぜひメルマガにご登録いただければ幸いです!

せっかく制作したLP、成果出てますか?

  • ブランディング色が強く訴求がおろそかに……
  • なんのサービスかがわかりにくい
  • ターゲットに刺さりにくいデザインになっている
  • CVRが低い・成果に繋がっていない

Web広告改善事例集見本

本資料では、上記のやりがちな失敗を踏まえて
売れるデザインにするための効果的な方法を分かりやすく紹介!

【無料】LP制作のポイント集をダウンロード