デザイン サブスク デザイン定額サービスデザインサブスク・デザイン定額サービス センゾクデザイナー

トップ > お知らせ・コラム > バナーデザインとは|作り方とポイントを解説!

お知らせ・コラム

バナーデザインとは|作り方とポイントを解説!

バナーデザインとは


バナーデザインとは、Webページ上に掲載される画像や、検索結果画面やSNS上に表示される広告画像のデザインのことです。バナーデザインの目的は、ユーザーの興味・関心を引きつけ、リンク先のページに誘導することです。バナー内に企業名やブランド、商品名を効果的に配置し、認知度の向上や購買意欲を高めることができます。 ユーザーが思わずクリックしたくなる魅力的なバナーデザインの基本や制作手順、ポイントを紹介します。

 

バナーデザインの基本


バナーデザインにはおさえるべき基本のポイントがあります。詳しく見ていきましょう。

 

 

●デザインのメリハリ

デザインのメリハリとは、要素にはっきりと強弱をつけることで、重要度の高い情報は色をつけたり大きくして目立たせ、重要度の低い情報は小さくすることです。情報が理解できるスピードが速くなり、直感的に伝わるデザインを作ることができます。

例えば、色をつける・余白を調整する・線を引くなどもテクニックの一つです。

 

●バーティカルリズム

バーティカルリズムとは、要素の配置に一定のリズムを取り入れることで、デザイン上の安定感や、可読性の向上などの効果が見込めるデザイン手法です。通常は、本文の行の高さをリズムの単位として、要素間の余白を調整します。

例えば、色や線、モチーフ、レイアウトなど、同じ要素を繰り返し使うことです。

 

●デザインのレイアウト

デザインのレイアウトとは、文字や色、写真やイラストなどの図版を、伝えたいイメージに沿って効果的に配置することです。レイアウトは、デザインにおいて情報の伝わりやすさや見た目に大きく影響する重要な要素です。

レイアウトでは、情報の優劣、視線誘導などを選定し、要素を配置することが大切です。

 

●デザインの配色

デザインの配色は、デザインのイメージを作るだけでなく、人の感情に作用し、デザインの効果を左右する重要な要素です。配色には、ベースカラー、メインカラー、アクセントカラーの3種類があり、基本的には、ベースカラー70%、メインカラー25%、アクセントカラー5%という割合で配色すると美しいとされています。

 

●デザインのトリミング

デザインのトリミングとは、画像やオブジェクトの不要な部分を切り取り、必要な部分のみを表示させることです。トリミングは、不要な部分を削除したいときや、画像の一部だけを使いたいときに使用されます。トリミングは、ターゲットや目的にあわせ、情報伝達に必要のない部分を切り取り、必要な部分を強調させる効果があります。

 

●デザインの視線誘導

デザインの視線誘導とは、ユーザーの視線の動きをコントロールして、意図した順番で見てもらうようにする手法です。ユーザーに対して次にどのようなアクションを行えば良いかを伝え、スムーズに進むように誘導することができます。

例えば、左上→右上→左下→右下といった順番で視線が動く【Zの法則】などがあります。

 

●デザインの悪目立ち防止

デザインの悪目立ちを防ぐには、いくつかのポイントがあります。装飾的な要素を小さく薄く控えめに配置する、原色に近い色を安易に使用しないほか、全体に統一感があり企業イメージにあっているかを意識することが重要です。

 

バナーデザイン制作前の準備

バナーデザインを制作する前に、どこに、どのような目的で掲載し、どんな人にクリックしてほしいのか、クリックした先でどのような行動に導きたいのか整理しておく必要があります。以下のポイントをおさえておきましょう。

 

 

バナーデザインの制作手順

バナーデザインの制作は、以下の5STEPで進めるのが効果的です。

 

  1. デザインの方向性を考える
  2. テキストや素材を仮置きする
  3. レイアウトを決める
  4. レイアウトに沿って要素を配置する
  5. フォント・色・字間などディテールを詰める

 

1. デザインの方向性を考える

制作の目的やターゲットを理解した上で進めることが大切です。商品やサービス内容に目を通し、目的に合わせた要素やレイアウト案を作成します。季節や属性ごとの訴求方法、競合他社のリサーチを行うことで、目指すべきデザインの方向性が見えてきます。

ここで大まかなトンマナを決めておくことで制作にぶれが生じるのを防ぐことができます。

 

2. テキストや素材を仮置きする

制作するバナーデザインのサイズを確認した上で、最初に全ての要素を画面上に載せていきます。これは、要素の全体像を把握しておくことで、サイズや配置のバランスを整える必要があるからです。クリエイティブの狙いや優先順位をもとに制作することが重要です。

 

3. レイアウトを決める

初心者にとってレイアウトを決めることは難しいため、いくつかのパターンをもとにレイアウト案を考えるのが効果的です。バナーデザインのための参考サイトを確認してパターンを探してみるのもいいでしょう。カテゴリーや色、テイスト、サイズ別で検索できます。

 

参考:BANNER LIBRARY

 

4. レイアウトに沿って要素を配置する

レイアウトが決まったら、2.で仮置きしていた要素の配置を整えます。画像やイラスト、メインコピーやサブコピーの配置、CTAの配置場所などを決めていきます。

 

5. フォント・色・字間などディテールを詰める

バナーデザインでは、パッと見てわかりやすく、読みやすいことが大切です。例えば、フォントや色数は少なく絞ることで全体の統一感が生まれます。反対に多くしすぎると伝えたい情報がどこにあるのかわかりにくくなり、読みにくいバナーになってしまうので気を付けましょう。

 

バナーデザインの制作が完了したら、最終確認を行います。パソコン・スマホ両方からの見え方を確認するのも忘れずに行いましょう。

 

効果が出るバナーデザインのポイント

バナーデザインで効果を出すためには、以下のポイントをおさえておくことが大切です。

 

周りのフィードバックをもらう

周りからのフィードバックをもらうことで、自分だけでは気づきにくいポイントやアイデアをもらうことができるので、バナーができたら必ず誰かに見てもらうと効果的です。自分だけでバナーデザインを完結させてしまうと、どうしても雰囲気や傾向が似ているバナーができあがってしまうケースがあるためです。

また、フィードバックに関しては、デザイナーだけでなく、ペルソナに近い方に見てもらうとよりユーザー目線でのアドバイスが受けられます。

 

デザインを言語化する

バナーデザインを行う上で「どの部分に対してどういうことを考えてデザインを仕上げたのか」を言語化することを意識すると、デザインのクオリティは大きく向上します。バナーとして完成させるだけであれば感覚だけでも行えますが、効果の出るバナー制作のためには訴求軸・表現軸ともに言語化することを意識しましょう。

 

まとめ

バナーデザインは基本をおさえたうえで、効果が出るためのポイントを意識して制作することが大切です。よりクオリティーが高いデザインを求めている、バナーデザイン制作を専門家に依頼したいのであれば、ぜひセンゾクデザイナーにご相談ください。

一覧へ戻る >

お問い合わせ・資料請求

詳しい資料をダウンロードいただけます。
その他 お気軽にお問い合わせ・ご相談ください。