バナーの作り方を徹底解説!Webの広告バナーを初心者でも作る方法をご紹介します。コツさえつかめばバナーの作成は難しくないんですよ♪

バナーサンプルs

Photoshop も Illustrator使ったこと無いけど、バナーをわざわざ発注するまでもない…
という方にオススメなのがバナーの自作です。

ここではwebで一番目にする右のサンプルのような正方形のバナー作成方法をご紹介しますが、
横長のバナー作成やサイトのメインイメージつくりにも是非役立ててください。

※Photoshop も Illustratorは使わない、初心者の方向けの作成方法をご紹介しています。





バナー作成の2つのコツ!!


バナー作成のコツ

バナーを作るには作り方ややり方は色々あると思いますが、
「これだけは!」という2点のコツがあります。




初めてバナーをつくるなら、レイアウトは王道で作るのが一番です。
奇をてらったデザインもアリですが、まずは基本形を作れるようにしてからにすると、
失敗しにくくなるのではないでしょうか。

カラーが3色というのは、とある理由があります。
色については作成段階で詳細を説明しましょう。





早速バナーを作ってみよう!



では早速作っていましょう。主な流れはこんな感じです。

4ステップバナーの作り方



①ターゲットを決める


どの商品やサービスにも、バナーを読んで欲しい「ターゲット」がいます。
ターゲットの性別や年齢、嗜好を予測して、配色や文字の大きさ(フォントサイズ)、イラストのタッチなどを決めていきましょう。

ターゲットを狙う

【例 女性向けのwebスクールの広告を作りたい場合】
 ターゲット 20~40代女性
 価格帯 リーズナブル
 
 ・女性向けの広告なので、写真は同年代の女性モデルを
 ・色は女性らしいイメージのあるピンクを基調に
 ・フォントは女性向けのやわらかめ、でもスクールなので信頼できる印象のものに…etc

もうお気づきかも知れませんが、このページ上方のバナーはこれをもとに作成した一例です。


②訴求ポイントを1~3つ考える


サイズの限られたバナーには多くの情報を詰め込むことはできません。
予めポイントを絞っておいて、それに沿った素材を用意したり、文面を考えていきます。

考える人

というのも
「他の人が読んでもわからない、何の広告か明確でないキャッチコピー」

が意外にも多く散見されるのです。

自分がよく知っている商品なので、すでに知っていることが当たり前になりすぎて
基本的な情報を掲載し忘れてしまうことが意外にも多くあります。

商品やサービス名、概要などはしっかり書いておきましょう。


③レイアウトを決める

ある程度慣れてきたら、レイアウトを考えてみましょう。
思いつかない場合は、バナーをたくさん集めて紹介しているサイトがあるので、それらを参考にしたり、
ハウツーサイトを覗いてもいいかもしれませんね。

今回はここはスキップして王道のレイアウトをご紹介します。

レイアウト例


用意した素材と文言をレイアウトに沿って配置してみましょう。
これではいまいちイメージできない、という方は、バナーの例がたくさん集められた、
アーカイブサイトを参照すると良いですよ。

バナーアーカイブサイト⇒「Bnanner Design Archive」


文字が入りきらない場合は短くしたり、言い回しを変えたりして修正し、
また画像も全体のイメージと違ったりしてしまう場合には加工したり他のものを使うなどして調整します。




④カラー(配色)を決める

色は最後に決めるとうまくまとまり易いです。
「カラーは3つ」とすでに紹介していますが、配色は自分の感覚ではなくて、
理論的に決めると失敗が少なくなります。


バナーの配色のバランス


こんな風に、3色のバランスが大事です。
はじめにメインカラーを決めてから、それよりも落ち着いた色をベースカラーにし、アクセントカラーはメインカラーの「捕色」(反対色)にすると良いとされています。
色相環
捕色とは、美術の授業で習ったような気がしますが、
色相環でみたときにちょうど反対側に配置されている色になります。

反対色付近の色をアクセントカラーに持ってくることで、特定の場所が目立ち、
「詳しくはこちら」や電話番号など、注目して欲しい部分に目がいきやすいように誘導することができるという訳です。


(参照:色彩センスのいらない配色講座 from Mariko Yamaguchi



どうでしたか?


小さな四角にも結構な労力が必要とされているのがわかりますね。
Photoshop も Illustratorを使わない、簡単な方法をご紹介しましたが、それでもやっぱり手間がかかりますね。

たかだか小さな四角だと、侮れない、、、訳です。

ここまでするのが面倒な方や、そんな時間はない!という方は、
バナー作成に特化したソフトを利用してみてください。

多少の個人差はあると思いますが、
Photoshop も Illustratorのように、ツールを使うための勉強をしなくてもソフトを直感的に操作して、
バナーを作ることができます。デザインマスター詳細

■デザインマスターの詳細■
価格 デザインマスター スタンダード / 9,800円(税込)
デザインマスターPro / 19,800円(税込)
OS Windows 8.1/8/7/Vista
※各64ビット版にも対応しています。
その他の要件 ハードディスク容量、CPUその他はOSの推奨動作環境に準じます。



簡単にバナー作成ができるその秘密は予めソフト内に用意されているバナー背景。
写真や文字がレイアウトしやすいように枠どられたり、グルーピングされているから
レイアウトや配色で考え込まなくても、バナーを手軽に作ることができます。




●デザインマスターに含まれているバナー背景例●

プリセット例



●実際にこのソフトを利用してバナー作成している動画が見られるので、
気になった方は段取りをチェックして見ましょう!●







ビジネスマン

詳細・購入はこちらから









●他にも、ヘッダーやcssボタン、3Dパッケージ等作成ができる!●

バナー作成例

このページの先頭へ