September 01, 2020 更新

  • リンク切れサイトを削除しました。

バナーデザインは決められた領域内でどれだけユーザーやターゲットの目にとまるようなデザインにできるかが重要になってきます。
デザイン制作したことあるなら一度は経験したことあると思いますが、領域が決められているけどその中でしっかり伝えたい内容を目立たせる必要があるので、何度もレイアウトを調整したり、結局時間をかけて完成してもいまいちな出来になってしまったりなんてことも...。

そこで今回は、バナーデザインをするにあたって覚えておきたいレイアウトやデザインパターンをはじめ、効率良く制作していくことができる制作フロー、特に新米デザイナーさんなどには非常に参考になると思うので是非目を通して欲しいエントリー、インスピレーションをもらえるバナー関連のデザインギャラリーといった、バナーデザインの制作に関連することをまとめてみました。

バナーデザインの制作フロー

後ほど紹介するエントリーでこのような内容に関してイメージ付きで丁寧に解説しているところが多数あるのでここでは簡易的な内容にはなりますが、ほとんどの場合は以下のような制作フローでバナーデザインをすることが多いです。

あくまで例なので、デザイナーや制作会社によっては全く異なるフローの場合もあります。

何を一番に訴えたいのかと文章・素材を確認する

banner design 01

まずこのバナーを見たユーザーに何を一番に訴えたいのかをしっかりと確認・把握します。
どんなに綺麗でどんなに格好良いデザインのバナーを作ったとしても、やはりクリックされなければ意味がありませんし、特にクライアントから制作依頼を受けた場合はせっかく作ってもクライアントが一番訴えたい内容が伝わり辛いようなものだと最悪の場合一から作り直しということも...。

また、向こうから用意されたキャッチコピーや確実に入れなくてはいけないキーワードの有無、人物や商品の写真を始めとするデザイン素材の有無なども予め確認しておきます。
こちらも完成後に「これが入っていない!」などの修正を回避するために初めにしっかりと行っておきます。

とりあえず要素を配置し、優先順位を再確認する

確認した必要な文章や素材などをレイアウトは適当で構わないので一旦全てデザインの領域内に配置します。
これを行うことで初めにしっかり確認をしたはずなのに結局作り始めた時にその部分を作り忘れてしまうこともなくなりますし、変に頭の中でどうしようと考えるよりもその後スムーズにデザイン作業を進めることができます。

また、優先順位が高い(一番に訴えたい)部分をここで再度確認します。
具体的には一番に訴えたいコピーの文字サイズを少し大きくして配置しておいたり、領域内の上から下に向かって優先度高 → 優先度低という形で配置しておくとよりわかりやすいです。

レイアウトを決める

banner design 02

後ほどバナーデザインでよく用いられているレイアウトやデザインパターンもいくつか紹介しますが、そのバナーをどのようなレイアウトでデザインしていくかを考えます。
そのままPCで配置した要素を動かすなどして作業する人もいますが、人によっては手書きで簡単にワイヤーを書いてからPCで作業する人もいるので、自分にやりやすく効率の良い方法で進めます。

まずは単色やモノクロで配置していく

banner design 03

慣れている人ならいきなりカラー付きでどんどんデザインしていくでしょうが、まだ苦手な人はまず単色やモノクロでベースデザインをしていくことがおすすめです。

例えば、中途半端にカラー付きの要素が配置されている状態からスタートすると、そのカラーに合わせてああでもないこうでもないと何度もカラーを変更する作業が発生して時間がかかってしまったり、カラーを意識しすぎて本来一番目立たせるべき内容がボヤッとしてしまったりするので、いっそのこと最初はカラーを考えずに配置やレイアウトだけに集中できるように単色やモノクロで作業をしていきます。

細かい調整をする

単色やモノクロで要素を配置した後は細かい調整を行ってきます。
具体的には全体のバランスなどもそうですが、文字の装飾やカーニング調整をしたり、ボタンやアイコンを配置しているならそれらをより作り込んだデザインにしていきます。

ひと通り調整が済んだらもう一度全体的なバランスなどを確認していきます。
また、可能であればこの時点で他のデザイナーなどに一度デザインを見てもらうと良いと思います。
自分では良いと思ってもいても人によってその捉え方は様々ですし、場合によっては他の人に意見を取り入れることによってより良いデザインになっていくこともあります。

カラー付けしていく

banner design 04

レイアウトも済み、細かい部分の調整がほぼ終わったらいよいよカラー付けしていきます。
レイアウトもまともに決まっていない状態だと「配置はどうしよう...。 カラーはどうしよう...。」といろんなことで頭を悩ませてしまいますが、上の手順で行うことでここではほぼカラーバランスのみを考えることができると思います。

最終調整 → 完成へ

「細かい調整をする」のフローである程度は調整を行ってはいますが、やはりカラーを付けると大きく見た目が変更することはなくても多少はもう少しこうしたいといった部分が出てきたりするので、そういった部分の手直しなども含めて最終調整を行います。
また、カラー付け後もしっかりと目立たせたい部分は目立っているかどうかなども確認し、問題なければ完成となります。

 

ここまでバナーの制作フローを紹介してきましたがもちろんこれはあくまで例であり、人によってはもっと細かく工程を踏むという人もいるでしょうし、逆に慣れている場合はもっと少ない工程で作り上げてしまうという人もいると思います。
最終的には自分に合った方法だったり制作会社であれば決まったルールがあるとは思いますが、現状で特にこういったものは考えずにとにかく作っているという人や少しでも制作時間を縮めたいという人は、上で紹介したようなフローで行うことでそれらが改善される可能性も高いと思うので、是非一度試してみてください。
また、このエントリーを見てくれたデザイナーさんなどでここで紹介した以外にも「もっとこうすると良いよ!」みたいなアドバイスあれば是非教えてください :)

代表的なレイアウトやデザインパターン

割と大まかで且つ他にもあるとは思いますが、バナーデザインでよく利用されていると思うレイアウトやデザインパターンを実際のバナーデザインを紹介しながら分類化してみました。
特にこれからバナーデザインについて学びたいという人は、こういったレイアウトや要素の配置パターンがあるということを頭に入れておくと様々なパターンのバナーデザインを作るのに役立ってくると思います。

縦割り・横割りなどの分割レイアウト

縦割り・横割りなどの分割レイアウトを採用したバナーデザイン

表示領域を分割して半分はイメージやイラストを表示し、半分はテキストなどを表示させるといったレイアウトで、それぞれを5:5の割合にしているものもあれば、7:3や8:2などの異なる割合で分割しているものもあります。
また、縦や横で分割されているデザイン以外にも斜めに分割しているものや境界線部分に曲線を用いたりして少し変わった感じにしているデザインも見かけます。
全部がそうであるわけではないですが、多くの場合イメージなどを表示させる部分とテキストなどを表示させる部分とでは配色を大きく変えるなどして、メリハリを付けた感じのデザインになっていることが多いです。

イメージを全面に出したり、余白を大きくとる

イメージを全面に出したバナーデザイン

例えばタレントや商品などのように、特徴的なイメージを領域いっぱいにどーんと表示させるようなレイアウトです。
ほとんどの場合はイメージだけでなく併せてキャッチコピーのみなど少量のテキストを表示させているようなものですが、中にはパッと見で読めないぐらいテキストを小さくしているバナーもあり、とにかくビジュアルを見せるという感じのものが多いように思います。

余白を大きくとったバナーデザイン

また、バナーデザインの場合はとにかく領域内にいろいろな情報が詰め込まれていることも多いですが、中には上のイメージのように余計な情報は削ぎ落としてテキストなども最小限にしか配置せず、余白を大きめにとったタイプのデザインもあります。
もちろん使い方によりますが、余白を上手く使うことで高級感を出すことができたり、ごちゃごちゃさせなくてもユーザーの目にとまるようなデザインにすることができます。

キャッチコピーやロゴを大きく

キャッチコピーやロゴが大きいバナーデザイン

とにかく伝えたい事を大きなキャッチコピーで表示させたり、誰もが知っているようなメーカーやブランドであればそのロゴデザインなどを大きく配置するというレイアウトです。
キャッチコピーの場合はパッと見でどんな内容がすぐ把握でき、ロゴなどを使用した場合もリンク先で何のメーカーやブランドのページに飛ぶのかが容易に判断できるため、それらにピッタリのユーザーには非常に効果的かもしれません。
ただ、逆にそれらに興味が無いとか極端に言うとそれらが嫌いというユーザーの場合はかなりクリックされる確率は低くなると言われています...。

要素を並べる

要素を並べたバナーデザイン

主にリンク先がECサイトだったり、カラーバリエーションが多い商品紹介ページだったりする時によく見かけるレイアウトです。
例えば、全く違う商品が沢山並んでいれば「様々な種類の商品が揃っているのかな」と思わせることができますし、見た目は同じでもカラーが異なるものが並んでいれば「カラーバリエーション豊富な商品なのか」と思わせることができますね。
また、サイズが幾つかあることを示すために異なるサイズで配置するというパターンもあります。

要素を隙間なく並べる

要素を隙間なく並べたバナーデザイン

大きな分類としては要素を並べるレイアウトになりますが、より沢山のイメージを使って背景に隙間なく敷き詰めているようなレイアウト方法もあります。
同じくECなどのバナーで商品を沢山並べたようなものの他にも、サービスを紹介するバナーでその利用者の顔写真を並べたり、実際に使用しているようなイメージを並べたりするデザインをよく見かけますね。

クリックを誘導する見た目

クリックを誘導する見た目のバナーデザイン

こちらはレイアウトよりも要素になりますが、いかにも押せそうなボタンなどをデザイン内に配置してクリックしてもらえるようにしたバナーデザインもあります。
よくあるものだと「続きはこちら」とか「今すぐチェック!」みたいなボタンが置かれていたりするものが多く、中には質問をしているようなテキストを表示させて「YES」「NO」ボタンを配置させてみたり、チェックボックス付きのアンケートのような見栄えにして診断結果が表示されるように思わせるデザインもあります。

領域内から要素が飛び出していたり、動きをつける

領域内から要素が飛び出していたり、動きをつけたバナーデザイン

バナーといえば300x250・125×125・728×90と四角形だったり長方形のイメージが強く、その中にイメージやテキストが配置されているのを多く見かけますが、中には枠内から飛び出しているように見せたデザインもあったり、広告ではあまり見かけないかもしれませんがサイトの内部リンクバナーなどでは例えば円形や多角形にするなど少し変わった形にしているバナーデザインもあります。

また、他にもFlashやアニメーションGIFなどを利用して動きのあるバナーにするという方法もあります。
例えば上のサンプルイメージにあげたモリサワのバナーでは、「ウェブデザインは新たな表現力を手に入れる。」という文言が数秒おきに異なるフォントに切り替わり、様々な種類のフォントを利用できるということを表現しています。
モリサワのバナーは一部が変化しているものですが、バナーによってはもっと全体的に大きく変化させたりするものがあったり、稀にですがシネマグラフを用いてイメージの一部分だけ動いているなんてバナーも見かけることがあります。

バナーデザインについて参考になるエントリー

バナー制作時のフローやよくあるレイアウトなどについて紹介してきましたが、同じようにバナー制作時のフローや覚えておきたいテクニックなどを紹介しているエントリーは他にも沢山あります。
以下はそれらの中でも個人的にわかりやすかったりよくまとめられていると思うエントリーで、新米デザイナーさんやこれからバナーデザインをする機会が多くなってくるという方は目を通しておくことをおすすめします。

勝てるバナーレイアウト20選!│レイアウトに悩んだ時の虎の巻

上でバナーデザインでよくある見せ方やレイアウト方法について幾つか紹介しましたが、こちらのエントリーではそれをより細かく紹介しています。
各要素を配置したワイヤーのようなイメージと実際のバナーデザインを併せて紹介し、それぞれのレイアウトの特徴・メリット・デメリットなどが書かれています。
エントリーでは大見出しとして、以下のようなに分類されています。

  • 悩んだらまずは最強のベーシック型
  • ベーシックに負けない3つの王道レイアウト
  • 商品の見た目に自信があるなら写真メイン型レイアウト
  • 複数商品やカラーバリエーションが豊富ならバリエーション型レイアウト
  • ブランド力が高い場合にはブランドロゴを押し出したレイアウト
  • 漫画・イラスト型レイアウト
  • その他珍しいバナーレイアウト

 

【バナーデザインの教科書】訴求したいイメージ別|王道デザイン8選!

こちらはバナーデザインの見せ方やイメージについてまとめられたもので、訴求したいイメージ別に実際のバナーデザインを例に挙げながらフォント・配色・その他の特徴を解説しています。
エントリーでは以下のようなイメージ別のバナーデザインを紹介しています。

  • 【お得感】イメージのバナーデザイン
  • 【高級感・リッチ感】イメージのバナーデザイン
  • 【爽やかさ・親近感】イメージのバナーデザイン
  • 【可愛い】イメージのバナーデザイン
  • 【誠実さ・真面目さ】イメージのバナーデザイン
  • 【安心・信頼感】イメージのバナーデザイン
  • 【先進性・知的好奇心】イメージのバナーデザイン
  • 【にぎやか】イメージのバナーデザイン

 

ディレクターなら知っておきたい「バナー広告制作の基礎知識」

少し古めのものですが、バナー制作時に知っておきたい基礎的な部分について書かれており、思考設計や少しですが制作テクニックについてもあります。
タイトルはディレクター向けな感じにとなっていますが、デザイナーも把握しておきたいですね。

 

100種以上の自社広告運用でわかった!バナー広告クリエイティブ4つの基本

実際に自社で広告を制作・運用してみてわかったことや効果の高い広告作るコツなどを紹介しています。
もともと作成したものをどのように変化させたのかがイメージ付きで解説されており、中にはクリック数が変更前の3倍以上になったものもあるようです。

 

新米デザイナー必見!バナーデザインを効率的に美しくする10のステップ

バナーの制作フローがわかりやすいイメージ付きで紹介されているエントリーで、実際にひとつのバナーが完成するまでの手順もですが、合間にあるちょっとしたポイントやテクニックも参考になります。
個人的には今回紹介させてもらっているものの中では特にわかりやすくて、タイトルにあるように新米デザイナーさんは是非見ることをおすすめします。

 

デザイン作業のスピードアップ

デザイナーに限ったことではありませんが、仕事として何かを作るときにはクオリティだけでなくどれだけ早く作れるかも重要になってきます。
エントリー内にも書かれているようにいずれも基本的な内容かもしれませんが、特にこれからデザインを学ぼうとしている人はこれらを知っているかいないかでスピードはもちろん、バナー以外の他のデザインでもいろいろと役立ってきます。

 

「45分」で作れる! 高品質バナーの作り方!

こちらは「高品質なバナーを速く簡単に作れるように」というのをテーマにバナーデザインの制作フローについて書かれているものです。

 

バナーのリサイズを簡単に!徹底するべき7つのポイント

特に広告バナーの場合はある特定のサイズのみ作るのではなく数種類のサイズを作るということがよくあるため、中には300x250では良い感じに作れても728×90だと見た目がいまいちになってしまったなどの経験がある人もいると思います。
このエントリーではそういったリサイズ作業時に覚えておくと役立ちそうなポイントやテクニックがまとめられています。

 

WEBサイトの実例から見る、テイスト別バナーデザインまとめ

参考になるデザインバナーをまとめているエントリーで、各テイストの実例バナーを用いてそれぞれのデザインの特徴や何を考慮してデザインされているかなどの説明付きで紹介しているエントリーです。
こちらは広告デザインではなくサイト内に設置されているような内部リンクのバナーデザインなどをまとめていて、下記のようにテイストを分類して紹介しています。

  • シンプルなバナーデザイン
  • オーソドックスなバナーデザイン
  • 円形を利用したバナーデザイン
  • 縦長(縦書)バナーデザイン
  • 横長バナーデザイン
  • イラストを使用したバナーデザイン

 

8bit モノづくりブログの「バナーデザインまとめ」エントリー

「8bit」さんで書かれているモノづくりブログでは、バナーデザインをまとめたエントリーが複数公開されています。
エントリーの中にはYahoo! JAPANに掲載されていたとか大手婚活サイトのデザインといったように特定のサイトを対象にしてまとめたものもあります。

デザインギャラリー

レトロバナー

レトロバナー

エントリー公開時点で6,150個のバナーが掲載されており、サイズ・カラー・業種・テイストなどカテゴリー分けもされていて検索機能も付いています。
特にサイズは細かく分けられているので、参考にしたいデザインサイズを探す時に便利ですね。
一覧でもそれぞれにホバーするとイメージが拡大されるようになっているのも嬉しいですが、詳細ページでは更にそのバナーに使用されているカラーコード掲載やそのカラーパレットをダウンロードできるようにもなっています。

バナーデザインギャラリー

バナーデザインギャラリー

エントリー公開時点で553個のバナーが掲載されており、サイズ・カラーから探す以外にも「日本国内」「海外」と地域で絞り込んで探すこともできます。
また、検索機能は複数の条件を指定して検索できるようになっており、より目的のバナーデザインを探しやすくなっています。
ただ、意図的にそうしているなら申し訳ないですが、正直300x250など多用されるサイズでのバナーデザインが揃っていないのが少し残念です...。

banner gallery

banner gallery

エントリー公開時点で3,000個のバナーが掲載されており、サイズ・カラー・カテゴリーの3つから目的のバナーデザインを探せるようになっています。

Banner Matome

Banner Matome

エントリー公開時点で14,400個のバナーが掲載されており、カラー・業種・表現別の3種類のカテゴリーが用意されているので、それらを利用して目的のバナーを探すことができます。

バナーデザインアーカイブ

バナーデザインアーカイブ

エントリー公開時点で2,102個のバナーが掲載されており、カラー・業種・サイズから絞り込んで探すことができます。
サイズでは一般的なものはもちろん、Twitterやスマートフォンといった他のギャラリーサイトでは見ない感じの分類もあります。

ブブンデザインアーカイブ

ブブンデザインアーカイブ

「ブブンデザインアーカイブ」は様々なデザインパーツをまとめているサイトですが、その中でバナーをまとめているカテゴリーがあります。
バナーといっても上で紹介してきたような広告ではなく、サイトに設置されている内部リンクなどのバナーなので、そういうものの参考デザインを探している人には便利だと思います。

 

以下はいずれも海外のバナーデザインギャラリーになります。
国内とは言語もテイストも違うので参考にすることは少ないかと思いますが、ちょっと違う感じにしたいときやむしろ海外っぽいデザインにしたいというときには眺めるとインスピレーションもらえるかもしれません。

Web Banner Gallery

Web Banner Gallery

サイズとカラーから目的のデザインを探すことができます。

Banner Inspiration

Banner Inspiration

TOPページが検索サイトのような見た目ですがこちらもバナーデザインのギャラリーで、カテゴリー・タグ(種類)・サイズの3つから目的のバナーデザインを探せるようになっています。

Elements of Design

Web Banner Gallery

「Elements of Design」はバナーにかぎらずデザインパーツをまとめているギャラリーなのですが、その中にバナーに関するデザインをまとめているカテゴリーがあります。