【初級編】バナーデザインを効率的に作成する方法！レイアウト事例もご紹介

バナーデザインの考案は、Webデザイナーにとって必須のスキルです。しかし、デザインに凝れば凝るほど時間と手間がかかるのが難点。そこで今回は、高品質バナーを効率的に作成するテクニックについてご紹介します。

バナーの必須要素と基本ルール5つ

どんなにデザイン性に優れていても、下記の2点が明確でなければバナー本来の役割、つまりユーザーにクリックを促すことはできません。

▼バナーの必須要素

• 「何を」最も伝いたいのか？
• 「誰に」対して訴求したいのか？

バナーには5つの基本ルールがあり、これを守ることで「一番伝えたいことが特定のペルソナに伝わる高品質バナー」が完成するのです。

▼バナーの基本ルール

• 構成要素を重要度順に強調し、左上→右下へと配置する
• メリットが端的に伝わるよう、文字数を最小限にする
• 可読性（読みやすさ）がアップするよう、背景と文字色のコントラストを強めにする
• 画像として見やすく、一目で意味が伝わる写真を使う
• バナーのイメージがコンテンツの内容とマッチしている

バナーを短時間で効率的に制作するコツ2つ

「高品質バナーの作成には時間がかかるモノ！」と思っていませんか？

実は、たった2つのコツを押えるだけで、「デザイン性」と「訴求性」を兼ね備えた高品質バナーを短時間で制作することができるのです。

「レイアウト」を決めてから「配色」を考える

バナーを制作する際、デザイナーの作業は主に「レイアウト」と「配色」の2種類です。

確かに、バナーデザインはレイアウトと配色のセットで成り立っていますが、同時に作業を進めるのは非効率。

「レイアウトを変更すると元の配色が不自然になる」「配色を変更するとレイアウトの余白が目立って物足りない」といったイタチごっこを繰り返し、なかなか完成しません。

そこで2つの工程を切り離し、まずレイアウトを決めてから配色に取り掛かることで、バナーの制作スピードが格段に短縮できるのです。

バナーのレイアウト工程をステップごとに小分けする

レイアウトの工程を小分けし、ステップごとに方向性を決定しながら進めることで、修正点が最小限に抑えられます。

▼レイアウトのステップ

1. キャッチコピーや使用する写真など、構成要素をピックアップする
2. 縦横分割か全面か、レイアウトの大枠を決める
3. 単色やモノクロで組んでみる
4. 問題点を修正しながら配色を決める

バナーを効率的に作成するプロセス6つ

では実際に、バナーを制作する際の工程を6つのプロセスに分けて見ていましょう。

ステップ1. 必要な構成要素を全て並べてみる

この段階で重要なのは、「デザインはほぼ完成したのに必要な要素が漏れていた！」というミスを予防すること。

見た目のデザインにこだわる必要は全くなく、同じフォントサイズでバナーに入れたいテキストを並べるだけでOKです。

ステップ2. 構成要素に優先順位をつける

続いて、ピックアップした構成要素に優先順位を付けます。

サイズに限りがあるバナーだからこそ、最も伝えたいメッセージが一番目立つようにデザインしなければなりません。

▼構成要素の優先順位

1. タイトルやイベントの名称
2. サブタイトル
3. 期間などの注意事項

ステップ3. バナーに使う写真を選ぶ

ステップ3で写真を選ぶ目的は、配置する際のサイズを見定めるため。

つまり、この段階でバナーに入れる写真を決定する必要はなく、ある程度のサイズ感や横長・縦長などの基本フォルムさえ決まっていればOKです。

ステップ4. レイアウトのベースを決める

バナー向けのレイアウトを大きく分類すると、「分割レイアウト」と「全面レイアウト」の2種類に分けられます。

どの要素をメインにするかによって選ぶと良いでしょう。

▼レイアウトの選び方

• テキストをしっかり伝えつつ、写真でイメージをアピールしたい→分割レイアウト向き
• 写真のビジュアルを優先したい→全面レイアウト向き

分割レイアウトのサンプル

「テキストエリア」と「画像エリア」がくっきりと分かれているのが、分割レイアウトの特徴です。

▼横分割レイアウト

▼縦分割レイアウト

エリアを独立させることで、テキストと画像の両方がスッキリと見やすくなります。

▼縦分割レイアウトで作ったサンプルバナー

全面レイアウトのサンプル

「自社商品をメインにしたい」「写真の美しさを活かしたい」といった場合におすすめなのが全面レイアウト。

ただし、下記のサンプルバナーのように背景写真とテキストのコントラストを強くすることで、テキストを際立たせる使い方も可能です。

▼全面レイアウトで作ったサンプルバナー

ステップ5. とりあえずデザインを組んでみる

ベースとなるレイアウトが決まったら、とりあえず盛り込みたいテキストメッセージと写真を使ってデザインを組んでみましょう。

この段階では、まだモノクロのままでも構いません。

ステップ6. 問題点をピックアップして修正しながら配色する

何をどこに配置するかが決まったら、下記の手順でデザインを仕上げていきます。

• 問題点をピックアップする
• 修正しながら配色する

修正と配色を同時進行で行うことで、「どうしたら最も重要なメッセージが伝わるのか」が具体的に見えてくるのです。

テキストと写真が被って読みにくい

上記レイアウト例のように文字テキストと写真がきっちり分かれているデザインも、バナーとして悪くはありません。

しかし、下記の問題点は「クリスマスケーキコレクション」用のバナーとして致命的です。

▼問題点

• テキストの一部が写真と被って読みにくい
• もっとケーキの写真を大きくして、イベント感をアピールしたい

そこで下記の解決策を講じることで、ケーキの写真を大きくしてもメッセージがしっかり伝わるようになりました。

▼解決方法

• 縦幅ギリギリまで写真を大きくする
• テキストが被っている部分は、写真にグラデーションのマスクをかける

デザインのバランスと配色を整える

文字色やテキストエリアの背景色は、デザインのバランスを整えながら行うのがコツです。

▼問題点と解決方法

• 問題点：クリスマスの象徴であるケーキ部分は薄くしたくない
• 解決策：切り取ってマスクなしの状態でテキストを上に重ねる
• 配色：テキストエリアの背景をクリスマスらしい赤で統一する

バナーデザインに遊び心を加える

バナーのデザインに遊び心をプラスするのは、Webデザイナーの腕の見せ所。

今回は、下記の工夫を加えて仕上げてみました。

▼解決方法

• サブタイトルをリボン状にするなど、テキスト部分を装飾する
• テキストの背景に、さり気ないイラストを追加する

バナーのデザイン事例1：縦分割レイアウト

もう一つ、縦分割レイアウトで作成したバナーの問題点と解決策についてご紹介します。

▼問題点

• できるだけケーキの全体を使って魅せたい
• 写真全体を文字となるべく被らないように配置すると、上下に隙間が空いてしまう

写真を斜めに配置して上下の空間を有効活用する

▼解決方法とデザインの工夫

• 解決方法：写真を斜めに配置することで、上下の空間を埋める
• 配色：テキストエリアを赤に、バナーの下部をゴールドにしてクリスマスらしさを演出

バナーのデザイン事例2：横分割レイアウト

最後に、横分割レイアウトのデザイン事例をご紹介します。

▼問題点

• ケーキのデコレーション部分にテキストが被って読みにくい
• 右上の受付期間が目立たない

画像にグラデーションマスクをかける

▼解決方法とデザインの工夫

• 解決方法：縦分割と同じように、画像にグラデーションマスクをかける
• 配色：テキストエリアを写真の背景と同じ赤に変更し、統一感を出す
• デザインの工夫：受付期間をサークル型のロゴ風に変更

テキストをアーチ状にする

▼解決方法とデザインの工夫

• 解決方法：テキストをアーチ状にすることで、ケーキの飾りを避ける
• デザイン：サブタイトルをゴールドのリボン風にして、クリスマスらしさを演出
• 配色：受付期間の背景を黒から上品なネイビーに変更

余白に手を加える

▼解決方法

• 左右の背景部分が寂しいので、雪の結晶のイラストを配置して完成！

まとめ

デザインすること自体が楽しいというWebデザイナーは多いでしょう。しかし、仕事である以上は費用対効果を無視するわけにもいきません。そもそも、時間をかけたからといって優れたバナーが仕上がるという訳ではないのです。まずは、バナー本来の役目と基本ルールを守るのが大前提。そのうえで小分けにしたプロセスごとに小さな決定を積み重ねていくことで、余計な迷いや手戻りが防げるのです。