スマートフォンやタブレット・PC を使って日々インターネットを利用する今、私たちが当たり前に目にしている「バナー」。バナーはサイズも小さく掲載する要素も比較的少ないため、一見簡単に作れそうですよね。最近では、副業としてバナー制作に挑戦する方も増えているようです。
しかし、シンプルがゆえに奥深いのが「バナー」。いざ作ろうと作業を始めた途端「使う色は？」「画像は？」「文字のフォントや大きさは？」「レイアウトは？」などなど、一つひとつの選択に悩んで思うように進まなかったり作ったものの、なんだかバランスが悪い・・・といった経験がある方も多いのではないでしょうか。
今回は、デザイン初心者でも簡単にバナーが作れる デザインACのテンプレートを使って思わずクリックしたくなる効果的で目を引くバナーデザイン制作のコツをご紹介します。
目次
バナーの役割を再確認しよう
「バナー」（ banner ）」とは、「旗」「幟（のぼり）」などの意味が示す通りウェブサイト上に配置された広告や宣伝用の看板のようなものです。その最大の役割は、「リンク先のページに訪問してもらう」ことです。
バナーにはリンクが貼られていて、クリックまたはタップすることでリンク先の Web ページが表示されます。このしくみを活かして、商品やサービス、キャンペーンなどの内容を告知や紹介したり、特定の WEB サイトのアクセス数を増やすことを目指します。
このような役割をもつバナーに必要なのが、限られた情報で見る人の興味を引いて行動（クリックまたはタップ）を起こしてもらえるような魅力的な“デザイン″なのです。
※バナーには、テキスト形式、静止画形式、動画形式などいくつか種類がありますが、ここではもっともポピュラーな「静止画像バナー」を取り上げます。
まずは「コンセプト」を立てよう
バナーをデザインする上で最も大切なことは、事前にコンセプトを立てることです。取り扱う商品やサービスによって、見て欲しい相手や伝えたいメッセージは異なり、それに伴ってデザインの方向性も大きく変わります。
これから作ろうとしているバナーの特性を考えて、最適なコンセプトを立てましょう。
◆ デザインの方針
• 誰に・・・・・・・・訴求したいターゲット層は？
• 何を・・・・・・・・もっとも伝えたいモノ・コト・メッセージは？
• どのように・・・・・目に留めてもらうための工夫は？
◆ 情報の整理
バナーのデザインスペースは限られているため、内容を盛り込みすぎると伝えたい内容やメッセージが逆に薄れてしまいます。事前に伝えたい要素や内容を書き出して、優先順位を決めましょう。
これらの要素をしっかりと検討し頭に入れておくことで、デザインを進める際にメッセージや色味、画像の大きさ、レイアウトなど選択する要素の取捨選択がスムーズにできるようになります。
バナーデザイン制作のコツ
ここからは、実際にバナーを制作する上で気をつけたいポイントについてご紹介します。
1. 文字は短く＆簡潔に
バナーでは、ターゲットにもっとも伝えたいメッセージを「キャッチコピー」として文字でレイアウトします。
キャッチコピーのポイントは「短く＆簡潔に」。情報に溢れたインターネット上で伝えたい内容を瞬時に伝えるために、バナーに配置する文字はなるべく文字数の少ない簡潔なメッセージである必要があります。伝えたいことがたくさんあるからと言って、長い文章を入れてしまうのは基本的に NG！ 結局何が言いたのかが分からない、残念なデザインになってしまいます。
キャッチコピーの文字数を減らすコツは、キーワードを同義語に変換して言い換えたり敢えて主語を省いたり「です、ます」等の語尾を割愛するなど、短くしたり省いても意味が伝わる言葉は思い切って削ってみましょう。文字数が少なくなることでレイアウトに余白が生まれ、メッセージが目に留まりやすくなります。
メッセージが瞬時に伝わるコピー
こちらのサンプルバナーで採用しているキャッチコピーはとてもシンプルですが、「 500 万曲」「１カ月「無料」など伝えたいキーワードが 16 文字の中に詰まっています。
また、「登録ボタン」を独立させることで余白が十分にあるすっきりとしたレイアウトとなり、効果的に登録へ誘導することができています。このバナーを見た人は、リンク先のページで魅力的な音楽サイトに登録できることが一目で理解できます。
“アピール文言″を強調
デザインの中で特に伝えたい文字（キーワード）を強調するのもおすすめです。強調する手法としては、目立たせたい文字を単独で大きくレイアウトしたりその部分だけフォントやカラーを変えたり、装飾したりします。こうすることで、もっとも伝えたいメッセージを際立たせることができます。
こちらは、求人広告であることが瞬時に分かるよう「募集中」の文字をサイズの大きい白抜き文字としてレイアウトした例です。背景写真はうっすらと見える程度に加工して、ほぼベタ塗の背景とすることで白抜き文字が一層映えています。
その他の情報は、募集職種を小さい文字で羅列しただけ。必要最低限の情報に絞って情報発信することで、最も伝えたいメッセージがターゲットにダイレクトに伝わります。このようなシンプルなデザインは、幅広いジャンルのバナーに応用できます。
SALE を告知するバナー広告では、「〇〇％OFF」などの割引率（数字）を強調するのがおすすめです。こちらのバナーでは、クーポン使用後の割引率をメインの文字として大きくセンターに配置しています。割引が受けられるキャンペーン期間の日程も割引率の近くにあるので、見る人に対して親切ですね。商品の写真は背景画像として見せることで、限られたスペースを上手く使っています。
このデザインも背景画像を入れ替えるだけで、さまざまな商品やサービスのバナーとして応用できそうです。
2. 画像で世界観を演出
バナーをデザインするにあたって、画像選択はもっとも重要な要素の一つです。画像はバナー全体の印象を左右するだけでなく見る人の視覚に強く訴えるため、伝えたい内容が瞬時に伝わる画像を採用する必要があります。
例えば、スキンケア商品やコスメ関連分野では商品に含まれる成分を写真やビジュアルでアピールしたり、肌が美しい女性の顔写真を使って商品の使用感を想像してもらうのも効果的です。
使用後の自分をイメージさせる
新発売のスキンケア商品のプロモーション用バナーサンプルです。キャッチコピーをビジュアル化したような、肌にハリツヤがある女性の顔写真を大きく配置して商品の特徴を印象づけています。また、果物の写真や全体の色味から、柑橘系の成分が含まれていることが瞬時に伝わり、画面上からオレンジの爽やかな香りが漂ってきそうですね。全体を通して商品のみずみずしい世界観が画像で表現されおり、「商品を使ったらどのようになれるのか？」をターゲットにイメージさせています。
得られる体験を写真で伝える
観光関連のバナーであれば、訪問先の美しい景色や名物料理等の写真を使用して「楽しく・おいしい体験」を想像してもらうのもよいでしょう。
こちらは、旅行代金の割引をアピールするバナーサンプルです。バナー上には「旅行」や「観光」という言葉は使用していませんが、旅行先での魅力的な体験をイメージさせる写真を背景画像とすることで「セールを利用した旅行意欲」や「旅行先でのワクワク感」を高めることに成功しています。
「デザインAC」では写真のサイズ変更や切り抜きなども簡単にできるので、ぜひ一度好みの写真に差し替えてみてください。
イラストを使用して個性的に
こちらの求人広告バナーサンプルでは、敢えて写真を使わずイラスト画像のみを採用しています。余白がたっぷり取られたレイアウトの中心にソーシャルメディアマネージャーを連想させるおしゃれなイラストを配置することで、写真とは一味違う個性的で目を引くバナーに仕上がっています。
3. 色味で印象をコントロール
バナーに採用する「文字の色」や「配色」も重要な要素の一つです。目立たせたい文字は背景とのコントラストを高くしてメリハリをつけることで、読みやすくなります。また商品やサービスのイメージと関連する色を採用することで、宣伝効果が一層高まります。バナー全体のイメージを大きく左右する色。制作時には最適な色選びを意識しましょう。
宣伝内容と関連性の高いカラーを採用
こちらのバナーでは、お正月やお祝いごとなどに使用される縁起の良い「紅白」をメインカラーとすることでお正月感やおめでたい印象を高めています。赤と白のコントラストで文字が読みやすく、色味も暖色系で統一されているためすっきりとまとまった印象です。
色味の統一
こちらはファッションブランドの SALE 告知用のバナーサンプルです。ポイントは、ファッションアイテムを着た女性以外の要素（背景やあしらい等）の色味を淡いブルー系の色味で統一している点です。こうすることで、もっとも見て欲しい主役の部分に自然と目が行くのと同時にファッションブランドのバナーらしい、おしゃれで洗練された印象を与えています。
4. 伝わりやすいレイアウト
人間の目の動きは、一般的に左上から右下に流れると言われています。これを「Z の法則」と言い、デザイン業界ではこの法則に沿って伝えたい要素を左上から右下に向かって配置する手法をよく使います。
例えば、最初に目に入る左上に重要な情報やおすすめの商品を配置し、右上、左下、右下の順に情報を配置するというものです。これにより、見る人に情報が伝わりやすくなると考えられています。
長方形サイズを活かしたレイアウト
こちらのスキンケア商品のバナーデザインサンプルでは、縦長の長方形を活かして左上にキャッチコピー、右下に値段をレイアウトしています。視線を移す過程で、顔写真・商品説明・商品特徴が自然と目に入るように工夫されているのがわかります。
こちらの求人バナーサンプルでも左上にキャッチコピーが目立つ文字で配置されており、伝えたい情報がぱっと目に飛び込んできます。その上で、アイコン化した情報と看護師のイメージ写真をバランスよく配置することですっきりと整理されたレイアウトとなり、見る人に必要な情報をわかりやすく伝えています。
デザインACのバナーテンプレートを使ってみよう
いかがでしたでしょうか。ひと昔前は Photoshop や Illustrator などデザイン専用のソフトがないと作れなかったバナーですが、デザインACのバナーテンプレートを使用することでデザイン初心者でも今回ご紹介したようなおしゃれで効果的なバナーが簡単に作れます。
もちろん、デザインACのバナーテンプレートは無料！使い方はとっても簡単！テンプレートの背景画像を入れ替えたり、文字を任意の文字に編集するだけ。直感的な操作でオリジナルのバナーが簡単に作れます。
サイズやデザインも豊富に取り揃えていますので、バナーデザインに興味がある方はぜひ一度試してみてはいかがでしょうか。