バナー作成 のコツとデザインの基礎part1

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

web上でサイトを観覧しているときに表示される広告バナーですが、webデザイナーをしていたりデザインができる人だと社内などで作成を依頼されることも多いのではないでしょうか。

小さいので簡単そうに見えますが、実は小さいが故に難しいwebバナーデザイン。

悩んだり行き詰まったときにどうするとうまくバナー作成できるかのコツをまとめてみました。

そもそもバナーの役割とは?

バナー広告には「旗」や「のぼり」といった意味があります。

バナー制作で大事なことはいかにお店(ここではweb上にあるホームページとします。)に目を止めてもらい誘導出来るかを目的とします。

例えばどれだけおしゃれで素敵な店でもこのようなのぼりがお店の店頭にあった場合、なんだか少しお店に入るのをためらいませんか?

今回はこの非常に個性的なバナーをブラッシュアップしながら、まずはデザインの基礎の説明をしていきたいと思います。

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

バナー作成の前に

バナーは先ほど言った通りのぼりや広告といった意味があります。

広告を打つ前にまずは

・何を誰に伝えるためのバナーなのか

・ターゲットが何を求めているのか

をきちんと確認して、重要な文章の構成や画像やカラーなどを選んでいきましょう。

情報を整理してPinterestやgoogle画像検索などのサービスで競合のバナーなどの参考イメージを探したり、レイアウトの簡単なラフを書いてから始めるのも手です。

今回はこちらの記事が載っているサイトtreeの現在のこの記事に飛ぶバナーを作成すると仮定して制作します。

サイズは一般的に推奨されているバナーサイズ300×250で作成していきます、こちらのバナーは1枚作っておけばPCとスマホ両方で使用する事が出来るバナーの基本サイズと言われており、まず最初はこのサイズで作成していくのが良いでしょう。またgoogleやyahooなどに掲載するWebバナーの場合書き出した後のサイズは150KB以下としましょう。

使用ツールはフォトショップです。

バナー作成のコツその1!文字詰め、配置を見直そう

今回は入れたい文章は決まっているため、まずは一度背景をとり文字の並びや間隔を見直すところから始めていきましょう。

背景から色がなくなったため少しすっきりとして情報が見やすくなりましたね。

このただ文字を打ち込んだだけの文字を“ベタ打ち”といい文字の隙間を埋めていない状態のことを言います。

この文字を整えてあげましょう。

・コツと!マークの間や、漢字とひらがななどの間隔が整っていないため文字ツールで隙間を調節

・接続詞部分のサイズを90%に調節

・!のサイズを110%に調節し1px文字を下げる

といった調整をし、「読みやすい文字の並び」にしていきます。

このような作業を“文字詰め”と呼びます。

上に比べてバナーの文章にまとまりが出て読みやすくなりましたね!文字組みは基本中の基本ですがついつい初心者が見落としがちなので、もししっかりレイアウトなどをきめたのになんだかイマイチ…と悩んだ際には一度文字のレイアウトを整えるといいかもしれません、では次に進んでいきます。

バナー作成のコツその2!サイトの雰囲気にあったバナーを作ろう

文字をしっかりと詰めれたところでいよいよバナーに背景や色を入れてみましょう。

しかしこちらもただ目立てばいいものではありません。

1枚目もインパクトといった意味では良いかもしれませんが、あくまで今回はtreeの記事バナーなので背景は配色をサイトにあわせて作成していきます。

バナーを作る際はコンセプトがはっきりと決まっているものじゃない場合、迷った時には飛び先のサイトのカラーや雰囲気に似せて作成していくようにしましょう。

バナー作成のコツその3!文章の幅を整えよう

文章の幅を整えると聞いて、今さっき文字の調整をしたのでは?と思った方もいるでしょう。

ここで言う幅の調整は“文章の長さ“をあわせるといった調節です。

こちらも先程言ったようにサイトの雰囲気にあわせてあえて文字幅をかえたり、目立たせたい文字のある文章が長くて他と合わせると文字が小さくなってしまう場合を除き、基本的にはしっかりと文章の幅を整えた方がすっきりとして見えます。

バナー内にある全ての文章の幅を整える必要はありませんが、出来る限りレイアウトを整えてあげましょう。

また文字や図形のサイズはしっかりと整数で入力するのも大事なポイントです。

書き出し方にもよりますがフォントサイズに小数点があると画面上で見たときに文字がぼやけて見えてしまうので注意しましょう。

バナー作成のコツその4!バナーは押せそうにデザインしよう

おそらくこれが一番の他の広告とwebバナーとの違いでしょう。

せっかく素敵なバナーを作っても、どのサイトのものなのかがわからなかったり、ただのWeb上に表示される画像として消費されるのは勿体無いです。

サイトのロゴや社名、「〇〇はコチラ」などといった訴求を入れて、ターゲットをきちんと目的のサイトに誘導しましょう。

だいぶWebバナーらしくなってきましたね!

バナーによっては訴求をつけないものもたまにありますが、指定などがない場合は入れた方が無難です。

またロゴなどを使うときはロゴの最小サイズや背景や周りにおいてはいけない色の規約がないか、文字が潰れていないかなどしっかりと確認しましょう。

バナー作成のコツその5!細かい調整でさらにワンランク上のバナーへ

更にここからは細かい調整でワンランク上のバナーを目指していきましょう。

ここでは

・文字の配置の余白をそろえる調整

・さらに文字を目立たせる装飾の意味での調整

の2点があります。

文字の配置の余白をそろえる調整

上に載せた画像は先ほどの画像と色や訴求、文字幅などは全く同じですが、なんだか少しガタガタして見えますね、これが配置の余白を整えていない状態です。

今回はわかりやすくするために少し大げさにずらしましたが、揃っている方がバナー全体がより綺麗に見えるのでしっかりとガイドを引いたり中央揃えなどの機能を使い文字の配置を整えていきましょう。

さらに文字を目立たせる装飾の意味での調整

文字への装飾はより目立たせたい文章に目をひかせたり、バナーやデザインに動きをつけることができよりよいバナーが作成できます。

今回は

・一番目立たせたい文章に下線をひく

・上部の文章が色合いが似ていて認識しづらかったため濃いめのドロップシャドウをひいて読みやすくする

の二点を適用しました。

しかしこればっかりは必ずしもこの方法が正解!とはなりません、しっかりと飛び先のサイトの雰囲気やどのようなことを伝えたいかなどを今一度考え、その時々で一番いいデザインを適用していきましょう。

今回は主にバナーの基礎をご紹介したため、これ以外のデザインテクニックはまたの機会に詳しくお話しします。

相手に伝えるためのバナーを製作しよう

 

いかがでしたでしょうか、同じ内容でも最初のものと比べるとガラッと印象が変わりますね。

どんなに綺麗なバナーでも、一番伝えたい内容や相手をきちんと理解していないと本来のバナーとしての役目は果たせません。デザインはもちろん大事ですが迷った時やうまくいかないときは訴求内容や何を伝えたいかなどを洗い出し、競合などとも見比べてその時々に最適なバナーを作成していきましょう。

 

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
サイト制作
tree