デザイナーがアイキャッチ・バナー制作時に気をつけていること

粒度の細かい話になりますが、デザイン制作時にデザイナーがどのような点に気をつけているかについてご説明します。（あくまでもアイキャッチ制作・バナー制作のようなWebで使うグラフィックデザインの例）

レイアウト

レイアウトする上で意識したいポイントはこちら。レイアウトひとつで情報が伝わらなくなってしまうため、サムネイルレベルで検討しておくと仕上がりが早くなるはずです。

• 視線の流れ：望んだ通りの順序で情報を読めるか？
• 情報のグルーピング：同じ扱いの情報はグルーピングできているか？
• レイアウトの意味が成り立っているか？：優先順位に沿った位置、サイズになっているか？
• 余白の整理：余白は美しいか？　整っているか？

▼ひとことアドバイス
レイアウト作成時点ではグレイスケール（白・黒・グレー）でレイアウトすることで、色に引っ張られずレイアウトを検証することができますよ。

フォント

書体選びも大切な世界観づくりの一端を担います。
書体以外にも、文字詰め、行間、ジャンプ率などでかなり印象が変わります。

• 書体：明朝体、ゴシック体、筆記体
• 文字詰め
• ジャンプ率
• 可読性

書体一例

書体に関しては、複数の書体を同時につかってしまうと読みづらくなるため、見出しはこの書体、英字はこの書体、リードはこの書体、のように、決め打ちした方がまとまります。

また、半角英数字は、英字書体を使うと美しいです。日本語フォントよりも少し小さく見えるため、フォントサイズを少々大きくすると良いでしょう。

文字詰め

文字詰め（カーニング/余白の調整）は、文章を読むリズムを整えるための作業です。

参考までに、ベタ打ちの文字列と、少し調整した文字列のアニメーションをご覧ください。たとえば「ト」は、必ず大きな隙間が開きます。一定のテンポで音読するつもりで、余白を整えてあげてくださいね。

文字のジャンプ率

配色

「回転率を高めるために店内を赤にする」「赤い服は体感温度が高くなる」という話があるように、色の心理的影響は大きいと言えます。

さらに使用面積も強いため、大きく印象を左右すると言えます。

制作者の好みではなく、下記の観点で検証し、使う色を選定します。

• 明度差
• 視認性
• 色の持つ意味

▼デザイン時のポイント
色数が増えると難易度があがるため、慣れるまでの間は色数を絞るといいでしょう。最大3色程度ですとまとめやすいです。

テクスチャ

• 質感

和風のデザインなら、和紙。ナチュラル系のデザインなら、リネンや紙のテクスチャを。近未来的なデザインなら金属を使う。のように、コンセプトや、ペルソナに合わせて質感も変えています。