バナーのデザインの見本とコツ～シンプル編～

こういうテイストのバナーが作りたい！となって調べてみても、バナーのまとめサイトばかりで
いまいちどこがデザインのポイントなのか分からないときがあると思います。

今回は、シンプルなデザインのバナーを制作するためのポイントを
バナー市場専属デザイナーに制作してもらった参考バナーとともに紹介します。

1．フレームを付けて存在感を出す

大きめのフレームをつけることによって、シンプルなデザインのバナーでも存在感が生まれます。

シンプルに仕上げるために使用する色はモノクロ（グレースケール）＋1色にしましょう。

また、お洒落感を出すには、英語の文言を一番目立つ箇所に配置するのが手っ取り早いです。
英語というだけでかっこいいデザインに見えます。

テキストは最小限にし、目立たせたいワード以外は控えめにするとまとまりが良くなり、
書き込みの少ないイラストを使用しても良いアクセントになります。

2．バナー内の要素を減らす

当たり前のことだと思われますが、これでもかとバナー内の要素を減らすと
とにかくシンプルなデザインになります。

印象が弱くなってしまいやすいので明るい色を1色を背景にし、
真ん中にキャッチコピーなど端的な文言を配置させます。

この際、目立つ色のせいで文言が目立たないということがないよう配色には注意してください。

どうしても載せたい文言がまだある場合は、
デザインの邪魔にならないよう上下にこっそり載せましょう。
（広告バナーではテキストがあまりに小さいと審査に落ちてしまうので気を付けてください！）

3．とにかく余白を多くする

とにかくシンプルに商品のみを目立たせるためには、使用する要素は画像＋ロゴのみ、
または多くても文言を＋1行に収めると良いです。

画像素材も2枚～あるとインパクトに欠けてしまうので、
1，2枚を切り抜いて大きく使用します。

商品画像内で最も多い割合を占めている色味をテキストカラーに使用し、
これでもかと余白を作ると垢抜けたデザインになります。

画像が一番目立つので、必ず画質の良い素材を用意しましょう！

4．整理整頓された配置にする

使用したい画像が何点かあり、さらに文言も減らせない…というときは、整理整頓がポイントとなります。

文言は文章ではなく、伝わる最小限の長さにします。
ラインを引いたり、背景をつけたり、形をつけたりなど、
バナー内に要素が多くても強弱を付けて個々が読みやすいデザインにしましょう。

素材はきれいに整列させ、余計な加工はしないようにします。
とにかく画質の良いものを使用してくださいね。

要素は多いですができるだけ余白を持たすことが大事です。

5．目立つ写真を大きく使用する

色味が多い・インパクトがある素材を切り抜いて思い切って大部分に配置し、
パッと見た瞬間、印象に残るバナーになります。

文言がモノクロまたは1色のみなので、優先順位の高い文言はサイズやフォントを
変化させて伝わりやすいデザインにしましょう。

6．画像以外に使用する色数を絞る

素材を切り抜かずにそのまま使用する場合はごちゃごちゃした印象になりやすいですが、
フレームを付けたり、画像以外に使用する色を2色以内にしたりするとシンプルな印象になります。

極力、使用する写真も要素が少ないものを使うのがベストです。

7．素材とバナー内の色を統一させる

シンプルなバナーを制作するには、使用する色をできるだけ少なくすることが大事です。

背景をグラデーションにしたり素材に影をつけたりすると
シンプルですがお洒落っぽいデザインになります。

文字ごとの間にも余白をたっぷりと取り、フォントを細くすると
シンプルかつスタイリッシュな印象になります。

フォントによってシンプルになるか否か大きな差が生まれてくるので、
細くてかっこいい！スタイリッシュ！となるようなフォントを持っていると良いですね。
(素敵なバナーが作れるフォントサイト6選：https://www.banner-ichiba.com/archives/187)

8．お洒落な画像素材を使用する

コツでもなんでもないですが、お洒落ですっきりとした画像素材を使うと
簡単にシンプルなバナーが制作できます。

画像内の空いているところに1～2行ほどのすっきりとした文言を入れても良いですね。

シンプルなバナーを制作するためのコツを長々と書きましたが、

・要素をできるだけ減らす

・たっぷり余白をとる

・使用する色を3色以内にする

デザインする際はこの3つを意識すれば良いのではないかと思います。

簡単にシンプルでお洒落なバナーを制作したいなーというとき、少しでも参考になれば幸いです。

次回もテイスト別バナー制作のデザインのコツを掲載予定です。お楽しみに！