バナー作成は配色が重要！適正サイズや作成方法を教えます！

バナー広告を始めてみたいけど、サイズや種類も多く、どうすればいいのかわからない方が多いと思います。 そこで今回はバナーについて、サイズや種類・作成の流れを解説します。

サイト運営の現状課題
把握できてますか？

課題がわからないまま
施策を進めていませんか？
「簡易チェックシート」で
現状の課題を整理して
今後の対策を明確にしましょう！
（初心者の方でもすぐに見直せます！）

• サイト運営の全体像を俯瞰して確認できる
• 現状の課題がどこにあるか明確になる
• 今後やるべき施策の優先順位がつけやすい
• 初心者でも分かりやすい項目設定
• PDF形式だからいつでも手元で確認可能！

まずは現状把握から始めましょう！

課題を整理することで、
施策の効果を最大化する
ことにつながります！

無料配布中

無料ダウンロードは
こちらから

バナーとは

バナーとは、キャンペーン情報・特集などの告知やWebサイト・サービスの紹介などに使用する画像や広告のことです。

WebサイトやSNSなどに掲載します。

バナーの目的

バナーの主な目的は、商品・サービスの宣伝やキャンペーンの促進です。バナーを活用することで、特定の商品やサービスを広くアピールできます。

また、Webサイトの特定ページへの誘導やユーザーの関心を引きつけることも目的の一つです。

バナーの効果的な活用方法

バナーを効果的に活用するためには、いくつかのポイントがあります。

POINT 1

目的に応じたデザインやキャッチコピー・文章にすることです。

ターゲット層や訴求ポイントを明確にすることで、伝えたい情報を強調するバナーにできます。

POINT 2

Google広告やYahoo広告などのディスプレイ広告（バナー広告）の配置場所にはこだわりましょう。Webページの目立つ位置や関連性の高い場所に配置することで、ユーザーの目に留まりやすくなります。

POINT 3

InstagramやTwitterなどのSNSバナーも積極的に活用しましょう。

SNSはそれぞれ特徴や利用している年齢層などが異なりますので、ニーズにあったSNSを選ぶことが重要です。

また、各SNSでバナーサイズは異なりますので、同じバナーを使い回すのではなく、適応サイズを使用しましょう。

バナーの種類とサイズ

バナーには配信場所によって様々なサイズや種類があります。

今回はディスプレイ広告とSNS広告のバナーサイズを紹介しますので、参考にしてください。

BANNER 1
イメージ広告

イメージ広告とは、ディスプレイ広告の一種です。

アップロードした画像がそのまま配信されます。配信面に合わせてサイズなどの自動調整はされません。

引用元：Yahoo!広告
引用元：Google 広告

BANNER 2
レスポンシブディスプレイ広告

レスポンシブディスプレイ広告はディスプレイ広告の一種です。アップロードされたアセット（広告見出し・ロゴ・動画・画像・説明文）を自動的に組み合わせて配信する広告です。

引用元：Yahoo!広告
引用元：Google 広告

BANNER 3
SNS広告

Facebook・ Instagram・Twitter・LINEなどで配信されるバナー広告です。

SNS広告は媒体が同じでも配信される場所によって推奨サイズが異なる場合もありますので、注意してください。

今回は静止画のサイズを紹介します。

Facebook

引用元：Facebook広告ガイド

Instagram

引用元：Facebook広告ガイド

Twitter

引用元：Twitter広告ヘルプセンター:広告クリエイティブの仕様

LINE

引用元：LINE for Business:入稿規定

バナーに使う色の決め方

色は心理的な要素にも影響を与え、行動や感情に変化をもたらす力を持っており、モノの印象を左右させます。

例えば、黄色は明るい・希望、青色は冷静・知的など、色によって与える印象は変わってきます。 バナーを作成する前に色が与える印象を把握することは重要です。

配色の決め方

色の印象の他に重要なのが配色です。

配色と聞くと難しく感じる方も多いと思いますが、アメリカの色彩学者ジャットが考案した「ジャッドの色彩調和論」を参考に配色をすることができます。

1 秩序の原理：一定の法則に従って規則的に選ばれた色は調和する

色相環上で、「規則的な位置関係にある色」や「幾何学的な位置関係にある色」の配色は調和しやすいという理論です。

２なじみの原理：自然界にみられる色の変化や、見慣れている配色は調和する

自然界や日常で見慣れている配色は調和しやすいという理論です。

３類似性の原理：共通性がある色同士は調和する

同じような色相やトーンなど共通性のある色同士は調和しやすいという理論です。

４明瞭性の原理：明快なコントラストを持つ色の組み合わせは調和する

コントラストの強い色同士は調和しやすいという理論です。

配色比率

配色比率には法則があります。一般的に「ベースカラー:70%」「メインカラー：25%」「アクセントカラー：5%」の割合で配色すると均等の取れた美しい配色になりやすいとされています。

ベースカラー

背景や余白など配色の中で最も大きい面積を占める色です。メインカラーやアクセントカラーを引き立てる色(薄い色)を選びましょう。

メインカラー

配色の中で2番目に大きい面積の色であり、デザイン全体を印象付ける色です。ブランドカラーをメインカラーとして使うことも多く、またベースカラーに近い色相を使うと調和が取りやすくなります。

アクセントカラー

配色の中で最も小さい面積の色であり、デザイン全体にアクセントをつける色です。一番目立つ色を使用すると配色全体にメリハリができます。

また必ず、3色で配置せずとも問題ありません。 色を追加する際に配色比率を変えずにベースカラーなどを増やすことができます。

ターゲット層を明確にする

バナー作成をする際には、ターゲット層を明確にすることが重要です。

例えば、シャンプーのバナーを作成するとします。シャンプーといっても、女性向け・男性向け・子供向けもあれば、ダメージヘアー向け・保湿向けなどたくさんの種類があります。 ターゲット層が明確になっていないと、それぞれのターゲットに合うシャンプーのバナーが作成できません。

しかし、ターゲット層が明確になっていれば、女性向けなら可愛い・おしゃれな印象の配色、男性向けならカッコイイ・クールな印象の配色、子供向けならポップで明るい印象の配色といった具合にターゲットに応じたバナーの色を決められます。

またターゲット層を明確にすることは配色だけでなく、使用する素材を選ぶ際の重要な要素になります。

訴求ポイントを明確にする

バナーは限られたサイズ内に情報を配置し、作成します。

訴求ポイントが明確であれば、情報の強調したい部分を目立たせることができます。

バナーの作成

色の配色方法がわかったところで、実際にバナー作成してみましょう。

バナー作成の手順や方法はあくまでも参考です。まずは作成方法を真似してみて自身で作成し易い方法を探ってみてください。

バナーはPhotoshop・illustratorなどの有料ソフトやCANVA、Adobe無料バナーデザイン作成ツールなどのオンラインサービスなどで作成することができます。

基本的な手順は下記の通りです。

• 情報の洗い出し(ターゲット層・訴求ポイント)
• デザインイメージを決める
• 仮レイアウト(デザイン)作成
• 文字組み
• 配色・装飾

今回はillustratorを使用し、③～⑤をピックアップして教えます。

またデザインイメージ決める際は、バナーデザインギャラリーサイトなどで参考デザインバナーを探すことをおすすめします。

おすすめ参考サイト

Bannnner.com

優れたバナーデザインギャラリーサイト

Retrobanner(レトロバナー)

日本のバナーやトレンドバナーが多いバナーデザインギャラリーサイト

BANNER LIBRARY

トレンドをおさえたバナーデザインギャラリーサイト

バナー広場

トレンドをおさえたバナーデザインギャラリーサイト

今回の作成バナー情報

STEP 1
仮レイアウト(デザイン)作成

情報の洗い出しやバナーデザインイメージを決めたら仮レイアウトを作成します。

今回はアナログでざっくりとデザインイメージに合うようなレイアウトを描いていきます。 レイアウトをする際にユーザーの視線を意識することが大事です。

左上から右下の流れで視線が動きますので、Z型・N型・F型といった視線誘導を使用するといいでしょう。

STEP 2
文字組み

仮レイアウトをもとにillustratorで文字組みをしていきます。

文字組みの際にはまだ色をおかずにモノクロで作成します。

配色しながら作成すると、文字組みと配色バランスを気にしないといけなくなり、時間がかかってしまいます。 全体のバランスを整える際に、バランスが悪い場合は文言を追加・削除し調整していきます。

STEP 3
配色・装飾

文字組みが完了したらバナーに配色していきます。

まずはベースカラーを決め、次にメインカラー、最後にアクセントカラーを決めます。今回はベースカラーに白、メインカラーをピンク系、アクセントカラーに紺・黄色を配色しています。

配色する際には、強調した部分を目立つように配色していきます。

文字の配色が完了したらバナー全体の装飾をしていきます。 装飾をする際には文字の邪魔をしないように、色・位置を考えて素材などをバナーに追加していきます。

ある程度配色・装飾が完了しましたら、最後に全体のバランスを整えます。 全体バランスは、実際のサイズでバナーを書き出してみると把握しやすくなります。

STEP 4
配色違いの作成方法

Illustratorでは、まとめて配色を変更することができます。

簡単にできますので、ぜひ自身が作成したバナーが色によってどう印象が変わるか確認してみてください。

関連記事

【Illustratorのパターンの作り方】初心者でもスウォッチ活用で簡単！パターンの基本を教えます！

Illustratorのパターンを知らない初心者でも最後まで読めば、簡単にパターンが作れるようになります。さらにチェック柄の作り方も教えちゃいます！これを機にパターンをマスターしちゃいましょう！ Illustratorの…

まとめ

バナーは、商品やサービス、キャンペーン情報や特集などを告知するのに便利な広告です。 アピールしたいターゲット層にあった配信媒体や配色・デザインを心掛けバナー作成をしましょう。

また、バナーを一度作成・配信だけで終わりにするのではなく、ABテストなどをおこないより良いバナーに改善していくことも重要です。 改善する際には配色・デザインを変更したり、文言を変更したりとターゲット層がより好むバナーにすることで効果もUPしていきます。

ぜひ本記事を参考にバナー作成をしてみてください。