思わずタップしたくなる！広告バナーデザインチェックリスト

バナーデザインとは？

文字や写真や絵でつくられた画像のことで、ウェブ上で他のウェブサイトや商品を紹介する役割をもつアイコンの一種です。「バナー」をそのまま訳すと「旗」や「横断幕」という意味になります。ウェブ上で広告が目立つように使われたことから、バナーと呼ばれるようになり定着しました。

この資料ではバナーデザインを制作する上で確認したい項目についてご紹介します。

デザインの進め方の基本９項目

▷要件をまとめる

デザインする目的や制作するものの概要を最初にまとめておき、大まかなデザインを決めましょう。整理した情報をディレクターと共有・確認し、認識のズレをなくしていきます。制作前に必ず確認しておきましょう。

1. 制作するものは何？
バナーにはレクタングル、スクエア、バナー、スカイスクレイパー、モバイルの5つの種類があり、細かくサイズが指定されています。作る前に、自分が作るものは何か確認しましょう。

2. どういうところで使われる？
バナー制作の場合、スライドのような動く場所に使用される場合、情報を1か所にまとめる方が視線の動きが少なく済むなど、表示箇所からデザインを考える必要があります。

3. サイズ指定の有無を確認！
バナーは広告形態により予め指定されていることが多いです。サイトによって決まっているコンテンツ幅があるため、制作前に必ず確認しましょう。

4. 作ったものに対して期待されていることは何かを考えよう。
エンドクライアントがエンドユーザーに求めていることを考えることにより、コンテンツの優先順位を決めやすくなります。

5. エンドクライアントについて知ろう。
エンドクライアントの事業内容や強みを知ることで、デザインのコンセプトやコンテンツの優先順位を決めやすくなります。

6. ペルソナを確認しよう！
具体的な人物像があることで、全体的なデザインのフォントや文字の大きさ、カラーの選択がしやすくなります。

7. 提供素材・指定素材（ロゴマーク・写真など）、レギュレーションや禁止事項はあるか
先方から支給されている素材には利用のルールが設定されているため、必ず確認しましょう。

8. 競合事業の参考デザインを用意しよう。
「どのパーツ」が「どういう意味か」を落とし込んでから共有することで、認識のズレをなくすことができます。 \

9. 既存バナーの別パターンを作る場合
既存のルールに従って制作する必要があるか確かめておきましょう。
ルールに従って制作する場合、見出し・本文など、要素ごとの

• フォントサイズ
• フォントファミリー
• 余白
• カラー

10. 写真の色味や比率
コンテンツ幅を確認！

バナー完成時に確認したい14項目

▷実際のサイズの見た目

拡大して作業することが多いため、コンテンツのサイズなどが適切でない場合があります。


1.上下左右やコンテンツ周りの余白
余白を意識的に作ることで、情報をグループ化したり、視線の誘導を行うことができたりなど、「ユーザビリティ」の向上につなげることができます。

2.要素にズレがないかどうか
気づかないうちに配置がずれていることがあるため、目視できちんと確認し、一番自然な見た目になるようにしましょう。

3.文字間の調整ができているか
フォントによっては、文字間の調整をしないと不自然に文字同士の余白が空いている文が出てきてしまいます。

4.迷子になっている調整レイヤーの有無
色がくすんでいる、暗い、鮮やかすぎる…などの状態になっていると、クリッピングが外れてしまっている調整レイヤーがあるかもしれません。

5.レイヤー効果などのデザインテイストの統一
制作している間にテイストが変わってきているものが混在していないか注意しましょう。

6.過度な装飾をしすぎていないか
文に目がいかないくらい装飾が施された部分はないか確かめましょう。背景が派手だったり暗かったりする時はテキストを読みやすくする工夫も！

7.コンテンツの重なり具合は適切か
コンテンツの境界線がギリギリだったり中途半端に重なったりしていると、全体的に「テキトー」な雰囲気が出てしまいます。

8.レイヤー効果の重なり具合は適切か
隣接しているコンテンツの上にかからないように、重なり順が正しくなっているか確認しましょう。

9.テキストの可読性をきちんと上げれているか
小さくしすぎて読めない字がないか、誤字脱字がないか、スペルは正しいか確かめましょう。

10.画像の画質が悪くなっていないか
スマートオブジェクト化していないレイヤーで作業していませんか？画像が荒れてしまっている部分がないか確認しておきましょう。

11.切り抜き画像に不自然な点はないか
切り抜きに失敗し、変に見えるとかっこ悪いので、よく注意しましょう。

12.ボツにしたレイヤーが表示されていないか
使っていないレイヤーがないか確認しましょう。見つけ出した後は削除しておきましょう。

13.支給素材が規則に反していないか注意！
キャラクターやロゴなど、先方から支給されている素材には利用のルールが設定されています。

14.依頼の基本条件を満たせているか
掲載するコンテンツやルールなど、依頼主の提示する条件を満たしていないと、直しがあるのはもちろん、信頼を失ってしまいます。

実際に使用されている効果的なバナー活用方法

▷純広告

Yahoo！JapanやGoogleのようなポータルサイトや、新聞社、雑誌社などの集客力があるサイトの枠を買い取り掲載する広告です。ターゲット層に合ったメディアを選ぶことができれば、高い集客効果を得ることができます。

▷タイアップ広告

新聞、雑誌、ポータルサイトなどのメディアの場合や、芸能人やYouTuber、人気ブロガーなどの著名人の場合があります。たとえば大手ポータルサイトとタイアップして、そのサイトの記事のような広告を出稿したりします。



タイアップ先の持つブランド力や影響力によって効果を得ることができます。自社のターゲットに合わせてタイアップ先を選定することが重要です。

▷SNS広告

FacebookやTwitter、InstagramなどのSNSで表示される広告です。ターゲティングが行いやすくなることがメリットです。企業が所有するユーザーの性質や行動履歴などのデータを活用して、ターゲットにアプローチすることができます。



出典：Beauty _journey.xx　Instagram広告｜Instagramより 
出典：FANCL(ファンケル)　Twitterプロモーション広告｜Twitterより

写真を共有するSNSというInstagramの性質上、文字が少なめの方が目に留まりやすくなるという特徴があります。写真を使った広告が多く、写真の良し悪しでクリック率が大きく左右します。
タイムラインの最初の広告枠に載るため、ユーザーにとってはその日初めて見る動画広告になります。動画の広告は、テキストと違ってユーザーに短い時間で多くの情報を届けられ、記憶に残りやすいです。
1日あたり100円から出稿できることもあります。

クオーツなら戦略にあわせた効果の出やすい広告をご提案可能！

クオーツでは、デザインパートナーとして ビジネスの中で生まれるお客さまの課題に挑みます。

✔︎ ターゲットに合わせたアプローチで効果の出やすい広告を運用、ご提案できます！
効果が出にくかった広告も、クオーツにご相談いただければ原因、仮説の検証含め、広告運用部分からご提案することができます。

✔︎ 広告を通してユーザーからの認知、信頼までを一貫して行えます！
ユーザー認知を広げるためだけでなく、その先のWebを制作しさらに信頼や顧客獲得やまでの導線を一貫してご制作が可能です。

✔︎ ユーザー視点の共感を生みやすいバナー広告制作、運用を行うことができます！
写真素材などを使った効果的なイメージ制作や、UXライティングで、 ユーザーの課題にピンポイントでアプローチできる広告をご制作できます。


また、弊社にご興味を持っていただけましたら、資料やサービスについて、ご説明させていただくお時間をオンラインで頂戴できますと幸いです。日程調整URLはこちら
※ご希望の時間帯に担当部署よりお電話にてご連絡差し上げます。 お電話でご用件をお伺いさせていただき、後日、専任の担当者とのお打ち合わせ(オンライン)を設定させていただきます。また下記問い合わせフォームからもご相談を承っております。
お問い合わせはこちら