バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました 目次
1. バナーデザインの制作フロー
後ほど紹介するエントリーでこのような内容に関してイメージ付きで丁寧に解説しているところが多数あるのでここでは簡易的な内容にはなりますが、ほとんどの場合は以下のような制作フローでバナーデザインをすることが多いです。
※もちろんあくまで例なので、デザイナーや制作会社によっては全く異なるフローの場合もあります。
1. 何を一番に訴えたいのかと文章・素材を確認する
まず “このバナーを見たユーザーに何を一番に訴えたいのか” というのを確認・把握します。
どんなに綺麗でどんなに格好良いデザインのバナーを作ったとしても、やはりクリックされなければ意味がありませんし、特にクライアントから制作依頼を受けた場合は折角作ってもクライアントが一番訴えたい内容が伝わり辛いようなものだと最悪の場合一から作り直しということも...。
また、向こうから用意されたキャッチコピーや確実に入れなくてはいけないキーワードの有無、人物や商品の写真を始めとするデザイン素材の有無なども予め確認しておきます。
こちらも完成後に「これが入っていない！」などの修正を回避するために初めにしっかりと行っておきます。
2. とりあえず要素を配置し、優先順位を再確認する
1で確認した必要な文章や素材などをレイアウトは適当で構わないので一旦全てデザインの領域内に配置します。
これを行うことで初めにしっかり確認をしたはずなのに結局作り始めた時にその部分を作り忘れてしまうこともなくなりますし、変に頭の中でどうしようと考えるよりもその後スムーズにデザイン作業を進めることができます。
また、優先順位が高い（一番に訴えたい）部分をここで再度確認します。
具体的には一番に訴えたいコピーの文字サイズを少し大きくして配置しておいたり、領域内の上から下に向かって優先度高 → 低という形で配置しておくとよりわかりやすいです。
3. レイアウトを決める
後ほどバナーデザインでよく用いられているレイアウトやデザインパターンを幾つか紹介しますが、そのバナーをどのようなレイアウトでデザインしていくかを考えます。
そのままPCで配置した要素を動かすなどして行う人もいますが、人によっては手書きで簡単にワイヤーを書いてからPCで作業するという人もいるので、それは自分にあった方法で良いと思います。
4. まずは単色やモノクロで配置していく
慣れている人ならいきなりカラー付きでどんどんデザインしていくでしょうが、まだ苦手な人はまず単色やモノクロでベースデザインをしていくことがおすすめです。
例えば、中途半端にカラー付きの要素が配置されている状態からスタートすると、そのカラーに合わせてああでもないこうでもないと何度もカラーを変更する作業が発生して時間がかかってしまったり、カラーを意識しすぎて本来一番目立たせるべき内容がボヤッとしてしまったりするので、いっそのこと最初はカラーを考えずに配置やレイアウトだけに集中できるように単色やモノクロで作業をしていきます。
5. 細かい調整をする
単色やモノクロで要素を配置した後は細かい調整を行ってきます。
具体的には全体のバランスなどもそうですが、文字の装飾やカーニング調整をしたり、ボタンやアイコンを配置しているならそれらをより作り込んだデザインにしていきます。
ひと通り調整が済んだらもう一度全体的なバランスなどを確認していきます。
また、可能であればこの時点で他のデザイナーなどに一度デザインを見てもらうと良いと思います。
自分では良いと思ってもいても人によってその捉え方は様々ですし、場合によっては他の人に意見を取り入れることによってより良いデザインになっていくこともあります。
6. カラー付けしていく
レイアウトも済み、細かい部分の調整がほぼ終わったらいよいよカラー付けしていきます。
レイアウトもまともに決まっていない状態だと「配置はどうしよう...。 カラーはどうしよう...。」といろんなことで頭を悩ませてしまいますが、上の手順で行うことでここではほぼカラーバランスのみを考えることができると思います。
7. 最終調整 → 完成へ
5である程度は調整を行ってはいますが、やはりカラーを付けると大きく見た目が変更することはなくても多少はもう少しこうしたいといった部分が出てきたりするので、そういった部分の手直しなども含めて最終調整を行います。
また、カラー付け後もしっかりと目立たせたい部分は目立っているかどうかなども確認し、問題なければ完成となります。
ここまでバナーの制作フローを紹介してきましたがもちろんこれはあくまで例であり、人によってはもっと細かく工程を踏むという人もいるでしょうし、逆に慣れている場合はもっと少ない工程で作り上げてしまうという人もいると思います。
最終的には自分に合った方法だったり、制作会社であれば決まったルールがあるとは思いますが、現状で特にこういったものは考えずにとにかく作っているという人や少しでも制作時間を縮めたいという人は、上で紹介したようなフローで行うことでそれらが改善される可能性も高いと思うので、是非一度試してみてください。
また、このエントリーを見てくれているデザイナーさんなどでここで紹介した以外にも「もっとこうすると良いよ！」みたいなアドバイスあれば是非教えてください :)
2. 代表的なレイアウトやデザインパターン
割と大まかですし他にもあるとは思いますが、バナーデザインでよく利用されていると思うレイアウトやデザインパターンを実際のバナーデザインを紹介しながら分類化してみました。
日頃からデザインする人には当たり前かもしれませんが、特にこれからバナーデザインについて学びたいという人にはこういったレイアウトや要素の配置パターンがあるということを頭に入れておくと、様々なパターンのバナーデザインを作るのに役立ってくると思います。
☆縦割り・横割りなどの分割レイアウト
表示領域を分割して半分はイメージやイラストを表示し、半分はテキストなどを表示させるといったレイアウトで、それぞれを5:5の割合にしているものもあれば、7:3や8:2などの異なる割合で分割しているものもあります。
また、縦や横で分割されているデザイン以外にも斜めに分割しているものや境界線部分に曲線を用いたりして少し変わった感じにしているデザインも見かけます。
全部がそうであるわけではないですが、多くの場合イメージなどを表示させる部分とテキストなどを表示させる部分とでは配色を大きく変えるなどして、メリハリを付けた感じのデザインになっていることが多いです。
☆イメージを全面に出したり、余白を大きくとる
例えばタレントや商品などのように、特徴的なイメージを領域いっぱいにどーんと表示させるようなレイアウトです。
ほとんどの場合はイメージだけでなく併せてキャッチコピーのみなど少量のテキストを表示させているようなものですが、中にはパッと見で読めないぐらいテキストを小さくしているバナーもあり、とにかくビジュアルを見せるという感じのものが多いように思います。
また、バナーデザインの場合はとにかく領域内にいろいろな情報が詰め込まれていることも多いですが、中には上のイメージのように余計な情報は削ぎ落としてテキストなども最小限にしか配置せず、余白を大きめにとったタイプのデザインもあります。
もちろん使い方によりますが、余白を上手く使うことで高級感を出すことができたり、ごちゃごちゃさせなくてもユーザーの目にとまるようなデザインにすることができます。
☆キャッチコピーやロゴを大きく
とにかく伝えたい事を大きなキャッチコピーで表示させたり、誰もが知っているようなメーカーやブランドであればそのロゴデザインなどを大きく配置するというレイアウトです。
キャッチコピーの場合はパッと見でどんな内容がすぐ把握でき、ロゴなどを使用した場合もリンク先で何のメーカーやブランドのページに飛ぶのかが容易に判断できるため、それらにピッタリのユーザーには非常に効果的かもしれません。
ただ、逆にそれらに興味が無いとか極端に言うとそれらが嫌いというユーザーの場合はかなりクリックされる確率は低くなると言われています...。
☆要素を並べる
主にリンク先がECサイトだったり、カラーバリエーションが多い商品紹介ページだったりする時によく見かけるレイアウトです。
例えば、全く違う商品が沢山並んでいれば「様々な種類の商品が揃っているのかな」と思わせることができますし、見た目は同じでもカラーが異なるものが並んでいれば「カラーバリエーション豊富な商品なのか」と思わせることができますね。
また、サイズが幾つかあることを示すために異なるサイズで配置するというパターンもあります。
☆要素を隙間なく並べる
要素を並べるレイアウトは上でも紹介しましたが、より沢山のイメージを使い背景に隙間なく敷き詰めているようなレイアウト方法もあります。
同じくECなどのバナーで商品を沢山並べたようなものの他にも、サービスを紹介するバナーでその利用者の顔写真を並べたり、実際に使用しているようなイメージを並べたりするデザインをよく見かけますね。
☆クリックを誘導する見た目
こちらはレイアウトよりも要素になりますが、いかにも押せそうなボタンなどをデザイン内に配置してクリックしてもらえるようにしたバナーデザインもあります。
よくあるものだと「続きはこちら」とか「今すぐチェック！」みたいなボタンが置かれていたりするものが多く、中には質問をしているようなテキストを表示させて「YES」「NO」ボタンを配置させてみたり、チェックボックス付きのアンケートのような見栄えにして診断結果が表示されるように思わせるデザインもあります。
☆領域内から要素が飛び出していたり、動きをつけたりする
バナーといえば300x250・125×125・728×90と四角形だったり長方形のイメージが強く、その中にイメージやテキストが配置されているのを多く見かけますが、中には枠内から飛び出しているように見せたデザインもあったり、広告ではあまり見かけないかもしれませんがサイトの内部リンクバナーなどでは例えば円形や多角形にするなど少し変わった形にしているバナーデザインもあります。
また、他にもFlashやアニメーションGIFなどを利用して動きのあるバナーにするという方法もあり、例えば上のサンプルイメージに挙げたモリサワのバナーでは、「ウェブデザインは新たな表現力を手に入れる。」という文言が数秒おきに違うフォントに切り替わり、様々な種類のフォントを利用できるということを表現しています。
モリサワのバナーは上で紹介したように一部が変化しているものですが、バナーによってはもっと全体的に大きく変化させたりするものがあったり、稀にですがシネマグラフを用いてイメージの一部分だけ動いているなんてバナーも見かけることがあります。
3. バナーデザインについて参考になるエントリー
バナー制作時のフローやよくあるレイアウトなどについて紹介してきましたが、同じようにバナー制作時のフローや覚えておきたいテクニックなどを紹介しているエントリーは他にも沢山あります。
以下はそれらの中でも個人的にわかりやすかったりよくまとめられていると思うエントリーで、新米デザイナーさんやこれからバナーデザインをする機会が多くなってくるという方は目を通しておくことをおすすめします :)
勝てるバナーレイアウト20選！│レイアウトに悩んだ時の虎の巻
上でバナーデザインでよくある見せ方やレイアウト方法について幾つか紹介しましたが、こちらのエントリーではそれをより細かく紹介しています。
各要素を配置したワイヤーのようなイメージと実際のバナーデザインを併せて紹介し、それぞれのレイアウトの特徴・メリット・デメリットなどが書かれています。
エントリーでは大見出しとして、以下のようなに分類されています。
- 悩んだらまずは最強のベーシック型
- ベーシックに負けない3つの王道レイアウト
- 商品の見た目に自信があるなら写真メイン型レイアウト
- 複数商品やカラーバリエーションが豊富ならバリエーション型レイアウト
- ブランド力が高い場合にはブランドロゴを押し出したレイアウト
- 漫画・イラスト型レイアウト
- その他珍しいバナーレイアウト
【バナーデザインの教科書】訴求したいイメージ別｜王道デザイン8選！
こちらはバナーデザインの見せ方やイメージについてまとめられたもので、訴求したいイメージ別に実際のバナーデザインを例に挙げながらフォント・配色・その他の特徴を解説しています。
エントリーでは以下のようなイメージ別のバナーデザインを紹介しています。
- 【お得感】イメージのバナーデザイン
- 【高級感・リッチ感】イメージのバナーデザイン
- 【爽やかさ・親近感】イメージのバナーデザイン
- 【可愛い】イメージのバナーデザイン
- 【誠実さ・真面目さ】イメージのバナーデザイン
- 【安心・信頼感】イメージのバナーデザイン
- 【先進性・知的好奇心】イメージのバナーデザイン
- 【にぎやか】イメージのバナーデザイン
ディレクターなら知っておきたい「バナー広告制作の基礎知識」
少し古めのものですが、バナー制作時に知っておきたい基礎的な部分について書かれており、思考設計や少しですが制作テクニックについてもあります。
タイトルはディレクター向けな感じにとなっていますが、デザイナーも把握しておきたいですね。
100種以上の自社広告運用でわかった！バナー広告クリエイティブ4つの基本
実際に自社で広告を制作・運用してみてわかったことや効果の高い広告作るコツなどを紹介しています。
もともと作成したものをどのように変化させたのかがイメージ付きで解説されており、中にはクリック数が変更前の3倍以上になったものもあるようです。
新米デザイナー必見！バナーデザインを効率的に美しくする10のステップ
バナーの制作フローがわかりやすいイメージ付きで紹介されているエントリーで、実際にひとつのバナーが完成するまでの手順もですが、合間にあるちょっとしたポイントやテクニックも参考になります。
個人的には今回紹介させてもらっているものの中では特にわかりやすくて、タイトルにあるように新米デザイナーさんは是非見ることをおすすめします。
デザイン作業のスピードアップ
デザイナーに限ったことではありませんが、お仕事として何かを作る時にはクオリティももちろん大事ですが、どれだけ早く作れるかというのも重要になってきます。
エントリー内にも書かれている通りいずれも基本的な内容かもしれませんが、特にこれからデザインを学ぼうとしている人はこれらを知っているかいないかでスピードはもちろん、バナー以外の他のデザインでもいろいろと役立ってきます。
「45分」で作れる！ 高品質バナーの作り方！
こちらは「高品質なバナーを速く簡単に作れるように」というのをテーマにバナーデザインの制作フローについて書かれているものです。
新人必見！倍速かつ高品質なバナーを作るためのコツを全公開します
こちらも上で紹介してきたものと同じように、制作スピードをアップさせるコツや素早く高品質なバナーデザインを作るフローなどについて書かれたものです。
どのようなバナーを制作するかというところから入り、イメージを交えながらどのようにデザインを作っていくか紹介しています。
バナーのリサイズを簡単に！徹底するべき7つのポイント
特に広告バナーの場合はある特定のサイズのみ作るのではなく数種類のサイズを作るということがよくあるため、中には300x250では良い感じに作れても728×90だと見た目がいまいちになってしまったなどの経験がある人もいると思います。
このエントリーではそういったリサイズ作業時に覚えておくと役立ちそうなポイントやテクニックがまとめられています。
デザイナー視点で見る！イケてるバナーとトホホなバナー～イケてるバナー編～
参考になるデザインバナーをまとめているエントリーで、ただ並べるだけでなく縦割り・横割り・ビタミン・原色といったようにレイアウトやカラーといった感じに分類して紹介しており、簡易的なものではありますがそのバナーデザインの特徴や同じようなデザインをしたい時に参考になりそうな一言メモがついています。
エントリーでは以下のような分類で紹介しています。
- 縦に割る
- 横に割る
- 横に並べる
- 敷き詰める
- 斜めにする
- 余白を持たせる
- ビタミンカラー
- 派手な色
WEBサイトの実例から見る、テイスト別バナーデザインまとめ
同じく参考になるデザインバナーをまとめているエントリーで、各テイストの実例バナーを用いてそれぞれのデザインの特徴や何を考慮してデザインされているかなどの説明付きで紹介しているエントリーです。
こちらは広告デザインではなくサイト内に設置されているような内部リンクのバナーデザインなどをまとめていて、下記のようにテイストを分類して紹介しています。
- シンプルなバナーデザイン
- オーソドックスなバナーデザイン
- 円形を利用したバナーデザイン
- 縦長（縦書）バナーデザイン
- 横長バナーデザイン
- イラストを使用したバナーデザイン
4. デザイン参考 - 国内
レトロバナー
現時点で6,150個のバナーが掲載されており、サイズ・カラー・業種・テイストなどカテゴリー分けもされていて検索機能も付いています。
特にサイズは細かく分けられているので、参考にしたいデザインサイズを探す時に便利ですね。
一覧でもそれぞれにホバーするとイメージが拡大されるようになっているのも嬉しいですが、詳細ページでは更にそのバナーに使用されているカラーコード掲載やそのカラーパレットをダウンロードできるようにもなっています。
バナーデザインギャラリー
現時点で553個のバナーが掲載されており、サイズ・カラーから探す以外にも「日本国内」「海外」と地域で絞り込んで探すこともできます。
また、検索機能は複数の条件を指定して検索できるようになっており、より目的のバナーデザインを探しやすくなっています。
ただ、意図的にそうしているなら申し訳ないですが、正直300x250など多用されるサイズでのバナーデザインが揃っていないのが少し残念です...。
banner gallery
現時点で3,000個のバナーが掲載されており、サイズ・カラー・カテゴリーの3つから目的のバナーデザインを探せるようになっています。
BANNER LINKS
サイズ・カテゴリー・カラーの3つから目的のバナーデザインを探せるようになっています。
Banner Matome
現時点で14,400個のバナーが掲載されており、カラー・業種・表現別の3種類のカテゴリーが用意されているので、それらを利用して目的のバナーを探すことができます。
バナーデザインアーカイブ
現時点で2,102個のバナーが掲載されており、カラー・業種・サイズから絞り込んで探すことができます。
サイズでは一般的なものはもちろん、Twitterやスマートフォンといった他のギャラリーサイトでは見ない感じの分類もあります。
ブブンデザインアーカイブ
「ブブンデザインアーカイブ」は様々なデザインパーツをまとめているサイトですが、その中でバナーをまとめているカテゴリーがあります。
バナーといっても上で紹介してきたような広告ではなく、サイトに設置されている内部リンクなどのバナーなので、そういうものの参考デザインを探している人には便利だと思います。
Croppy
「Croppy」はソーシャルスクラップブックサービスとして様々なユーザーが切り取ったデザインがまとめられていますが、その中でバナーをまとめているカテゴリーもあります。
利用ユーザーが集めたものなのでかなりバラつき感があり、中にはバナーと呼ぶものなのか微妙なデザインなどもありますが、逆に様々なユーザーが投稿しているのでちょっと変わったデザインが見つかる可能性もあります。
5. デザイン参考 - 海外
以下はいずれも海外のバナーデザインギャラリーになります。
やはり国内とは言語もテイストも違うので参考にすることは少ないかと思いますが、ちょっと違う感じにしたい時やむしろ海外っぽいデザインにしたいという時には眺めるとインスピレーションもらえるかもしれません。
Web Banner Gallery
サイズとカラーから目的のデザインを探すことができます。
Banner Inspiration
TOPページが検索サイトのような見た目のギャラリーで、カテゴリー・タグ（種類）・サイズの3つから目的のバナーデザインを探せるようになっています。
Elements of Design
「Elements of Design」はバナーにかぎらずデザインパーツをまとめているギャラリーなのですが、その中にバナーに関するデザインをまとめているカテゴリーがあります。
6. デザイン参考 - その他
以下はいずれも上で紹介してきたようなギャラリーではありませんが、使い方次第でバナーデザインを多数見ることができたり、バナーデザインを多数紹介しているブログエントリーになります。
目的のデザインをすぐに見つけるというのはやはり難しいと思いますが、「Pinterest」では世界中のユーザーが気に入ったデザインを集めているので、国内に限らず様々なデザインを見ることができますし、ギャラリーでは見かけないバナーデザインも多数見つかります。
探すときはBoardsで検索するとより便利で、例えば「banner」や「ad」とかで検索すると沢山表示されますし、その中で「この人のチョイス良いな」と思うものがあればフォローしておくと今後も参考にすることができますね。
下記リンクは例としてPinterestで「banner」というキーワードで検索した結果画面です。
NAVER まとめ
様々な情報がまとめられている「NAVER まとめ」ですが、バナーデザインについてまとめられているものも幾つかあります。
上で紹介したようなデザインギャラリーをまとめていたり、ギャラリーのように参考になるデザインをひたすら貼っているというのが目立ちますが、中には以下のようにちょっと変わったデザインまとめなどもあります。
8bit モノづくりブログの「バナーデザインまとめ」エントリー
「8bit」さんで書かれているモノづくりブログでは、バナーデザインをまとめたエントリーが幾つか公開されています。
ただ並べているもの以外にもYahoo! JAPANに掲載されていたとか大手婚活サイトのデザインといったように特定のサイトを対象にしてまとめたものもあり、エントリーによってはバナーに限らずサイトのメインビジュアルなども併せて紹介しています。