【バナー広告】プロデザイナーはこうやる！バナーの作り方を徹底解説！
こんにちは！ B-SOKU広報チームです。
バナーをデザインしようと思っても、何を意識して作ればよいか分からず、イマイチなバナーが出来上がってしまうことありませんか？
例えば……
・見られやすい構成／配置ってあるの？
・色ってどうやって決めるの？
・あしらいをつける時のポイントって？
など、疑問がたくさんあると思います。
そんな初心者デザイナーさん向けに、バナーのデザイン方法について事例をもとにご紹介します！
【バナーのデザインはこの順番で作成すると効率的！】
バナーを作成するにあたり、以下の3つの手順を押さえておくと効率的に制作ができます！
①コピーなどの情報を整理し、作成サイズに落とし込む
各要素のレイアウトをざっくりと決めます。
あくまでも構成のみを決めるので、色は白黒でOK！ イラストや写真も配置する場所を決めておきましょう。
②構成が決まったら、情報をもとに色味やフォントなどのトンマナをを決める。
性別・年代・業界・ターゲットなど様々な要素からトンマナやフォントを決めていきます。
③細かいあしらいを加える
背景を調整したりアイコンを選定したり、細部に手を加えて完成です！
しっかり土台を作って大枠を固めてから細かい調整を行い、デザインしていくという流れです。
では、実際にB-SOKUの事例をもとに制作フローを見てみましょう！
事例をもとに制作フローを解説
事例をもとに、実際にデザイナーが1つのバナーを作成するフローをご紹介します！
■事例①
以下は今回作成するバナーの情報です。
・業界：健康食品
・ターゲット：40~60代の男女
・トンマナ：遷移先の色に合わせる・ブランドカラー
・コピー：
メイン：毎日1杯でおいしく健康チャージ
サブ：10種類の素材で野菜不足解消！
通常価格3,000円→50%OFF 1,500円
・素材：指定あり
・サイズ（pixel）：1080×1080
これらの情報をもとに、バナーを作成していきましょう！
まずは、簡単に白黒でラフ構成を作成します。
今回の構成は、左から右への視線移動が下に向かって動いていく「F型」のレイアウトになります。
まずは、コピーの配置を決めます。
今回は画像素材があらかじめ決まっているため、ラフの段階でそれもを入れておきます。
サイズは1080×1080の正方形なので、メインコピーは上部に配置して読まれやすいようにしています。
👉ポイント
・オファーはフッターに集約することが多い！
要素が多い場合、情報が散ってしまうと分かりにくくなります。特にオファー関連情報は、１つの場所に集めることが重要。今回のように、フッターに集約するのがセオリーの１つです。
・数字はジャンプ率を付けて視線誘導！
今回の場合、「1,500円」という数字が目に留まってほしい情報なので、フォントサイズを「通常価格」や「割引率」より大きくすることでメリハリがあり読みやすくなります。
次に、ターゲット情報をもとに、デザインの方向性を決めます。
今回はデザインのトンマナに指定があるので、指定カラーをメインに配色。
フォントはゴシック体を使用して視認性を意識。
サブコピーを手書きフォントにすることで、抜け感がある印象になり、メインコピーとサブコピーのメリハリがつきます。
👉ポイント
・暖色は視認性が高い
暖色は、意識しなくても自然と目に入ってくる〝誘目性〟の高い色。人の注意をひく色味です。
メインコピーを暖色にするか寒色にするか悩んだときに、暖色にしておくと視認性があがり目に留まりやすいデザインになります！
・手書きフォントを使うと垢抜けデザインに！
ちょっとしたサブコピーに手書きフォントを使用すると、一気に抜け感が出てプロっぽいデザインになります。
最後に、細かい部分のあしらいを調整して完成です。
👉ポイント
・要素が多い時の装飾は少なめに
バナーの要素が多い場合は、飾り過ぎないようにしましょう！
情報を分かりやすく伝えるための補助の役割程度にしておくことが重要です！
■事例②
以下は今回作成するバナーの情報です。
・業界：人材（保育士）
・ターゲット：30~40代の女性（パート勤務）
・トンマナ：自由
・コピー：
メイン：安心のサポート体制であなたのペースで無理なく働ける！
サブ：充実した研修で未経験でもしっかりサポート！
・素材：なし
・サイズ（pixel）：1200×628
素材もトンマナも指定がなく、自由に作成するパターンです。
デザイナーの腕が試される上に悩むパターンですね……。
この場合も、基本的な考え方は同じです！
まずは、コピーなどの情報ををもとに簡単にラフ構成を考えましょう。
横長バナーの場合、視線誘導は左上→右上→左下→右下と流れていく「Z型」でレイアウトすることが一般的です
そのため、左にコピー、右に写真を置くことで、視線の流れがスムーズになり、読みやすいデザインのバナーになります。
▼ラフをもとに、フォントや色を調整したものがこちら！
👉ポイント
・業界のイメージに合うトンマナを選ぶ
イメージを言葉で表し、そこから連想するとトンマナを選びやすくなります。
今回の場合、
▼「保育士」＝子供・優しい・笑顔など
〇：パステルカラー・カラフル・ピンク・オレンジ・水色・など
×：白黒・渋い色味
上記のように、イメージする言葉から色を選ぶ方法がオススメです。
また、業界の他社バナーを参考にするのも良いと思います！
・フォントを変えるだけでデザイン性UP！
同じゴシック体でも、少しデザイン性のあるものにするなど工夫することで、簡単にプロっぽいデザインになります。
可読性とデザイン性を兼ね備えたフォントを使用するといい感じに！
■事例③
以下は今回作成するバナーの情報です。
・業界：保険
・ターゲット：20~30代のライフイベント（結婚・出産）を控えた男女
・コピー：
メイン：将来のお金、そのままで足りてる？
サブ：プロのアドバイスで無理なく安心な未来を！
・素材：フリーイラストを使用してほしい
・サイズ（pixel）：1080×1080
・その他要望：インパクトのあるデザインにしたい・ロゴ必須
事例①と同じく、左から右への視線移動が下に向かって動いていく「F型」のレイアウトです。
👉ポイント
・文字を背景のように使う
写真やイラストなどの後ろにコピーを大きく配置して背景の一部として使用すると、インパクトのあるデザインになります。商品や人物を目立たせたい時にも、大きな効果を発揮します。
・フリーイラストの色味に合わせる
イラスト・テキスト・背景の色味が合っていないと、全体としての統一感がまったくない印象になります。
トンマナが指定されていない場合、写真やイラストなどの色味を参考にすると、まとまりが出ます。迷ったときは、素材の色を参考にしましょう。
空いているスペースにお金のイラストを散りばめたり、リアクションのあしらいを入れたりすることで、よりインパクトのあるデザインに仕上がりました！
👉ポイント
・色で背景をエリア分けする
背景色に変化をつけてエリアを分割することで、スムーズな視線誘導が実現します。加えて、メリハリや奥ゆきが生まれるので、全体の印象が深まります。
さいごに
●バナーの効果改善から制作まで、まるっと任せたい！ そんなあなたへ
ちょっとの工夫でバナーの効果が変わることは分かったけれど、「どうせなら具体的なバナーの改善提案から、新たなバナーの新規提案までお願いしたい」「なんならバナー制作も併せてやってほしい」とお考えのインハウスご担当者様に朗報です！
広告代理店のアドクリエイティブ制作専門部隊「B-SOKU（ビーソク）」なら、豊富な広告運用の経験・媒体トレンドの知見を基にした、効果の出るクリエイティブ（バナー静止画、動画、LP）のご提案から制作までを一気通貫でお任せいただけます！
「制作リソースが足りなくて悩んでいる」
「インハウスでバナーを作っているけれど、なかなか効果がでない」
「SNSでは今どういったバナーがトレンドなのかわからない」
――そういったお悩みをお持ちの方は、ぜひお気軽に私たちにご相談ください🌸
▼バナーの制作／改善提案の無料相談ならこちら🚀
少しでもご参考になりましたら、ぜひ「スキ💗」をぽちっとお願いします💛↓↓↓