バナー作り初心者がいきなりデザイン制作する前に考えて欲しい4つのプロセス
こんにちは。クックパッドのデザイナー、たまい（@tmi_1064）です。
今回は、バナー作り初心者🔰だったデザイナーが実践した、サービス内自社広告バナーのデザイン改善の手順と学び、その結果を公開してみようと思います。
当時バナー作り初心者でしたが、自分なりに工夫してみると学びが多かったです。バナー作りは単なるグラフィック作りではなく、デザインとしての伝え方すべてに繋がっていました。
chocoZAP、沢山バナー広告を出しているのに気づいて撮り貯めていたんですが、いちサービスの広告にターゲットや訴求文などを変えるだけでこれだけのデザインパターンがあって学びになる。 pic.twitter.com/iwlQPBAGdS
— Tamaaai (@Tamaaai2) May 12, 2023
例えば、自分はchocoZAPのバナー検証を集めてたのですが、これだけたくさんのバナーデザインを展開していてバナーデザインの奥深さを感じました。
本記事では、バナーデザインの改善を引き継いだが何から手を付けたらよいか分からないと感じている方、これからバナー作りを挑戦する方のお役に立てたら幸いです。
🙌 バナーの見直しを初めて企画したらCTRが高いバナーを1つ→3つに量産できた！
【改善前】順にクリックされやすいバナーが出ていただけで見直しもなく長年放置...
改善前は、B > C > D > A の順にCTR（Click Through Rate）が高いバナーを掲出して1年以上経っている状態でした。つまり、順番にクリックされやすい4種類のバナーをランダムでユーザーに掲出したままになっていました（しかもこのバナーを作ったデザイナーは退職済み😂）。
【改善後】改善前の高いCTRと同等のCTRをもつ効果的なバナーを増やし、全体のCTRの底上げができた！
バナー作り初心者でも、クリックされやすいバナーのバリエーションを増やせました 🎉
デザイナーが表層のデザイン担当だけに留まらず、仮説立てから結果分析まで一貫して行うと、デザインへの学びが深くなったり実施スピードが向上することを実感しました。
では、実際にどういう工夫をしたか、ざっくりポイントをお見せしてから詳細を紹介していこうと思います。
はじめにグラフィック作り…はしない！
数値分析や伝える要素の整理でロジカルに考える！
よくあるバナー作りだと、「まずはどんなグラフィックを作ろうかな〜」と紙とペンを取りがちだと思います。
当時の自分もそうでした。しかしここで「なにから手を付ければ…」と固まってしまいました。
それもそのはず。今あるバナーについて何も理解していないから…。
当時バナーデザインはほぼ未経験で何も分かっていませんでした。ですが、自分なりに「こういうことをしたら良いんじゃないか」と工夫してみて、良かったと思うポイントを紹介します🤲
数字の事実として現状を捉える
具体のデザイン作りで手を動かす前に、現状を理解するため当時のCTRを算出しました。
具体的には、SQLを書いて日毎のバナーが見られた数 (show)とタップされた数 (click)を出し、分散の等質性を検定するための分散分析をした後に多重比較をし、バナーそれぞれのCTRの差を確かめました。
結果、4種類掲出されていたバナーは B > C > D > A の順にそれぞれ何％ぐらいでクリックされている事実がわかりました。
バナーの持つ要素を分解し、それぞれに対して理由と仮説を考える
バナーの実力が分かったため、次は「なぜクリックに差がついたのか」について各バナーが持つ要素を分解し、それぞれに対してなぜ良かったのか/悪かったのかを考えました。
その後、考察を元に「どういった方向性でデザインを変更すればよいのか」仮説を立てました。仮説を立てて検証することで、自分がこれから何を確かめようとしているのかを言語化し、実際の結果が出たときにきちんと振り返ることができます。
【実際に立てた仮説】
1. 最も結果が良かったバナーの文字サイズやバランスを調整し、可読性を高めればよりクリックされるのではないか
2. 結果が良かったバナー上位2つの良さをかけ合わせたデザインにすればよりクリックされるのではないか
3. 別のバナー検証での学びを活かしたデザインにすればよりクリックされるのではないか
バナーに持たせる要素の優先順位を整理する
バナーデザインをどのように改善すれば結果がよくなるか仮説を作った後、バナーに必要な要素とそれらの優先順位を整理しました。
要素の組み合わせでバナーをデザインする
整理した要素を仮説をもとに取捨選択しつつ、バナーデザインを作っていきました。デザインの方針（仮説）と「CTR貢献によさそう」と思える構成パーツが揃っているため、ゼロから作るより効率的にデザインを考えることができます。
2回のバナーABテストでわかった、クリックされやすくするための4つの工夫
2回のバナーABテストを経て「よりクリックされる自社サービス内におけるバナー訴求のクリエイティブ」について色々わかったので、4つを tips としてまとめてみました。
１．変化を具体的に想像できる訴求に
「今お得ですよ！」という表現は事業者側目線の言葉であり、ありきたりな言葉になりがちです。
バナーを見たユーザーの体験をどう変化させるか具体的に想像できる訴求をすると、より興味を持ってもらえます。クックパッドだと「より料理が楽しくなる」や「今日の料理がすぐ決まる」などが挙げられます。
２．バナーの訴求力は要素の掛け算
バナーの訴求力は要素の掛け算の結果であり、「よい」とされている要素を必ず詰め込む足し算ではないと分かりました。
外部の様々な面で出すバナーは「いかに目立って立ち止まってもらうか」も大事な要素なので、これに限らないと思いますが。
３．体験も含めたデザインをする
今回は「ユーザーがレシピを探している状態で見られるバナー」を作りました。そのため、おいしそうな料理の写真を探すことに意識が向いています。
状況を考慮すると、バナーにもおいしそうな料理の写真が載っていれば、イラストや文字だけのバナーよりも一瞬で注意を引けます。
ただ面としてデザインの整ったバナーを作るのではなく、バナーが見られる状況を意識するとより興味を持ってもらえるバナーが作れることが分かりました。
４．実際に表示される場面も考慮する
デザイン案作成時では元々バナーに載せる料理写真をハンバーグにしていました。ですがバナーと同じ画面に肉料理の写真コンテンツが表示される可能性があることが分かりました。茶色のハンバーグと一緒に表示された際にバナーが目立たないだけでなくアプリ全体の印象が暗く見えてしまうため、オムライスの画像に変更しました。
また、実際にFigmaのアプリで携帯に映しながら確認することで自分が作っているデザインに対しての解像度を上げることができます。
このように、バナーそのもののデザインだけでなく、実際に表示される場面も考慮することは重要です。
番外．レビュー依頼は表にすることで伝わりやすくなる
バナークリエイティブのレビューを先輩デザイナーやプロダクトオーナーに依頼する際、「バナーデザイン × 掲載イメージ × 検証項目」の星取表にすることで見渡しが良くなってスムーズに見てもらえました。
さらに、実機で確認してもらえるようfigmaプロトタイプのリンクも用意しておくとデザイナーへのレビュー依頼がスムーズになりました。
まとめ：
💡バナー制作のポイント
・グラフィックを考える前に数字の事実として現状を捉える
・バナーの持つ要素を分解し、それぞれに対して理由・仮説を考える
・バナーに持たせる要素の優先順位を整理する
・仮説に基づき、要素の組み合わせでバナーをデザインする
以上、実際に行ったバナーデザインの改善プロセスと、そこで得た学びを紹介しました。
今振り返ると、一見バナー制作はパッと作れて簡単そうに見えますが、実はそんなことはなく学びなど得ることがたくさんありました。また、バナー制作で用いた考え方はLPやUIなどの伝え方すべてに繋がっているなとも思いました。
新人は簡単な仕事だからバナー制作から任されるのではなく、コンパクトにデザイン全般に対して再現性のある手法や学びが詰まっているからなのだなと改めて実感できました。
デザイナーが表層のデザイン担当だけに留まらず、仮説立てから結果分析まで一貫して行うと、デザインへの学びが深くなったり実施スピードが向上するなど良い事づくしなのでおすすめです！
それでは〜👋
【お礼】この記事は尊敬する先輩デザイナー、@ShikiCheri さんにレビューいただきつつ完成させることができました。ありがとうございました！🙇♂️
この記事が気に入ったらサポートをしてみませんか？