バナーとは?基礎知識と知っておきたい便利サイト

サイトを開くと、広告や同サイト上のリンクが張ってあるバナーをよく見かけます。

このバナーを上手く活用すれば、より多くのユーザーの興味を引くことができ、アクセス数を増やすことができます。

今回は、バナーについての基礎知識の解説と、バナー作成のための便利なサイトを紹介していきます。

バナーとは

バナーという単語を日本語で訳すと、「旗」や「のぼり」という意味になります。

Webサイト上でのバナーの役割には、主に「サイト用バナー」と「広告用バナー」の2つがあります。

サイト用バナー

サイト用バナーには、サイトをわかりやすくしたり、ユーザーが求めている情報にたどり着く時間を短くするという役割があります。

サイトの道標となるため、見やすさやわかりやすさ、ユーザーがどのような情報を求めてるか知ることが重要視されます。

広告用バナー

バナーデザインアーカイブ|バナーのデザインをまとめてチェック!

2016-08-16_15h59_15

上記のようなバナーが、企業や製品を紹介する広告用バナーです。広告用バナーは、ユーザーを自サイトに呼び込むために、他社の広告バナーよりも目立つ必要があります。

また、広告用バナーは、出稿する際にサイズを考慮する必要があります。

バナーのサイズ

バナーにのせる情報が色々あるように、バナーのサイズも色々とあります。自サイト内のバナーであればサイズは自由に決めることができますが、他サイトやバナー広告として配信する場合はあらかじめサイズが決められていることほとんどです。例えばFacebookの広告は広告を掲載する場所によりますが、1200 x 444ピクセルなどの基準があります。

バナー広告の出稿には、AdWordsを使うことが多いのでAdWordsの広告サイズ一覧も参考にしてみてください。

また、バナーの国際標準を決めているIAB(Interactive Advertising Bureau)というアメリカの団体もあります。いくつか基準があるので、詳しく知りたい方はIABのガイドライン(英語)をご覧ください。

バナーの作成方法

バナーの作成方法には、自分で作成する方法と、サービスを利用して作成する方法の2つがあります。

自分で作成する方法

自分でバナーを作成するには、PhotoshopやGIMPなどの画像編集ソフトを使用する必要があります。

バナーを作成するためのPhotoshopの基本的な使い方については、以下のサイトを参考にしてみてください。

Photoshopの「切り抜き」ツールで画像をトリミングする方法

Photoshopで簡単に画像を合成する方法

バナーを作成する際に役立つ、フリー素材がまとまっているサイトもあります。

WEBデザイナーが作った超シンプル素材集

サービスを利用して作成する方法

自分でバナーを作るのではなく、サービスを利用して作成を委託するという方法もあります。画像加工ソフトを使用した編集などをする必要がないため、初心者でも手軽にバナーを作成することができます。

バナー工房

こちらのサイトでは、バナーのサイズや色、カテゴリを自分で選んでバナーを作成することができます。キーワードを検索して、自分が作りたいバナーに関連するイラストなどを見つけることが可能です。

canva

サイズを設定した後、何種類ものグラフィックデザインテンプレートからデザインを選ぶことができます。

英語サイトなので、こちらの使い方の説明も一緒に参照してみてください。

読んでおくと参考になるサイト

ディレクターなら知っておきたい「バナー広告制作の基礎知識」

ディレクター向けに書かれた記事ですが、バナー広告の役割・バナーにのせる情報の設計についてや、制作のテクニックなど満遍なく網羅されています。バナーについて学ぶのにとても便利な記事です。

100種以上の自社広告運用でわかった!バナー広告クリエイティブ4つの基本 

上記の記事と同サイトですが、こちらもとても参考になります。効果の高いバナーデザインのテクニックが紹介されています。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて