【初心者向け】バナー制作の流れと押さえるべきポイント

バナーとは？

バナー（banner）とはもともと「旗印」を指していましたが、この場合はWebサイトでよく見かける広告のための画像の事を言います。

言い換えると、広告としてサイトへのアクセスを集めるための画像なのですが…。

何故か「下っ端」の駆け出しデザイナーやデザイナーですらない人が作ることもある、という不思議な代物です。

今どきは自動生成をするサービスもあるそうですが、今回は「人間」がバナーをデザインするための流れを「初心者」向けに書いていきます。

ターゲットを知る

まずはバナーを見てクリックしてくれそうな人、すなわちターゲットについて知る必要があります。

クライアントから「どのような人」を対象に広告を配信して、どのようなサイトに誘導し、どのような商品やサービスを使ってほしいと考えているのかは伝えられていますよね。

そこで、
　＊どんなターゲットが
　＊なんのページを見て
　＊どんな感情になった時
　＊何を考えながら
バナーをクリックするのかをストーリーとして考えていきます。

ここでターゲットについてのイメージを固めるのは、今後の工程で重要になってくるので、頑張って考えましょう。

構成要素と優先順位

先の段階でターゲットについてよーく考えたのならば、何を一番伝えるべきなのかは明確になっているはずです。

また、バナーを構成する要素（文章・画像・ロゴ・いわゆるCTA=Call To Actionの部分etc）が何なのかも理解していますよね。
それらをリストアップし、優先順位をつけていきます。

なお「一番伝えるべき部分」に該当する要素は、特に強調することになります。
文字のサイズ、色、各種装飾を駆使して、デザイン4原則の「コントラスト（対照）」を意識します。

そうしないと、特に小さいモバイル画面では何が言いたいバナーなのかよくわからん、という事態が発生することもありえますので注意しましょう。

レイアウト案を10個書き出す

まずは手書きでレイアウト案を書き出します。

構成要素や優先順位、それらを決める前提となるターゲットのことを念頭に置いて、それらの配置を決めて書いていきます。

この辺の段階で、画像素材を使うなら探しておくといいです。

その後、PC上（IllustratorやPhotoshop）を使って、やはりモノクロで（つまり色を使わず）10案作り上げます。

色を使わない理由は、最初から色のことを考えてデザインしようとすると、考えるべき部分が増えすぎて全体のバランスを取りながらデザインするのが難しくなってしまうためです。

※↑のレイアウト例は、課題で作成したものであり、実際の案件で制作したものではありません。
あと、↑の例みたいに「ロゴを文字の一部として使う」のは高確率でNG（ロゴのアイソレーションに引っかかる）なのでやめましょう💦

3案に絞って色もつけていく

10案だした段階で一度クライアントに確認してもらいます。

そこから3案選んでもらって、配色をしながら、各要素ー文字の間隔やサイズも含めてー調整をしていきます。

さて、ここで注意点があります。

バナーをクリックして飛ぶ先というのがあります。

ランディングページだか通販サイトだかわからないけど、とにかくあります。

そのクリックして飛んだ先（遷移先サイト）のデザインと合わせてバナーを作らなければなりません。

具体的には色、フォント、CTAのパーツ（ボタン）や配列を可能な限り、とんだ先のサイトと一致させ、バナーを見たときのイメージ、使う画像素材のイメージも、飛んでいく先と合わせます（つまりトーン＆マナー＝トンマナをあわせる）。

そうしないと、クリックした人が違和感を感じて「そっとブラウザ（またはタブ）を閉じてしまう」可能性が高くなります😅

↑課題で作成した広告バナー3案作成例。細かいところで反面教師的なのがあるけど、ああだいたいこんな感じねとわかればOKなので、このまま掲載。

1案を選んで→派生案を作って→最終的な1案を仕上げる

先の3案を再びクライアントに見せて1案を選んでもらいます。

そこから微妙に違う派生案を複数作ってみます。

それらの中から最終的に使う1案を選び、細かい調整を繰り返して仕上げます。

なお、サイズ展開が複数あるバナー（広告媒体が複数サイズのバナーに対応している場合）は、この段階で最初とは異なるサイズのバナーも作っていきます。

その際、元デザインのイメージが崩れないように気をつけましょう。

納品前にチェックすべき点

　＊バナー画像のサイズ（1ピクセルでも間違っていたらだめです）
　＊バナー画像のファイル形式
　＊バナー画像の色空間（RGB/CMYK）は正しいか
　＊バナー画像のファイル名は半角英数字、ハイフン、アンダーバーだけか
　＊出稿先固有のルールに従っているか（例えば、Facebookに出向するバナーの場合、テキストが画像サイズの20%以内に収まっているか）
　＊納品するデータにIllustrator/Photoshop形式が存在する場合、配置した画像はクライアントが求めた形式（埋め込み/リンク）になっているか
　＊↑でリンク形式の場合、リンク元の画像も揃っているか

ファイル名を半角英数字＆ハイフン＆アンダーバーのみとしているのは、Webサーバーの仕様がそうなっているからです。

細かい注意点とまとめ

バナーデザインもまた「デザイン4原則」に従うと考えましょう。
可読性・視認性も重要です。
例えば以下の点に注意しておくといいです。

＊各要素の幅は揃える
＊文字の整列のパターンも揃える（中央or左揃え）
＊通常は縦書きと横書きは混ぜない（混ぜてもいいケースはある）
＊右揃えは極力使わない
＊フォントの種類も統一する
＊フォントのサイズ最小限度は8pt、でも9pt以上にしたほうがいいと思う

そしてまとめ：
＊ターゲットがどういうときにバナーをクリックするのかよく考える
＊各構成要素とそれらの優先順位を決める
＊最初のレイアウト案はモノクロで（素材画像とロゴはその限りではない）
＊一番目立たせる部分は色、フォントサイズ、余白等を調整して特に目立つようにする
＊バナーもデザイン4原則を基にデザインしていく

そろそろ、間に合わせで作っただけのタイトル画像を直したい。
休憩時間中に頑張ろう…。

タイトル画像制作過程を公開できたらいいんだけど、どうだろう…。