バナー制作のポイントとおすすめ参考サイト

今回はバナーを制作する時に気をつけていること、デザインの参考に見ているギャラリーサイトを紹介したいと思います。

バナーとは？

バナーとは、「旗」・「のぼり」といった意味があります。
お店の前にヒラヒラしているアレですね！
お店の位置がしっかりわかっていない時、お店の前に「のぼり」が立っていたら遠くからでも見つけやすいですよね。
営業中に「のぼり」を出しているお店なら、営業しているのか、お休みなのかが遠くからでも分かっちゃいます。

WEBサイトでいうバナーは、見て欲しいページに案内して遷移してもらうための「はた（目印）」の役割があります。

バナーを制作時に気をつけていること

バナーには沢山の情報を詰め込むことはできません。
限られた大きさの中でターゲットに出来るだけシンプルに必要な情報を伝えることが大切です。

そして大前提として、誰が見ても分かりやすい内容で伝えることを意識して作ります。

ターゲットを定める

ターゲットは幅広くせず、より具体的にしていきましょう。
誰（年齢・性別・職業・悩み…など）に向けているものなのかをはっきりさせると「自分に必要な情報だ」と相手に受け取ってもらいやすくなります。

サイズを決める（載せる場所はどこ?）

伝える内容(情報)によって、バナーを載せる場所やサイズが変わります。
関連する記事の下など一部のページにのみ掲載する場合や、サイドバー、ヘッダーやフッターなどに共通で置く場合など色々あります。

どこに置くかをキチンと確認し、適切な大きさで作成しましょう。

サイズが決まっていないまま進めてしまうと、あとになって調整が必要になりますよね？

微調整だけでいい時もあれば、形が変わることでレイアウトの変更、写真の差し替えが必要になるなど最初に作ったものとは異なったデザイン、バランスになったりします。

データを作り始める時、不明瞭な部分をなくすように心がけましょう。

バナーに入れる要素

バナーに入れる要素を整理します。

キャッチコピーを決める

キャッチコピーは、パッと見ただけでクリックした先の情報がどんなものなのかがわかる、簡潔に伝わりやすい言葉を選びましょう。

• 短くて簡単
• 見てすぐに理解できる
• キャッチコピーと実際のサービス・商品・会社…などの内容が一致している

レイアウトを考える

人の目線は「左から右」、「上から下」、「左上から右下」へ流れるので、目線に沿って重要な内容を順番に置いていくといいでしょう。

また、バナーを構成する要素を一度全て置いてみて、重要な内容（一番目立たせたい要素）から強調し配置しましょう。

文字を決める

文字はしっかりと読め、全体のデザインにあったものを選びます。

色を決める

ターゲットに合わせて色を選ぶ、またはサイトカラーに合わせた色を選んでいきます。
色の持つイメージなどを活用するといいでしょう。

サイトカラーと違う色が入ってきた場合でも、色の彩度や輝度などを調整すると馴染んでいきます。

美しいと言われる配色の割合

ベースカラー７０％、メインカラー２５％、アクセントカラー５％の比率で配色すると美しいと言われています。

ベースカラー

背景など大きい面積に使われメインカラー・アクセントカラーの邪魔にならない色

メインカラー

コーポレートカラーや、ターゲットのイメージから決めた色など主要になる色

アクセントカラー

目立たせたい箇所に直接的に使ったり、変化を加えたい場合やメインカラーを引き立たせたい時などに使ったりする色

色の持つイメージ（例）

赤｜情熱的・強い・活発・興奮・刺激など
オレンジ｜暖かい・賑やか・元気・楽しい・親しみやすいなど
黄｜よろこび・希望・明るい・注意など
緑｜調和・平和・爽やか・安らぎ・健康など
青｜若い・誠実・清潔・冷静など
紫｜女性的・高貴な・高級な・神秘的など
白｜純粋・無垢・潔白・神聖など
灰｜控えめ・落ち着き・曖昧など
黒｜暗い・クール・高級・恐怖など

バナー制作の練習をする

これまでバナーを制作する際、気をつけていることをお話ししてきました。
意識して考えながら作ると、意識して作ってなかった時に比べ、バナーを綺麗に作れるようになっていると思います。

あとは、自分以外の人が作った色々なデザインのどこが良いと感じるのか、ポイントは何なのか、ここをもっとこうしたら良くなるんじゃないかな？など考えながら、沢山見るといいと思います。

理屈は分かっているけれど、上手く作れない…何か足りない気がする…と感じる人は、ギャラリーサイトなどに掲載されている「素敵だな！」と感じるバナーをいくつかピックアップし、模写してみましょう。
見本にしたいバナーを下絵にして
（下絵のレイヤーを固定・描画を６０〜７０％くらいの半透明にして作業を始めるといいですよ）
背景やイラストなどの配置を真似して
※イラストや写真が同じものを探せないこともあると思います。近いもので代用してOKです!
（自分がこれから制作するレイヤーの描画も半透明にして作業すると、塗りと文字が重なっていても作業しやすいです）見本バナーで使っている文字をフォントツールの文字一覧から探して、フォントのウエイトや行間などもそっくりにして置いていきましょう全ての要素を置いて完成したら
レイヤーの描画を１００％に戻して完成です！

そっくりそのままコピーするくらい細かく観察しマネをして作ってみてください。
見ているだけの時よりも、自分で指を動かしマネして作ったことで、「素敵だな！」と感じたバナーの共通点などに発見できるかもしれません。
何度も作っていくうちに作り方が分かってきて、短時間で作れるようになっていくかもしれません。
自分が作りそうにない表現だったり、やったことのない表現だったりをマネしてみてもいいですね！
デザインの引き出しが広がるかもしれません。

うまく作る人はきっと、それだけ色々挑戦したり、沢山作ってきたんだと思います。

おすすめのバナー参考サイト

BANNER LIBRARY

おしゃれで良質なバナーデザインをまとめたギャラリーサイトです。
バナー広告から特集バナーまで、幅広いジャンルから集まっています。

マークをクリックするとお気に入り登録ができ、自分だけのリストを作成することができます。
検索機能あり

4,001のバナーが掲載されています。（2022年6月29日現在）
現在も更新中

https://design-library.jp/

カテゴリー

ジャンル・テイスト・季節感・形・色・メディア

バナー広場

日本中のバナーデザインを集めたサイト。
広告用バナーだけでなく、サイト内のバナーも集まっています。

表示件数を変更・並び替え機能あり
現在も更新中

13,707のバナーが掲載されています。（2022年6月29日現在）
https://banner-hiroba.com/

カテゴリー

サイズ・カラー・業種・デザイン・タイプ・要素

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

運営者がデザインの見本になるような、優れたバナーデザインだけど厳選して掲載しているバナーサイト。

13,916のバナーが掲載されています。（2022年6月29日現在）
※計算を間違っていなかったらですけど…

https://bannnner.com/

カテゴリー

160×600・300×250・300×60・300×600・336×280・468×60・728×90・横割り・反復・縦割り・テキストのみ・写真メイン・切り抜き・顔切り抜き・キャラクター・イラスト・人物・タレント・著名人・春・秋・夏・冬・ハロウィン・バレンタイン・クリスマス・正月・イベント・コンテスト・GIFアニメーション・車・電車・航空・スマホ・携帯・パソコン・タブレット・モックアップ・工具・カメラ・家電製品・家具・キッチン雑貨・ソフトウェア・通信・ネットプロバイダ・制作会社・Webサービス・病気・メンズ美容・エステ・脱毛・医薬品・日用雑貨・スキンケア・化粧品・宝くじ・住宅ローン・保険・金融・不動産・建築・クレジットカード・転職・仕事・政治・ビジネス・電気・ガス・物流・郵便・学校・大人の習い事・勉強・予備校・子ども向け・書籍・雑誌・映画・音楽・チラシ・はがき印刷・放送・動画・ゲーム・デパート・商業施設・動物・魚・遊園地・娯楽施設・旅行・飲み物・食品・宝飾品・腕時計・ファッション・運動・スポーツ

banner gallery

いろいろなバナー広告のデザインをながめながらインスピレーションを沸かせてほしいサイト。
キーワード検索あり
https://bannergallery.net/

カテゴリー

サイズ・色・業種

レトロバナー

バナーをサイズ・色・業種・テイストから絞り込む事ができ、一覧でチェックすることができます。
12,825のバナーが掲載されています。（2022年6月29日現在）
https://retrobanner.net/

カテゴリー

サイズ・色・業種・テイスト

バナーデザインまとめ。

日本一バナーの掲載数が多いバナーデザインのまとめサイト。
21,300のバナーが掲載されています。（2022年6月29日現在）
最終更新日2021年10月14日
http://bannermatome.com/

カテゴリー

インフィードバナー（インスタグラム）・業種別（エステバナー・コスメ化粧品バナー・サプリバナー・旅行バナー・不動産バナー・仕事・転職バナー・出会い・結婚バナー
・学校・学習・教育バナー・家電・IT・機械バナー・ゲームバナー・アパレル・ネイルバナー・自動車・車バナー）
表現別（テキスト風バナー・立体風バナー・手書き風フォントバナー・イラストバナー）

まとめ

バナーをわかりやすく、思った通りの表現で作れるようになると、制作がもっと楽しくなるし、ターゲットに向けてより伝わるバナーになっているはずです。
また、作成のポイントや、デザインを見る・考えるなどについては、バナーだけでなく、様々なデザインにも共通することだと思うので普段から意識してみてください。
以上、バナー制作のポイントとおすすめ参考サイトのご紹介でした。