作品のご紹介

デザイン経験のない方が、いきなりウェブバナーをデザインするとなると最初は戸惑ってしまいますよね。
しかし、基本的な手順に沿ってデザインすればそんなに難しいな事ではありません。
ここでは下記作例を元に、バナーデザインの「い・ろ・は」をカンタン5STEPで、実際にバナーをデザインしながら分かりやすく解説します。

いざウェブバナーをデザインしようと思っても、バナーのサイズはどのように決めたらよいのでしょうか？実はバナーのサイズは出稿（掲載）場所でサイズは決められています。一番ポピュラーなサイズは下記のようなGoogleやYahooのディスプレイ広告バナーサイズになります。他にもアフィリエイト用の広告スペースや、ご依頼人のご要望に合わせて、1px単位で決めることのできる広告スペースもありますので、バナーを制作する前に事前に掲載サイズを確認しましょう。ここではバナーサイズの中でも最も使用頻度の高い300x250pxのサイズでバナーをデザインしていきます。

サイズが決まったら、次は原稿を作成しましょう。作成するバナーサイズが複数ある場合は、まずは一番大きいサイズに収まる原稿量で原稿を作成しましょう。原稿の要素としては一般的にメインコピー・サブキャッチコピーに加えて、ロゴ又はC.I.と「詳しくはこちら」などの誘導ボタンがあれば十分訴求できるバナーになります。ユーザーは一瞬で、広告に興味があるのか、ないかの判断をするので文章が多すぎるとかえって目に止まらないことに繋がります。欲張らずに原稿はシンプルにまとめましょう。複数バナーサイズがある場合は、小さいサイズは文章を間引いて作成します。

原稿が決まったら、とりあえず要素を入れ込んでみましょう。そうすることで文字量などが最適かが確認できます。下記例で検証したところ文字量はちょうどよさそうです。それではデザインしていきましょう。

• 
• 

要素に優先順位をつけて何となく配置してみましょう。ロゴやボタンは下部に配置し、ロゴは背景色に影響を受けない様に、白地に乗せるのが基本型です。メインコピーは太文字にし、サブコピーは文字サイズを下げ、文章内の文字サイズを部分的に変えるなどしてメリハリをつけていきます。文章内にあった「修正無料」「素材不要」といった要素は文章から離してシェイプで囲う事で、よりデザイン性が高まります。

背景画像を配置してレイアウトを整えます。この時、必要に応じて文字サイズやカーニングなど微調整しましょう。
これで完成です！