バナー制作の方法や料金相場、押したくなるバナー制作のコツ

バナー制作の方法

バナーを制作したいとなった時、制作方法として、まずは自社で作るか外注するかを選択することになります。コストの面を考えれば自社制作の方が有利ですが、デザインに関するノウハウがある人が社内にいないのであれば、制作は難航するでしょう。その点、外注の場合なら、デザイナーと話し合いの上、細かい部分までデザインの指定をすることができます。自身で手を動かす必要はありません。

とはいえ、この記事で紹介するデザインの基本とコツを把握していれば、自社制作でもある程度のクオリティのバナーを制作することができます。

自社制作の場合は何のツールを使えば良い？

ノウハウがない状態でバナーの自社制作をしたい場合、まず疑問になるのが「どんなツールを使えばよいか」でしょう。デザインをする上ではAdobeのIllustratorやPhotoshopをはじめ、様々なツールが世に出ています。そういったデザイナー御用達のツールを使えば、確かに細かいところまで調整し、こだわったバナーを制作することができるでしょう。しかし、上記のようなツールは操作が独特で、習得まで時間がかかるのも事実です。

また、ツール自体が有料なので、製作コストをなるべく下げたい場合は得策ではありません。そこで有用なのが、パソコンに元々インストールされていることが多いエクセルとペイントです。エクセルとペイントを併用することで、簡単にバナー制作をすることが可能になります。

大まかな制作方法は以下の通りです。

1. エクセルの文字ツールや背景色ツール、図形ツールなどを駆使してバナーを制作
2. エクセルをペイントに貼り付ける
3. トリミングなどの調整の後JPEGやPNG形式で書き出し

背景色と文字くらいのシンプルなものであれば、こうした方法でもバナーを制作することは可能です。ただ、当然デザイン用の専用ツールを使った方がクオリティの高いものが制作できます。自社制作するのであれば、予算感に合わせて使用するツールを選択しましょう。

バナー制作の流れ

バナー制作を外注する場合、一般的には完成までに6つのフローを踏まえます。

バナー制作のフローは以下の通りです。

1. 打ち合わせ
2. 見積の提示
3. デザイン作業着手
4. 初稿確認
5. 最終稿確認
6. 納品

それぞれ見ていきましょう。

1.打ち合わせ

外注先に連絡したらまず行うのが打ち合わせです。広告のターゲット層や最終的なコンバージョン（目的）、ブランドや商品のイメージ、素材の共有などを行います。

この段階でよく話し合い、バナーのデザインをなるべく詳細に固めることで、初稿が上がってきた段階でのイメージとの乖離（かいり）が起こりづらくなり、不要な工数を減らすことが可能です。

2.見積の提示

打ち合わせで決まった内容で見積書が提示されます。バナー制作の料金相場については後述しますが、バナーの形式やサイズ、バリエーションなどによって値段が変化し、GIF形式など動画になっているものやサイズが大きいものは割高です。

3.デザイン作業着手

見積について双方が了承したら、いよいよデザイン作業着手です。制作期間は企業によって異なりますが、多くの場合4~10日程度で初稿が提示されます。

4.初稿確認

提示された初稿を確認し、修正点があれば修正依頼をします。企業によっては修正回数が決まっている場合があるので注意しましょう。この段階でイメージと違うものが上がってきてしまうと、発注側、受注側双方に不要な工数が生じてしまいます。そうならないためにも、最初の打ち合わせは入念に行うようにしましょう。

5.最終稿確認

修正を踏まえて制作された最終稿を確認します。この段階で大まかなデザインに対する修正はないはずなので、レイアウトのズレや誤字脱字など、細かいミスがないかを入念にチェックしましょう。

6.納品

最終稿に問題がなければ納品されます。基本的には、納品後の修正は不可能または追加料金がかかる可能性があるので注意しましょう。

バナー制作の料金相場

バナー制作を外注する場合、どの程度の金額がかかるのでしょうか。一般的に、バナー制作を外注する場合の相場は1つ4,000円程度です。しかし、様々な要素によって金額が大きく上下します。

基本は大きさによって金額が変化する

バナーの金額を決める上で最も基本的な要素が、バナーの画像サイズです。現在、Webサイトの広告欄の大きさも多様化してきており、場合によってはモバイル版とPC版で2種類のサイズを用意しなければならない場合もあります。大きいサイズである分にはサイズ圧縮することが容易であるため、大きめのサイズで発注したほうが汎用性は高いのですが、サイズが大きくなると金額が割高になるため、難しい所です。

相場を見てみると、100×100px以下の小さな静止画のバナーが3,000円程度で、そこから段階的に約1,000円ずつ高くなっていきます。

静止画か否かで金額を大きく変化

バナーのサイズ以上に大きな金額変化があるのが、バナーの形式です。バナーは静止画のものが基本ですが、GIFやフラッシュを使った動画形式のものも存在しています。当然動画形式の方が目に付きやすいため、宣伝効果が高いのですが、工数が増えるため金額が割高です。

相場を見てみると、静止画とGIF画像で金額に3,000円~5,000円程度の差があり、フラッシュ形式だと1万円程度の差があります。バナー制作をする時は予算感と相談しつつ、宣伝効果を期待するなら動画形式にしてみても良いでしょう。

フラッシュ形式はリスクがある

バナー制作において最も高額なフラッシュ形式は、現在大きなリスクを孕んでます。というのも、Adobe Flashが2020年をもってサービスを終了すると発表したのです。それに合わせ、Google ChromeやFirefoxをはじめとした主要なブラウザは数年以内でのフラッシュのサポートを終了すると公表しています。

せっかく制作したフラッシュバナーが動かなくなってしまっては元も子もありません。動画バナーを制作したい場合はGIF形式で制作するか、しばらく様子を見た方が良いでしょう。

押したくなるバナーデザインのコツ

バナーは広告媒体の中でも、かなりサイズが小さい部類に入ります。そのため、盛り込みたい情報をすべて記載するのは大変難しいのです。そんなバナーの宣伝効果を上げたい場合、思わずクリックしたくなるようなデザインにする必要があります。ここからはバナーデザインをする上でのコツについて紹介していきます。

重要なのは「整然さ」と「強弱」

バナーのデザインにおいて重要になのが、「要素が整理されていること」と「要素の強弱」です。バナーには、すべての情報を伝えられるほどの空間はありません。そのため、整理と選別により、リンク先の内容を、より少ない情報で伝えることが求められます。よって、要素を整理することでバナーの情報を見やすくし、強弱を付けることで最も重要な情報に目が行きやすくすることが重要なのです。

そのようなバナーを制作するためには、以下のようなことが必要になります。

• バナーに記載する情報を決める
• 目立たせたい文字の優先順位を決める
• 文字の位置を揃える
• 文字に対比を付ける
• 文字に装飾を付ける
• 幾何学的な調整をする
• 多少の崩しを入れてみる

それぞれ見ていきましょう。

バナーに記載する情報を決める

まずはバナーに記載する情報を決めます。バナーには情報を文章で載せる程のスペースがありません。よって、基本的に箇条書きで印象的なコピーを載せていくことになります。リンク先が何のサイトなのか、売り込みポイントで優先順位が高いのは何かなどを考えつつ、バナーに記載する情報を入念に吟味しましょう。

目立たせたい文字の優先順位を決める

バナーに記載する情報を、最も重要なもの、最も重要な情報を補足するもの、重要度の低いものと、3段階程度で優先順位を付けましょう。優先順位が決まったら、最も重要な情報を際立たせるようなデザインにしていきます。

文字の位置を揃える

文字の先頭位置は、揃えたほうが落ち着きあるデザインになります。変則的に位置をあえてずらすのも一つの手法ですが、特に意味がないのであれば、位置を揃えておいたほうが落ち着きあるデザインになります。

文字に対比を付ける

文字サイズや文字色などを駆使して、最も重要な情報から順に強弱が付くように調整していきます。特に文字色は他の情報を明らかな差が付くため、積極的に変えていきましょう。

文字に装飾を付ける

フォントはバナーの雰囲気を形作る大切な要素です。例えば明朝体にすれば和風・シリアス・活字といったイメージになりますし、丸みを帯びたフォントなら穏やかさ・優しさ・かわいさなどを表現できます。バナーの世界観を強調するためにもフォントは入念に選びましょう。

幾何学的な調整をする

文字の端を揃える、文字間が同じになるように調整するなど、幾何学的な調整を行うことで、整理された見やすいデザインにすることができます。特に注意が必要なのが文字間の調整です。文字間は数値的には均等に配置されているのですが、実際に人間が見ると間隔に差があるように錯覚してしまいます。

デザインでは文字間の調整によって、数値的ではなく視覚的に均等になるように調整することが重要なのです。この作業を行うだけで見違えるように見やすくなるので、妥協なく調整してみましょう。

多少の崩しを入れてみる

情報が整理され、強弱が付いたデザインにすることができたら、最後に少しだけ崩しを入れてみましょう。例えば、分かりやすくされた文字の中で、一か所だけ文字が斜めになっていたりすると、デザイン上のアクセントになり効果的です。

参考にしたいバナーデザイン

バナーデザインのコツが分かったところで、最後に参考にしたいバナーデザインを閲覧できるギャラリーサイトを紹介します。多種多様なバナーが掲載されているので、制作時の参考にしましょう。

Pinterest

スマホアプリも出ているデザイン共有サイトです。バナーに限らず様々なデザインが掲載されているのが特徴で、デザインで困った時には心強い味方となってくれます。自分で「バナー」というボードを作れば、好きなバナー画像を気軽に貯めておくことができます。

こねこのバナーデザインアーカイブ

サイズや色、サイズ別にバナーを検索できるシンプルなサイトです。フォントやロゴなどもほっこりとした雰囲気で、どことなく可愛さがあります。

Banner Matome

色や業種からバナーを探せるシンプルなサイトです。画像サイズが大きいレクタングルバナーを中心に集めたサイトで、掲載数は2万本を超えます。サイズ検索ができない欠点がありますが、業種やカラーだけでなく、イラスト系や立体系などの表現別でも分類されているのが大きな特徴です。

Facebook広告集めました。

その名の通りFacebook広告を集めたギャラリーサイトです。バナーだけでなく、実際にFacebookに投稿した内容が丸ごと掲載されているので、バナー制作の参考だけでなく、Facebookにおけるマーケティングの参考にもなるサイトになっています。

Retrobanner

8,000種類にも及ぶバナーが掲載されているサイトです。業種・カラー属性・サイズごとに絞り込み検索を行うことが可能で、バナーのイメージが固まっていなくても参考になるものが見つけ安くなっています。また、バナーに使っている主要色について、16色までカラーコードで明示してくれるのも特徴で、色使いを参考にしたい場合に強い味方となってくれるでしょう。

まとめ

バナー制作について、外注の相場感やデザインのコツなどを紹介してきました。バナーは特別なツールを使わなくても、エクセルとペイントで簡単に制作することができます。

ただし、デザインのコツが分かるまではプロのデザイナーに外注した方が確実でしょう。幸い、静止画のバナーであればリーズナブルな金額で依頼が可能です。もし自分でバナーを制作する場合は、記載する情報の選択と整理に加え、情報に強弱を付けることが大切になってきます。ギャラリーサイトのバナーを参考にしつつ、制作のコツを掴んでいきましょう。