ブログBLOG

Tips

2019.12.05

author:カヨコWEBデザイナー

バナーをデザインしてみよう!

バナーをデザインしてみよう!

デザインをするうえで誰しも得意・不得意な分野があるかと思います。
中でも筆者は「バナー」のデザインがとても苦手です…。
何かと依頼される機会が多いのがバナーデザインですが、限られたスペースでユーザーにアピールできるバナーを作るのは容易なことではありません。
あれこれ考えすぎていつの間にか時間が経ってしまうこともしばしば…。
とはいえ、苦手分野から逃げ続ける訳にもいかないので、日々心掛けているバナーデザインのポイントやテクニックの例などを挙げてみました。
筆者と同じように、バナーデザインが苦手な方へ少しでも手助けになればと思います。

遷移先ページのデザインのテイストを取り入れる

バナーの基本的な役割はWEBページへの誘導だと思います。
カラーや画像素材など誘導先のページテイストをバナーに反映すると、デザインに一貫性が生まれユーザーがバナーをクリックしWEBページに移動した際に違和感や不自然さを感じることがなくなります。

必要な要素を考える

情報をたくさん入れ込んでしまうと結局何を伝えたいのかわからなくなってしまいます。
「タイトルや期間、メインビジュアルなど絶対に入れないといけないもの」
「遷移先に記載してあればいいもの」
など、自身で情報を整理し、必要最低限の要素を選定し配置するようにしましょう。
スペースが限られている分、情報のみで視認性を向上させるのはとても難しいです。
キャッチコピー、画像、色味など様々な要素を組み合わせてデザインしましょう。

まず初めはモノクロでレイアウトする

最初から色を付けた状態でレイアウトをすると色に意識が向いてしまいます。色の変更を何度も繰り返しレイアウト自体がなかなか決まらないことがあります。
まずはモノクロで濃淡をつけながらレイアウトを決め、次のステップとして色を決めていきましょう。
また、レイアウトはまず必要な要素をざっくりと配置しそれから細部を整えるようにするとスムーズに進めることができます。

文字にメリハリをつける

テクニックのひとつとして、文字のサイズの大小を使い分けることでメリハリをつけることができます。その他にもリズムをつける、インパクトを与えるという意味で装飾をすることもおすすめです。
簡単にできる文字の装飾のパターンをいくつかご紹介します。

簡単にできる文字の装飾のパターンをいくつかご紹介

ユーザーの立場に立ってデザインを見る

掲載時期、ターゲット層など考慮し誰が見ても何を訴求しているバナーなのかわかる内容にしましょう。「もし自分が見ているWEBページにこのバナーが表示されたら…」と常に意識することが大切です。可能であれば他のデザイナーやディレクターに確認してもらうようにしましょう。

まとめ

「時間をかけて作ったバナー」=「クリックされるバナー」とは限りません。
同じデザインでも少し色を変えたり、テキストを変えるだけで効果が出る場合もあります。
デザインに正解はないのでこればかりは経験や日々の試行錯誤が必要となりますが、先述のような基本ポイントを押さえてより効率的に作成できるようにしたいですね。

最後に、バナーデザインの参考になるサイトをいくつか集めました。
サイズやレイアウト、色の使い方など眺めるだけでも制作のアイデアが浮かんでくると思います。
是非参考にしてみてください。

RECENT POSTS