Webデザインにおいて、バナーは視覚的なインパクトを与え、ユーザーの興味を引く重要な要素です。
しかし、ただ目を引くだけでなく、ターゲットに対して適切な情報を伝え、行動を促す役割も果たさなければなりません。
本記事では、プロのデザイン添削をもとに、具体的なブラッシュアップ事例を紹介しながら、クリックされる広告バナーを作るポイントを解説します。
今回ブラッシュアップするデザイン課題の内容
はじめに、今回ご紹介するウィークリーデザインのお題や概要などを確認しましょう。
| お題 | 人材派遣サイトのバナーデザイン |
| 概要 | 看護師向けの求人サイト「デイナース」のサービスサイト紹介バナー |
| 最低限載せたい内容 | ぴったりの職場が見つかる！看護師求人サイトならデイナース 特徴 ・国内最大級の求人数 ・高給与 ・日勤のみ残業なし |
| ターゲット | 20〜50代女性 |
| 配信先・掲載先 | ディスプレイ広告 |
| サイズ | 300×250 |
ウィークリーデザインとは？
毎週X上で出されるデザイン課題に沿ってバナーを作成し、Xで投稿するデイトラWebデザインコースの人気企画。デイトラを受講していなくても参加できる。
プロが添削！広告バナーの改善事例とポイントの解説
ここからは実際に投稿された広告バナーのうち、添削した4作品の改善ポイントを解説します。
ビフォーアフターの画像で比較しながら見ていきましょう。
事例1：ポップなデザインのバナーを改善！目を引くデザインに
こちらのバナーは、色の選択やあしらいによって明るく元気な印象を与えることに成功しています。
ただ、情報が上手にまとめられているがゆえに、広告バナーとして認識されず見てもらえない可能性がある点が課題でした。
・グラデーションを活用：ほんのりと色の変化を加えることで、バナーに立体感を出す。
・ジャンプ率をつける：「国内最大級」など、一番目立たせたい情報を強調する。
・写真と文字を重ねる：文字と人物を少し重ねることで、奥行きのあるデザインに。
・抽象的なコピーは使わない：指定のテキストが目立つように「可能性は無限大！」をカットする。
特に親しみのあるハッシュタグを使って、わかりやすさを作り出している点は素晴らしいと思います！
事例2：青系の信頼感のあるデザインを改善！余白を活かして伝わりやすさアップ
こちらのバナーは、落ち着いた青系の配色で信頼感が伝わる点や、背景のあしらいで「希望」「未来」を連想させる点が素敵です。
ただ、区切りが多くて窮屈な印象になってしまっているところ、デイナースのロゴが大きすぎて肝心のメッセージが目立たないところが課題でした。
・一番伝えたいメッセージを強調：「4つの特徴」「ぴったりの職場が見つかる！」を大きく。
・ロゴの配置を調整：ブランド名は右下に小さめに置き、広告バナーの役割を明確に。
・アクセントカラーを追加：青系だけでは単調になりやすいため、ピンクなどの差し色を入れる。
事例3：インパクトのあるバナーを改善！情報整理でわかりやすく
こちらのバナーは色や配置を工夫していて視認性が高いのが特徴で、「ぴ」の文字を大きく強調して目を引くデザインを意識していることが伝わります。
ただ、ロゴが上下に配置されていてスペースを取ってしまっている点、看護師の写真と背景が馴染んでおらずデザインが浮いて見える点が課題でした。
・ロゴの数を整理：ロゴが2つから1つにして、その分女性の画像を大きくする。
・縁取りの工夫：文字のフチを細くしすぎると読みにくくなるため、少し太めに調整する。
そのため、縁取りは太めにすることをおすすめします！
事例4：シンプルなデザインを改善！メリハリをつけて視認性をアップ
こちらのバナーはシンプルですが、レイアウトがきれいに組まれているので情報が伝わりやすいデザインになっています。
全体的なバランスは良いので、さらに視認性を上げる工夫をするとよりよいバナーデザインになるでしょう。
・背景にカーブや図形を追加：動きを加えてポジティブな印象に。
・枠線を太くする：広告バナーは競争が激しいため、埋もれないように工夫。
・フォントのメリハリをつける：「国内最大級」「残業なし」など強調したい部分を太字＋大きめサイズにする。
まとめ：ポイントを押さえてクリックされる広告バナーデザインを作ろう！
本記事では、4つの事例をもとに広告バナーの改善ポイントについてまとめました。
- 視線誘導を意識し、メリハリをつける
- 配色は目的に合わせ、適度なコントラストを加える
- テキストのジャンプ率を活かし、訴求ポイントを強調する
- 写真と背景の統一感を意識し、デザインに馴染ませる
- 全体の縁取りやコントラストで、埋もれないデザインにする
実際に添削が受けられなくても、他の人が受けている添削例を見て言語化することでもデザイン力は鍛えられます。
当メディアでは他にもバナー添削の事例を紹介していますので、ぜひ参考にしてみてください。
未経験からWebデザイナーを目指すならデイトラがおすすめ！
東京フリーランスは、Webデザインを仕事にする本格スキルを学べる”デイトラ”を運営しています。
デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています！
デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。
独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。
また、デイトラWebデザインコースは、随時教材をアップデート！一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。
未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください！
ももさん（@momo_web24）
デザイン会社社長。WebアプリのUI/UX設計からHP、ロゴ作成まで幅広くWeb制作に携わっている。デイトラWebデザインコースのメンター。