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

11/7から修正中です。

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

イラレのスクショもたくさん載せています。一緒に手を動かしてバナーを完成させましょう♪

＼ 作っていくバナーはこちら🐈です♡ ／

ECサイト内に表示するセールスバナーです＾＾

INDEX目次開く ＋閉じる −

バナーの目的・役割

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

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

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

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

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

バナー作成のコツ

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

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

1. 目的を明確にする

バナーを作成するときは、バナーの目的（ゴール）を明確にします。

目的がハッキリすると、デザインのテイストや文字の優先順位が自然と決まっていきます◎

バナーの目的は大きく分けて2つ！

• 行動してもらうため：クリック、購入、問い合わせなど、具体的なアクションを促すことが主な目的。
• イメージを強化するため：ブランドや商品を覚えてもらったり、良い印象を持ってもらうことで、長期的なファンを増やすことが目的。

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

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

画像はバナー全体の印象に大きく影響します。クリック率やコンバージョン率が向上する可能性が高い要素です！！

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

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

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

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

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

今回作るバナーのお題

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

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

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

1. 参考イメージの収集

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

探す際のオススメはPinterest。

今回のお題では

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

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

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

2. 競合調査

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

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

バナー作成スタート！

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

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

1. 載せる文字を打つ

300×350pxのアートボードを作成したら、バナーに載せる文字を打ちます。

2. 優先順位を決める

主要メッセージや行動を促す言葉は優先度が高くなります。

3. 素材を探す

バナーに使用する素材を探しにいきます。

写真ACも素材数が多くてオススメですが、写真がキレイなのはダントツで「Adobe Stock」。

AdobeCCの会員なら無料でダウンロードできますよ＾＾

＼ AdobeCCを半額で利用できる方法はこちらで紹介しています ／

4. 文字と素材を配置する

使う画像が決まったら、バナーの材料が揃いました。バナーのレイアウトを決めていきましょう。

文字と画像は、視線の動きを意識して配置します。

人の視線は上から下、横書きは左上→右上→左下→右下と視線が流れます。

「Zの法則」と呼び、自然に視線誘導ができるデザインの基礎です。

5. 素材を加工する

次に、バナーに合うように素材（画像）を加工していきます。

＼ 背景の紫色を消しました ／

＼ 縦幅（下）を足しました ／

6. あしらいをつける

一番時間がかかる工程「あしらい」をつけてバナーを仕上げていきます。

文字にフォント・色彩・サイズ・座布団などのスタイルをつけます。

今回使用したフォントは以下の4つです。

• 日本語｜筑紫A丸ゴシック Std
• カタカナ｜A-OTF UD黎ミン Pr6N L
• 英語｜Cardo
• 英語（筆記体）｜AnnabelleJF

「親しみやすさ」のある丸ゴシックと、「上品さ」「知的な印象」のUD黎ミン/Cardo/AnnabelleJFを組み合わせました。

フォーマルさと親近感を両立したい場合に効果的な組み合わせです。

7. 最終チェック

最後に、テキストの誤字脱字、全体のデザインやレイアウトをチェックしていきます。

＼ P型（1型）色覚 ／

＼ D型（2型）色覚 ／

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

Illustrator・Photoshop、どちらでも確認できます。

すべて確認できたら、クライアントやチームメンバーに提出、納品完了です◎

バナーのお役立ち情報まとめ

＼ アイディアが欲しいときによくみるサイトをまとめています ／

＼ 素材は短時間で高クオリティなバナーを作る立役者！ ／

バナー作成に役立つ本

1. デザインのドリル

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

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

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

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

4. なるほどデザイン

5. けっきょく、よはく。

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

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

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

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

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

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

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

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

STEP

模写・トレース

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

STEP

オリジナルバナー作成

STEP

ポートフォリオ作成

STEP

営業スタート！

バナーを作成中に迷走したら…どうしたらいい？

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

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

まめ

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

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

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

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

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

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

おまけ

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

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

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

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

まとめ

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

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