「バナーを1枚作ってほしい」と頼まれたものの、何から手をつければいいのか分からず画面の前で固まってしまう。Webデザインを学び始めた方が最初にぶつかるのが、このバナー制作の壁です。
バナーの作り方は、デザインの才能ではなく手順で決まります。目的を決め、載せる言葉を絞り、サイズを決めてから作る。この順番を守るだけで、初心者でも読める1枚に仕上がります。
この記事では、バナーの作り方を初心者の方向けに、ツール選びから完成までの流れに沿って解説します。無料で始められる方法と、上達のための練習法もあわせて紹介します。
バナーは「デザイン」ではなく「伝達」から考える
バナーの役割は1つだけ
バナーは、通りすがりの人にクリックしてもらうための小さな広告です。じっくり読まれることはまずなく、視界に入るのは1秒あるかどうか。その1秒で「自分に関係がある」と思ってもらえるかどうかが勝負になります。
そのため、バナーに求められるのは美しさよりも伝達力です。おしゃれでも何のバナーか分からなければ機能しませんし、少し野暮ったくても内容が一瞬で分かるバナーの方が成果につながります。
作る前に決める3つのこと
手を動かす前に、次の3点を紙にでも書き出しておきましょう。
- 誰に向けたバナーか：年齢層、悩み、そのバナーを見る場面
- 何をしてほしいか：資料請求、購入、記事の閲覧など、クリック後の行動
- 一番伝えたい一言：削れない言葉を1つだけ選ぶ
この3つが決まっていないバナーは、作っている途中で迷いやすくなります。「情報を足すか削るか」で悩んだとき、判断基準になるのがこの3点です。
伝わるバナーの考え方は、バナーデザインの作例を集めた本でも数多く紹介されています。作る前に目を通しておくと、配置の引き出しが増えます。
バナーのサイズを決める
掲載先によってサイズは決まる
バナーのサイズは自由に決められるものではなく、掲載する媒体の規定に従います。代表的なサイズを整理しておきましょう。
| サイズ（px） | 呼び名 | 主な掲載場所 |
|---|---|---|
| 300×250 | レクタングル（中） | 記事内、サイドバー |
| 336×280 | レクタングル（大） | 記事内、記事下 |
| 728×90 | ビッグバナー | ページ上部・下部 |
| 320×100 | モバイルバナー（大） | スマートフォン表示 |
| 160×600 | スカイスクレイパー | サイドバー（縦長） |
| 1200×628 | 横長タイプ | SNS広告、シェア画像 |
| 1080×1080 | 正方形タイプ | SNS投稿 |
実寸で作り、実寸で確認する
初心者がやりがちな失敗が、大きな画面で拡大表示しながら作り込んでしまうことです。300×250のバナーは、実際にはスマートフォンの画面で親指ほどの大きさにしか見えません。作業中はこまめに100%表示に戻して、その大きさで文字が読めるかを確認しましょう。
制作中は画面から一度離れて、1メートルほど距離を取って眺めてみてください。細部は見えなくなり、色の面と文字のかたまりだけが残ります。それでも内容が伝わるなら合格です。
ツールを選ぶ
Canva：まず1枚作ってみるなら
テンプレートを選んで文字を差し替えるだけで形になるため、最初の1枚には向いています。ブラウザだけで動き、スマートフォンからも編集できます。
記事執筆時点の公式サイトでは、無料プランが0円で、有料の「Canvaプロ」が年払いで1人あたり11,800円、「Canvaビジネス」が年払いで1人あたり18,800円と案内されています。素材点数やストレージ容量が違うため、最新の条件はCanva公式の料金ページで確認してください。
ただし、テンプレートに頼りきると「なぜこの配置なのか」を説明できないまま作る癖がつきます。仕事として続けるなら、途中から自分でレイアウトを組む練習に切り替えるのがおすすめです。
Figma：Web制作の現場に合わせるなら
本来はUIデザイン用のツールですが、バナー制作にも問題なく使えます。ブラウザで動作し、無料プランでも個人利用の範囲なら十分な機能があります。
Web制作の現場ではUIデザインツールとしての利用が広く定着しており、案件でデータ形式を指定される場面も増えています。バナーだけでなくWebサイトのデザインまで見据えるなら、最初からFigmaに慣れておく方が回り道になりません。料金体系はFigma公式の料金ページで確認できます。
Photoshop：写真加工が中心なら
人物写真の切り抜きや、質感を作り込むレタッチが必要な案件ではPhotoshopが強みを発揮します。Adobeのプランは単体プランとコンプリートプランがあり、金額は改定されることがあるためAdobe公式サイトで最新の料金を確認してください。
なお、かつてUIデザインに使われていたAdobe XDは単体プランの販売が終了し、事実上の保守状態に入っています。これから学ぶツールとしては選びにくい状況です。
バナーの作り方6ステップ
ステップ1：情報を書き出して優先順位をつける
載せたい要素をすべて書き出し、大・中・小の3段階に分けます。キャッチコピーが「大」、補足説明が「中」、注釈や期間が「小」といった具合です。
この時点で「大」が2つ以上あると、まず散らかったバナーになります。主役は1つに絞りましょう。
ステップ2：ラフを手書きで描く
いきなりツールで作らず、紙に長方形を描いて要素の位置だけ決めます。3パターンほど描いてみると、自分の中で「これが一番伝わる」という配置が見えてきます。
手書きなら1パターン1分で描けます。ツール上で試行錯誤すると1パターン30分かかることを考えれば、この工程は明らかに時間を節約してくれます。
ラフ用に方眼ノートを1冊用意しておくと、縦横比をそろえた長方形を手早く描けます。
ステップ3：文字だけを先に配置する
装飾や画像を入れる前に、文字だけを置いた状態で成立するかを確認します。文字の大小関係だけで内容が伝わるなら、その後どう装飾しても崩れません。
ステップ4：背景と画像を入れる
写真を敷く場合は、文字が乗る部分に暗めの半透明レイヤーを重ねるか、被写体のない余白部分に文字を置きます。写真の上に直接白文字を置くと、背景が明るい部分で読めなくなります。
ステップ5：色を絞って整える
使う色は3色までに抑えます。背景に使うベースカラー、主役となるメインカラー、ボタンなどに使うアクセントカラーの3つです。面積の目安は7対2.5対0.5程度とされ、アクセントカラーはごく狭い面積に使うほど効きます。
ステップ6：書き出して実物で確認する
Web用ならJPGかPNG、透過が必要ならPNGで書き出します。書き出したファイルを実際のサイズで表示し、スマートフォンでも確認しましょう。パソコンでは読めた文字がスマートフォンでは潰れている、というのはよくある落とし穴です。
広告バナーには媒体ごとにファイルサイズの上限があります。上限を超えると入稿できないため、画質を落としすぎない範囲で圧縮しておきましょう。
初心者がつまずきやすいポイント
文字を詰め込みすぎる
伝えたいことが多いほど、つい全部載せたくなります。しかしバナーは入口にすぎません。詳細はリンク先で説明できるので、バナーには「クリックする理由」だけを残すと考えましょう。
余白がない
枠のギリギリまで要素を置くと、窮屈で安っぽく見えます。上下左右に均等な余白を確保し、要素同士の間にも呼吸できる隙間を作ります。余白は「何もない部分」ではなく、主役を引き立てるための道具です。
文字の大小差が小さい
キャッチコピーと補足の文字サイズが近いと、どこを読めばいいのか分かりません。主役の文字は思い切って大きくし、補足は小さく。この差が大きいほど、視線の流れがはっきりします。
フォント選びが場当たり的
1枚の中で使う書体は1〜2種類に絞ります。太さの違い（ウエイト）で差をつければ、書体を増やさなくても強弱は作れます。
文字の大小差や余白、書体の使い分けといった原則は、デザインの入門書にまとめて解説されています。つまずいたときに読み返せる1冊があると安心です。
上達するための練習方法
バナートレースを繰り返す
実際に配信されているバナーを、同じサイズで真似して作り直す練習法です。「なぜこの余白なのか」「なぜこの色なのか」を手を動かしながら考えることで、感覚ではなく理屈でデザインを組めるようになります。
トレースした作品はそのまま公開すると権利の問題があるため、練習用として手元に留め、ポートフォリオには自作のバナーを載せましょう。
10枚作って並べる
1枚を延々と作り込むより、10枚作って並べた方が自分の癖が見えます。「毎回同じ配置になっている」「色数が多すぎる」といった傾向は、並べて初めて気づけるものです。
作業環境を整える
細かい作業を続けていると、目の疲れと画面の狭さがそのまま集中力の低下につながります。ノートパソコン1台で作業していると、素材フォルダとツールを行き来するだけで消耗するという声は多いです。
27インチのWQHDモニターを1枚追加するだけでも、参考資料を横に並べながら作業できるようになります。色の正確さを重視するなら、色域の広さをうたったEIZOの「ColorEdge」シリーズのようなカラーマネジメント対応モニターが選択肢に入ります。
写真の切り抜きや手描き要素を扱うなら、Wacomの「Intuos」のような板タブレットがあると作業が楽になります。学習用には、『ノンデザイナーズ・デザインブック』や『あるあるデザイン』といった書籍を手元に置き、迷ったときに開ける状態にしておくと安心です。
仕事としてバナーを作る場合の進め方
ヒアリングで確認しておくこと
依頼を受けてバナーを作る場合、制作に入る前に確認しておきたい項目があります。ここが抜けていると、完成後に大幅な作り直しが発生します。
- 掲載先と入稿規定：サイズ、ファイル形式、容量上限、アニメーションの可否
- 使用できる素材：ロゴデータ、商品写真、指定のフォント
- ブランドカラーと使用ルール：企業によってはロゴの余白まで規定がある
- 入れなければならない文言：注釈、法令上の表記、商標マーク
- 修正回数と納期：何回まで無償で対応するか
修正回数を決めずに受けてしまうと、際限のない微調整に時間を取られます。初回の見積もり段階で「修正は2回まで」といった条件を共有しておきましょう。
複数パターンを前提に組み立てる
広告用のバナーは、1枚納品して終わりというケースの方が少なくなっています。同じ訴求でも配色違い、コピー違いのパターンを求められることが多いため、最初から差し替えやすいデータ構造で作っておくと後が楽です。
具体的には、文字と背景と装飾をレイヤーで明確に分け、色は個別に指定せずスタイルとして登録しておきます。こうしておけば、色を1箇所変えるだけで全パターンに反映できます。
データの受け渡しで気をつけること
納品時は、書き出した画像だけでなく編集可能な元データもセットで渡すよう求められる場合があります。使用したフォントがクライアント側にないと表示が崩れるため、フォント名を一覧にして添えておくと親切です。
また、素材サイトからダウンロードした画像を使った場合は、出典と利用規約の範囲を伝えておきます。権利関係の確認を怠ると、納品後にトラブルへ発展することがあります。
よくある質問
Q. デザインの学校に通わなくてもバナーは作れますか？
作れます。バナー制作は工程が明確なので、独学でも手順を守れば形になります。ただし、自分の作ったものを客観的に評価してもらう機会は独学では得にくいため、添削を受けられる環境があると上達は早くなります。
Q. バナー1枚の制作にどれくらい時間がかかりますか？
慣れないうちは1枚に3〜4時間かかることも珍しくありません。経験を積むと、ラフから書き出しまで1時間前後に収まってきます。時間短縮の鍵は、ツールの操作速度よりも「迷わない判断」です。
Q. 商用のバナーに使える画像素材はどこで探せばいいですか？
商用利用可と明記された素材サイトを使いましょう。ただし「Web利用は可だが広告利用は要相談」としているサイトもあるため、広告として配信するバナーでは規約の確認が欠かせません。
Q. バナーの成果はどう測るのですか？
一般的にはクリック率で評価します。同じ内容でキャッチコピーや配色を変えた複数パターンを配信し、反応の良い方を残していく進め方が基本です。1枚で当てようとせず、比較する前提で作りましょう。
Q. スマートフォン向けとパソコン向けで作り分けは必要ですか？
必要です。同じ内容でも、縦横比が変われば適切な文字量は変わります。横長のバナーで成立していた3行のコピーが、正方形では窮屈になることもあります。サイズごとに文字量を調整しましょう。
まとめ
バナーの作り方を初心者が身につけるには、順番を守ることが何よりの近道です。目的と相手と一言を決め、サイズを確認し、ラフを描き、文字から置いて、色を絞り、実寸で確認する。この流れを繰り返すうちに、迷う時間は自然と減っていきます。
ツールは無料で始められるものから選び、まずは10枚作ってみることをおすすめします。上手い1枚を作ろうとするより、数を作って自分の癖を知る方が上達は早いです。
作業環境と学習用の書籍を少しずつ整えながら、バナー制作を続けていきましょう。
