うっかり!バナーデザインで最低限気をつけるべきポイント

eye-catch

こんにちは、お盆休みが終わってしまいましたね。まだまだ暑い日が続きそうですので夏バテには気をつけましょう!
さて、今日はバナーデザインで最低限気をつけたいポイントを4つあげてみました!

リンク先との整合性

デザインしているバナーはいったいどこにとぶのか?どのようなデザインのサイトにリンクしているのか?バナーとサイトのトンマナがあまりにも違うとユーザーが混乱してしまいます!リンク先を把握している場合はなんとなくサイトの雰囲気などをつかんでおきましょう。

視線は左から右へ

WEBの鉄則ですね。正しくは左上→右上→左下→右下(Zの動き)、です。バナーのデザインをしていると、デザイン要素をどう置くか?空いたスペースにうまく配置することに夢中になりがちです。完成したものを見てみると、目に入ってくるテキストの順番がおかしいなんてこともよくあります。きちんと視線の動きを意識した配置になるようにしましょう! 01

デバイスを考える

パソコンかスマホで表示されるかによってバナーの作り方は変わってきます。Retina displayのことを考えるとスマホバナーは、解像度が横幅640px必要です(サイト制作も同じですね)。ですのでスマホ用のバナーを制作する際は、表示サイズが320pxであっても横幅640pxでデザインすることがほとんとです。その場合、一通りデザインしたあと50%のサイズで見てみる必要があります。意外と文字が小さいなんてことがあるかも!Facebookの広告等に使用するバナーも推奨サイズは横幅1200pxですが、実際の表示サイズはその半分くらいになります。そういったことも考えてデザインすると良いでしょう!02

枠線の有無

白背景のバナーデザインには1px程度の縁をつけてあげると、例え掲載箇所が白背景でも溶け込むことはありません。モノクロの縁が基本的に多いと思いますが、バナーで使用している色の一番暗い色でも良いです。スマホのバナーであれば、先ほどのように50%表示になることを考えて境界線は2pxにしてあげると良いです。04

以上4つのポイントでした。初歩的ですが忘れがちになりやすいので、しっかり頭に入れてバナーデザインに挑みましょう!