記事修正中です🙇
バナーを作るとき、なにから始めればいいか迷って時間だけが過ぎていく…そんなお悩みを解決します💡
- バナーの目的
- バナー作りのコツ
- バナー作りの実際の手順
- バナー作りに役立つサイト/本
色の選び方やレイアウトの決め方など、デザインにはたくさんのポイントがあります。
今回は、バナー作りの手順をIllustratorの画面付きでわかりやすく解説します。
まめそういうわたしはWebデザイナー3年目💡
週に5枚ほどバナーを作り続けています☺︎
一緒に作りながら、素敵なバナーを完成させましょう！
今回作るバナーはこちら
バナーの目的
バナーは、デジタルマーケティングやオンライン広告の重要な要素です。
まめ効果的なバナーを作るためには、目的を明確にしておくことが大切◎
バナーの主な目的は以下の4つです↓
1. 注目を集める
まめバナーの第一の目的はサイト訪問者の目を引くこと💡
インターネット上には膨大な情報が溢れているため、魅力的で目立つバナーデザインを作成することが重要です。
色彩、フォント、画像などを工夫して、閲覧者の注意を引くバナー広告を作成しましょう。
2. メッセージを伝える
バナーは短い時間でメッセージを伝えるための効果的な広告ツールです。
セールやキャンペーン、新商品のお知らせなど、伝えたい情報を簡潔にまとめて表示することが求められます。
メッセージはシンプルかつ明確に、必要な情報を漏れなく伝えられるようにしましょう。
3. ブランド認知度を高める
バナー広告はブランドの認知度を高めるためにも利用されます。
ロゴ、カラー、フォントなどを統一することで、ブランドのイメージを視覚的に訴えかけることができます。
まめウェブサイト訪問者にブランドの印象を伝えることができますよ。
4. 行動をうながす
4つ目は、見た人に行動（申し込みや視聴）をしてもらうこと。
例えば、「今すぐ購入」、「詳細はこちら」、「無料登録」などのCTA（Call to Action）を配置することで、次のステップを踏んでもらうことができます。
閲覧者がクリックしたくなるように工夫しましょう。
バナー作成のコツ
効果的なバナーを作成するためには、重要なコツが6つあります。
これらのポイントを押さえることで、閲覧者の目を引き、メッセージが効果的に伝わるバナー作りができるようになります。
- 明確な目的を設定する
- シンプルなデザインを心がける
- 高品質な画像を使用する
- 読みやすいフォントを選ぶ
- 効果的なCTAを配置する
- カラーの一貫性を保つ
1. 明確な目的を設定する
バナーを作成する前に、まずその目的を明確にしましょう。
販売促進、ブランド認知度向上、ウェブサイトへのトラフィック誘導など、具体的な目標を設定することで、デザインの方向性が定まります。
目的が明確であるほど、効果的なバナーを作成することができます。
2. シンプルなデザインを心がける
バナーは短時間でメッセージを伝えるため、デザインはシンプルに保つことが重要です。
過度に複雑なデザインは、閲覧者の注意を逸らす可能性があります。
シンプルでわかりやすいレイアウトを心がけ、重要な情報を強調しましょう。
3. 高品質な画像を使用する
画像はバナーの視覚的魅力を高める重要な要素です。
高品質な画像を使用することで、バナー全体の印象が向上します。
また、画像はメッセージと関連性のあるものを選び、視覚的に一貫性を持たせることが大切です。
4. 読みやすいフォントを選ぶ
フォントの選択もバナーデザインにおいて重要な要素です。
読みやすいフォントを使用し、テキストのサイズや色を工夫して、メッセージがはっきりと伝わるようにしましょう。
特に、強調したいテキストは大きめに設定し、色や背景とのコントラストを強くすることがポイントです。
5. 効果的なCTAを配置する
バナーの目的が閲覧者の行動を促すことであれば、効果的なCTA（Call to Action）を配置することが不可欠です。
「今すぐ購入」、「詳細はこちら」、「無料登録」など、具体的で行動を誘導するフレーズを使用し、クリックしたくなるようにデザインしましょう。
クリックしたくなるデザイン、実際にどんなデザインか教えて！
クリックしたくなるようなデザインって？
1. 明確で目立つボタン
CTAはボタンの形で表示するのが一般的です。
ボタンは目立つようにデザインし、すぐにクリックできることを示します。
- 色: バナー全体のカラーと対照的な色を使うと、CTAボタンが目立ちます。例えば、全体が青系のデザインなら、オレンジや赤のボタンが効果的です。
- サイズ: 適度な大きさにして、見逃されないようにします。小さすぎると目立たず、大きすぎると他の要素を圧迫します。
- 形: 四角形や円形など、シンプルな形が良いです。角を丸めると親しみやすい印象になります。
2. 読みやすいテキスト
CTAボタンのテキストは、簡潔で理解しやすいものにします。
- フォント: 太字で読みやすいフォントを選びます。
- サイズ: ボタン内で十分に大きく表示し、遠くからでも読み取れるようにします。
3. 明確なメッセージ
CTAのテキストは行動を促すものがオススメです。
- アクションワード: 「購入」、「登録」、「詳細」などの具体的なアクションを示す言葉。
- 緊急性: 「今すぐ」、「今日だけ」など、緊急性を持たせるとクリック率が上がります。
- 価値の提供: 「無料」、「限定」など、ユーザーにとっての利益を強調します。
4. 適切な配置
CTAボタンは、バナーの目立つ位置に配置します。
- 視線の誘導: バナー内の他の要素（画像や矢印など）で視線をCTAボタンに誘導します。
- 空白の活用: ボタンの周りに適度な空白を設け、他の要素から切り離すことで目立たせます。
6. カラーの一貫性を保つ
カラーはブランドイメージを伝える重要な要素です。
バナー全体のカラースキームをブランドのテーマカラーに合わせ、一貫性を保ちましょう。
適切なカラーを選ぶことで、バナーの視覚的魅力が増し、ブランド認知度も向上します。
今回作るバナーのお題
お題：法律事務所の無料相談キャンペーンバナー
目的
みなと法律事務所（架空）が新規顧客を獲得するため、無料相談キャンペーンを告知、ウェブサイトへのトラフィックを増やす
ターゲット
- 法律に関する悩みを抱えている人
- 弁護士を探している人
- 法律事務所のサービスに関心がある人
バナーに含める要素
- キャッチコピー: 「初回無料相談キャンペーン実施中！」
- メインメッセージ: 「法律の悩みを専門家に相談しませんか？」
- CTA（Call to Action）: 「今すぐ予約」「詳細はこちら」
- 法律事務所のロゴ
- ビジュアル要素: 信頼感を与える弁護士の写真
- キャンペーン期間: 「期間限定 – 6月30日まで」
- 連絡先情報: 電話番号「03-1234-5678」・メールアドレス「info@minato-law.jp」・ウェブサイト「www.minato-law.jp」
サイズ
横：336 × 縦：280px
バナー作成前の準備
まめバナー作成の前段階における準備は成功に向けての重要なステップです
以下のステップを実行することで、クライアントの要求や市場の動向をしっかり把握するとともに、効果的なバナーを作成する基盤を築くことができます。
- 参考画像の収集
- 競合調査
- コンセプトの策定
参考画像の収集
クライアントの要望やバナーのコンセプトに合った参考画像を収集します。
デザインの方向性や雰囲気を決定するのに役立ちます。
競合調査
同様の業界やテーマの競合他社のバナーを調査し、どのようなデザインやメッセージが効果的であるかを把握します。
他社との差別化や新しいアプローチを見つけることができます。
コンセプトの策定
クライアントの要件や目標を理解し、バナーのコンセプトやテーマを策定します。
まめバナーのデザインやメッセージが一貫していることを確保します。
今回のお題「法律事務所の無料相談キャンペーンバナー」のコンセプトは安心と信頼をお届けする無料相談キャンペーンにしました。
バナー全体のコンセプト
- 信頼感 : 弁護士の顔写真と全体のカラー（青色）で信頼感
- 親しみやすさ：敷居の高く感じる法律事務所を受け入れやすく親しみを感じるように
- 行動喚起 : 明確で目立つCTAボタンでユーザーの行動を促進
- 緊急感 : キャンペーン期間を強調することで、ユーザーの即時のアクションを促す
バナー作成スタート！
今回はこのバナーを作っていきます。
バナーの制作ステップは以下のとおりです。
- 載せる要素を書きだす
- 要素の優先順位を決める
- 素材を探す
- 要素を配置する
- あしらいをつける
- 写真を加工する
- 全体のバランスを調整する
- 最終チェック
まめそれではスタート！！！
載せる要素を書きだす
横：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冊以上…！
ほんとにオススメの私の厳選５冊を紹介します。
デザインのドリル
フォトショップやイラストレーターをほとんどさわったことがない方は、最初の1冊にオススメです。
バナートレースしながら、基本的な操作・デザインの基礎を学べます。
まめトレースに必要な素材が用意されていてデザインの練習に集中できる点も推せます✨
思わずクリックしたくなる バナーデザインのきほん
まめこの1冊は別格です…！
しっかり取り組めば、初心者さんが案件獲得レベルに達せるほどの基本とテクニックが身に付けられると思います。
- バナーデザインの基本〜テクニックが身につく
- デザインツールの操作スピードが上がる
- デザインの引き出しが増える
まめ実際に、私が案件獲得の際に恩恵を受けた本だから思い入れが違います笑
好きすぎて1記事まるっとこの本の魅力について書いてしまったほど…↓
マネするだけでセンスのいいフォント
フォントによって印象が変わるのはわかるけど、感覚で決めちゃってる…
フォントを使いすぎてごちゃっとなっちゃう…
まめフォントで悩んだら絶対に手を伸ばす1冊です。
フォント迷子になる方は読む価値アリかと…。
- デザイン毎に「なぜこのフォントを使用するか」説明があるから、理論的に選ぶことができるようになった
- デザインのジャンル毎にオススメのフォントが載っているから、迷子になることが格段に減った
- 日本語と英語の相性のいいフォントを選べるようになった
なるほどデザイン
けっきょく、よはく。
【よくある質問】バナーデザイン
- バナー1枚の単価はいくらくらい？
-
バナーは3,000円〜5,000円ほどで取引されることが一般的です。
ココナラでは「バナー・ヘッダーデザイン」の売れ筋価格は3,000円〜20,000円でした↓
キャリアやスキルを積むことで、単価をどんどん上げていくことが可能です💡
- バナーを受注するためには何をしたらいい？
-
オリジナルバナーの作成！
模写やトレースしたデザインは実績として公開できません。
STEP模写・トレースオリジナルバナーの作成前に、模写・トレースで練習をします。
STEPオリジナルバナー作成STEPポートフォリオ作成STEP営業スタート！ - バナーを作成中に迷走したら…どうしたらいい？
-
なんで迷走しているか・どこがしっくりこないのか考えます。
優先順位やコンセプトを振り返り、ひとつずつ言語化していくと、するっと抜けられることもあります。
まめ私もまだまだ迷走します。
何してもダメだ！って時はお菓子食べてゲームして、頭をリセットしてます笑 - バナー1枚に何時間くらいかかる？
-
初めてのオリジナルバナー作成は6時間以内を目安にしてみてください。
「なにができないのかわからない」状態だと思うので、まずは手順を覚えて、手を動かすことが大切です。
2枚目以降は5時間・4時間・3時間…とどんどん時間を短くして、制限時間を決めてみてください。
最初から完璧なバナーを作ることは難しく、あとから「なんだこのダサいデザインは…！」と感じるはずなので、最初は時間をかけすぎないことがモチベ低下を防ぎます💡
おまけ
いままで何十枚のバナーを作成してきて思うこと！
ダサくてもターゲットに刺さればOK
しっかり文字が読めて、伝えたいことが伝わって、ターゲットが行動してくれるバナーが大優勝…と実感しています。
私自身、駆け出しの頃「ダサくないデザイン！素人っぽくないデザイン！」を目指して練習していましたが、「スタイリッシュ！おしゃれ！」より、言葉がしっかり伝わるデザインをご提案できた時が、クライアントに喜んでもらえた末にリピーターになってもらうことができました。
まとめ
バナー制作は、小さいアートボードの中にぎゅっと要素を詰め込むので難しいですよね。
たくさん手を動かして、案件をゲットして、稼げるウェブデザイナーになりましょう！