Webサイトで「読者の目を引きたい」「キャンペーンページへのクリック率を高めたい」というときに役立つツールが「バナー」です。

ただ、意識したことがないと「バナーって何だろう?」「どうやって作ればいいんだろう」とピンと来ない方もいらっしゃると思います。

この記事では、バナーを作るときに大事なことや初心者でも簡単にバナーが作れる便利なサービスなどをご紹介します。バナーについての理解を深めて、ぜひお仕事で活用してください!

Webサイトで見かける「バナー」とは?

バナーとは、写真やイラスト・文字でつくられた画像のことで、バナーをクリックしてもらうことで、他のサイトに遷移させたり、同じサイト内の別のページに遷移させたりするものです。

バナーを直訳すると、「のぼり」や「横断幕」のこと。実店舗でいえば「店先にあるのぼり」だったり「店内のポップ」のようなモノです。Webサイトの場合、サイドバー広告などがそれにあたります。

実際に以下のような画像を見たことがあると思います。

記事バナーの例
▲記事バナーの例

広告バナーの例
▲広告バナーの例

「バナー」は、読者に情報を画像として提供でき、さらにクリックを誘発する効果が期待できると言われています。文章に比べて視覚的にも印象に残りやすいため、アクセスアップにも役立つでしょう。サイトを運営していく上での「必須アイテム」といえます。

「バナー」のサイズとファイル形式について

ただ、一言に「バナー」といっても、いろいろなサイズと種類があります。どういった特徴があるのかおさえておきましょう。

サイズはGoogle広告を基準に覚えておく

バナーのサイズは自由に作れますが、Googleに広告を出すといった場合には、決められたサイズで作ることが求められます。

そして、そのサイズには国際標準規格があり、アメリカのインターネット広告業界団体「IAB(インタラクティブ・アドバタイジング・ビューロー)」によって規定されています。

バナーのサイズ一覧

①Rectangles and Pop-Ups

レクタングルとポップアップといって、記事の下やサイドバーによく配置されるタイプのバナーです。

  • 横300px × 縦250px(Medium Rectangle:ミディアムレクタングル)
  • 横250px × 縦250px(Square Pop-Up:スクエアポップアップ)
  • 横240px × 縦400px(Vertical Rectangle:バーティカルポップアップ)
  • 横336px × 縦280px(Large Rectangle:ラージレクタングル)
  • 横180px × 縦150px(Rectangle:レクタングル)
  • 横300px × 縦100px(3:1 Rectangle:3:1レクタングル)
  • 横720px × 縦300px(Pop-Under:ポップアンダー)

②Banners and Buttons

こちらは横長やボタン型の小型バナー。ヘッダー記事中の広告に使われることが多いです。

  • 横:468px × 縦:60px(Full Banner:フルバナー)
  • 横:234px × 縦:60px(Half Banner:ハーフバナー)
  • 横: 88px  × 縦:31px(Micro Bar:ミクロバナー)
  • 横:120px × 縦:90px(Button 1:ボタン 1)
  • 横:120px × 縦:60px(Button 2:ボタン 2)
  • 横:120px × 縦:240px(Vertical Banner:バーティカルバナー)
  • 横:125px × 縦:125px(Square Button:スクエアボタン)
  • 横:728px × 縦:90px(Leaderboard:リーダーボード)

③Skyscrapers

縦型のバナーのことです。サイトのサイドバーで使われます。

  • 横:160px × 縦:600px(Wide Skyscraper:ワイドスカイスクレイパー)
  • 横:120px × 縦:600px(Skyscraper:スカイスクレイパー)
  • 横:300px × 縦:600px(Half Page Ad:ハーフページ広告)

高い効果が見込めるバナーサイズ

種類がたくさんあるのでわかりづらいですが、Googleが「高い効果が見込めるバナーサイズ」というのを紹介してくれています。

初めての方は、以下のサイズから作りはじめるのがオススメです。どの端末に向いているかもまとめたので、参考にしてください。

サイズ
(縦×横)
名前 パソコン
タブレット
スマホ
728×90 ビッグバナー
336×280 レクタングル(大)
300×250 レクタングル(中)
300×50 モバイルバナー
160×600 ワイド スカイスクレイパー

以下は実際のイメージです。

ビッグバナー(サイズイメージ)

レクタングル大(サイズイメージ)

レクタングル小(サイズイメージ)

モバイルバナー(サイズイメージ)

ワイドスカイスクレイパー(サイズイメージ)

サポートされている広告サイズ – Google アド マネージャー ヘルプ

ファイル形式は「JPEG」「PNG」「GIF」が一般的

バナーのファイル形式は「JPEG」「PNG」「GIF」が一般的です。

「JPEG」は1,600万色以上の表現が可能なため、写真を使う素材にオススメです。

「PNG」は画質が高い反面、最大256色までしか使えません。そのためイラストを使ったバナーに向いています。

「GIF」はアニメーション表現が可能です。画像に動きのあるバナーを作りたいときに向いています。

使用する素材や目的によってうまく使い分けていきましょう。

初めてバナーを作るときに大事な3つのコツ

次に初めてバナーを作るときに知っておきたいコツを3つ紹介します。

コツ① バナーの使用目的をハッキリさせておく

実際に作りはじめる前に「バナーの使用目的」をはっきりさせておきましょう。その目的によって、適切なサイズというのは違ってくるからです。

例えば「学生アルバイト募集ページ用のバナーを作りたい」と考えるなら、学生の多くが利用しているスマホ向けに作ることをおすすめします。
スマホで見やすい「レクタングル(小)」や「モバイルバナー」にしたほうがいいでしょう。

逆に「法人向けに広告バナーを設置したい」となったら、会社員が仕事中によく利用しているPC向けに作るほうがいいでしょう。「サイドバーに設置できる『ワイドスクレイパー』にしよう」と考えることができます。

バナーが見られるのがPCなのかスマホなのか、作成するサイズも含めてイメージしておきましょう。

コツ② 「一目」で伝わるように文字数はシンプルに

バナーを作る際には、伝えるメッセージをできる限り少ない文字数で考えておくことも大事です。バナーはあくまで画像として認識されるので、以下が重要になります。

  • 一目でわかる情報量にする
  • 要素に強弱をつける

また、Googleの広告基準でもテキストの量は画像の20%以内とされています。目安として全角15文字程度に抑えておくといいでしょう。

コツ③ いくつか作って効果を測定してみる

3つ目は、作ったあとのコツです。作るときはいくつかパターンを作成し、そのあとは定期的に入れ替え、効果を測定してみるのがオススメです。

バナーのデザインに「正解」はなく、効果の程度も実際に作ってみないとわからないものです。「1つだけ作ればいいや」とは考えずに、いくつか作って効果の高いものにしていくようにしましょう。

初心者でも手軽にバナーが作れるサービス

バナー作成は慣れていないとイチから作るのに、時間がかかりますが、ネット上には、サイズの指定やファイル形式の変換など自動でやってくれるツールが存在します。
ここでは初心者でも簡単にバナーが作れる定番サービスを紹介します。

テンプレートが豊富でおしゃれなバナー作れる「Canva」

まずオススメしたいのが「Canva」というサービスです。こちらのサービスはテンプレートが非常に豊富。

作りたいバナーのイメージを検索して、そこから簡単にバナーを作ることができます。

おしゃれなバナーを制作できるCanva

作りたいサイズを数値で指定できる「バナー工房」

もう1つオススメなのが「バナー工房」です。

こちらは「サイズ」を数値で指定可能。作りたいサイズが決まっている場合は、より簡単にバナーの作成ができます。

手軽にシンプルなバナーを作れる「バナー工房」

手軽にシンプルなバナーを作れる「バナー工房」

バナー作成はアクセスアップに覚えておきたいスキル!

以上、バナーについての紹介と作るときの大事なコツを紹介してきました。

バナーは専門の業者に依頼することもできますが、紹介したツールを使えば自分で簡単に作ることができます。サイトの魅力アップに非常に有効なスキルですし、自分で作るとサイトへの愛着も湧きます。

ぜひこの機会にバナーを自作してみてください!