Webデザイナーとして受注することが少なくない仕事のひとつが、バナー制作です。バナーはWebページの入り口となる大切な部分であり、閲覧者にどれだけクリックしてもらえるかを左右するものです。
どれだけ魅力的なバナーを作るのかは、Webデザイナーの腕の見せどころといえます。
今回はそのバナー制作時のコツとして、デザイン時に注力すべきポイントやデザイン視点でのポイントをご紹介します。
バナー制作の前に知るべき、バナーの役割
そもそもバナーとは、どういう役割をはたしているものなのでしょうか。
バナーという言葉を日本語でいうと、「横断幕」「のぼり」「垂れ幕」といった意味になります。私たちの周りにもよく目にするお店の前にある「のぼり」があります。その「のぼり」は、不思議とすぐ目に飛び込んでくると思いませんか？まさにそれが、「バナーの役割」なのです。
Webで使われているバナーはページの大きな部分や注目してもらいたい部分などに使われたりしています。目立つ字体やカラフルな色合い、目を引くような画像を使用したものなど種類はさまざまです。なんのためにそういったデザインにしているかという理由は、先ほど挙げた「目に留めてもらうため」なのです。
バナーは、お店の「看板」や「のぼり」の役割を果たしています。興味のある人に目に留めてもらうため、さまざまな試行錯誤がされているのです。
例えば・・
- お腹がすいたなと感じる。
- お昼は○○が食べたいなと思う。
- お店を探していると、ある「のぼり」や「看板」にコーヒーお代わり自由と書かれている。
- この店の前をよく通っていたので、「看板」に書かれていたメニューも気になっていた。入ってみよう。
私たちが外食をする際にお店を探す材料として、こういった「のぼり」や「看板」を頼りにすることがあるはずです。欲求を視覚的にくすぐり、お店への入店を促す目的を果たすのがバナーというわけです。
これをネット上で行うために作るのが、Webバナーと呼ばれるもの。
バナーはインターネット上どこにでも存在しています。例えば、Yahoo!を利用する際、トップページを開くと右側や左側に広告が出ていますね。ときには画面全体で表示されることもあると思います。直接見ていなくても、トップページを見るだけで何気なく視界に入ってくるので、気になる商品や文言があるとクリックしてしまう人も多いはず。
「一目で顧客の興味を惹き、クリックしてもらう」
これこそが、バナーの役割です。
バナー制作のコツを知る前に必要な作業とは？
早速制作に入りたいところですが、バナーを作る前に必要な作業があります。
それは、リサーチです。
もし、Webデザイナーとしてバナー制作を依頼された場合には、なにも考えなしで作り出すということはしないはずです。なにを題材にし、なにをみてもらいたいかといった情報をまず整理するところからスタートすることが必要な作業となります。
具体的にどういった情報をもとに作ればいいのでしょうか。外注・オリジナル関係なく、”なにを”というところにポイントを置きます。
- 誰になにを伝えたいのか、明確にする
自分の好みや外注先のデザインだけにこだわってはいけません。このバナーによって、売上が左右されるのであればなおさらです。”誰のために”、”なんのために”このバナーを制作するのかを明確にしましょう。 - どこに掲載するのか
掲載する場所により、大きさが違ってきます。大きさが違うということは、字体や画像のバランスの調整を考える必要性が出てきます。バナーは一目でわかる広告なので、小さければ小さいほど、画像のチョイスが重要になってきます。 - 競合のバナーをリサーチする
今の時代、ネット上にはさまざまな商品や情報があふれています。似た商品やサービスのことをリサーチし、どのようなバナーが作られているのか、どうすれば差別化できるのか、といった要素を制作に落とし込むことも大切です。 - バナーの内容（受注内容）を確認・決定する
外注された場合やオリジナルのバナーを作成時に必要なのは、サイズやターゲット以外に、利用用途と入れ込む情報の確認です。外注の場合は、クライアントから必要な情報が送られてくることが多いので、その条件を全てクリアする必要があります。
そのため、外注案件の場合は情報をしっかりと読み込んでおきましょう。オリジナルの場合は自由が利きますが、その分入れ込む情報を絞り込んだりターゲットを明確にしたりして、バナーに入れ込む内容をしっかり決定しましょう。
バナー制作のコツとは？
実際にバナーを制作するにあたって、コツやポイントをご紹介していきます。
紹介するコツやポイントが、全てのクライアントの需要に対応しているわけではありませんが、基本的な制作時の方法として参考にしてみてください。
最低限知っておくべきコツやポイントなので、制作時に困ったら振り返ってみましょう。
● 素材を選ぶ
バナーの「第一印象」はとても重要です。どういった素材を選ぶのかも、Webデザイナーとしてのセンスの見せどころともいえるでしょう。いかに商品やサービスとリンクさせているのかが重要になります。
● キャッチコピーにこだわる
バナーに入れられる言葉や文字数は限られています。情報量が多いのもよくなければ、少ないのも好まれません。クリックしたくなるキャッチコピーを入れ込みましょう。
● 配色と文字の強弱のバランス
色合いと文字の強弱（大小）のバランスも重要です。色の配色については、原色であれば目に入りやすいですが情報は入ってきにくいですし、文字の大小や強弱のバランスが多いのもキャッチーで無くなってしまうなど、どちらかが偏っていると情報が顧客に伝わらない可能性があります。外注された場合は、案件の中に色やフォントの指定があることもありますので、決められた情報の中でバランスを調整しましょう。
● 文字の行間や字間
文字にはフォント・インデント・強弱などさまざまな種類があります。そのフォントの種類やインデントのバランスなどで読みやすさに違いが出てきますので、文字に関してもデザインする必要があります。特に文字に関して気を付けたいのは、字間と行間です。字間は1文字1文字との隙間、行間は文章と文章の隙間のことをいいますが、このバランスを見落とすと明らかに読みやすさに違いが出てきてしまいます。バナーの大きさによって、行間と字間もしっかりデザインしていきましょう。
● 規則性を持たせる
継続した案件や、シリーズものとしてバナーを制作する場合は、バナーデザインに規則性をもたせるとバランスよくなります。例えば、文字を入れる場所を固定させたり使う画像や素材にテーマ毎の規則性を入れ込んだりと、遊びを入れてみるのもポイントです。
● 配置にこだわる
素材・画像・文字をどこに配置させるかもWebデザイナーとして必要なスキルです。どこになにを配置するかで、顧客側がなんの情報を得ることができるかが左右されます。中央にギュッとまとめる、左右の余白をそろえるといった調整によって、見栄えも変わってきます。レイアウトはデザイナーの腕の見せどころでもあるので、しっかりこだわってデザインしてみましょう。
● 透過や誘導デザイン、装飾などデザインに遊びを入れる
画像を利用する際、透過処理をすることでデザインの幅が広がります。さらに、誘導デザインである「矢印」、「click」という文字や、「今すぐ検索」を入れるのもおすすめです。シンプルな画像もバナーには使えますが、装飾をあえて散りばめることで目を引くようなデザインにすることも一つの方法です。
今回は7点のコツとポイントを挙げてみました。ぜひ参考にしてみてください。
バナー制作の注意点
バナー制作時のコツとポイントをご紹介しましたが、バナー制作時の注意点もご紹介します。バナー制作時のポイントと通じる部分もありますが、ここで再度振り返ってみましょう。
● 遷移先とデザインの内容をがかけ離れている
バナーと遷移先のサイトがかけ離れているデザインはNGです。バナー制作時はバナーのデザインだけを考えるだけではなく、リンク先のサイトと関係性をきちんとバナーに表す必要があります。
● 画像と文字のバランスが偏っている
バナー制作時の主な目的に「伝えたいことを伝える」ということがあります。文字と画像のバランスが弱いと、見たときになにを表しているか分からなくなってしまいます。透過処理を施したり、背景のコントラストを調整したりすることでバランスを整えることも注意すべきポイントです。
● 画像と文字のイメージが違う
背景画像や素材と文字のフォントのバランスも注意してみましょう。明らかにマッチしていないと内容が伝わらない結果に繋がってしまいます。
● 内容を詰めすぎている
余白が気になってしまう場合もあるかもしれませんが、あえて余白を残すこともデザインの一部ですので、埋めすぎに注意しましょう。そして、文字や画像を詰め込みすぎないように気を付けてみましょう。情報量が多すぎて内容が伝わってこなかったり、文字が小さすぎて読めなかったりすると、せっかくのターゲットに対して伝えたいことが伝わらないという結果になってしまいます。
● 使用する素材の画質が粗い
ネット上でもしフリー素材を使用する場合などに気を付けてほしいポイントとして、画質の問題があります。できるだけ良い画質のものを使うようにしましょう。
バナー制作のコツを知って、よりよいバナーを作る
Webデザイナーの仕事の中でも、バナー制作は頻繁にある仕事のひとつです。だからこそ、酷似したサービスや商品のバナー制作をする機会が多いと思います。
それぞれに差別化を考え、クライアントの要望に応えるというスキルを求められますので、バナー制作のコツをしっかり捉えてバナー制作に活かしてみましょう。
