Photoshop バナー制作

要注意!見落としがちなバナーデザインミスチェックリスト

さあ、バナーが完成しました。先方にサッと提出して、見てもらおう!
と添付するその前に。いまいちど、その画像、見直してみませんか。
バナー制作初心者が特に見落としがちなポイントを以下にまとめましたので、チェックしてみてください!

 

  1. 実サイズでの見え方
  2. 上下左右の余白
  3. 要素のズレ
  4. 不自然な文字間の調整
  5. 迷子の調整レイヤーに注意
  6. レイヤー効果のテイストの統一
  7. 過度な装飾の見直し
  8. 要素の重なり具合を確認
  9. レイヤー効果の重なり具合を確認
  10. テキスト要素は可読性をきちんと調整
  11. 荒れてしまっている画像はないか
  12. 切り抜いた画像に不自然な部分はないか
  13. ボツ案レイヤーが見えてしまっていないか
  14. 支給素材のレギュレーション違反に注意
  15. そのほか、依頼の条件を満たしているか

実サイズで見え方

小さいバナー制作となると、要素の調整に、カンバスを拡大しての作業が多いですね。
書き出す前に、表示を100%にして、ウェブサイト上で見たときの実際の見た目を確認しましょう。上下左右の余白やフォントサイズが適切でなくなってきている場合があります。

上下左右の余白

バナーサイズとコンテンツの上下左右の余白を意識してチェックしましょう。 これを意識して整えるだけで,素人感がグッと減ります。

要素のズレ

意外と配置がずれていることがあります。また、上下左右中央に整列しても人間の目からはそう見えない要素があったりします。視覚調整をして、最も自然な見た目に整えましょう。

不自然な文字間の調整

フォントによっては、テキストベタ打ちのままだと不自然に文字同士の余白が空いている部分が出てきてしまうことがあります。特に、カタカナの「ト」の前部分に余白が空きがちなので、注意して見てみてください。詰まりすぎもNG!こちらも、解決するだけで脱素人のポイントが高いです。

迷子の調整レイヤーに注意

なんとなく色がくすんでみえる、暗く見える、鮮やかすぎる…などの状態を見つけた場合、クリッピングが外れてしまっている調整レイヤーがないか確認してみましょう。クリッピングはレイヤーの重なり順に依存するので、作業を続けていると、予期せぬレイヤーに効果がかかってしまう場合があります。

レイヤー効果のテイストの統一

デザイン要素で試行錯誤している間に同系統のレイヤー効果でもテイストが変わってきているものが混在していないか注意しましょう。
例:ぼかし0(フラットなテイスト)とぼかし5のドロップシャドウが混在している…など。

過度な装飾の見直し

全体を見渡してみて、文字を読みにくくするレベルの装飾が施された部分がないかチェックしよう。背景のパターンが派手な場合、テキストを読みやすくする工夫を忘れずに。

要素の重なり具合を確認

背景にランダムな水玉模様を敷いている、イラストに重なりあうようにテキストを配置している…などの場合、その重なり具合もチェックしましょう。要素の境界線がギリギリで触れている / 触れていない(1~2pxほど)、または中途半端に重なってしまっていると、グラフィック全体に「テキトー」な雰囲気が漂ってしまいます。
パッと見たときに、それはデザインとして、重なっているのか、重なっていないのか、ハッキリとわかる状態にしましょう。

レイヤー効果の重なり具合を確認

ドロップシャドウや光彩のレイヤー効果は、ぼかしの数値を強くすることで、さりげない周囲のカバー効果を期待できます。が、隣接している要素の上にかからないように重なり順の注意が必要です。

テキスト要素は可読性をきちんと調整

そのテキストの持つ役割に応じてレイアウトをしてきたと思いますが、最後に可読性を調整しましょう。小さくしすぎてつぶれている文字がないかもチェック。誤字脱字・英語表記をしていたらスペルチェックも忘れずに。

画像が荒れてしまっている部分がないか

スマートオブジェクト化していない小さいレイヤーにそのまま手を加えていないかチェックしよう。画像が荒れてしまっている部分がないか確認しましょう。

切り抜いた画像に不自然な部分はないか

切り抜きに失敗して白い線が浮いていたりするとかっこ悪いので、よく見ましょう。

ボツ案レイヤーが見えてしまっていないか

1つのpsdの中で、テキストの文字違いやイラストの入れ込みバリエーションで、途中に非表示にしたり透明度を下げて取っておいているレイヤーがどこかでチラ見していないかチェックしましょう。同じ画面をずっと見つめていると意外にも気づかないものです。他の人にもサッと見てもらうなどして見つけ出し、削除しておきましょう。

支給素材のレギュレーション違反に注意

バナーの制作依頼なら、キャラクターイラスト・企業ロゴなど、先方から支給されている素材があるかもしれません。それらには必ずといっていいほど、加えていけない加工・使用するときの最小サイズなどが記された、レギュレーション(利用のルール)が設定されています。中でも特に気をつけたいのはアイソレーション。そのロゴを利用する際に周りに確保しなくてはならない余白のことで、バナーの上下左右の角に配置している場合は外枠と十分な距離が確保できているかが重要となります。
また、映画の宣材写真などはトリミングがNGということもあるので、注意が必要です。

そのほか、依頼の要件を満たしているか

掲載要素や掲載ルールなど、依頼主の提示する要件を満たしていないまま提出すると、戻しがあるのはもちろん、信頼を欠いてしまいます。提出前に今いちど依頼の要件を満たしているか、全体を見渡し確認しましょう。

 

バナー制作についてはこちらの記事でも解説していますので、あわせてチェックしてみてください!

効率的にバナー作成するための基本的知識!

https://enoinc.co.jp/design_blog/?p=184

The following two tabs change content below.

あべく@デザイナー

株式会社ENO デザイナー。WebデザインにおけるPhotoshop作業の効率化を考えるのが好き。