【バナー初心者必見】一緒に作ろう!バナーデザインの手順とコツを紹介

当ページのリンクには広告が含まれています。

11/7から修正中です。

バナーを作りたい!
けど、何から始めたらいいかわからなくて時間だけが過ぎていく。

なんとなく作ってみたけど、どこかしっくりこない。
直す箇所もわからない。

今日はこんなWebデザイナー初心者さんの「バナー」のお悩みをまるっと解決します💡

この記事でわかること
  • バナー作りのコツ
  • バナー作りの実際の手順
  • バナー作りに役立つサイト・本
まめ

わたしは未経験から始めて、ことしでWebデザイナー3年目💡
お仕事で週に5枚ほどバナーを作り続けています☺︎

Illustratorのスクショもたくさん載せているので、一緒に作りながら、素敵なバナーを完成させましょう♪

今回作るバナーはこちら

もくじ

バナーの目的・役割

バナーの目的は、一目で伝わるメッセージで見た人に行動してもらうこと。

まめ

突然ですが…問題です!
バナー広告の平均閲覧時間は何秒でしょう?

うーん。10秒くらいかな。

まめ

正解は…「1秒未満」!

ユーザーはウェブページを素早くスクロールするため、バナーが視界に入る時間はごくわずか。

そのため、バナーは瞬時にメッセージを伝え、行動してもらえるデザインが求められます。

バナーの主な目的を細かく分けると以下の4つです↓

  • 注目を集める
  • メッセージを伝える
  • ブランド認知度を高める
  • 行動を促す

バナーは小さくてもユーザーの目に映った一瞬で心を動かせるすごいヤツなんです♡

バナー作成のコツ

効果的なバナーを作るための重要なコツは3つだけです。

  • 目的を明確にする
  • キレイ(高品質)な画像を使用する
  • 目的にあったフォントを選ぶ

ポイントを押さえることで、メッセージが効果的に伝わるバナー作りができるようになります。

1. 目的を明確にする

バナーを作成するときは、バナーの目的を明確にしましょう。

目的(ゴール)がハッキリしていると、デザインのテイストや文字の優先順位が自然と決まります◎

ユーザーになにを伝えたいか
  • ターゲット
  • 目的
  • 伝えたい内容

「ECサイトで猫グッズを売りたい」バナーならこんな感じです★

ターゲット:20〜30代
目的:猫グッズの販売促進
伝えたい内容:グッズの魅力

2. キレイ(高品質)な画像を使用する

キレイな画像を使用するとバナー全体の印象が向上します。

画像は内容と関連性のあるものを選び、一貫性を持たせることも大切です。

3. 目的にあったフォントを選ぶ

パッと見ただけでも内容を伝えるには「フォント」がカギです。

フォントは、バナー全体の雰囲気やメッセージの伝わり方に大きく影響します。

バナーの目的やターゲット層に合ったフォントを選ぶことで、メッセージがより効果的に伝わります。

今回作るバナーのお題

お題:ECサイトの猫グッズ販売促進バナー

目的

ECサイトで猫グッズ20%オフクーポンを配布するため、特設ページへ誘導したい

ターゲット

  • 20〜30代の女性
  • インテリアや雑貨にこだわっている

バナーに含める要素

  1. 上質で可愛い猫グッズ、日常に心地よさを
  2. 20%オフクーポン
  3. クーポンを獲得する
  4. 12/1(日)10:00から12/7(土)9:59まで

サイズ

300×250px

バナー作成前の準備【リサーチ】

まめ

バナー成功のためにリサーチは欠かせません。

ソフトを起動したら、参考イメージと競合調査をします。

まめ

ソフトを起動する理由は、集めたイメージをアートボードのまわりにペタペタ貼っていくから。

クライアントの要求や市場の動向をしっかり把握できるので、デザインの途中で迷走しなくなります◎

  • 参考イメージの収集
  • 競合調査

参考イメージの収集

クライアントの要望・バナーの目的にあう参考イメージを集めていきます。

探す際のオススメはPinterest。

今回のお題では

  • インテリア
  • おしゃれ
  • カフェ

などのキーワードで探しました。連想ゲームみたいにキーワード検索するといいですよ。

\ 参考イメージを探す時におすすめのギャラリーサイトはこちら /

競合調査

次は、同じ商品(類似・同カテゴリー)を販売しているライバルの調査をします。

競業調査の目的
  • 市場のトレンド把握
  • 差別化ポイントの発見
  • デザインの分析
  • 顧客の目線になる

競合がわからなければ、大手ECショップ(楽天やYahooなど)のカテゴリーで絞り、売れている商品とデザインを確認します。

バナー作成スタート!

それではバナーを作っていきましょう!今回はこちらのバナーを作ります。

完成したバナー

バナーの制作ステップは以下のとおりです。

  • 載せる要素を書きだす
  • 要素の優先順位を決める
  • 要素を配置する
  • 素材を探す
  • 写真を加工する
  • あしらいをつける
  • 全体のバランスを調整する
  • 最終チェック
まめ

それではスタート!!!

載せる要素を書きだす

横:336 × 縦:280pxのアートボードを用意したら、バナーに載せる要素(テキスト、ロゴ、CTA、連絡先情報)を書き出します。

まめ

この時点で、配置や文字の大きさなどは考えなくて問題ありません◎

ロゴは「Hatchful」で1分で作成しました!

ジャンルやイメージを選択するだけで作れるので、架空バナーを作成するときに便利です◎

まめ

無料でつかえますよ!
Shopifyの会社が運営しています◎

要素の優先順位を決める

各要素の重要度や目立たせたい度合いを考慮し、優先順位を決定します。

主要メッセージやCTAなど、目立たせたい要素が優先されることが一般的です。

優先順位を決めるったって全部重要にしか思えない…

まめ

1番伝わってほしいことはなに?その後どう行動してほしい!を考えると優先順位を決めやすくなります💡

優先順位、こう考えた!
キャッチコピー : 「初回無料相談キャンペーン実施中!」

ユーザーの関心を引きつける重要なメッセージのため、最優先にします。

CTA(Call to Action): 「今すぐ予約」「詳細はこちら」

バナーの目的である行動促進はとても重要なため、2番目に優先します。

メインメッセージ : 「法律の悩みを専門家に相談しませんか?」

ユーザーに対して直接的な問いかけを行うことで、関心を喚起し、行動へとつなげます。

キャンペーン期間 : 「期間限定 – 6月30日まで」

キャンペーンの期間を示すことで、緊急感を与える効果がありますが、CTAやキャッチコピーに比べると優先度が低いです。

連絡先情報 : 電話番号、メールアドレス、ウェブサイトのURL

連絡先情報は重要ですが、バナーの目的や行動促進の要素に比べると優先度は低いです。

テキスト以外 : 法律事務所のロゴ

ブランドの視認性を高め、信頼感を与えるために重要ですが、CTAやキャッチコピーに比べるとやや優先度が低いです。

まめ

私は上記のように考えましたが、デザイナーの数だけ正解があります。
こう考える人もいるんだ!くらいに留めてください。

素材を探す

バナーに使用する画像を収集します。

クライアントから素材の提供がない場合は、フリー素材サイトから適切な素材を探します。

↑ふたつの画像は「Adobe Stock」の無料素材です。
同じ画像を使用する場合は、「Adobe Stock」からダウンロードをお願いいたします。

まめ

スーツ 男性 パソコンと検索窓に入れると同じ画像が見つかるはず!

素材の提供がない場合は、いくつかピックアップしてクライアントに提案します。

今回は年配の男性の写真を使用します。

要素を配置する

バナーのレイアウトを決めていきます。

テキストや画像、ロゴ、CTAなどをバランスを見ながら、目線の動きを意識して配置します。

あしらいをつける

テキスト要素にフォントや色彩、サイズなどのスタイルを適用し、見出しや本文などのテキストをデザインします。

コンセプトに合うフォントとカラーを使用して、読みやすさと視認性を確保します。

まめ

過程を添付しますね!
途中…配置をやっぱり変えようか迷走して戻しています笑

今回使用したフォントは以下のとおりです。

  • DNP 秀英角ゴシック金 Std
  • Osaka
  • 游教科書体

読みやすいゴシック体とビジネスシーンにあう教科書体を組み合わせました。

写真を加工する

使用する写真素材が必要に応じて加工を行います。

明るさやコントラストの調整、フィルターの適用など、写真がバナーに適したカタチになるように加工します。

男性をいきいきとするために彩度とコントラストを調整。

全体のバランスを調整する

各要素の配置やスタイルを微調整し、バナー全体のバランスを調整します。

視覚的な調和や統一感を確保し、目的に沿った効果的なデザインを実現します。

最終チェック

バナーの完成前に、全体のデザインやレイアウト、テキストの誤字脱字、リンクの正常性などを最終チェックします。

まめ

ここで色覚チェックもします💡

P型(1型)色覚・D型(2型)色覚の見え方も確認します。見えにくい場合は再度調整します。

すべて確認できたら、クライアントやチームメンバーに提出、フィードバックを受け取ります。

バナーデザインの参考サイト

6月20日までに追記します。

  • Pinterest(ピンタレスト)
  • リスト

フリー素材サイト集

6月20日までに追記します。

バナー作成に役立つ本

まめ

今まで購入したデザイン関連本は30冊以上…!
ほんとにオススメの私の厳選5冊を紹介します。

デザインのドリル

フォトショップやイラストレーターをほとんどさわったことがない方は、最初の1冊にオススメです。

バナートレースしながら、基本的な操作・デザインの基礎を学べます。

まめ

トレースに必要な素材が用意されていてデザインの練習に集中できる点も推せます✨

思わずクリックしたくなる バナーデザインのきほん

まめ

この1冊は別格です…!
しっかり取り組めば、初心者さんが案件獲得レベルに達せるほどの基本とテクニックが身に付けられると思います。

私が実感したメリット
  • バナーデザインの基本〜テクニックが身につく
  • デザインツールの操作スピードが上がる
  • デザインの引き出しが増える
まめ

実際に、私が案件獲得の際に恩恵を受けた本だから思い入れが違います笑
好きすぎて1記事まるっとこの本の魅力について書いてしまったほど…↓

マネするだけでセンスのいいフォント

フォントによって印象が変わるのはわかるけど、感覚で決めちゃってる…

フォントを使いすぎてごちゃっとなっちゃう…

まめ

フォントで悩んだら絶対に手を伸ばす1冊です。
フォント迷子になる方は読む価値アリかと…。

私が実感したメリット
  • デザイン毎に「なぜこのフォントを使用するか」説明があるから、理論的に選ぶことができるようになった
  • デザインのジャンル毎にオススメのフォントが載っているから、迷子になることが格段に減った
  • 日本語と英語の相性のいいフォントを選べるようになった

なるほどデザイン

けっきょく、よはく。

【よくある質問】バナーデザイン

バナー1枚の単価はいくらくらい?

バナーは3,000円〜5,000円ほどで取引されることが一般的です。

ココナラでは「バナー・ヘッダーデザイン」の売れ筋価格は3,000円〜20,000円でした↓

キャリアやスキルを積むことで、単価をどんどん上げていくことが可能です💡

バナーを受注するためには何をしたらいい?

オリジナルバナーの作成!

模写やトレースしたデザインは実績として公開できません。

STEP
模写・トレース

オリジナルバナーの作成前に、模写・トレースで練習をします。

STEP
オリジナルバナー作成
STEP
ポートフォリオ作成
STEP
営業スタート!
バナーを作成中に迷走したら…どうしたらいい?

なんで迷走しているか・どこがしっくりこないのか考えます。

優先順位やコンセプトを振り返り、ひとつずつ言語化していくと、するっと抜けられることもあります。

まめ

私もまだまだ迷走します。
何してもダメだ!って時はお菓子食べてゲームして、頭をリセットしてます笑

バナー1枚に何時間くらいかかる?

初めてのオリジナルバナー作成は6時間以内を目安にしてみてください。

「なにができないのかわからない」状態だと思うので、まずは手順を覚えて、手を動かすことが大切です。

2枚目以降は5時間・4時間・3時間…とどんどん時間を短くして、制限時間を決めてみてください。

最初から完璧なバナーを作ることは難しく、あとから「なんだこのダサいデザインは…!」と感じるはずなので、最初は時間をかけすぎないことがモチベ低下を防ぎます💡

おまけ

いままで何十枚のバナーを作成してきて思うこと!

ダサくてもターゲットに刺さればOK

しっかり文字が読めて、伝えたいことが伝わって、ターゲットが行動してくれるバナーが大優勝…と実感しています。

私自身、駆け出しの頃「ダサくないデザイン!素人っぽくないデザイン!」を目指して練習していましたが、「スタイリッシュ!おしゃれ!」より、言葉がしっかり伝わるデザインをご提案できた時が、クライアントに喜んでもらえた末にリピーターになってもらうことができました。

まとめ

バナー制作は、小さいアートボードの中にぎゅっと要素を詰め込むので難しいですよね。

たくさん手を動かして、案件をゲットして、稼げるウェブデザイナーになりましょう!

もくじ