オンライン広告に載せるバナーは、瞬時にユーザーの興味を引きつけ、メッセージを的確に伝えることが求められます。
この記事では、SNS総フォロワー47万人以上を誇るデザインメディア「デザイン研究所」さんによるバナー添削をもとに、人に見られるバナーを作るためのデザインテクニックを解説します。
初心者Webデザイナーの方やバナー作成のコツやテクニックを知りたい方は、ぜひ参考にしてください。
元のデザインとプロによる添削後のバナーを確認！
はじめに添削前のバナーデザインと、添削後のバナーデザインを比較してみましょう。
載せるテキストは変わっていないものの、情報の伝わりやすさは大きく変わっていることがわかります。
どのような点を意識して添削したのかについては、次項で解説します。
デザイン研究所が教える！バナー制作のテクニック5選
ここからは、プロがバナー制作をする際に重視している5つのテクニックを解説します。
- 見る人の目線に立って情報を整理する
- ユーザーが読みやすいレイアウトにする
- フォントと文字間隔の調整で見やすさを向上させる
- 曲線と直線のバランスを整える
- 訴求力を高める背景写真を選ぶ
上記5つはどのようなバナー制作にも活かせる内容です。順番に確認していきましょう。
1：見る人の目線に立って情報を整理する
バナーを制作する際は、バナーを見る人の目線になって情報を整理しましょう。
今回の例で言えば、大きく書かれている「10日間無料体験実施中」が目を引きますが、それだけでは「何の無料体験なのか」が分かりづらくなっています。
そのため、中央の目立つ部分に「オンライン英会話」をはっきりと示し、その次に「無料体験」を訴求することで、内容が伝わりやすくなります。
また、重要な要素を上位に置くと、自然と視線が向かうように配置できる点もポイントの一つです。
たとえば、「会員数No.1」といった強みはバナーの上部に配置し、次に「オンライン英会話」、その次に「10日間無料体験実施中」といった順番に並べると、自然と広告内容が理解しやすくなります。
2：ユーザーが読みやすいレイアウトにする
デザインを整える際には、視線の動きが「Z字」になるように配置することも効果的です。
日本人は「左上 → 右上 → 左下 →右下」の順に読み進める特徴があります。
そのため、特にバナーのような短時間で視線誘導が必要なデザインでは、重要な要素を左上に配置し、Zの形で視線が流れるようにすると、読みやすいレイアウトになります。
また、バナー内の文字は左揃えにするのがおすすめです。
右揃えや中央揃えも場合によっては使われますが、日本語の読み順と一致させることで視覚的に安定するため、基本は左揃えにしましょう。
3：フォントと文字間隔の調整で見やすさを向上させる
フォントや文字間隔の調整も見やすさに大きく影響するポイントの一つです。
たとえば、カタカナは他の文字に比べて広がりやすく、隣の文字との間隔が大きく見えることがあります。
このようなフォントの特徴を理解し、適切に調整することで、デザインに統一感が生まれます。
また、数字に対して日本語を縦積みにしてバランスを調整するのも、よくデザイナーが使うテクニックの一つです。
「◯日間」「税込◯円」などの数字を使う場面でデザインに悩んだときは、日本語のテキストを縦積みにして調整してみてください。
デザイン全体を見るのではなくグループごとに整えていくと、気づくことが増えますよ！
4：曲線と直線のバランスを整える
アイコンや文字の一部が曲線を含む場合、少しだけ左や右にずらしてみるとバランスが整いやすくなります。
今回の場合、「会員数No.1」のアイコンを「オンライン英会話」のラインに揃えると、かえって揃っていないように見えます。
ちょっとした工夫ですが、視覚的な安定感を意識してみてください。
5：訴求力を高める背景写真を選ぶ
バナーの背景画像はレイアウト範囲が大きく、バナーの印象に大きく関わるものです。
そのため、クライアント指定の画像でないときこそ、こだわって画像を選びましょう。
今回はオンライン英会話に関連する広告であるため、「会話しているシーン」を強調する背景が適しています。たとえば、イヤホンをつけた人物やパソコンの画面を見ながら話しているシーンを使うと、オンラインでのやり取りを連想しやすいでしょう。
背景に限らず、バナーサイズに対して大きな範囲を占める画像は重要な要素になるため、いくつかの画像をピックアップして最も適切なものを選ぶように心がけてください。
まとめ：ユーザー目線で情報が伝わりやすいバナーを作成しよう
・ユーザーが読みやすいレイアウトにする
・フォントと文字間隔の調整で見やすさを向上させる
・曲線と直線のバランスを整える
・訴求力を高める背景写真を選ぶ
広告バナーのデザインは、視覚的にシンプルであることが重要ですが、同時にユーザーがひと目で情報を把握しやすいように工夫することが必要です。
視覚的な優先順位をつけ、ターゲットの目線に立ってデザインを作り込むことで、ユーザーの心を掴みやすいバナーを制作できます。
本記事で紹介したポイントを意識して、より多くのユーザーに見られ、行動を促せるバナーを制作しましょう。
未経験からWebデザイナーを目指すならデイトラがおすすめ！
東京フリーランスは、Webデザインを仕事にする本格スキルを学べる”デイトラ”を運営しています。
デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています！
デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。
独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。
また、デイトラWebデザインコースは、随時教材をアップデート！一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。
未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください！
デザイン研究所さん（@designkenkyujo）
デザイナーからノンデザイナーまでに、役立つデザインポイントをわかりやすく解説するメディア。SNS は総フォロワー数47万人以上を誇り、デザインジャンルでは日本最大級。2023年には初の著書となる「デザインのミカタ」を出版し、発売後に即大重版・Amazon総合1位(2023/8/2)を獲得。