【SEOクイズ】「出口」と検索するとヤフーが1位なぜか?

グーグル広告(ディスプレイ)ウェブサイトのバナーを作ってみよう

ウェブ屋コラム

バナーとは

バナー広告とはディスプレイ広告の種類のことで、画像のみの広告のことです。ホームページを宣伝するために作成する小さな画像で、店頭にある「のぼり」のような役割です。画像をクリックするとホームページにジャンプする仕組みになっています。インターネットを見ているとよく目にするかと思います。

バナー広告を掲載するには

GoogleやYahoo!と連携しているサイトやアプリの広告枠にバナー画像を表示させることが一般的です。Googleは「GDN」、Yahoo!は「YDA」を使用してバナー広告を掲載(配信)します。

GDN(Google Display Network

Googleの広告のことで、Google Adwordsで出稿でき、Googleのディスプレイ ネットワークに広告が表示されます。ディスプレイ ネットワークとは、広告を掲載できる 200 万以上のウェブサイトや動画、アプリの総称です。

Google広告ヘルプ

YDA(Yahoo Display Ads)

Yahoo!の広告のことで、Yahoo!プロモーション広告で出稿でき、Yahoo!のネットワークに広告が表示されます。Yahoo!のネットワークは、Yahoo!のサービスサイト(Yahoo!Japan、Yahoo!天気、Yahoo!知恵袋など)や提携パートナーサイトで構成されています。

Yahoo!広告ヘルプ

作成する画像のサイズ

とにかく早く掲載したいとき

タイプサイズ拡張子容量
レスポンシブ広告1200×628JPG,PNG,GIF5120KB以下
レスポンシブ広告300×300JPG,PNG,GIF5120KB以下
汎用性が高い300×250JPG,PNG,GIF150KB以下
レスポンシブ広告

広告枠に合わせて広告のサイズ、表示形式、フォーマットが自動調整される広告。自動調整されるため、特定のバナーの配信量を調整することができないので、バナーごとに調整をかけたい場合は向かないが、サイズの異なるバナーを複数作成しなくてもよいので、バナー作成の時間を短縮することができる。

汎用性の高いサイズ

300×250は、GDN・YDAどちらも使用することができ、スマートフォンとPCのどちらにも配信できるサイズなので、取り急ぎ作成して配信を開始したいときに、最適なサイズといえます。

何種類か比較しながら運用したいとき

タイプサイズ拡張子容量GDNYDA
PC&SP300×250JPG,PNG,GIF150KB以下
PC&SP336×280JPG,PNG,GIF150KB以下
PC728×90JPG,PNG,GIF150KB以下
PC160×600JPG,PNG,GIF150KB以下
PC468×60JPG,PNG,GIF150KB以下
SP320×50JPG,PNG,GIF150KB以下
SP320×100JPG,PNG,GIF150KB以下

GDN、YDAそれぞれの広告サイズを合わせると25種類もあり、全サイズのバナー画像を作成するのは大変ですので、選抜するとしたらここにあげた7種類がおすすめとされています。ここにあげられたほとんどがGDN・YDA共通のサイズとなっていますので、配信の検証には最適といえます。

レスポンシブ広告のサイズ

画像横長(1.91:1)1200×6285120KB
画像スクエア1200×12005120KB
ロゴ横長(4:1)1200×3005120KB
ロゴスクエア1200×12005120KB

【バナーにテキストを設定する】広告内のテキスト文字数について

GDN、YDA、ともに、文字数について規定があります。

GDNYDA
長い広告見出し(1個のみ)全角 15 文字、半角 30 文字以下タイトル(必須)15文字以内
短い広告見出し(最大5個)全角 45 文字、半角 90 文字以下説明文1(必須)19文字以内
説明文(最大5個)全角 45 文字、半角 90 文字以下説明文2(任意)19文字以内
リンク先URL(必須)1024文字以内
表示URL(必須)29文字以内
会社名半角25文字以下、全角 12文字以下主体者表記20文字以内

バナー作成のルールを守る

前項の「画像サイズ」もルールですが、内容にも規定があります。ルールが守られていないものは、掲載することができませんので、注意しましょう。

  • サイズと容量を守る
  • テキストの文字量を守る
  • ユーザーを不快にさせたり、誤認させる内容にしない

広告内容の規定

バナー広告にも規定があります。バナー画像を作成したら、Google広告またはYahoo!広告へ提出し、広告審査を受け、通過したものが配信することができるようになります。広告を作成する前に、規約に目を通しておくようにしましょう。

Google広告ポリシー

Yahoo!広告掲載基準

バナー広告の内容を考える

要素を洗い出す

デザインを始める前に、バナーに入れたい情報をピックアップします。

  • キャッチコピー
  • 紹介したい取扱業務
  • ロゴ
  • 画像(メインビジュアル)

ターゲット

バナーはターゲットに向けたもの。ターゲットを具体的に設定することで、バナーに入れる要素を整理しやすくなります。

どんなときにバナーをクリックするか考えてみる

「ホームページ作りたいな」「高いお金出して失敗したくないな」「どういうページがいいのか、わからなくて不安だな」「高いけど妥当なのかな」「ページ作るだけでこんなに高いの!?」「無料のテンプレートないのかな」…など、できる限り書き出してみましょう。それに応えるようなバナーができれば、とても良い方向になりそうです。

バナー広告のデザインを制作する

ラフを作成する

まずは手書きでレイアウトを考えましょう。下記の3パターンのいずれかで進めると考えやすいです。

  • テキスト部分と画像部分を分割し、縦半分または横半分にして配置する
  • 画像を大きく配置し、その上にテキストをのせる
  • キャッチコピーまたはブランド(ロゴ)を大きく配置する

どのアプリケーションで制作するか

Adobe illustrator、Adobe Photoshop、Microsoft PowerPoint、など、自分に合ったもので作る場合が多いと思います。入稿サイズ(サイズや容量)が正しければ、どのアプリケーションで作成しても問題ありません。

Canva(キャンバ)
Attention Required! | Cloudflare

ヘッダー、TwitterやFacebookのホーム画面など、様々なサイズのテンプレートが用意されていて、しかもデザインも豊富。オブジェクトや素材写真がたくさんあるので、組み合わせて作成することができます。また、フォントが充実していることも魅力。有料コンテンツですが、払う価値があります。30日間無料で使えるサービスがあるので、試してみることができる。

デザインの入れかた

テンプレートを使用して作ると簡単ですが、イチからすべて作る場合は、手書きで決めたラフにそって、モノクロでレイアウトを行っていくと、比較的早く作業が進みます。レイアウトが固まってから、色を入れたり、文字やボタンに装飾を入れていく手順を心がけましょう。

色を入れ、装飾をしていく段階で行き詰ったり、時間がかかりすぎていると感じたら、デザインをモノクロに戻してみるとよいかもしれません。

色合いについて

ホームページで使用している色合いを使うと、クリックしてホームページにとんだときに違和感がありません。ホームページが赤メインなのに対し、バナーが青だと、ユーザーは「ジャンプしたページ、ほんとうに合ってるかな?」と混乱してしまいます。

テキスト量について

できるだけ短く、簡潔にすると伝わりやすいとされています。書きたいことはいっぱいありますが、バナーは「のぼり」です。クリックした先のWebページで情報をしっかり伝え、広告の目的をユーザーが実行することを目指してバナー広告をするということを念頭に置いて、まずは長くなっても文章を作成してみて、そこから情報を整理し、簡潔なキャッチコピーになるようにするとよいかもしれません。

この記事のライター
行政書士 保田 多佳之

このサイトの管理者。2005年から現在までウェブの企画・制作・マーケティングまで幅広く経験しています。これからも仕事の中心はウェブの仕事です。2021年から行政書士専用のウェブ制作を行っています。

行政書士 保田 多佳之をフォローする

コメント