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

2023年05月16日

2024年07月10日

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

今回はバナー制作千本ノックシリーズ第二弾! 今回も主に女性をターゲットとした商品・サービスの広告バナーを制作します。

今回の添削もこの方!

Webデザイナー・オダ

2022年6月入社。社内では主に広告用バナーの制作を担当中。

広報のN村

前回に引き続きよろしくお願いします!

課題:着物・浴衣のレンタルサービス

課題内容

  • ビジネス・広告の概要
    • 京都を着物・浴衣で観光するためのレンタル・着付けサービス
    • 京都駅から徒歩すぐ(3分程度)
    • へアセットは別途料金(同時予約で50%の割引あり)
    • 若い子向けのレンタルサービスが多いが、大人の女性向けサービス
    • 若い子向けのサービスではオプション料金なことが多い「太鼓結び」が通常料金で可能
    • 価格は平均よりも高めだが、高品質な着物が楽しめる
    • カップルやグループの利用で割引プランあり
    • 手荷物預かりサービスや翌日返却オプションあり
    • 近隣の観光地をお得に楽しめる割引チケットが特典でもらえる
    • ブランドカラーは「#DD2233
  •  ターゲット
    • 20代半ば〜の女性グループやカップル
  • サイズ
    • 1080×1080
  • バナーに入れたい情報
    • メインコピー「本格着物で楽しむ大人の京都旅」
    • ロゴ:

今回の課題は、京都で観光用に着物・浴衣を貸し出すサービスの広告用バナーです。

浴衣・着物をレンタルして観光するのは大学生くらいの京都旅行の定番で若い子向けのサービスが多いですが、今回は大学生よりも上の世代(20代半ば〜30代)をターゲットにしたサービスです。

N村の制作バナー

  • 浴衣・着物のレンタルサービスなので、和風のデザインに
  • フォントは明朝体系のものを選択し、メインコピーを縦書きに
  • 大人向けのサービスだったため、落ち着いた色合いの着物の写真を選択

サービス内容から、和風のデザインにするためにフォントを明朝体系・メインコピーを縦書きにしました。また、「大人向け」であることが強みだと思ったため、落ち着いた色合いの着物の写真を選択しています。

観光時に便利な京都駅からの立地や特典などを記載し、クリックを誘起したい予定です。

初回フィードバック

  • 写真について
    • 「大人の」を意識した写真選びで、楽しんでいる雰囲気がない
    • サービスの性質上、友人同士やカップルなど複数人で楽しむことが多いと思うので、2人以上の写真や誰かに撮ってもらった雰囲気の写真などが良い
  • その他デザインについて
    • メインコピーが目立たない・小さいため、もっと大きくするなど目立たせる工夫をした方が良い
    • そもそものサービス内容が書かれていないので、コピーに「レンタル着物で楽しむ」等、サービスがわかる文言を入れる
    • ポイント2点について
      • 全体的に文字が詰まりすぎ・小さく読みにくいため、要整理
      • 「京都駅から」の「から」はなくても意味がわかるためトリ、文字サイズは揃える
      • 「3分」の3と分の間が詰まりすぎのため離す
      • 「※同時予約限定」が小さく読みにくいため、丸の外に出してゴシック体に変更するなどした方が良いかも
      • 色が白黒で目立たないため、場所を変えたり色を変更しても良いかも
      • また、荷物預かりサービスをポイントとして載せた方が良いかも
    • ロゴが文字に近すぎるので、右上などに移動
    • 「割引券付」というお得な特典の背景が目立たない色なので、もっと目立つ色にすると良い

オダ

細かい修正点もありますが、まずは「サービス名が入ってない」ですね!

また、このサービスは利用者に「より旅行や観光を楽しんでもらう」ようなものなので、実際に利用したユーザーが楽しめることを想像できるような写真がいいですね。

広報のN村

写真選びって難しい……

オダ

前回も言いましたが、写真を使ったデザインでは「いかに合った写真を選ぶか」が本当に肝心なので繰り返してコツを掴んでいきましょう!

修正 1回目

  • 写真について
    • 選んだ写真はOK
    • サービス内容的に着物を着た女性をしっかり目立たせたいので、もっとアップにすると良い
  •  ロゴについて
    • 右上にあるせいでメインコピーが小さくなっているともったいない……
    • 左上に移動、背景でロゴが見えにくい場合はそこだけ背景追加など
  • メインコピー その他について
    • メインコピーは大きく
    • アピールポイント(2つの丸)には枠や色、装飾を付ける
  • CTAについて
    • 背景色が暗いので変更
    • クリックを促す部分には、「予約で〜」等とるべき行動がわかる文言を入れると良い

広報のN村

凡ミスで2箇所ほど最初の指摘をスルーしてしまい……

オダ

気をつけましょう……

写真は被写体をしっかり写るようにすることと、メインコピーが大きくなるような文字のレイアウトを考えましょう!

広報のN村

「大人の京都旅」は大きくするには2行になるんですが、2行にするといまいちバランスがとれなくて……

オダ

例えば2行目を少し下げたり、文字のサイズに強弱をつけるといいかもしれません!

文字をバラして左右に動かしたり……

※手書きの見本を見せてくれました

広報のN村

(プロ作のはかっこいいのに、自分でやるとどうにもしっくりこないやつだ……!)

修正 2回目

  • 全体について
    • だいぶ良くなりました!
  • メインコピーについて
    • 文字同士が離れすぎて、バラバラになっている
    • 近付けたり、大きさの強弱をつけたり、左右に振ると良い
  • ポイント2つについて
    • 「京都駅から徒歩3分」を、「大人の」の下あたりへ移動
    • 「ヘアセット半額」を左に移動
  • CTAについて
    • 文字が詰まりすぎで窮屈な印象
    • フォントサイズを下げて余裕を持たせると良い
    • ここはゴシック体でもいいかも?
  • その他
    • 右上のあしらいはもっと大きく目立たせた方がいい

オダ

だいぶ良くなってきました!

もう少しです。

修正 3回目

こちらが3回の修正を経た最終形態です!

全体的にメリハリがついて、インパクトも出たような気がします。

広報のN村

メインコピーの強弱がいまいちしっくりこないと思いながら動かしましたが、微調整をしていたら文字全体が垢抜けた気がする瞬間があった。感覚が合ってるかは謎。

制作見本

そしてこちらが、オダさん作。

広報のN村

わたしはそのままにしましたが、丸の中が白よりも色付きの方がメリハリ出て良いな……と思いました(感想)

和風のデザインのポイントは?

1. 和の雰囲気が伝わるあしらい

和の雰囲気を出すためには、配色(次項で紹介予定)・フォントと文字組・あしらいなどに気をつけると出しやすくなります。

ということで、和のデザインに使えるあれこれをご紹介していきたいと思います。

フォントの選び方

  • 和風っぽさを出しやすいフォント
    • 毛筆系
    • 明朝体
    • にじみ・アンティーク・オールド 等が名前に入っているもの  など
  • 和風のデザインにも合いやすいフォント
    • 細めのゴシック体
    • 手書き風フォント  など

和風のデザインをするにあたって、フォントの選択はとても重要です。例えば、こちらの画像。

こちらのバナーでは、ヒラギノ角ゴ StdN W8を使用しています。ヒラギノ系はいろんなところでよく使われるフォントですし、読みやすい文字ですが、「和」の雰囲気に欠けるのが伝わりますでしょうか?

このような太めのゴシック体は可読性も良いしインパクトも目立ちますが、和風の雰囲気などは出にくくミスマッチな感じになります。

広報のN村

15分くらいで作ったやつなので、デザインはあまり気にしないでほしい。

キャッチコピーもChat GPTに考えてもらおうとしたけど、出てきたキャッチコピーをググったらそっくりなのが出てきたのでやめました。

さて、和の雰囲気を出しやすいフォントといえば毛筆系のフォントと明朝体です。

Adobe Fontsにある毛筆体・明朝体を使用してみました。明朝体はともかく、毛筆の方は和風感はあれどいまいちテイストに合っていません。

こういうフォントは力強い印象が出やすいので、和風になるから!といってデザインテイストから逸脱した内容にならないように要注意です。

こちらもAdobe Fontsにあるフォントを使用。左は全部FOT-筑紫B丸ゴシック Std、右はメインコピーのみ砧 砧明朝体 StdN、それ以外は砧 iroha 31nire StdN Rを使用しました。

ゴシック体を使う場合は、太すぎないものや繊細な印象のものがおすすめです。また、明朝体は和の雰囲気を出せますが、全部明朝体にすると読みにくい場合もあるので、うまくゴシック体などと組み合わせても良いです。

広報のN村

フォントに限らずですが、最終的にはデザインによります!(重要)

また、フォントではないですが、和風のデザインは縦書きとの相性もいいです。

柄・モチーフ・テクスチャ

また、デザイン全体に和の雰囲気を出したいときは、背景の柄やテクスチャ、モチーフなどを和風にするのも良いです。

例えば、背景に日本の伝統文様のパターンなどを使うのも良いです。

日本の伝統文様

  • 紗綾形
  • 七宝
  • 三崩し
  • 檜垣
  • 矢絣
  • 麻の葉
  • 立涌
  • 青海波
  • 花菱    など

実際に使ってみるとこう。

左は背景に「麻の葉」柄、右は「北欧 パターン」で出てきたパターンを色だけ揃えて使用しました。柄だけでも和の雰囲気が出るかと思います。

同じように、「和紙」のようなテクスチャを背景などに用いても良いです。右は比較で作った水彩のテクスチャです。

また、和風デザインによく使用されるモチーフもいろいろあります。

例えば植物のモチーフだと、松・竹・椿・梅・菊・桜のような花は和風のデザインに使われやすいです。また、霞の紋様や流水の紋様(流水紋ってO奥で覚えましたよね?わたしはそう)や先ほどパターンでも紹介したような伝統文様の一部を使うのも雰囲気が出せます。

また、文字を囲むフレームも和風っぽいモチーフを利用すると統一感が出ると思います。

左は水引風、右はレース風……なんですが、デザインのテイスト的にあんまり差が出なかった気がします。

何度も言いますが最終的にはすべてデザインのテイストやバランスにもよりますが、いまいち物足りない!というときはこの辺りを使ってみると良いかもしれません。

広報のN村

あ〜温泉行きたい。

2. 和風デザインの配色ポイント

一般に、ビビッドトーン(彩度が最も高い色)よりも少し彩度・明度を落としたカラーが和風のデザインにはよく利用されます。

また、淡く柔らかい色もペールトーンよりも落ち着いた色が使われることが多いです。

試しに色を変えてみたのがこちら。 真ん中の鮮やかなトーンと右の淡いトーン(適当に作ったので深くは突っ込まないでね)だと、色自体は綺麗でも和の雰囲気は薄いと思います。淡いトーンのカラーは一般的に女性向けの色合いですが、和風の商材にはあまり合わない可能性が高いです。(結局は場合による……振袖は可愛い色合い多いね……)

実際に配色を考える際は、1色メインとなる鮮やかor深い色とその補色を中心に配色を考えると、それっぽくなります。

また、メインカラー+金/銀(っぽい色)を中心に選んでも良いです。

他にもいろんな配色が考えられると思うので、ブランドや商材、そのときのキャンペーンに合わせて適切な配色を選択しましょう!

まとめ

ということで、第二弾はレンタル着物サービスのバナーを制作しました! 課題(社内の案件をふんわり元にした架空の商材)の設定からわたしが行ったため、ツッコミどころ等あるかと思いますが、ふんわりと温かい目でご覧いただければ幸いです。

広報のN村

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

オダ

今後も頑張っていきましょう!

 

 

N村の挑戦はまだ始まったばかり! N村先生の次回作にご期待ください。

ASUE株式会社では、バナー制作千本ノックの他にもブログやメルマガでWebマーケティングの最新情報を発信しています。興味がある方はぜひメールマガジンにご登録ください!

また、Web広告運用者も絶賛採用強化中です!

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

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

Web広告改善事例集見本

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

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