新人の頃、
「クライアントに『自分でもつくれる』と思われたらダメ」
とよく先輩に言われていました。
クライアントから、
「自分でもパワポやエクセルで作れそう」と思われると
デザイナーとして失格ということです。
新人の頃は、ついついワイヤーや原稿のパワポ通りに作ってしまいがち。
（レイアウトだけでなく、デザインさえも！）
しかも、複数案をだすのができないので、一度ワイヤー通りに作ると、
それ以外のデザインを思いつかない傾向があるようです。
（いわゆるグルグルするっていうことです。）
デザイン経験が多くなることで、そういうことは少なくなっていきますが、
納期は成長をまってくれません。
デザインではよく使われるパターンがあるので、
そのパターンを増やすこと、
よくいわれる「デザインの引き出し」を増やすことが近道です。
私も文字については未だに勉強中で、
実際正しいかどうかはわかりませんがいくつかよく使うパターンを紹介します。
よく使うパターン
ベタうち
下記の文言をサンプルにします。
フォントは、説明しやすいように
ヒラギノ角ゴのファミリーのみを使用しています。
ベタうちだと味気ないし、どこを強調したいか不明です。
文字の大きさを変える
目立たせたい箇所の文字の大きさを変更することでリズムをつける。
フォントのウェイトを変える
フォントのウェイトを変更するとこでアクセントをつける
組み方を変える
「全国の美味しいを」を2段組にすることで、「お届けしたい！!」を目立たせる。
アクセントをつける
強調部分にベタをひくことでアクセントにする
「フォントを変更する」「文字を装飾をする」「色をつけること」ことで、さらに変化をつけることができます。
（実際は、文章から「美味しい」と「お届けしたい！！」を強調させたいと思うので、それにあわせてデザインするべきでしょうが）
文字だけレイアウトしてみる
文字だけで、500x120のサイズ内にスペースを埋めていく過程です。
フォントは、ヒラギノ角ゴのファミリーと「Helvetica Neue Bold Condensed」です。
ベタうち
上記のようにベタうちに、
新人の頃は、金額などの色を変更する程度で「できました」と提出してくる率が高いです。
文字の大きさを変更する
数字を「Helvetica Neue Bold Condensed」に変更。
「ひらがな」を小さくし、逆に金額を大きくして、
アクセントをつけてみました。
左右に隙間があいてバランスが悪いです。
組み方を変えてみる
「キャンペーン期間中なら月額料金が」を2行にしてみます。
文字の大きさを調整し、金額が一番目立つようにしました。
簡単に文字間も調整しました。
左右の隙間が埋まりバランスがよくなりました。
金額のフォントサイズは70pxですが、
そのままだと、カンマが大きいので40pxに変更しバランスを調整してます。
バリエーションを試してみる
3行にしてラインを追加。
3行になると可読性に劣るようです。
「キャンペーン期間中なら」にベタを引いてみました。
悪くはないですが、「月額料金」が目立たないような気がします。
「キャンペーン期間中なら」のベタを軽くし、
吹き出しにすることで「月額料金」に視線を誘導するようにしてみました。
「月額料金」のウェイトを太くしました。
「が」のウェイトを細くしました。
今回はこれのレイアウトで決定にします。
調整
・「月額料金」の文字間を調整
・「3,980」を少し大きくしてバランスを調整
・「!」の大きさを微調整
・「（税込）」を忘れてたので、追加
ここまで10分程です。
「フォントを変更する」「文字を装飾をする」「色をつけること」「文字を斜めにする・ずらす」などで、さらに変化をつけることができます。
実際の業務だと、バナーの目的によってデザインを考える必要がありますし、
更に写真や注意書き、ボタン、などがありますのでもう少し考慮する必要があります。
今回作ったサンプルのFireworksのデータを参考までにアップしています。
(Fireworks CS5 PNG)
ダウンロード banner_sample_201311.zip