【企業向け】ビジネス系広告バナーの作り方！デザイン初心者でもわかる配色・フォント・レイアウトのコツ

こんにちは！広告会社でデザイナーをしている、『かじゅう』と申します。

インターネット広告市場は拡大しており、企業は自社のサービスやキャンペーンをアピールするためのバナー広告制作に注力しています。しかし、デザイナー不在の中小企業などでは、自社のサービスやキャンペーンをアピールするためのバナー広告デザインを内製で制作することが多く、専門知識や経験がない担当者は苦労しているのではないでしょうか。

この記事では、世の中に存在するビジネス広告系バナーを分析し、デザインパターンや制作のコツなどを共有します。

この記事がおすすめな方

バナー制作を担当するノンデザイナー
広告用バナーが必要なマーケター
デザイン作業を兼任する中小企業の作業者

バナー制作の基本と手順！初心者が実践したい5つステップ

バナー制作をするときの流れを5つのステップで紹介。バナー制作をしたいけど、何から始めたらいいの？手順を教えて！みんなはどうやって作ってるの？という初心者の方は是非ご覧ください。

ビジネス系バナーとは？
ビジネス広告系バナーデザインのパターンとコツ
ビジネス系バナーのデザインを調べてわかったこととコツ

ビジネス系バナーとは？

ビジネス広告系バナーとは、企業や団体がWebサイトやSNSなどで利用する、主にWebサービス、システム、ツール、アプリなどを告知・宣伝するためのバナー広告としておきます。

ターゲット層としては、ビジネスパーソンや企業（法人）関係者など、BtoBビジネスに関係を持つ人々を想定します。

▼ビジネス広告系バナーデザインの主な特徴は以下の通りです。

ターゲット	・ビジネスパーソンや企業（法人）関係者・ビジネスに関心を持つ人々・BtoB
目的	・認知度向上・顧客獲得（クリック率・CVを増やす）・リード獲得・売上向上
表現方法	・わかりやすく簡潔な文章、グラフや図表・シンプルで洗練されたもの
掲載場所	・Webサイト・SNS ・メールマガジン・広告など
特徴	・視覚的な訴求をするだけでなく、具体的な行動を促す・派手な色使いや奇抜なデザインは避け、信頼感を与えるデザインが好ましい

ビジネス系バナーデザインの主な特徴

ビジネス広告系バナーデザインのパターンとコツ

この項目では、ビジネス広告系バナーデザインを５０点ほど集めて分かったことや特徴をまとめます。

1.よく使われる色や配色の組み合わせ

ビジネス広告系のバナーデザインの配色パターンとして、以下の2つが多い様に感じます。

メインカラーと類似色のみのデザイン
ベースカラー＋メインカラー＋アクセントカラー

メインカラーと類似色のみのデザインは、商品やビジュアルを際立たせたい場合に効果的です。ベースカラー＋メインカラー＋アクセントカラーは、テキストによる説明やCTAボタンなどを配置したい場合に適しています。

続いて、どんな色が使われているか調べてみました。

ベースカラー（背景色）

よく使われている色：白や薄いグレー

ベースカラーは、最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立て、コンテンツや内容を読みやすくするための役割があります。

ポイント

バナーデザインでは、ベースカラーは必ずしも必要ではありません。情報量が少ない、またはデザイン要素が少ないバナーの場合、ベースカラーなしでも十分です。

メインカラー

よく使われている色：青、オレンジ、緑

メインカラーは、それぞれのサービスのイメージや特徴を表す色として選ばれています。また、青色は明るい青ではなく、少し落ち着いた深い青がよく使われています。

アクセントカラー

よく使われている色：赤や黄色、オレンジ

アクセントカラーは、ボタンや見出しなど、注目させたい部分に使われており、デザインにメリハリを与えています。

サービス内容に合わせた色の選び方

画像から各サービスがどのようなイメージを伝えたいのか、どのようなターゲット層にアピールしたいのかを読み取ることができます。

サービスの信頼感や誠実さを伝えたい → 青や紺
親しみやすいサービス → オレンジ
難しくない、簡単、安心感 → 緑

色の選び方は、デザインの良し悪しだけではなく広告のクリック率やコンバージョン率にも影響を与える要素なので、何となくで選ぶのではなく成功事例から色を真似てみましょう。

2.よく使われるフォント

ビジネス広告バナーでよく使われている『フォント』は以下の通りでした。（今回はゴシック体フォントに絞っています）

▼和文フォント

フォント名	Win標準搭載	Mac標準搭載	無料/有料	Adobe Fonts収録
ヒラギノゴシック	×	○	有料	△
モリサワ新ゴ	×	×	有料	△
モリサワゴシックMB101	×	×	有料	△
源ノ角ゴシック	×	×	無料	○
游ゴシック	○	○	有料（ライセンス料）	○
Noto Sans JP	×	×	無料	○
メイリオ	○	×	無料	×

ビジネス系バナー製作でおすすめのゴシック体フォントと収録状況

Photoshopを利用してバナー制作をするのであれば、Adobe Fontsが追加できるはずです。ほとんどのフォントが追加できるのでAdobe Fontsの利用がおすすめです。しかし、Adobe Fontsで提供するフォントの種類や数は変動します。一部のフォントは提供が終了し、新しいフォントが追加されることもあります。

▼欧文フォント

フォント名	Win標準搭載	Mac標準搭載	無料/有料	Adobe Fonts収録
Bebas Neue	×	×	無料	○
DIN	×	×	有料	○
Futura	×	×	有料	○
Gotham	×	×	有料	○
Montserrat	×	×	無料	○
Poppins	×	×	無料	○
Raleway	×	×	無料	○
Roboto	×	×	無料	○
Arvo Bold	×	×	無料	○

ビジネス系バナー製作でおすすめのサンセリフ体フォントと収録状況

Bebas Neue、DIN、Futura、Gothamは、Adobe Fontsで提供されていますが、一部のウェイト（太さ）やスタイルは有料プランでのみ利用可能です。 RobotoはGoogle Fontsで提供されている無料フォントです。 Arvo BoldはGoogle Fontsで提供されている無料フォントで、太字のウェイトが特徴です。

Adobe Fontsは無料登録でも一部のフォントが利用可能です。詳しくは以下の記事で解説しています。