バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました

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

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

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

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

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

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

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

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

レイアウトを決める

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

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

細かい調整をする

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

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

カラー付けしていく

最終調整 → 完成へ

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

 

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

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

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

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

表示領域を分割して半分はイメージやイラストを表示し、半分はテキストなどを表示させるといったレイアウトで、それぞれを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に掲載されていたとか大手婚活サイトのデザインといったように特定のサイトを対象にしてまとめたものもあります。

デザインギャラリー

 

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