「力が……欲しいか……?」デザイン初心者のためのバナー制作講座〜ついに千秋楽!コピーと素材を選んでマンションのバナー制作(ドボンもあるよ)〜

2021年09月28日

2024年07月10日

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

さて、好評をいただいておりますバナー制作講座。4月にブログ更新がスタートしてロングラン公演が続いておりましたが本日でなんと——。

大千秋楽

N村
N村「今夜の客席はどう?」

ついに!やってきました!

デザキ「大入り満員です!」

最後のお題ももちろん!

課題に沿ってバナー制作を行っていただきます。

最初はわたしが取り組んだ課題の紹介とそのフィードバック、修正の様子のご紹介、後半には第二弾第五弾で行ったフルカラーバナー制作からプラスされた今回のお題のポイントをご紹介します。ポイントだけ見たい!という方はこちらからどうぞ!

「首都圏のマンション」のバナー制作に挑戦

課題の概要

  • 仮想商品「首都圏のマンション」のバナーを制作する
  • バナーサイズ:600x300
  • 配置する要素
    • 写真:4種類(自由選択)
    •  メインコピー(一つ選択)
      • 賑やかでもなく特別イケてる訳でもない。でもそれがいい。
      • 静かで、豊かな暮らし
      • 新しい生活様式、家で「きちんと」過ごしたい
    • ロゴ(白・黒の2種類のうち好きな方/色変えNG/必須)
    • 必須の内容
      • 説明会予約受付中:2021/9/20~10/10
        ※年月日の表記はとくに指定なし。9月20日でも9.20でもOKです。曜日は任意。
  • 特殊レギュレーション:ドボンもあるよ!
    • 写真とメインコピーが用意されているが、それぞれに一つ「利用NG」のものがある
    • NG写真とNGコピーを使用した場合は、即その旨をフィードバック
    • どれがNGなのか、どうしてNGなのかを考えながら制作しましょう!
  • 仮想商品:首都圏のマンション
    • 間取りは3LDK / 専有面積は広くもなく狭くもない
    • アクセスもほどよい / 電車で2沿線使える / 都心部まで30分くらい / 駅から徒歩15分圏内
    • がっつり都心部に建ってる訳ではない
    • 埼玉千葉あたりのちょっと賑やかな所くらいの温度感。都内でも23区外。
    • 居住目的がメイン層。投資目的だとちょっと厳しい。
    • 価格帯は安くもなく高くもない。
    • 年齢層も老若男女などの属性も広め。(新婚夫婦、子供がまだ小さい世帯、退職後に転居する老夫婦 など)

今回は仮想商品「首都圏のマンション」のバナー制作が課題です。第二弾第五弾では「決まった色を使う」という特殊レギュレーションがありましたが、今回の特殊レギュレーションは「用意された写真素材・メインコピーの中から最低1つずつ選んで制作 / 写真素材・メインコピーの中にそれぞれ1つずつ利用NGのものがある」というもの。それ以外に、必須の情報(説明会受付中のコピー)とロゴが共有されました。NG素材・NGコピーを使用した場合は、即ドボンです!というフィードバックがあるとのこと。

N村
N村

初回の提出時にわたしはドボンを引かなかったので、解説をもらうまでどれがドボンかわかりませんでした……。

あの頃は好調な滑り出しだと……信じていた……。

※このあと、怒涛のリテイクです。

初回提出:ドボンは引かず、前向きなコメントで元気が出る

初回提出デザインの概要

  • デザインメモ
    • どれが"ドボン"かはわからなかったが、商品(マンション)の使用イメージにあたるこの写真はドボンではないだろう……と予想して使用
    • このご時世+部屋の使用イメージなので、このコピーが最適だと思って選択
    • マンション系のバナーによくある明朝体!バーン!という高級感のある雰囲気は仮想商品の説明から合わないと感じたので、若い夫婦・家族を想定して作成
    • 不動産系のWebデザインをいろいろ見ていた際に、タイルのように写真を見せるあしらいを見つけたため流用
    • 色は「家で過ごす」イメージから落ち着いたカラーがいいな&写真の色が引き立つ色にしよう…と思い薄いベージュ+ネイビーの配色に
  • フィードバック
    • 全体的なテイストはいい感じです!ドボンも選択していないので好調なスタートだと思います!
    • 写真の使い方について
      • ひし形にすると、写真の端が切り取られてしまい部屋が狭く見えてしまう
      • 天井・床の空き面積(家具以外・キッチン以外の何も設置されていない部分)を見せると奥行きが出て広く見えます
      • 見せ方を工夫してくれた発想は大変GOODです◎
    • 違う形でデザインを再利用するなら、レンガのパターンを小さくした方がメインの写真が引き立ちます
    • 「都心まで」の文字が小さく潰れてしまい見えにくい印象
    • 2021はもう少し小さい方がいいかも
    • 曜日の表記は2021と同じくらい見やすいフォントサイズにすると全体的に統一感があるかと思います
    • 「説明会予約受付中」は日付と関連が強い情報なので、ネイビーの下地の中に入れちゃってもいいかもしれません

初回、ドボンを引いていたらまた一から考えねば……とドキドキしながら提出したので、いろいろ修正すべきフィードバックはあれど「全体的なテイストはいい感じです!」というフィードバックのコメントを受けてとても元気になりました。

N村
N村

小学生の作文みたいな感想だな……。

2-4回目の提出

2-4回目の提出デザイン概要

  • 2回目提出デザイン
    • 初回のデザインを流用しようと思ったもの
  • 2回目フィードバック
    • メインコピーが背景も白、文字の後ろのオビも白なので装飾として弱い印象
      写真にもかなりかかっているので、写真にかからない範囲で文字サイズや改行位置などを調整してみてください
    • 写真の丸みに対して背景直線的なので装飾としてちぐはぐな印象、どちらかに揃えると統一感が出ていいと思います
    • 「説明会予約受付中」は素直に白文字の方が見やすい
      日付との区切りは線や点などの装飾を加えると◎
    • 曜日を囲う線と、期間を示す横線の装飾が似ている
    • 迷った時は、「情報が分かりやすく伝えられているかどうか」を念頭に全体をチェックしてみましょう!
      装飾は手段であって、デザインの第一目的ではないです。
  • 3回目提出デザイン
    • どういうつもりだったか思い出せない
  • 3回目フィードバック
    • メインコピー下に色々装飾を付けるなら、写真に被らないように各情報の位置を調整方が良くなると思います。
       (右上の丸の内容をこっちに移動する、もしくはメインコピーを3行にする など)
    • 「説明会予約受付中〜(略)」の部分見る時は「説明会予約受付中」から日付に目線が移りますが、そうすると文字の横ラインの段差のズレが違和感あります。
  • 4回目提出デザイン
    • フィードバックに則って、右上の情報をメインコピーの下に移動
    • 元の作成デザインの「都心まで30分 3LDK」のみだとこの位置だと見にくい……と思って、並列に並びやすいように調整
  • 4回目フィードバック
    • メインコピー、日付、ココと3箇所が背景付きなのでちょっとくどい印象
      文字色を変更すれば丸なしでも大丈夫だと思います
    • 「説明会予約受付中」と日付の間に区切りを追加

5-7回目の提出:最後の微調整?

5-7回目の提出デザイン概要

  • 5回目提出デザイン
    • この辺りから最終デザインに大分近付いています
    • が、修正時に手応えが感じられないというか、進んでいるのか後退しているのかよくわからない……
      考えてはいるけどなにもわからない……という気分になってきてしまい、講師役のデザキに申し訳なくなっていきます(N村の心情)
  • 5回目フィードバック
    • 写真のサイズ:写真が小さいので、右側が欠けてもいいからもう少しサイズを大きくしましょう
    • 不定形の円のあしらいについて:後ろに同じような不定形の円を重ねると手抜き感が薄れます(後述画像参照)
  • 6回目フィードバック
    • 「都心まで30分/間取り3LDK」はもっと太字で
    • 不定形の円のあしらいについて:重ねる円は左側のみの方がいいかも。色も白黒じゃない方が◎
  • 7回目フィードバック
    • 不定形の円のあしらいについて
      • 白のみ
      • 不透明度を下げる
      • 左下につくように位置調整
    • 写真について
      • 写真の画角を右側に寄せる
      • ユーザーにとって、植木鉢よりも台所付近の空間を見せた方が効果的
    • 「都心まで30分/間取り3LDK」について
      • 無理矢理太字にしたフォントが滲んでしまっているので、ウェイトの多いフォントに変更しましょう

迷走しているのが手にとるようにわかる、細かい微調整を重ねる修正リテイクです!

不定形に切り取った写真については以下のようなアドバイスをいただき、そんな感じのあしらいをほどこしました。

このあたりのわたしは、

N村
N村

迷走しているのはわかるし、直さなきゃいけないのもわかるし、デザインで大事なのはあしらいじゃなくて誰に何を訴求するのか・どの情報が重要なのかもわかってるけど、なんかもうなにをすればいいのかわからない!!!!!!!

という非常に不安定な精神状況(元気だよ)だったため、最終的には細かな調整の指示をもらってようやく最終OKをもらえることができました。

今回はフィードバックという形でご指導をいただけていましたが、実際のデザイン業務の時はそうもいかないので、迷走したときは、「誰に向けて何を訴求したいのか」「どの情報が重要なのか」を起点に考えて、まずは必要な情報を伝えることを軸に考えてみましょう……!

最終提出デザイン

ということで、こちらが最終デザインです!
ちょっとした調整ですが、すっきり見やすく、部屋の広々とした雰囲気が感じられるデザインになりましたね。

最初と比べるとこう。

部屋の写真が広々見え、コピーも読みやすくなっていますね。

ついでに、締切当日になんとかOKが出た様子がこちら。

 

N村
N村

課題の中で一番苦労しました……(笑)

課題のポイントは「NG情報の見極め方」と「属性に依存しないデザイン」

今回の課題のポイントは以下の3つです。

課題のポイント
  • NG情報はどれ?素材とコピーの選び方 ←NEW!
  • バナー内の優先順位・視認性・配色
  • ターゲット属性に依存しないデザインテイストとは? ←NEW!

第二弾第五弾で制作したバナーのときにも解説したバナー内の優先順位・視認性・配色の3点はもちろんですが、今回の特殊レギュレーションだった「支給された写真・コピーから選択してデザインに使用する」「それぞれ選択肢の中に一つずつ、適さないNG情報(いわゆるドボン)が紛れている」から、デザインに適した素材とコピーの選び方(適さない素材とコピーを選ばないポイント)、さらに第二弾では女性向け商品のデザインテイスト、第五弾では男性向け商品のデザインテイストについてご紹介しましたが、今回はターゲット属性に依存しない(性別・年齢問わずターゲットになりえる)デザインテイストになっているかがフィードバックのポイントでした。

N村
N村

ということで、次からそれぞれ詳しく解説します!

ドボンはどれだ!?その素材とコピー、ちゃんと要件に合っていますか?

NG写真:要件と写真の内装が合ってない!大きなキッチン&ダイニングの写真

写真のNG理由

  • 支給された画像の中で、これだけ内装デザインが全然違う
  • 「3LDKの間取りで広くも狭くもない」という条件に対して、 キッチン&ダイニングが広く大きいので、要件と合っていない
  • 支給された素材の場合でも、手違いの可能性があるので、 違和感があればきちんと確認しましょう!

今回、素材として支給された写真は4枚。外観の写真が1枚と、内装の写真が3枚ありました。

1枚の外観は普通のマンション、2枚は同じ内装のリビング、そしてもう1枚がNG写真だったキッチンメインの内装写真です。外観写真と同じ内装の2枚のリビングの写真は、今回の商品説明と比較してもおかしなところはありません。一方、NG写真は今回の商品の事前情報がなければ素敵な内装の写真ですが、広めのキッチンとダイニング、さらに奥に広いリビング……という写真であり、「占有面積が広くも狭くもない3LDKの間取りのマンション」と考えるには明らかに広く見えます。

クライアントから「ここから使ってください!」とデザイン素材として写真が提供された場合でも、手違いなどで別の写真が紛れ込んでしまった!ということもザラにあるので、きちんと内容をチェックして要件と合っているか・違和感がないかをチェックして気になるものはきちんと確認しておけると実際のデザイン業務のときは安心ですね!

NGコピー:具体的でないコピーは印象に残らない…「静かで、豊かな暮らし」

コピーのNG理由

  • 5W1Hに触れない、具体性のないコピー
  • ありがちなコピーで不動産に限らずアパレルや雑貨・インテリアなどでも使える汎用性の高いコピーですが、印象が薄い
  • ターゲットに届く・印象に残るコピーを作成・選択しましょう

続いて、「静かで、豊かな暮らし」のコピーがNGである理由をご紹介します。

このコピーは5W1Hにも触れず、具体性がなく、ありがちで印象に残りにくいからです。不動産に限らず、アパレルや雑貨、インテリア用品やキッチン用品など「暮らし」に関わるものであれば何にでも使えそうで、汎用性は高いですがその分印象には残りにくいコピーですよね。ターゲットユーザーたちは日々多くの広告などを目にしながら暮らしているので、印象に残らない無難なコピーでは数秒で忘れ去られてしまう可能性も高く、そんなコピーではクライアントにいい結果をもたらせません。

コピーライティングをする場合は、しっかりとターゲットに届いて印象に残るようなコピーを作成するようにしましょう。

今回のデザインの優先順位

以前にもご紹介している通り、「百聞は一見にしかず」の言葉通り写真は直感的な訴求ができるものなので、積極的に目立つように使いましょう。内装であればモデルルームのようなイメージです。また、内装はもちろん外観も気にする方が多いようなので、両方載せられると◎です。また、説明会開催日は具体的にターゲットに見てほしい・行動を起こしてほしい部分になるので、キャッチコピーよりも優先順位は高くなります。

ターゲット属性によらないデザインとは?

さて、第二弾の小さいお子さんがいる女性をターゲットにした電動自転車や2-30代男性をターゲットにしたスキンケアクリームと違って、今回のマンションはターゲット属性が性別・年齢とも限られない商品です。ターゲット層が広い場合は、特定の属性に振り切ったデザインはNGとなります。ということで、ここからは「ターゲット属性によらないデザイン」についてご紹介します!

ちなみに、最近の住宅界隈では「ややアナログな雰囲気のあるミニマルデザイン・写真は大きめ」が流行っているようです。なんでもかんでも流行を取り入れればいい!というわけではありませんが、今回は説明会の参加者を募集するバナーで一時的にしか使用しないので、デザインの流行を取り入れやすいです。実際にデザインを考える際は、同じ業界や似た商品のWebサイトやバナーからテイストの方向性を探ってみるのも一つの手です。

N村
N村

業界・商品によって流行のデザインテイストがあるので、業界の動向を見つつ上手く取り入れられるといいですね。

偏った属性を連想させるデザインは控えよう

子供向け・女性向け・男性向けなど、特定の属性を連想させるようなデザインでは、今回のような若いカップルや小さな子供がいる家族、もう子供が手離れした夫婦や老夫婦など様々なターゲットが考えられる商品の場合にデザインに合わないターゲットに訴求できない可能性があります。

なので、色やモチーフなど、追加で素材を使う場合はテイストに注意する必要があります。

N村
N村

ちなみに、課題では提出は2枚以上でも大丈夫なので、こういうターゲットにはこのバナーを、こっちのターゲットにはこのバナーを……とターゲット毎にバナーを使い分けるという手もあります。その場合はターゲット毎に合わせたコピーも必要ですね!

マーケティング的にもポピュラーな手法ですが、作る枚数分の工数がかかるため、実際の業務でやる場合は工数などのバランスも考えた上でやりましょう。

配色はモノトーン・アースカラーが鉄板!

商品にもよりますが、緑〜黄色くらいの色相で「モノクロベースorアースカラー」を中心の配色であれば、性別・年代問わず幅広いターゲット向けのデザインが作りやすくなると思います。今回は商品が不動産なので、「モノクロベースorアースカラー」の落ち着いた雰囲気もよく合います。

細かい色選びは、商品のジャンル・コーポレートカラーにもよるので、実際のデザイン業務では仕様や要件をしっかり確認した上で決める必要があります。

テイストはシンプルに!

今回の商品である不動産など、物件情報は特に「百聞は一見にしかず」が強い傾向にあり、実際の物件紹介のサイトを見てみても、大手・中小・分譲・賃貸問わず、どこも写真を重要視しています。

そのため、これまでのバナー制作講座全体を通しても「写真が重要」とご紹介してきましたが、今回の場合は特に大事なポイントで、写真を第一に余分な装飾をなるべく控えるのがベターです。

 

まとめ:一番重要なことは「クライアントの売上に貢献すること」

今回で最後となったバナー制作講座。バナー制作を通して、デザインのあれこれについてご紹介してきましたが、少しでも読者の方のお役に立てていれば幸いです!

デザインをする上でよくやってしまいがちな失敗として、「手元にある情報だけで全てを判断する」というものがあります。(ブログを読むとわかる通り、わたしもバナー制作講座内でさんざんやっています。)

Google Analyticsやお客様の声、提供された資料など、なんでもいいので手元にある情報以外のものからもヒントを探すのが成果の出るデザインにつながるかもしれませんね。

  • ターゲットはクライアントの商品やLPだけを見てるわけではない
  • ターゲットの心理とクライアントの心理はイコールではない
  • ターゲットの心理はあらゆるものに影響を受けている

デザイン、そしてマーケティングにおいて一番重要なことは「クライアントの売上に貢献すること」です。ターゲットがどんな人で何に興味を持ちどんな人生を送っているのか—あらゆることを考えて、「刺さる」訴求をつくれるようにしていきたいですね!

N村
N村

ということで、これにてバナー制作講座の参加レポートは終了です!
全6回のブログを通して、きっとわたしも少しはデザキとフュージョンできたはず……(?)

ASUE株式会社では、Webマーケティングに関する情報をメールマガジンでもほぼ週刊でご紹介しております!ゆる〜く情報収集したい!という方はぜひご登録いただければ嬉しいです!

ありがとうございました!!!

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

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

Web広告改善事例集見本

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

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