【初心者向け】バナーの作成方法は？サイズや作り方、デザインの参考になるおすすめサイト6選

広報・販促、Webサイト関連、マーケティングといった領域に従事するビジネスパーソンであれば、日常的に「バナー」という言葉に触れていると思います。Webで使われる広告用の画像といったような漠然としたイメージは持っていると思いますが、その定義を説明できるかというと曖昧で不安という方も多いのではないでしょうか。また、上記に挙げた職種の方は、デザイナーにバナー制作を依頼する予算がない時に自分でバナーを作成しなければいけない状況もあるかもしれません。そこで本記事では、バナーの定義にはじまり、作成方法やおすすめのサービスなどを紹介します。

この記事の読者におすすめのサービス

Canva（キャンバ）

Canva, Inc.

Canvaは、オンラインで使えるグラフィックデザインツールです。ブラウザがあればいつでもデザインが可能で、スマートフォンやタブレットなどのモバイル端末のアプリにも対応してます。SNSのカバー写真や投稿写真のデザイン、広告バナーのデザイン、ロゴ制作、ポスター作成など利用ケースに応じた様々なテンプレートが用意されています。

サイトにアクセスする詳細を見る

バナーとは

Webにおけるバナーの意味

バナー（Banner）とは、直訳すると「旗、横断幕、（広告・宣伝用などの）垂れ幕、のぼり」といった意味になります。商店の店頭に置かれた、目玉商品やキャンペーン、イベントといった告知などに使われているのぼりや、学校の壁面に「◯◯部全国大会優勝」といった横断幕や垂れ幕を見ることがありますが、これらがもともとの意味のバナーになります。Webでいうバナーとは、下の画像のようにウェブサイト上にあるバナーのことを指します。

Webのバナーは、一般的には画像をクリックしてもらうことでリンク先に誘導することが目的です。バナーには単一の画像だけでなく複数の画像が使われたスライドショーや、動画が使われる場合もあります。

バナー広告の役割

バナーはユーザーに閲覧して欲しいページやコンテンツについて告知・誘導する目的にも使われますが、一般的にWebマーケティングで使われるバナーとは「バナー広告」を指していることが多いです。インターネット広告には、ディスプレイ広告、リスティング広告、ネイティブ広告などがありますが、バナー広告はディスプレイ広告のもっとも一般的な形式になります。バナー広告の多くは、ユーザーの好みや属性・購入履歴を反映して表示されるパーソナライズド広告です。リマーケティング（リターゲティング）機能やコンテンツターゲティング機能などを利用して、商品やサービスに興味を持っていたり、ペルソナとなる顧客像に近い属性を持つユーザーに対してピンポイントで広告を配信することが可能になっています。

バナーを作成するときのサイズは？

自社のサイト内で使用するバナーであればサイズやデザインに制限はありません。一方で、外部のサイトに掲載してもらう場合は、各サイトのルールに従ってバナー画像を作成することが多いです。また、配信する広告サービスやSNSでは、バナー画像のサイズやデザインが細かく指定されていますので、それらの規定に沿ったバナー制作を行う必要があります。以下にSNSや広告サービス別のサイズについて解説します。

Facebook

Facebook広告には画像広告、動画広告、カルーセル広告、コレクション広告の4つの形式があります。それぞれに、サイズ、アスペクト比（縦横比）、文字数などが指定されています。facebookで代表的な静止画バナーのアスペクト比は1.91:1～1:1です。以下のサイトで詳細を確認できますので、これらに用いるバナーを作成する場合はチェックしておきましょう。

Facebook for Business（Facebook広告ガイド）

YouTube

YouTubeには、YouTubeチャンネルアート（YouTube用のヘッダー画像）というバナー広告があります。このチャンネルアートでは最小で2048×1152pxの画像解像度（画像の大きさ）が推奨されています。以前は推奨サイズが2560×1440pxとなっていましたが、アスペクト比は変わっていません。詳細は以下のガイドラインで確認できます。

YouTubeヘルプ（バナー画像のガイドライン）

Google Adsense

Google Adsenseのバナーサイズには、レクタングル（中）、レクタングル（大）、ビックバナー、ハーフページ、モバイルバナーなどの種類があります。また、サポートされているその他の広告サイズや地域限定の広告サイズについても、推奨されるバナーサイズが細かく設定されています。詳細は以下のガイドで確認できます。

Google Adsence（広告サイズに関するガイド）

バナーの作成方法・作り方は？

バナーを作成するには、いくつかの方法がありますので確認してみましょう。

1．PhotoshopやIllustratorなどのデザインツールを活用して作成する

バナー作成方法には、まずPhotoshopやIllustratorに代表されるようなデザインツールを活用して作成する方法があります。これらのデザインツールは、操作方法の慣れや専門的なスキルが必要になってきます。Adobeのサービスを導入している企業は、インハウスデザイナーが在籍していることが多いと思いますので、これらのツールでの制作物はデザイナーに行ってもらうことが通常かと思います。また、Adobeのサービスを利用していない企業では、サブスクリプションに加入してこれらのデザインツールを利用するよりも、デザイナーに外注することが一般的です。ノンデザイナーでも利用可能なツールですがフォントなども揃えなければいけませんので、クオリティを追求したい場合は、デザイナーに発注してPhotoshopやIllustratorでバナーを作成してもらう方が良いでしょう。

PSDとは？Photoshopなしでファイルを開く3つの方法【おすすめツール5選】

業務やプライベートで、PSD形式のファイルを入手して、困ったことはありませんか？PSDは、通常Photoshopのみで開くことができるファイルです。Photoshopは画像や写真の編集に適したツールです。しかし、利用するためにはライセンスの[…]

2．PowerPointやKeynoteを活用して作成する

PowerPointやKeynoteといったプレゼンテーションツールを用いてバナーを作成することもできます。これらのツールを利用するのは、デザイナーに依頼するほどコストがかけられないけれども、社内でバナーを自製したいといったケースでの活用が想定できます。ノンデザイナーでも近接、整列、反復、コントラストといったデザインの基本原則を押さえれば、十分にバナーを作成することが可能ですので、状況によってこれらのツールの利用も考えてみましょう。

3．テンプレートが活用できるサイトで作成する

プレゼンテーションツールでのバナー制作にもそれなりのデザインセンスが必要です。全くデザインセンスに自信がないといった場合は、テンプレートが活用できるサイトを利用してみましょう。テキストや画像を変更するだけでバナーを作成できるので便利です。バナー制作には、それほどオリジナリティは要求されないことが多いので、コストを削減したい場合もこれらのサイトを利用してみましょう。また、デザイナーに発注したり自分で制作するには時間もかかります。明日すぐにバナーが必要といった場合も、テンプレートを使ったバナー制作は役立つでしょう。後述のサイトで紹介するCanvaなどが最近注目されています。

バナー作成をするときにデザインの参考になるサイト8選

ここからは、バナーを作成する時にデザインの参考になるサイト6選を紹介します。

1. Canva

Canvaはテンプレート等も用いながらノンデザイナーでも直感的にデザイン制作物を制作できるWebサービスです。無料で利用することも可能です。

Canva（キャンバ）

Canva, Inc.

サイトにアクセスする詳細を見る

2. Pinterest

PinterstはWebサイト上にある画像をブックマークして一覧表示できるWebサービスです。バナー制作専用のサービスではありませんが、「バナー」や「Banner」といったキーワードで検索をかけると、様々なバナー画像を見つけることができます。世界的に使われているサービスなので、海外のバナー広告などを参考にしたい場合もおすすめのサービスです。気になったバナー画像をピン留めしておけば、参考にしたいバナー画像をジャンル別に分けて閲覧するといったことも可能です。

メモ

Webサイト上にある画像をブックマークして一覧表示できるWebサービス
キーワードで検索をかけると、様々なバナー画像を見つけることが可能
海外のバナー広告などを参考にしたい場合にもおすすめのサイト

3．Banner Matome

Banner Matomeはバナー広告のサンプルをまとめた専門サイトです。バナーをサイズ別での検索、「エステ」「コスメ化粧品」「サプリ」「旅行」「不動産」「仕事・転職」「出会い・結婚」「学校・学習・教育」「家電・IT・機械」「ゲーム」「アパレル・ネイル」「自動車・車」といった業種別での検索、「テキスト風」「立体風」「手書き風」「イラスト」といった表現別、「かわいい」「かっこいい」といったデザインイメージ別での検索などが可能です。

メモ

バナー広告のサンプルをまとめた専門サイト
バナーをサイズ別、業種別で検索可能
「かわいい」「かっこいい」といったデザインイメージ別の検索も可能

4．Fotor

Fotorはオンライン画像編集・デザイン・コラージュのツールを提供するサイトです。基本機能は無料で、有料プランもあります。

デザインツールでは、さまざまなデザインテンプレートの中からお気に入りのものを選んで画像や文字、ステッカーなどを変えたりカスタマイズできます。リサイズ機能もあり、ワンクリックで指定のサイズにサイズ変更できます。また、バナー制作に使用する画像を簡単に補正、色調整、切り抜きがなどの画像編集もできます。

メモ

バナーのテンプレートから簡単にカスタマイズできる
ダウンロード不要でオンラインで無料から使える
切り抜きなどの画像編集ができる

5．retorobanner

retorobannerはバナー広告のサンプルをまとめたサイトです。サイズ別、カラー別、業種別、テイスト別といった分類で検索可能です。シンプルなサイトなので検索も非常に簡単です。

メモ

バナー広告のサンプルをまとめたサイトです。
サイズ別、カラー別、業種別、テイスト別の検索が可能
シンプルなサイトなので検索も非常に簡単

6．バナーデザインアーカイブ

バナーデザインアーカイブはインターネット上にある様々なバナーのアーカイブを閲覧できるサイトです。サイズ別、色別、業種別に検索可能です。バナーをクリックすると、関連するサイズのバナーがランダム表示されます。スクロールするだけでバナーの一覧の続きが表示されるので、ページをめくる必要がないのも便利です。

メモ

インターネット上にある様々なバナーのアーカイブを閲覧できるサイト
サイズ別、色別、業種別に検索可能
関連するサイズのバナーがランダム表示される

7．banner gallery

banner galleryはバナー広告のサンプルをまとめたギャラリーサイトです。約3000件のバナー広告が掲載されています。サイズ別、色別、業種別で検索可能です。

メモ

バナー広告のサンプルをまとめたギャラリーサイト
約3,000件のバナー広告を掲載
サイズ別、色別、業種別で検索可能

8．FACEBOOK広告集めました。

FACEBOOK広告集めました。はタイトルの通り、Facebookで使われているバナー広告をまとめたサイトです。アドスクエア株式会社というというWebマーケティング・コンサルティング事業を行なっている企業が運営しています。業種別のカテゴリーで検索可能です。また「インスタ広告集めました。」というサイトも運営していますので、Facebookのバナー広告とインスタ広告の違いを比較するのにも便利なサイトです。

メモ

Facebookで使われているバナー広告をまとめたサイト
Webマーケティング・コンサルティング事業を行なっている企業が運営
業種別のカテゴリーで検索可能

まとめ：バナーを作成する目的を考え、コンバージョンされるバナーを作成しよう

上記で紹介したバナー事例をまとめたサイトを利用すれば、自分でバナーを作成する際にも参考になりますし、デザイナーにバナー制作を依頼するときもイメージを伝えやすいでしょう。バナーのクオリティによってクリック率などが大きく変わってきます。大切なのは事前に目的や用途をしっかり考えた上で、コンバージョンを得られるような最適なバナーを作成することです。本記事を参考にして効果的なバナーの作成にチャレンジしてみましょう。