ホームページのバナー作成｜業者目線で語るおすすめツール6選とサイズ規格・クリック率を上げる業界相場の作り方

ホームページのバナーを業者目線で自作したい、サイズ規格が分からない、おすめツールを知りたい、クリック率を上げる作り方が気になる、そんな方向けに網羅解説します。業者目線で言うと、ホームページのバナーは「種類」「サイズ規格」「制作ツール」「設計原則」「クリック率テクニック」「広告規定サイズ」「制作費」「A/Bテスト設計」の8軸で判断材料がそろいます。本記事を読めば、業者目線でどのツールでどのサイズで作り方をすればよいかが、体感で見えてきます。業者目線で自作と業者依頼の費用比較も公開し、「A/Bテスト前提で複数パターンを作る」という本音まで開示します。

業者目線で語るHPバナーの6種類

業者目線でHPバナーは配置場所と役割で6種類に整理できます。業者目線では、それぞれの種類でサイズ規格と制作目的が違うため、「どの種類のバナーを作るか」を最初に決めるのがスタート地点です。業者目線で言うと、バナーの種類を混同したまま制作するとサイズ不一致や目的のズレが発生します。

業者目線のバナー種類	業界相場の配置場所	業者目線の主目的
①ヘッダーバナー	業界相場でサイト最上部	業者目線で告知・キャンペーン誘導
②サイドバーバナー	業界相場で本文横（PC主体）	業者目線で関連サービス送客
③フッターバナー	業界相場でページ最下部	業者目線で離脱前の再訴求
④ポップアップバナー	業界相場で画面上に重ね表示	業者目線で限定オファー・メルマガ登録
⑤MV（メインビジュアル）	業界相場でトップページ最上部の大型	業者目線で第一印象・ブランド訴求
⑥カルーセルバナー	業界相場で複数枚スライド表示	業者目線で複数訴求の同居

業者目線で言うと、初めてバナーを作るなら「ヘッダー」「MV」「サイドバー」の3種類から着手するのがセオリーです。業者目線では、ポップアップとカルーセルは実装難易度がやや上がり、WordPressプラグインの活用が現実解です。業者目線でデザインの基礎はホームページデザインの基礎を業者目線で参考にしてください。

業者目線の標準サイズ規格｜主要6サイズ

業者目線でバナーのサイズ規格は「広告業界の標準」と「自社サイト内バナーの慣習」で2系統が存在します。業者目線では、Googleディスプレイ広告由来のサイズが自社サイト内でも標準として定着しています。業者目線で言うと、この6サイズを押さえておけばほぼ全用途に対応できます。

業者目線のサイズ	業界相場の通称	業者目線の主用途
728×90px	業界相場でリーダーボード	業者目線でヘッダー・記事上部
300×250px	業界相場でレクタングル	業者目線でサイドバー・本文内
336×280px	業界相場で大型レクタングル	業者目線で本文内目立たせ
970×90px	業界相場でラージリーダーボード	業者目線で大画面PCのヘッダー
300×600px	業界相場でハーフページ	業者目線でサイドバー縦長訴求
1920×1080px	業界相場でフルHD（MV）	業者目線でメインビジュアル

業者目線で押さえるレスポンシブ対応

業者目線でスマホ普及により、固定サイズだけで制作するのは不十分になりました。業者目線では、PC用とスマホ用の2サイズ用意するのが現代の標準です。業者目線で言うと、スマホ用は「640×200px」「750×400px」あたりが使いやすく、MVは「750×1000px（縦長）」のスマホ専用版を別途用意するケースが多いです。

業者目線で押さえるRetina/高解像度対応

業者目線でRetinaディスプレイ（Apple系の高解像度画面）対応には「表示サイズの2倍」で制作するのがセオリーです。業者目線では、728×90pxで表示するバナーは1456×180pxで制作し、HTML側で表示サイズを指定します。業者目線で言うと、この対応で表示がくっきりし、クオリティ感が大きく上がります。業者目線でホームページのサイズ全般はホームページサイズの標準を業者目線で参照ください。

業者目線のおすめツール6選｜制作ツール比較

業者目線でバナー制作ツールは多数ありますが、実務で使われる主要ツールは6つに集約されます。業者目線では、「無料・テンプレ豊富・操作簡単」のCanvaが初心者の王道、プロ仕様はPhotoshop、中間がAdobe ExpressとFigmaというのがすみ分けです。

業者目線で①Canva（初心者王道）

業者目線でCanvaは初心者向けバナー制作ツールの代表格です。業者目線では、無料プランで25万点超のテンプレート、有料プラン（Canva Pro 月1,500円程度）で1億点超の素材が使えます。業者目線で言うと、ブラウザだけで動き、ドラッグ&ドロップで制作完結します。業者目線で制作スピードは1枚10〜30分が体感で、初めての方に最もおすめできます。

業者目線で②Adobe Express（Canva対抗）

業者目線でAdobe ExpressはAdobeのCanva対抗ツールです。業者目線では、無料プランあり、有料プラン（月1,180円程度）でAdobeフォントやAdobe Stockの素材が使えます。業者目線で言うと、AdobeのCreative Cloud契約があればで込みで使えるため、Photoshop/Illustrator併用ユーザーにはおすめです。業者目線で操作感はCanvaに似ており、乗り換えも容易です。

業者目線で③Photoshop（プロ仕様）

業者目線でPhotoshopはプロが使うツールです。業者目線では、Adobe Creative Cloud（月3,280円程度）に含まれ、細かいピクセル単位の調整、レイヤー管理、高度な合成が可能です。業者目線で言うと、業者依頼のバナー制作はでPhotoshop納品（PSDファイル）が標準で、修正の効きやすさが強みです。業者目線で学習コストは高めですが、本格的にやるなら投資価値ありです。

業者目線で④Figma（Webデザイナー主流）

業者目線でFigmaはWebデザイナーが愛用するクラウドベースのデザインツールです。業者目線では、無料プラン（個人利用十分）、有料プラン（月1,800円程度）でチーム共同編集が快適です。業者目線で言うと、バナー単体制作よりもサイト全体のデザインと並行制作する場合に真価を発揮します。業者目線でコンポーネント機能で同一バナーのサイズ展開が楽です。

業者目線で⑤Fotor（オンライン画像編集）

業者目線でFotorはブラウザベースの画像編集ツールです。業者目線では、無料プランで基本機能、有料プラン（月1,000円程度）で高度な機能が使えます。業者目線で言うと、写真の補正・コラージュ・バナーデザインまでで1つでカバーでき、Canvaよりも写真編集寄りの設計です。業者目線で写真メインのバナーには相性が良いです。

業者目線で⑥Pixlr（無料Photoshop代替）

業者目線でPixlrは「無料で使えるPhotoshop代替」と呼ばれるブラウザベース画像編集ツールです。業者目線では、無料プランで基本機能、有料プラン（月1,000円程度）で広告非表示と高度機能が使えます。業者目線で言うと、Photoshopは重すぎる・高すぎる、でも本格的な編集をしたい、という中間ニーズにマッチします。業者目線でCanvaはテンプレ重視、Pixlrは編集重視というすみ分けです。

業者目線のツール	業界相場の月額	業者目線のおすめ層
Canva	業界相場で無料〜1,500円	業者目線で初心者・テンプレ重視
Adobe Express	業界相場で無料〜1,180円	業者目線でAdobeユーザー
Photoshop	業界相場で3,280円〜	業者目線でプロ・本格派
Figma	業界相場で無料〜1,800円	業者目線でWebデザイナー
Fotor	業界相場で無料〜1,000円	業者目線で写真メイン
Pixlr	業界相場で無料〜1,000円	業者目線で編集重視・無料派

業者目線で言うと、初心者はCanvaから始めて、物足りなくなったらPhotoshopまたはFigmaに移行するのが王道ルートです。業者目線でツール選定の詳細はデザインツール比較を業者目線でご覧ください。

業者目線で語るバナー設計の5原則

業者目線でバナー設計には押さえるべき5原則があります。業者目線では、この5原則を守るだけでクオリティが大きく上がり、クリック率も改善します。業者目線で言うと、デザインのセンスより「基本ルールを守る」ほうが実務上の効果が大きいです。

業者目線の原則①文字サイズ（大きめ）

業者目線で文字サイズは「想像より大きく」がセオリーです。業者目線では、300×250pxのバナーでメインコピーは24px以上、サブコピーは14px以上が目安です。業者目線で言うと、「制作画面では大きすぎる」と感じるくらいが、実際の表示ではちょうど良いというのが体感です。業者目線でスマホ表示も意識すると大きめが正解です。

業者目線の原則②コントラスト（背景と差をつける）

業者目線でコントラストは「背景色と文字色の明度差」を確保することです。業者目線では、WCAG（Webアクセシビリティ国際標準）で「コントラスト比4.5:1以上」が推奨です。業者目線で言うと、薄い背景に薄い文字、濃い背景に濃い文字はでNGです。業者目線でコントラスト不足は「文字が読めない」最頻出原因で、クリック率を大きく下げます。

業者目線の原則③視認性（1秒で分かる）

業者目線で視認性は「1秒見て何のバナーか分かる」を基準にします。業者目線では、要素を詰め込みすぎず、「メインメッセージ＋ビジュアル＋CTA」の3要素に絞るのがセオリーです。業者目線で言うと、「全部詰め込む」と結局何も伝わらないため、引き算思考が重要です。業者目線でで実物のサイズで表示確認するのがチェック法です。

業者目線の原則④CTA明示（ボタン化）

業者目線でCTA（Call To Action：行動喚起）は「ボタンに見える形」で配置するのがセオリーです。業者目線では、「詳細を見る」「無料で試す」「資料請求はこちら」など動詞＋目的の文言が効果的です。業者目線で言うと、背景色と異なる目立つ色（オレンジ・赤・緑）の角丸ボタンが定番です。業者目線でCTA設計の詳細はCTAボタンデザインを業者目線でご参照ください。

業者目線の原則⑤モバイル最適化（スマホ前提）

業者目線でアクセスは7割超がスマホというのが現状です。業者目線では、「PCで見たら綺麗、でもスマホで見たら文字が読めない」が最頻出失敗です。業者目線で言うと、制作段階からスマホ画面（375pxまたは390px幅）での表示確認を必須にしてください。業者目線でCanvaにはスマホプレビュー機能があり、Photoshopはアートボード機能でPC・スマホ並列表示が可能です。

業者目線で語るクリック率を上げるテクニック

業者目線でクリック率を上げるには「色」「コピー」「人物写真」の3要素が大きく効きます。業者目線では、この3要素を意識するだけでクリック率が1.5〜2倍に改善するケースがよくある体感です。業者目線で言うと、テクニックは「派手にする」ことではなく「ユーザーの注意を自然に引く」ことが本質です。

業者目線のテクニック1：色の使い分け

業者目線で色は「サイト全体のトーン＆マナーから少し外す」のがクリック率向上の体感的セオリーです。業者目線では、青系のサイトにオレンジのバナー、白基調のサイトに黄色のバナー、など差し色で目を引きます。業者目線で言うと、CTAボタンはオレンジ・赤・緑が高クリック率カラーで、心理的に「クリックしたくなる」色というのが通説です。

業者目線のテクニック2：コピーの数字とベネフィット

業者目線でコピーは「数字＋ベネフィット」がクリック率の体感的高い組み合わせです。業者目線では、「3分で完了」「月980円から」「90%が満足」など具体数字が説得力を増します。業者目線で言うと、抽象的な「お得！」より「30%OFF」、「簡単！」より「3ステップで完了」のほうがクリック率が高くなる傾向があります。業者目線で数字は「具体的かつ覚えやすい」ものが理想です。

業者目線のテクニック3：人物写真の活用

業者目線で人物写真はクリック率を上げる有効要素です。業者目線では、「人の顔（特に目線）」が入っているバナーは人の本能的な視線誘導効果で注目度が上がります。業者目線で言うと、人物の目線がCTAボタン方向を向いているとクリック率がさらに上がる傾向があるのが体感です。業者目線でストックフォトでも人物素材は豊富にあり、PIXTA・Adobe Stock・Shutterstockなどで入手できます。

業者目線で言うと、この3テクニックを組み合わせると「青系サイトに配置した、オレンジのCTAボタン、30%OFFの数字、笑顔の人物写真」という定番パターンができます。業者目線でクリック率改善の詳細はCVR改善ガイドを業者目線で参考にしてください。

業者目線で押さえるGoogle広告/SNS広告の規定サイズ

業者目線でホームページ内バナーだけでなく「Google広告」「SNS広告」用バナーを作る場合は各媒体の規定サイズに従う必要があります。業者目線では、規定外サイズは配信されない・表示崩れするリスクがありますので要注意です。

業者目線のGoogleディスプレイ広告の主要サイズ

• 業者目線で336×280px（ラージレクタングル）
• 業者目線で300×250px（ミディアムレクタングル）
• 業者目線で728×90px（リーダーボード）
• 業者目線で300×600px（ハーフページ）
• 業者目線で320×100px（ラージモバイルバナー）
• 業者目線で970×250px（ビルボード）

業者目線のFacebook/Instagram広告のサイズ

• 業者目線でフィード（正方形）：1080×1080px
• 業者目線でフィード（横長）：1200×628px
• 業者目線でストーリーズ：1080×1920px（縦長）
• 業者目線でリール：1080×1920px（縦長）

業者目線のX（旧Twitter）広告のサイズ

• 業者目線で画像広告：1200×675px（16:9）
• 業者目線で正方形：800×800px

業者目線のLINE広告のサイズ

• 業者目線でCard：1200×628px
• 業者目線でSquare：1080×1080px
• 業者目線でVertical：720×1280px

業者目線で言うと、SNS広告は「正方形（1080×1080）」「横長（1200×628）」「縦長（1080×1920）」の3パターンを作っておけばほぼ全媒体に対応できます。業者目線でGoogle広告は「レスポンシブディスプレイ広告」を使えばサイズ違いの素材を複数登録して自動最適化されるため、制作負担が軽くなります。

業者目線で語る制作費比較｜自作 vs 業者依頼

業者目線でバナー制作費は「自作」と「業者依頼」で大きな差があります。業者目線では、自作は¥0（無料ツール使用）、業者依頼は1枚¥3,000〜¥30,000が典型レンジです。業者目線で言うと、「数枚なら自作」「大量・継続なら業者依頼」が現実的な判断基準です。

業者目線の依頼形態	業界相場の1枚あたり費用	業者目線の納期
業者目線の自作（Canva無料）	業界相場で¥0	業界相場で30分〜2時間
業者目線の自作（Canva Pro）	業界相場で月1,500円÷枚数	業界相場で30分〜2時間
業者目線のクラウドソーシング	業界相場で¥3,000〜¥10,000	業界相場で3〜7日
業者目線のフリーランス	業界相場で¥5,000〜¥20,000	業界相場で3〜10日
業者目線の制作会社	業界相場で¥10,000〜¥30,000	業界相場で5〜14日
業者目線の大手代理店	業界相場で¥30,000〜¥100,000	業界相場で7〜21日

業者目線で言うと、クラウドソーシング（ランサーズ・クラウドワークス・ココナラ）は¥3,000〜¥10,000レンジでコスパが良いですが、制作者のスキルにバラツキがあるため、実績ポートフォリオを必ず確認するのがセオリーです。業者目線で制作会社は¥10,000〜¥30,000で品質と対応の安定感がメリットです。業者目線で費用全般はWeb制作費用完全ガイドを業者目線でご覧ください。当社の業界相場のバナー制作含む対応領域はサービス一覧で業者目線でご確認いただけます。

業者目線で語るA/Bテスト設計｜本音の制作思想

業者目線で本音を言うと、「1枚で正解のバナー」を作るのはほぼ不可能です。業者目線では、A/Bテスト前提で複数パターンを作り、実データで勝ち負けを判定するのが現代の標準アプローチです。業者目線で言うと、「いきなり完成版」より「複数案でテスト」がの本音の制作思想です。

業者目線のA/Bテスト設計の基本

業者目線でA/Bテストは「2パターン（AとB）を同時に出して、クリック率の高いほうを採用」する手法です。業者目線では、1要素のみ変えるのがセオリーで、コピー違い、色違い、写真違いなど単一変数で比較します。業者目線で言うと、複数要素を同時に変えると、「何が効いたか」が分からなくなるため、単一変数を守るのがセオリーです。

業者目線のA/Bテストの必要サンプル数

業者目線で統計的に意味のある差を出すには「各パターン1,000インプレッション以上」が目安です。業者目線では、個人サイト・小規模サイトではインプレッションが集まりにくいため、1〜2週間のテスト期間を確保するのが体感です。業者目線で言うと、大規模サイトは数時間〜数日でテスト完了するのが体感です。

業者目線のA/Bテストのツール

• 業者目線でGoogle Optimize（無料・2023年終了→GA4代替へ）
• 業者目線でVWO（月額あり・本格派）
• 業者目線でOptimizely（大規模向け）
• 業者目線でMicrosoft Clarity（無料・ヒートマップ含む）
• 業者目線でWordPress：Nelio A/B Testing等のプラグイン

業者目線で言うと、中小規模サイトはMicrosoft ClarityとWordPress プラグインで十分対応できます。業者目線で本格的なA/BテストはVWOなどの専用ツールが精度高く測れます。

業者目線で語るよくある失敗｜の制作NGパターン

業者目線でバナー制作にはよくある失敗パターンが6つあります。業者目線では、この6パターンを避けるだけでのクオリティが大きく改善します。

• 業者目線の失敗1：情報詰め込みすぎ（1秒で読み取れない）
• 業者目線の失敗2：コントラスト不足（文字が読めない）
• 業者目線の失敗3：解像度不足（ぼやけて安っぽい）
• 業者目線の失敗4：CTAの不明確（何をしてほしいか分からない）
• 業者目線の失敗5：スマホ未確認（PCでは綺麗だがスマホで崩れる）
• 業者目線の失敗6：「1枚で完成」（A/Bテストせず勘で公開）

業者目線で言うと、失敗1の「情報詰め込み」が最頻出失敗です。業者目線では、「あれもこれも伝えたい」気持ちが出やすく、結果何も伝わらないバナーになるのが典型パターンです。業者目線で「1枚1メッセージ」を守るのが基本セオリーです。業者目線でデザイン全般の失敗はホームページデザイン失敗例を業者目線でご参考に。

よくある質問（FAQ）

Q1. 業者目線で初心者はどのツールから始めるべき？

業者目線でCanva無料プランから始めるのがおすめです。業者目線では、25万点超のテンプレートが使え、ドラッグ&ドロップで30分〜2時間で1枚完成します。業者目線で言うと、物足りなくなったらCanva Pro（月1,500円）、本格派へ進むならPhotoshopまたはFigmaに移行するのが王道ルートです。

Q2. 業者目線でバナーサイズはどれを優先すべき？

業者目線で自社サイト内なら「300×250px（サイドバー）」「728×90px（ヘッダー）」「1920×1080px（MV）」の3サイズが最優先です。業者目線では、SNS広告も並行運用するなら「1080×1080（正方形）」「1200×628（横長）」も追加します。業者目線で言うと、Canvaは1つのデザインからサイズ変換機能があり、複数サイズ展開が楽です。

Q3. 業者目線でクリック率の平均はどれくらい？

業者目線でディスプレイ広告のクリック率は業界平均0.35〜0.5%が体感です。業者目線では、自社サイト内バナーは1〜3%が体感的目安で、関連性の高さで広告より高い数値が出ます。業者目線で言うと、1%超えれば合格ライン、3%超えれば優秀というのが体感です。業者目線で改善継続が前提です。

Q4. 業者目線で業者依頼のメリットは？

業者目線でメリットは「品質安定」「時間短縮」「デザイン提案力」の3点です。業者目線では、自作は「自分で手を動かす時間」がかかり、業者依頼は1枚¥3,000〜¥30,000でクオリティとスピードが買えます。業者目線で言うと、「自分の時間単価×制作時間」と業者依頼費用を比較して判断するのが合理的判断です。

Q5. 業者目線でA/Bテストは必須ですか？

業者目線で予算とアクセス数があれば必須です。業者目線では、月間PV1万以下の小規模サイトはサンプル数が集まりにくく、実施困難です。業者目線で言うと、月間PV1万超の中規模サイト以上はA/Bテスト前提が現代の標準です。業者目線でテスト不能でも「3パターン作って目視評価」だけでも質が上がります。

Q6. 業者目線でPhotoshopは必須ですか？

業者目線でで必須ではありません。業者目線では、Canva・Adobe Express・Figmaでほぼ全用途がカバーできます。業者目線で言うと、業者依頼で受け取ったPSDファイルを編集する場合や、細かいピクセル単位の調整・レイヤー合成が必要な場合のみPhotoshopが必要です。業者目線で本格派以外はCanva Pro月1,500円で十分対応可能です。

まとめ｜業者目線で語るHPバナー作成の結論

業者目線で、ホームページのバナー作成を6種類のバナー・6サイズ規格・6ツール・5原則・3テクニックの網羅解説しました。業者目線では、初心者はCanva無料プランで標準6サイズを作るところから始めるのが王道ルートです。業者目線で設計5原則（文字サイズ・コントラスト・視認性・CTA明示・モバイル最適化）を守るだけでクオリティが大きく上がります。

業者目線でクリック率を上げるには「色」「コピー（数字＋ベネフィット）」「人物写真」の3要素が効きます。業者目線で制作費は自作¥0・業者依頼¥3,000〜¥30,000/枚がレンジで、数量と時間単価で判断するのが合理的アプローチです。

業者目線で最後に本音をお伝えすると、「1枚で完成」を目指すよりも「A/Bテスト前提で複数パターンを作る」のが現代の標準アプローチです。業者目線でクリック率は実データで判定するものであり、制作者の勘ではなくユーザーの反応で最適化していくサイクルが結果を生みます。業者目線で本記事を道しるべとして制作を進めてください。

関連記事

• ホームページデザインの基礎｜業者目線で基本ルール
• ホームページサイズの標準｜業者目線で主要サイズ
• デザインツール比較｜業者目線でおすめ一覧
• CTAボタンデザイン｜業者目線でクリック率改善
• CVR改善ガイド｜業者目線でコンバージョン最適化
• ホームページデザイン失敗例｜業者目線で回避策