運用型広告で利用するバナー作成の依頼時に役立つトンマナについて

運用型広告のクリエイティブでもトンマナは大事

広告業界にいる方なら、「トンマナ」という言葉を一度は耳にしたことがあるかと思います。「トンマナ」とは「トーン＆マナー」の略で、そのクリエイティブの雰囲気、統一感を指します。

例えば、企業のロゴと公式サイトのデザインの雰囲気が合っていることや、同じWEBサイト内の各ページでデザインの雰囲気が合っていることが、『トンマナが合っている』と表現できます。

このブログは弊社の公式サイト内のコンテンツとして存在しています。そのため、ヘッダーフッターが共通なのはもちろん、テキストやタイトルに使用されている色や、このブログのTOPにもあるタイトルバナーなど、サイト全体の雰囲気に馴染ませています。これも『トンマナが合っている』と言えます。

では、ナチュラルなパッケージのオーガニック化粧品を販売するECサイトの見出しに筆書体が使われていたらどうでしょうか？おかしいですよね。これは『トンマナが合っていない』になります。

WEBサイトを例に挙げましたが、トンマナはWEBサイトなど比較的大規模なクリエイティブに必要なもの、という認識を持っている方が多いかもしれません。しかし、どんなクリエイティブにもトンマナは必要です。もちろん、私たち運用型広告に関わる人間に最も身近なクリエイティブであるバナー(イメージ広告)も同様です。

WEBサイトやLPなど規模の大きい制作では、トンマナを設定するのは一般的にWEBディレクターの仕事ですが、バナーのようにコンパクトな制作のトンマナなら、運用型広告運用者にも設定できます。トンマナを理解し、どのように設定したら良いかを知れば、デザイナーにバナー制作を依頼する際スムーズにコミュニケーションがとれ、デザイナーとの関係も良好に保てます。曖昧な指示でデザイナーに制作を依頼することはとても危険ですが、トンマナをしっかりと伝えられていれば、「想像していたデザインと違う」なんて最悪な事態は、ほぼ確実に回避できます。

今回は、そんなバナー依頼時に役に立つ「トンマナ」についてお話していきます。

実際にトンマナを設定しましょう

文字で説明するより実践のほうが分かりやすいと思いますので、実際に設定していきましょう。トンマナはそのバナーの目的に即している必要があります。何のためのバナーかを明確にするところから始めていきます。

以下の架空の商材を用いてお話します。

成果地点を商品購入に定め、Google アドワーズとYahoo!プロモーション広告を実施中。現在その中で、Google ディスプレイネットワーク(GDN)やYahoo!ディスプレイアドネットワーク（YDN）の新規ユーザー向けのディスプレイ広告のクリック率が伸び悩み、思うように集客ができていない状況です。

広告の遷移先は、日本語でローカライズされた、この商品の購入に特化したランディングページ(LP)で、配色は以下のような構成です。

ランディングページ(LP)のファーストビューには本国(スイス)のブランドサイトと同じく 外国人女性の写真を使用。パッケージの装飾を踏襲した上品な装飾がされ、光沢のある加工も随所にされています。配合成分であるカレンデュラの写真を多く使用し、華やかな印象もあります。

▲TOPイメージの女性

▲カレンデュラ

既存のバナーはこのサイトのデザインを踏襲しており、現在想定よりもかなりクリック率が低くサイトへの目標の集客数を確保できていない状態です。そこで、クリック率を改善しコンバージョンに繋がるユーザーの母数を増やすため、新規バナーを作成することとなった、という前提で考えていきましょう。

※もちろん、バナーとランディングページ(LP)のトンマナも合わせるのが基本です。本記事では、バナーを依頼する、という部分にフォーカスして話を進めていきます。

現状分析から仮説を立て、制作目的を明確化

ではどんなバナーにすればよいでしょうか？まずは、既存のバナーがなぜクリック率が低いのか、現状を分析して仮説をたてることからはじめましょう。

▲既存バナー

既存バナーは広告の遷移先LPのデザインを踏襲しています。メインイメージは外国人女性。メインフォントは源ノ明朝。配色はサイトと同じくこげ茶、ゴールド、黄色と、文字には白を使用しています。枠線や文字に光沢のある加工がされ、パッケージを踏襲した上品な装飾が施されています。カレンデュラの写真と相まって高級感があり華やかな印象です。

遷移先とバナーに親和性があることは大切ですが、高級感が前に出ており少しとっつきにくいと感じます。製品の価格も120ｇで1,200円と、プチプラとは言えませんが無添加の洗顔石鹸の中では特に高級ではないため、わざわざ高級感を推す必要性も高くはありません。メインイメージが外国人の写真でユーザーが自分事にできていない可能性もあります。

そこで、遷移先サイトを踏襲した高級感のあるデザインはターゲットユーザーには刺さり辛く、そのためクリック率が低い、という仮説を立てました。新規バナーは既存バナーとはがらりとイメージを変え、ターゲットユーザーが親しみやすいデザインにしようと思います。このような仮説立てのプロセスは運用型広告でも、ごく当たり前にやっていますよね。

ここで改めて、新規バナーの目的を確認します。

クリック率を上げることだけが目的でしょうか？あくまでクライアントのビジネスの目標は「商品を購入してもらうこと」です。新しいバナーをクリックするのはどんなユーザーか、そのユーザーは商品を買いたいだろうか、いま一度考えてみましょう。購入に至るまでのイメージができない場合は、仮説が的を射ていない可能性が高いので、改めて現状を見つめ直してみることをオススメします。

今回はバナーの目的よりもトンマナ組み立てがメインですので、最初の仮説のまま進めていきましょう。

イメージをキーワードにする

何のためかを明確にし、どんなバナーを作成したいかの大枠が決まったら、完成イメージをキーワードにしてみましょう。既存バナーよりも親しみやすいデザインとはどんなものでしょうか。

既存バナーにあるような、高級感や上品さはいりません。きれいなイメージより、やさしいイメージのほうが親しみを持てます。この商材には100％無添加という特徴もあるので、華やかというよりナチュラルにしたほうが日本人には刺さりそうです。私なら、[ナチュラル、カジュアル、やさしい、柔らかい]というキーワードを出します。

次はこのキーワードを元に、完成イメージの輪郭をもっとはっきりさせていきましょう。

キーワードをもとに、デザインの立ち位置をマッピングする

先ほど出したキーワードを元に、新規バナーのデザインの立ち位置を決めていきます。今回はフォーマル、カジュアル、装飾的、シンプルの4軸で比較します。軸は人それぞれわかりやすいものを定めて良いと思います。

この中で、まず既存バナーがどこに位置するかをマッピングしていきます。

既存バナーは高級感があり、きれいなデザイン。パッケージを踏襲した上品な装飾や、光沢のある加工が施され、カレンデュラの写真が華やかです。マッピングは[装飾的][フォーマル]に寄った位置になるでしょう。

では、新規バナーはどうでしょうか。新規バナーは親しみやすいものでなければいけません。
先ほど出したキーワードは、[ナチュラル、カジュアル、やさしい、柔らかい]です。

まず、高級感をなくし柔らかいイメージにしたいので、カジュアルに。重くなってしまう装飾や光沢加工はなくし、やさしくナチュラルなイメージを伝えるため、シンプルに。マッピングは[カジュアル][シンプル]寄りのこの位置になりました。既存との違いも明確にでき、軸が定まってきました。

※今回は既存バナーとの比較ですが、全くの新規の場合は競合と比べるなど、差別化できるものを用意しましょう。

配色、フォント、メインイメージ（写真やイラスト）を決める

これまで決めてきたことを頭に置きつつ、完成イメージを実現するにはどんな配色、フォント、メインイメージが必要かを考えていきます。

まず配色。

既存バナーは一番範囲の大きいベースカラーに重たい色を用い、高級感を出していました。文字や枠線にゴールドを用いさらに高級感がプラスされています。パッケージやカレンデュラの写真の黄色と相まって華やかさも演出しています。

▲新規配色

新規バナーは全体的に柔らかでやさしい印象＋ナチュラル感が伝わる配色にしましょう。ベースカラーは全体を明るくするため、明るめのクリーム色に。メインカラーはやさしい印象にするため、パッケージに使用されている緑の彩度(色の鮮やかさ)を少し下げ、柔らかな緑に。パッケージやカレンデュラの写真は引き続き使うので、黄色をアクセントカラーとしておきましょう。

配色が与える印象は組み合わせによって変化します。それぞれの色が与える印象と、組み合わさった時の印象を頭に置きながら、配色を決めましょう。

配色による印象の違いついては下記サイトも参考になります。

参考：カラー配色で迷わない！シーン別配色見本32パターン | Web制作会社スタイル 

続いてメインフォント。まずはフォントの系統から決めましょう。

既存フォントは明朝系の源ノ明朝でした。明朝系の中では比較的柔らかい分類に入りますが、カジュアル感に欠けます。カジュアル感を前に出すため、系統はゴシック系にしましょう。

次に具体的な書体を決めます。ゴシック系でもあまり可愛すぎるとターゲットである35～50代女性からずれてしまします。きれいな印象のある書体を選びましょう。今回はロゴたいぷゴシックにします。

▲ロゴたいぷゴシック
※具体的な書体が決められなくても、≪きれいめゴシック系≫程度のイメージは持っておきましょう。

ウェイト(太さ)にバリエーションのある書体では次にウェイトを決めます。太くなれば力強い印象、細くなれば繊細な印象になります。今回選んだロゴたいぷゴシックのウェイトは1パターンなので、そのまま使用します。

最後に、ユーザーに自分事にしてもらうため、メインイメージを外国人ではなく日本人女性の写真に変更します。華やかな印象が強くなるカレンデュラの写真は、既存よりも控えめに使用してもらうことにしましょう。

▲日本人女性イメージに変更

▲カレンデュラは控えめに

配色、フォント、メインイメージが決まったら、改めて最初に出したキーワードやマッピングとずれがないことを確認します。確認ができたら、いよいよ最後の仕上げです。

より具体的にイメージを共有できる参考資料を探す

デザイナーとより具体的にイメージを共有できるよう、作成したいバナーのイメージに近しい参考になる資料（ランディングページ、バナーなど）を探していきます。

世の中にはランディングページやバナーをまとめた便利なサイトがたくさんあるので、今まで決めてきたキーワードや配色を手掛かりに探していきましょう。商材、可愛い系やきれい系といったイメージ、色など、探しやすくカテゴリ分けしてくれているまとめサイトも多くあります。まとめサイトで見つからない場合は、キーワードで画像検索するのも一つの手段です。

ランディングページのまとめサイト

・業種から探せる：

ランディングページ集めました。 

制作実績まとめ | ランディングページ LP 制作 商品ページ デザイン

縦長ページのデザイン 集めました

・色、業種、テイストから探せる：
LP アーカイブ | ランディングページ LP 制作 商品ページ デザイン

バナーのまとめサイト

・サイズ、色、業種、テイストから探せる：
バナーデザイン専門ギャラリーサイト | レトロバナー

・業種、テイストから探せる：
バナーデザインまとめ。｜Banner Matome

・色、業種から探せる：
バナーデザインアーカイブ｜バナーのデザインをまとめてチェック！ 

今までの過程でイメージも明確になっているため、必要なものは自然と目に入ってくるはずです。2点ほどピックアップできれば良いでしょう。これで参考資料も決まりました。

参考資料の「何を」参考にするのかを明確に

参考資料の「何を」参考にするのかを明確にしなかった場合、どんな問題がおきるでしょうか。

あなたがピックアップしたバナーをデザイナーに渡し、これを参考に作ってほしいと伝えたとします。あなたはそのバナーの「A」の部分を参考にしてもらうつもりでした。デザイナーは「B」の部分を参考にバナーを作成しました。

・・これでは今までの努力が一気に水の泡です。最後まで気を抜いてはいけません。例えば、文字の大きさ、配置の仕方、写真の使い方、加工の方法　etc.‥

今までの過程でイメージが定まってきているので、ピックアップの段階で「何を」参考にするのかも自分の中で明確になっているはずです。それをきちんと言葉にしましょう。

最後は今までの過程を依頼書にまとめ、デザイナーに共有します。資料だけだと、文字では伝わりづらい微妙なニュアンスが間違って伝わる可能性があるため、資料＋口頭で伝えることを心掛けましょう。

これであなたのイメージに即したバナーがデザイナーから上がってくるはずです。以下は、試しに作った新しいバナーです。希望していたようなバナーに仕上がっていますでしょうか？ここまでやれば、「こんなはずじゃなかった！」という最悪の事態は回避でき、修正も最小限に抑えられます。デザイナーとの関係も良好です。

▲新規バナー

最後に

運用型広告運用者は、広告文の作成やレスポンシブ用の画像選定には積極的なのに、それ以上のクリエイティブになると急に自分の専門じゃないと考える方が少なくありません。しかし、広告の配信結果を誰よりも見ているのは運用型広告運用者です。どんな広告文が必要か分かる方なら、どんなバナーが必要かも分かるはずです。

今回の記事で、簡易的なトンマナの考え方、設定の仕方についてはご理解いただけたかと思います。是非今後のバナー依頼に活かしてください。配色やフォントの選定など、始めは難しいと感じるかもしれませんが、たくさんのバナーやランディングページに触れているうちに感覚が掴めます。

デザインの知識が少しでもあれば、普通の運用型広告運用者より1歩先を歩けます。バナーだけでなくレスポンシブ広告でも役立ちますし、ランディングページについてクライアントにアドバイスできる幅も格段に広がります。

『デザインの知識』と聞くとハードルが高いと感じるかもしれませんが、そんなに大層なものではありません。人がサイトやバナーを見て、『好き』『嫌い』『かっこいい』『可愛い』『渋い』『ダサい』など、何かを感じる時、そこには必ず理由があります。『なんとなくそう感じた』の『なんとなく』を明確にするのが、デザインの知識です。

例えば、あるサイトを見て『このサイト好きだな～』と思ったとします。なんで好きだと思ったのでしょうか。

自分好みの『ナチュラルな雰囲気』だったからです。では、何故『ナチュラル』だと思ったのでしょうか。緑、茶色、黄色などのアースカラーの配色、フォントは線の細いゴシック系で女性らしく繊細な印象、文字間隔は広めでゆったりした印象、水彩画タッチの優しい雰囲気のイラストが随所に。これらの要素から、『ナチュラル』という印象を受けました。配色のバランスや余白の使い方も整っています。デザインとして完成度が高いことも、好きだと感じた要因です。

このように、デザインの知識があれば『なんとなく』は簡単に明確になります。最初からデザインについて書籍やサイトで勉強するのはなかなか難しいかもしれません。ですが、実際にデザインはしないながら、デザインを意識してバナーやランディングページに頻繁に触れていれば、自然と知識もついてきます。自分から学ぶ意欲も沸いてくるはずです。デザインは難しいものではありません。

デザイナーとの関係を良好に保つためだけでなく、広告運用者としての価値をワンランク上げるためにも、変な苦手意識を持たず広告文作成の延長くらいの気持ちで気軽に学んでいきましょう。