※本記事にはアフィリエイトリンク（PR）が含まれる場合があります。
バナーを作ると、どうしても情報を詰め込みたくなります。コピー、写真、ロゴ、ボタン、装飾。全部入れた結果、何を伝えたいのか分からない1枚になる。これは初心者に限らずよく起こることです。
伝わるバナーは、センスより先に「決める順番」で決まります。誰に何を伝えるかを決め、情報に順位をつけ、その順位どおりに大きさと配置を割り振る。この流れを知っておくと、迷う時間が減ります。
この記事では、伝わるバナーの基本と、AIで下書きを時短する手順、公開前のセルフチェックまでを整理します。
伝わらないバナーによくある3つの原因
まず、つまずきやすいポイントを3つ整理します。自分のバナーがどれに当てはまるか考えながら読んでみてください。
1. 主役が決まっていない
文字も写真もロゴも同じくらい目立っていると、目はどこにも止まりません。バナーは一瞬しか見られないので、「まずここを見てほしい」という主役が1つ必要です。
2. 情報量が多すぎる
伝えたいことが3つあると、受け取られるのは0になりがちです。バナーは詳細を説明する場所ではなく、「続きが気になる」と思ってもらうための入口です。
3. 余白がない
端ギリギリまで要素が入っていると、窮屈で安っぽく見えます。余白は「何も置かない場所」ではなく、主役を目立たせるための道具だと考えてください。
この3つはセンスの問題ではなく、作る前の整理不足で起きます。次から、その整理の仕方を見ていきます。
作る前に決める3つのこと
手を動かす前に、メモに3行書くだけで仕上がりが変わります。
- 誰に見せるか：年齢や性別より「今どんな状態の人か」で考えます（例：料金を比べている人、まだ存在を知らない人）
- 見た人にどうしてほしいか：クリック、保存、申し込みなど、行動を1つに絞ります
- 一番伝えたい一言：20字くらいで言い切れるか試します
特に大事なのが3つめです。1枚のバナーに入れるメッセージは1つに絞ります。「安い」「早い」「実績が多い」を全部言うと、どれも印象に残りません。どれか1つを主役にして、残りは小さく添えるか、思い切って削ります。
入れる情報に順位をつける
決めた一言をもとに、要素を1位から3位まで並べます。
- 主役：一番伝えたい一言（キャッチコピー）
- 脇役：補足、対象者、期間など
- 必要だが小さくてよいもの：ロゴ、注釈、ボタンの文字
この順位が、そのまま文字サイズと配置の強弱になります。順位を決めずにレイアウトを始めると、ずっと迷い続けることになりがちです。
レイアウトの基本｜視線の流れと強弱
視線は左上から動く
横長のバナーでは、多くの人の視線は左上から右下へ動きます。主役のコピーを左寄せ・上寄せに置き、ボタンや誘導を右下や下に置くと自然に読めます。縦長や正方形のSNS用バナーでは、上から下への流れになります。
ただし「必ずこうしなければならない」というものではありません。写真の人物が向いている方向や、矢印の向きでも視線は動きます。迷ったら、自分が最初にどこを見たか確認してみてください。
ジャンプ率で強弱をつける
ジャンプ率とは、一番大きい文字と一番小さい文字のサイズ差のことです。差が小さいと平坦で退屈に見え、差が大きいとメリハリが出ます。
- 主役のコピー：思っているより2段階大きく
- 脇役：主役の半分以下を目安に
- 注釈：読める範囲で最小に
初心者のバナーは、だいたい「主役が小さい」傾向があります。大きくしすぎたと感じるくらいが、スマホで見るとちょうどよくなることが多いです。
端をそろえて余白を統一する
左端でそろえる、中央でそろえる、どちらでもかまいませんが、ばらばらにしないことが大切です。そろっているだけで整って見えます。あわせて、画面の端から取る余白の幅を全体で統一しておきます。
配色と文字の選び方
色は3色までが扱いやすい
ベース（背景）、メイン（主役の色）、アクセント（ボタンなど1か所）の3つに分けて考えると迷いません。アクセント色は面積を小さくするほど効きます。全体を派手な色で埋めると、逆に目立つ場所がなくなります。
掲載先の背景色も確認しておきます。白いページに白背景のバナーを置くと、境界が消えて気づかれません。
文字は読みやすさを優先する
- 書体は1〜2種類まで。ゴシック体は力強く、明朝体は落ち着いた印象になります
- 写真の上に文字を載せるときは、写真を暗くする、帯を敷く、縁をつけるなどで背景と分離します
- 文字色と背景色の明るさの差を十分に取ります。薄いグレーの小さな文字は、スマホではほぼ読めません
- 改行は意味の切れ目で行います（「今から始める／デザインの勉強」のように）
AIで下書きを時短する手順
AIはバナーを完成させる道具ではなく、ゼロから1を作る時間を削る道具として使うと効果が出ます。筆者はスマホLPの制作にAI画像生成を取り入れたことで、素材探しにかけていた時間が約5時間から約10分ほどに短縮しました。バナーでも考え方は同じです。
手順1：コピー案を量で出させる
まず、文章生成AIに条件を渡してコピー案を20個ほど出させます。
- 誰向けか、何を伝えたいか、文字数の上限（例：20字以内）
- トーン（真面目、やわらかい、力強い など）
- 「同じ意味の言い換えも含めて」と添える
20個のうち使えるのは1〜2個ですが、自分では出てこなかった言い回しが混ざります。そのまま使わず、組み合わせたり言葉を入れ替えて、自分の言葉に直してから使います。
手順2：ラフを言葉で比べる
「横長バナーで、左に主役コピー、右に人物写真、右下にボタン」といったレイアウト案を複数出させ、文章のまま読み比べます。画像にする前に言葉で比較すると、作り直しの手間が減ります。
手順3：背景やあしらいを生成する
人物、モチーフ、抽象的な背景など、探すのに時間がかかる素材を画像生成AIで用意します。細部が乱れやすいので、次の前提で使うと失敗が減ります。
- 文字はAIに描かせず、後から自分で載せる
- 手や指、細かい模様が目立つ構図は避ける
- 仕上げは画像編集ソフトで整える
生成した画像を仕事で使うときは、使うツールの利用規約と、人物や商標の扱いを必ず確認してください。
手順4：できたバナーをAIに評価させる
完成したバナーをAIに読み込ませ、「広告バナーとして、目に入る順番と改善点を3つ挙げて」と聞きます。ポイントは、良い悪いの判定ではなく理由を言語化させることです。「主役と脇役のサイズ差が小さい」のように言葉で返ってくると、次の1枚に活かせます。筆者もこの方法を日々の学習に使っています。
AIの指摘がいつも正しいとは限りません。納得できないものは採用しなくて大丈夫です。判断の材料を増やす相手として付き合うと、ちょうどよい距離感になります。
公開前のチェックと、体系的に学ぶ選択肢
セルフチェック8項目
- 一番伝えたいことが、見て1秒で分かるか
- 文字は実際の表示サイズ（スマホ）で読めるか
- 主役と脇役のサイズ差がはっきりしているか
- 色は3色程度に収まっているか
- 端の余白が全体でそろっているか
- 掲載先の背景に埋もれないか
- 誤字や、社名・商品名の表記ゆれがないか
- 根拠が必要な言い方になっていないか（「No.1」「必ず」など）
縮小して遠目で見る、グレースケールにして明るさの差だけで成立するか見る。この2つも手軽で効果的です。
独学で足りないと感じたら
バナーは1枚で完結するので、独学と相性のよい題材です。一方で、Webサイト全体の設計や映像、コーディングまで広げたくなると、学ぶ順番が分からず止まりがちです。
- 何から学ぶか自分で決めるのが難しい
- 作ったものに第三者の視点がほしい
- デザインだけでなく映像やWeb制作まで幅を広げたい
こうした段階にいる人は、カリキュラムが組まれたオンラインスクールを候補に入れてみる価値があります。デジタルハリウッド・オンラインスクールは、デザイン・映像・プログラミングなど幅広い分野をオンラインで学べる老舗スクールの講座です。学べる分野やサポートの範囲、料金は公式サイトで確認してください。
まとめ
- 伝わるバナーは、誰に何を伝えるかを決め、情報に順位をつけ、その順位どおりに大きさと配置を割り振ると作りやすくなります
- レイアウトは視線の流れとジャンプ率、配色は3色まで、文字は読みやすさ優先が基本の型です
- AIはコピー案・ラフ・素材の下書きと、完成後の「理由の言語化」に使うと、時短と学習の両方に効きます
コメント