バナー作成の手順5ステップ｜サイズ早見表とレイアウト4つの型【初心者向け】

「バナーを作ってみたけれど、なんだか素人っぽい」

「そもそもサイズは何を選べばいいのかわからない」

このような悩みを抱えていませんか。

バナーはゼロからデザインを考える必要がありません。サイズには決まりがあり、レイアウトには型があります。

本記事では、Webデザインスクールを運営するCampusが、用途別のバナーサイズや入稿の決まり、バナー作成の手順5ステップ、レイアウト4つの型、クリックされるバナーの5原則、副業として受注する方法までを解説します。

また、バナー制作を仕事にしたい方向けに、Campusでは無料の動画講座をご用意しているので、あわせてご活用ください。

※本記事の仕様・価格に関する記述は2026年10月時点の情報です。最新の内容は各公式サイトでご確認ください。

＞＞WEBデザインスクールならCampus

バナー作成の基本

ここでは、バナーを作り始める前に押さえておきたい、バナーの種類と用途別のサイズ、入稿の決まりについて解説します。

バナーには2つの種類がある（広告バナーとサイト内バナー）

同じ「バナー」でも、目的が違えば設計も変わります。

広告バナーは「知らない人に見せる」前提です。

一方でサイト内バナーは「すでに訪問している人」に見せます。

作るバナーの種類によって以降の章で必要な情報が変わるため、どちらを作るのかを最初に決めておきましょう。

バナーサイズ早見表（広告・SNS・サイト内）

広告バナーのサイズは、掲載先によって決められています。

Googleのディスプレイ広告で使える主要なサイズは以下のとおりです。

（出典：Google 広告ヘルプ「アップロードされたディスプレイ広告の仕様」。2026年10月時点）

どのサイズから作るか迷った場合は、300×250や336×280といった一般的なサイズから用意するとよいでしょう。

なお、公式の一覧には、一部の地域でのみ使えるサイズも含まれています。

一覧のサイズをすべて作る必要はないため、配信する地域で使えるサイズかどうかを確認したうえで用意しましょう。

SNSやサイト内に掲載するバナーは、以下の比率・サイズを目安にしてください。

各媒体の仕様は変更されることがあります。

最新の数値は、それぞれの公式ヘルプでご確認ください。

また、同じ画像を複数の媒体で使う場合、表示のトリミング範囲は媒体ごとに違うため、上下左右が切られることがあります。

重要な文字とロゴは、なるべく中央寄りに配置しましょう。

サイズを決める前に確認すべき3項目

サイズだけ合っていても、入稿できないことがあります。

確認するのは次の3点です。

1. 指定サイズ：掲載先が指定する寸法（サイト内なら枠の実寸）
2. ファイル容量の上限：Googleのディスプレイ広告は150KB以内
3. 対応形式：GIF、JPG、PNG（アニメーションGIFは30秒以内など条件がある）

とくに150KBという上限は厳しめです。写真を多用したデザインは、書き出すと上限を超えやすくなります。

超えた場合の対処は3つあります。

• PNGではなくJPGで書き出す（写真中心の場合は容量が大きく下がる）
• 画像圧縮ツールで容量を削る
• 使用する写真の点数を減らす

サイト内バナーなら容量の制限は緩やかです。

ただし重い画像はページの表示速度を下げるため、軽くする意識は必要です。

バナー作成の手順5ステップ

ここでは、バナー作成の手順を5つのステップに分けて解説します。

Step1｜目的と訴求を1つに決める

最初にやるのはデザインではなく、何を伝えるかを決めることです。

次の2つを一文で書き出してください。

• 誰に見せるバナーなのか
• クリックした人に何をしてほしいのか

そのうえで、訴求を1つに絞ります。

価格、実績、期間限定、悩みの解決など、どれも魅力的な訴求ですが、すべて入れると伝えたいことがぼやけてしまいます。

Step2｜情報の優先順位を決める

バナーに入る要素は、おおむね次の5つです。

1. キャッチコピー
2. サブコピー・補足情報
3. ボタン（CTA）
4. ロゴ・サービス名
5. 写真・イラスト

この5つに順位をつけましょう。

1位を決めないと、すべての要素が同じ大きさになり、どこを見ればいいのかわかりにくいバナーになってしまいます。

多くの場合、1位はキャッチコピーです。

ただし商品の見た目で売る場合は、写真が1位になります。

Step3｜レイアウトの型を選ぶ

ここでゼロから配置を考える必要はありません。

バナーのレイアウトには、繰り返し使える型があります。

詳しくは、レイアウト4つの型で解説しています。

Step2で決めた優先順位に合う型を選んでください。

Step4｜配色・書体・余白を整える

型に情報を入れたら、見た目を整えます。

押さえておきたいポイントは、次の3つです。

• 色は3色まで：ベース、メイン、アクセントの構成にする
• 書体は1〜2種類：太さの違いで強弱をつければ増やす必要はない
• 周囲に余白を確保する：端まで文字を詰めると窮屈に見える

サイト内バナーの場合は、サイトのブランドカラーを使いましょう。

サイトから浮いたデザインのバナーは広告のように見え、かえってクリックされにくくなる場合があります。

Step5｜書き出して入稿する

最後に、用途に合った形式で書き出します。

書き出したら、容量も確認しておきましょう。

Googleのディスプレイ広告であれば、150KB以内に収める必要があります。

また入稿前には、実際の掲載サイズで表示を確認しましょう。

作成画面の拡大表示では気づかなかった見落としが見つかることがあります。

＞＞WEBデザインスクールならCampus

バナーのレイアウト4つの型

バナー作成を効率よく進めるには、レイアウトの型を知っておくことが大切です。

ここでは、バナーでよく使われるレイアウト4つの型を紹介します。

型1｜左テキスト・右画像（横長バナーの王道）

横長バナーで使いやすい、安定感のある型です。

左にキャッチコピーとボタン、右に商品や人物の写真を置きます。

日本語は左から読むため、視線の流れに沿った配置になります。

728×90や970×250のような横長サイズに向いています。

文字量が比較的多くても成立するのが強みです。

型2｜中央寄せ（正方形・小サイズ向き）

300×250や250×250のような正方形では、中央寄せが扱いやすくなります。

上にキャッチコピー、中央に写真、下にボタンを置くか、背景の中央に文字だけを置く構成です。

正方形は面積が小さいため、情報を絞る必要があります。

要素は3つまでを目安にするとよいでしょう。

型3｜背景写真＋帯（写真で訴求する場合）

背景に写真を大きく敷き、その上に半透明の帯を置いて文字を載せます。

写真の雰囲気を活かしながら、文字の読みやすさを確保できる型です。

飲食、旅行、美容など、世界観で選ばれる商材に向いています。

帯は白か黒の半透明にすると扱いやすいでしょう。

帯なしで文字を直接載せると、写真の明暗によっては文字が読みにくくなります。

型4｜分割・斜め（動きを出したい場合）

画面を2分割して、左右や上下で異なる情報を見せる型です。

ビフォーアフター、他社との比較、選択肢の提示などに向いています。

斜めに分割すると勢いが出ますが、初心者は崩しすぎに注意してください。

分割の境界に文字がかかると読みにくくなります。

文字は片側の領域に収めましょう。

バナー作成におすすめの無料ツールと選び方

ここでは、バナー作成に使うツールを選ぶ基準と、無料ツールのCanvaでバナーを作る手順、無料ツールでは足りなくなる場面を解説します。

ツールを選ぶ3つの基準

バナー作成に使えるツールかどうかは、次の3点で判断できます。

1. サイズをピクセル単位で指定できるか 300×250のような指定サイズで作れないツールは、広告バナーに使えません。
2. 書き出し形式と容量を調整できるか 150KBの制限があるため、JPGの品質を調整できると有利です。
3. 日本語の太い書体が使えるか 小さいバナーで細い書体を使うと、文字が読みにくくなります。

この3つを満たしていれば、無料ツールでも問題ありません。

Canvaでバナーを作る手順

無料で使えるツールの代表例がCanvaです。

Canvaでバナーを作る流れは次のとおりです。

1. 「カスタムサイズ」で掲載先の寸法を指定して作成する
2. 装飾が少なく、余白が広いテンプレートを選ぶ
3. 文字と画像を差し替える
4. 使わない要素を削る
5. JPGまたはPNGで書き出し、容量を確認する

とくに4番が重要です。

テンプレートは汎用的に作られているため、自分のバナーには不要な要素が入っていることがあります。

無料ツールで足りなくなる場面

自分のサイトや広告に使うバナーであれば、無料ツールでも十分に作れます。

一方で、次のような場面では専用ツールが必要になることがあります。

• 人物や商品を精密に切り抜く
• 同じデザインを10サイズ以上に展開する
• クライアントが指定する形式（psd、ai）でデータを納品する
• 複数案件のデータをまとめて管理する

そのため、バナー制作を継続的に受注するようになったら、PhotoshopやIllustratorの習得も検討するとよいでしょう。

クリックされるバナーの5原則と、クリック率で改善する方法

型に沿って作っても、「なんとなく素人っぽい」と感じることがあります。

ここでは、クリックされるバナーに共通する5つの原則と、公開後にクリック率で改善する考え方を解説します。

原則1｜情報を絞る（載せない勇気）

バナーは、詰め込むほど伝わらなくなります。

Step2で決めた優先順位の下位から削ってください。

特に削りやすいのは、補足情報と装飾です。

情報が少ないと不安に感じるかもしれませんが、読まれない情報は載せても効果が期待できません。

原則2｜文字の可読性を確保する

写真の上に文字を置くと、読みにくくなることがあります。

写真には明るい部分と暗い部分が混ざっているためです。

対処法は3つです。

• 文字に縁取りをつける
• 半透明の帯を敷く（型3の考え方）
• 背景写真全体を暗く、または明るく加工する

大切なのは、背景と文字の明るさの差をはっきりつけることです。

特に320×50のような小さいバナーでは、わずかな読みにくさでも内容が伝わらなくなります。

原則3｜ジャンプ率で主役をつくる

ジャンプ率とは、要素どうしの大きさの差のことです。

キャッチコピーを思っているより大きく、補足情報を小さくする。

この差が大きいほど、視線は自然に主役へ向かいます。

すべてを目立たせようとすると、結果的に何も目立ちません。

原則4｜ボタン（CTA）を入れる

バナーはクリックされるための制作物ですが、「押せる」と伝わらないデザインになっているバナーも少なくありません。

ボタンには、次の2つを入れましょう。

• 文言：「詳しくはこちら」「無料で試す」など、次の行動がわかる言葉
• 見た目：角丸の四角、矢印など、押せると認識できる形

ボタンは小さくても構いません。

ボタンの有無によって、クリック率が変わることもあります。

原則5｜掲載場所・実寸で確認する

バナーの見え方は、作成画面の拡大表示ではなく、実際の掲載サイズで確認しましょう。

確認する手順は2つです。

1. 実際の掲載サイズ（等倍）に縮小して、文字が読めるか確認する
2. 掲載予定のページやSNSの画面に置いて、周囲の情報に埋もれないか確認する

バナーの評価は、常に周囲との相対で決まります。

単体で整っていても、埋もれていれば機能しません。

クリック率（CTR）で改善する考え方

バナーは、公開後にクリック率などの数字で評価できる点が特徴です。

改善するときに押さえておきたいのは、次の3つです。

• 1案で当てようとしない：同じ訴求で2〜3案作り、比較する
• 変えるのは1要素ずつ：写真と文字を同時に変えると、何が効いたかわからない
• 自分の過去実績と比べる：クリック率の平均値は媒体・業種で大きく変わるため、他人の数字と比べる意味は薄い

「平均クリック率は○%」という数字を見かけることもありますが、配信面や商材によって大きく差が出るため、目標値として使う際は注意が必要です。

同じ考え方は、動画のサムネイル制作にも当てはまります。

バナー作成は副業になる？相場・単価・案件の取り方

バナー制作は、Webデザインの副業として始めやすい仕事の一つです。

ここでは、バナー制作の相場や単価が上がる条件、未経験からの案件の取り方、ポートフォリオの作り方を解説します。

バナー1枚の相場（依頼する場合の目安）

クラウドソーシングサービスを運営するランサーズは、仕事ごとの参考価格を公開しています。

バナー作成の参考価格は、1個あたり10,000〜40,000円です。

（出典：ランサーズ「仕事の種類・参考価格」。2026年10月時点）

なお、この参考価格は素材を依頼者側が用意する場合の目安です。

写真の手配や撮影が必要な場合は、その分費用が上がる可能性があります。

金額が変わる主な要因は、次の4つです。

1. サイズ違いを何本作るか
2. 素材の探索・購入・加工が含まれるか
3. キャッチコピーや構成の提案が含まれるか
4. 修正の回数に上限があるか

受注する場合の単価と、単価が上がる条件

未経験で実績がない状態では、上記の参考価格より低い金額から始まることも少なくありません。

クラウドソーシングには1本数千円程度の案件もあり、受注額からはシステム利用料も差し引かれます。

ただし、単価が上がりやすい条件はあります。

単価の差は、作業スピードではありません。どこまで任せられるかの差です。

ランサーズでは、ほかの制作物の参考価格も公開されています。

たとえば、ランディングページ（LP）制作の参考価格は1ページあたり50,000〜100,000円です。

そのため、バナーで実績を積み、LPまで対応できるようになると、単価アップも期待できます。

バナー制作は、Webデザインの仕事の入口といえるでしょう。

クラウドソーシングでの案件の取り方（未経験の場合）

バナー制作は、未経験からでも実績を作りやすい仕事です。

その理由は、次の3つです。

1. 単発の案件数が多い：継続前提の仕事より応募のハードルが低い
2. コンペ形式の案件がある：実績がなくても提案そのもので選ばれる可能性がある
3. 納期が短い：1件あたりの拘束が小さく、本業と両立しやすい

応募時に見られるのは、主に次の3点です。

• ポートフォリオ（何が作れるかが一目でわかるか）
• 返信の速さと丁寧さ
• 募集要項を読んで、要件に沿った提案をしているか

なお、低単価の案件を大量に受けると、作業時間ばかりが増えてスキルアップにつながりにくくなります。

3〜5件ほど実績ができたら、単価を上げる交渉や、より条件のよい案件への応募に切り替えていきましょう。

ポートフォリオは架空の案件でつくれる

「実績がないから応募できない」と悩む方も少なくありません。

しかし、ポートフォリオは、実案件がなくても作れます。

作り方は次のとおりです。

1. 架空の商品やサービスを設定する（架空のカフェ、架空のオンライン英会話など）
2. 誰に何を伝えるバナーかを決める
3. 同じ商材で、サイズの違う3本を作る（300×250、728×90、320×50など）
4. 「どんな意図でこう作ったか」を1〜2行添える

とくに3番が重要です。

1枚だけ見せるより、複数サイズに展開できることが伝わるためです。

サイズ展開は、実務でもよく求められるスキルです。

4番も大切です。

デザインの意図を説明できると、提案力のアピールにもつながります。

なお、実在企業のロゴや商品写真を無断で使ってポートフォリオにするのは避けてください。

著作権や商標権などの問題があり、発注者からの信頼を損なうおそれもあります。

学ぶ環境をどう選ぶか

Campusでは、Photoshop・Illustrator・Figmaといったデザインツールを学べます。

HTML/CSSやWordPress、動画編集のコンテンツもあります。

ポートフォリオの作成や、見積もり・契約・交渉といったフリーランス実務も学べるほか、スクールプラン以上では講師への質問や作品の添削も受けられます。

受講生の中には、育児と両立しながら3ヶ月学び、バナーやLP制作で月15万円の副業収入を得た方（34歳・主婦）や、会社員を続けながら4ヶ月学び、副業で月10万円の収入を得た方（28歳）もいます。

なお、これらは個人の成果であり、全員が同様の成果を得られるものではありません。

Campusの受講継続率は95.8%です。

受講生の約7割は働きながら、または育児と両立しながら学んでおり、卒業期限がないため忙しい時期も自分のペースで進められます。

学習の順路から整理したい方は、Webデザインの独学は難しい？学習ロードマップとポイントもあわせてご覧ください。

副業に向けたスクールの選び方は、副業におすすめのWebデザインスクール5選で詳しく解説しています。

バナー作成に関するよくある質問

Q. バナーを自分で作るにはどうすればいいですか？

バナーは、サイズを決め、訴求を1つに絞り、レイアウトの型に情報を入れる流れで作れます。

詳しくは、手順5ステップをご覧ください。

Q. 無料でバナーを作れるツールはありますか？

無料でバナーを作れるツールには、Canvaなどがあります。

選ぶ基準は「サイズをピクセルで指定できる」「書き出し形式と容量を調整できる」「太い日本語書体が使える」の3点です。

Q. バナーを1枚作るのにいくらかかりますか？

バナー1枚の制作費は、ランサーズの参考価格では1個あたり10,000〜40,000円です。

サイズ違いの本数、素材の用意、修正回数によって変動します。

Q. バナーのサイズは何ピクセルにすればいいですか？

バナーのサイズは、掲載先の指定に従います。

Googleのディスプレイ広告であれば、まずは300×250や336×280といった一般的なサイズから用意するとよいでしょう。

Q. バナー制作は未経験でも副業として受注できますか？

未経験からバナー制作の副業を始める方もいます。

ただし初期は低単価になりやすいため、実績を3〜5件作って条件を上げていく進め方が現実的です。

Q. バナー制作にPhotoshopは必要ですか？

自分のサイトやSNSで使うバナーであれば、Photoshopがなくても無料ツールで作れます。

継続的に受注する場合や、精密な切り抜きが必要な場合、psdなどのデータ形式を指定される場合は、Photoshopが必要になります。

まとめ

バナー作成では、センスよりも、レイアウトの型を持つことと、情報に優先順位をつけることが大切です。

サイズは掲載先の指定に従い、Googleのディスプレイ広告では容量を150KB以内に収めます。

作るときは、訴求を1つに絞って情報に優先順位をつけ、レイアウトの型を選んでから配色・書体・余白を整えましょう。

公開後は2〜3案を比較し、変える要素を1つずつにして改善していくことが大切です。

副業として受注する場合、ランサーズの参考価格は1個あたり10,000〜40,000円で、単価は任せられる範囲によって変わります。

まずは架空の商材で1本作り、同じ商材でサイズの違う3本に展開してみてください。

それだけで、ポートフォリオの1ページ目が完成します。

また、情報の優先順位や可読性、ジャンプ率、配色の絞り込みといった原則は、バナーだけでなく、サムネイルやLP、名刺のデザインにも共通します。

バナー制作は、Webデザイン全体を学ぶ入口にもなるでしょう。

Campusは、PhotoshopやIllustrator、Figmaなどのデザインツールから、フリーランスとして働くための実務までを学べるオンラインスクールです。

選べる4つのプラン（すべて卒業期限なし）

本スクールは、ご自身の目的や予算に合わせて選べる4つのプランをご用意しています。

• 入会金0円プラン：月額5,500円（税込）のみで、手軽に始めたい方向け
• スタンダードプラン（3種）：月額5,500円（税込）＋ 選べる入会金（19.8万円 / 29.8万円 / 39.8万円）

どのプランを選んでも卒業期限はなく、ご自身のペースでじっくり学べます。

※最新の料金体系や各プランのサポート内容の違いは、必ず公式サイトでご確認ください。

まずは無料の動画講座で、講座の内容や講師の雰囲気を確かめてみてください。

申し込み後も8日間の全額返金保証（ライトプランを除く）があるので、お気軽にご相談ください。

＞＞WEBデザインスクールならCampus

LINE限定の特別セミナーやお役立ち情報などを配信中です。

下記より追加してみてくださいね。

投稿者プロフィール

梅谷 豊巨

• 
• 
• 

サブスク型Webクリエイタースクール「Campus」代表。
未経験からWebスキルを学び半年で月収100万円達成、その後スクールを一から立ち上げ２年で500人が受講。

メディア実績

・美人百花へ掲載
・NewSweeksへ掲載
・トリンドル玲奈さんとテレビで対談
・日経電子版「私のみちしるべ」へ掲載
・アンタッチャブルさん・アルコ＆ピースさんの番組で放映

最新の投稿

• ブログ2026年11月5日Photoshopの使い方｜初心者が最初に覚える7つの操作と習得までの道筋
• ブログ2026年11月5日Canva（キャンバ）の使い方を初心者向けに解説｜無料の範囲とやってはいけない7つのこと
• ブログ2026年11月5日サムネイルの作り方5ステップ｜クリックされる5原則とサイズ早見表【初心者向け】
• ブログ2026年11月5日名刺デザインでやってはいけない7つのNG｜おしゃれに見せる5原則と作り方