バナーを作る前に知っておきたいポイント3選

　平均読み取り時間：6分

こんにちは！EveryFineです！

ホームページを運用している方の中にはバナーを設置している方がほとんどだと思います。

バナーをこれから作成、または制作依頼される方のご参考となれば幸いです。

---

1．そもそもバナーとは？

お店の前に立てられている「宣伝のぼり」や「宣伝看板」をイメージしていただくとわかりやすいと思います。

ホームページ上でも「宣伝のぼり」や「宣伝看板」と同じで、ホームページを宣伝するために目立つように貼られた画像のことを指します。

また、画像にリンクが貼られていて、クリックするとバナーの内容のホームページへ移動する仕組みになっています。

様々なメディア内でバナー広告の設置スペースが準備されていることも多く、インターネットを利用する方は日常的に目にしています。

 

※画像の右側、赤枠部分が参照ページのバナー広告の設置箇所になります

---

2．バナーにはどんなサイズがある？

バナーを使う場所は、大きく2つに分けられます。

• 自分のホームページ
• 他人のホームページ（広告出稿）

自分のホームページに載せるバナーであれば、サイズやデザインは自由に決めることができます。

しかし、広告出稿などで他人のホームページに掲載してもらう場合は、バナーのサイズに制限があります。

しかし、自分のホームページに載せるバナーだからサイズやデザインを自由に決めれたとしても、Googleが提供している広告配信プラットフォームが「高い効果が見込める広告サイズ」を定めていますので、そちらに従うほうがバナーとしての効果が見込めます。

（1）おすすめのバナーサイズ

300×250

テキストコンテンツの中や、記事の末尾に組み込むと効果的です。

 

ホームページ設置イメージ

 

336×280

テキストコンテンツの中や、記事の末尾に組み込むと効果的です。

 

ホームページ設置イメージ

 

728×90

メインコンテンツの上部やフォーラムホームページに配置すると効果的です。

 

ホームページ設置イメージ

 

300×600

インプレッション数が増加しているサイズで、ブランド認知度の向上を目的に使われることが多いサイズです。

 

ホームページ設置イメージ

 

その他にも、Googleが提供している広告配信プラットフォームが
「高い効果が見込める広告サイズ」は以下となります、ご参考ください。

高い効果が見込める広告サイズ

横長サイズ

• 180×150
• 234×60
• 320×50
• 468×60
• 970×90
• 970×250

縦長サイズ

• 120×600
• 120×240
• 160×600
• 300×1050

スクエアサイズ

• 250×250
• 125×125

---

3．バナー作成のコツ

バナー作成は「簡単にできるだろう」と思いがちですが、情報量やレイアウト、配色などを考えると手が止まってしまうケースが多くあります。

カラーやフォントなどの細かい部分から考え始めると、要素が抜けてしまったり、時間がかかったりします。

ポイントなのが、大枠を考えて詳細を詰めていくことです。

（1）ターゲットの行動を想像する

ターゲットを定めたら、ターゲットになりきって行動を想像してみましょう。

「どんなページを見ているときに、どんな気持ちでバナーを押すかな」と考えることで、要素の重要度が見えてきます。

例として就職又は転職活動をしている方をターゲットにします。

（例）ターゲット：就職または転職活動をしている方

• 就職先を探しているとき
• 自分の理念と一致しているかどうか
• この企業はどんな人を必要としているのか

（2）ラフを考える

構成要素がはっきりしたら、いよいよバナー作成に着手します。

①レイアウトを考える

今回は初心者にも使いやすいパターンで作成します

• サイズは【300×250】
• テキストと画像を分割して配置する（縦半分・横半分）
• ２つのテキストタイルを設置
• 画像は１枚

画像、テキストタイル２枚をどのように配置するかを
パズルのピースをはめるように構成していきます

②画像を決める

採用ページにふさわしい画像を決めます。

今回はスーツの男性にしました。

③テキスト１

「自分が成長するチャンスがここにある」
ここには代表取締役のメッセージを入れます。

ただこのままでは収まりが悪いので

「成長するチャンスがここにある」とし、あえて主語をなくしクリックする本人が主語であるかのようにみせます。

④テキスト２

「誰からも必要とされる会社になる」
テキスト2には経営理念を入れます。

このままでは採用のバナーだと直感的ではないので採用よりにテキストを編集します。

「誰からも必要とされる　そんな仲間を募集」
仲間を募集している事を付け加える事で採用ページのバナーだと認知させます。

（3）テキストのフォントを考える

テキスト１：教科書体

「はね」や「押さえ」「とめ」などがしっかりした教科書体を使用します。

代表取締役のメッセージにはインパクトと堅実さを全面に押し出すためです。

テキスト２：明朝体

これは採用のバナーである事を認知させるため標準的なフォントである明朝体を使用しました。

（4）カラーを決める

迷った際には、メインビジュアルに使われているカラーや、遷移先のホームページのカラーを使いましょう。

遷移先のイメージと異なる配色にすると、ユーザーが戸惑って離脱してしまうので注意が必要です。

【ホームページで使う色を考える！】複数色の使い方をご紹介！

https://everyfine.e-tenki.co.jp/tips/12303

後はそれぞれフォントの大きさや画像のトリミングを行い、パズルのように【300×250】の枠にはめていくだけです

今回パズルのピースは下記ようになります。

• 画像【150×250】
• テキストタイル１【150×125】
• テキストタイル２【150×125】

完成したバナー

関連記事

よりクリックされるバナーのポイント①　～位置・サイズ編～

https://everyfine.e-tenki.co.jp/tips/10364/

ホームページで、よりクリックされるバナーのポイント②～色編～

https://everyfine.e-tenki.co.jp/tips/11158/

---

4．まとめ

今回バナーを作成のコツで用いたサンプルあくまで１例になります。

バナーのデザインの可能性は無限大です。

ですが、作成するにあたり絶対に考えないといけない事は、

• サイズ
• ターゲット
• 構成

この３つになります。

もしファインズにバナーの作成を依頼する際も、この3つを明確に伝えていただけますと幸いです。

お問い合わせはこちら

03-5459-4073 　　　　　　　　 fines-help@e-tenki.co.jp

関連資料・記事