バナーの作り方｜訴求・文字・写真の組み立てと納品前チェック

※本記事にはPRを含む場合があります。

こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。

バナーの作り方で最初に考えたいのは、色や飾りではなく「誰に、何を伝え、どこへ進んでもらうか」です。小さな画像の中に情報を詰めるほど、かえって伝わりにくくなることがあります。主役となる見出し、理解を助ける写真、次の行動を整理してから配置すると、制作の理由も説明しやすくなります。

この記事では、Webサイトや広告で使う静止画バナーを中心に、依頼内容の確認、訴求の絞り込み、文字と写真の配置、複数サイズへの展開、書き出しと納品前の点検を解説します。画像の見た目だけでなく、掲載先で読めることと、クリック後の案内が一致することまでを一組にして考えましょう。

2026年10月3日に掲載形式と制作に関する公式資料を確認しました。広告サービスの仕様は形式や更新によって変わるため、実際の掲載先の指定を優先してください。本文の陶芸体験バナーや修正案は自作の仮定例です。図版は説明用の生成イメージで、実際に配信して成果を測定した広告ではありません。

バナー制作の最初に決めること｜掲載先・読者・行動をそろえる

バナーが置かれる場所を具体的にする

同じ画像でも、自分のブログの中に置く場合と、広告サービスへ入稿する場合では条件が違います。サイト内の案内なら周囲の記事やメニューとの関係、広告なら媒体の規定や配信形式を確認します。「バナーを一枚」という依頼だけで作り始めず、使う場所まで把握してください。

掲載枠の寸法だけでなく、パソコンとスマートフォンでどう見えるか、画像が縮小されるか、端が切り取られるかも確認します。画像単体では読めても、実際のページでは小さく表示されることがあります。制作画面の拡大表示を基準にすると、完成後に文字の小ささが問題になりやすくなります。

依頼者に確認するときは、掲載ページの見本や、使う広告形式の名前をもらえると具体的です。ただし、制作に不要な管理情報や顧客データまで共有してもらう必要はありません。必要な枠、周囲の見え方、仕様を確認できる範囲で資料をそろえます。

完成した一枚を渡すのか、素材を渡すのかを分ける

文字と写真を一枚にまとめたバナー画像を使う形式と、画像・見出し・説明などを別々の素材として渡す形式があります。どちらも広告に使われますが、制作方法は同じではありません。最初に形式を確認しないと、不要な文字を画像に入れたり、必要な要素が不足したりします。

たとえば、Google広告のアップロード型ディスプレイ広告には、公式の寸法・ファイル形式・容量の仕様があります。一方、レスポンシブディスプレイ広告は複数の素材を使う考え方です。一般的な「バナーサイズ一覧」をすべての広告へそのまま当てはめないようにしましょう。

今回の記事では、主に一枚の静止画として完成させるバナーを扱います。レスポンシブ形式へ画像素材を提供する場合は、Google広告のレスポンシブディスプレイ広告のガイドなど、対象形式の案内へ戻って判断してください。文字やロゴ、ボタン風表現の扱いも形式によって変わります。

※表は横にスクロールできます。

読者がどこまで知っているかを想定する

初めてサービス名を見た人と、すでに詳細を読んだ人では、必要な情報が違います。初めての人にサービス名だけを大きく見せても、何の案内か分からない場合があります。反対に、内容を知っている人へ毎回長い説明を載せると、次の行動が弱くなることがあります。

練習例では、地域の人へ「初めての器づくり体験」を案内するバナーを考えます。陶芸に詳しい人向けの専門用語より、何を体験できるか、どこで詳細を見られるかを伝える方が目的に合いそうです。この想定は実際の利用者調査ではなく、制作を考えるための仮説です。

年齢や職業だけで読者を決めるより、今どんな疑問を持っているかを考えます。「道具は必要か」「初めてでも参加できるか」「何を作るか」など、選ぶ前の迷いが分かると、見出しと補足の役割が決まります。すべてに答えるのではなく、今回の一枚で何を担当するかを選びます。

クリック後のページを先に確認する

バナーが約束した内容は、リンク先で確認できる必要があります。「日程を見る」と書いているのに、一般的なトップページへ移動して日程が見つからないと、利用者は探し直すことになります。画像の制作前に、行き先と表示内容を確認しておきましょう。

料金、期間、対象者、特典などをバナーに入れる場合は、リンク先と一致しているかを照合します。変更されやすい情報には確認日と更新担当を決めます。古いキャンペーン画像が残らないよう、掲載終了時の扱いも制作条件へ含めると運用しやすくなります。

副業の依頼でリンク先まで修正する権限がない場合は、不一致を見つけた時点で依頼者へ伝えます。画像側だけを都合よく変えたり、未確認の条件を補ったりしないでください。制作する範囲と、相手が確認する範囲を明確にすることが、手戻りを減らします。

訴求と原稿を絞る｜一枚で伝える優先順位の作り方

見出しは一つの中心メッセージにする

バナーの見出しには、一番伝えたい内容を置きます。サービス名、価格、悩み、特典、実績をすべて同じ強さで入れると、どこから読めばよいか分かりません。まず中心となる一文を決め、その理解を助ける情報だけを補足へ回します。

陶芸体験の仮定例なら、「初めての器づくり体験」を中心にする案と、「自分のマグカップを作ろう」を中心にする案が考えられます。前者は参加の入り口、後者は完成するものの想像を助けます。どちらがよいかは、読者とリンク先の内容に照らして選びます。

作り始めには、デザインを付けずに見出しだけを紙へ書き、意味が通じるかを確認すると役立ちます。写真がないと何の案内か分からないなら、言葉が曖昧かもしれません。逆に、説明が長すぎるなら、バナーで伝える範囲を広げすぎていないか見直します。

補足には根拠のある情報だけを残す

補足は、中心の見出しを理解したり、次へ進む判断をしたりするための情報です。たとえば対象者、開催場所、実施内容などが候補になります。ただし、載せる数字や条件には根拠が必要です。実際に確認していない「人気No.1」「満足度」「残りわずか」などを装飾のつもりで入れてはいけません。

仮に「道具を用意しています」と載せるなら、主催者の実際の提供範囲を確認します。必要な持ち物が別にある場合は、誤解が生じない表現にします。短くするために重要な条件を落とすと、クリックされても期待とのずれが生まれます。

条件が多い場合は、文字を極端に小さくする前に、主催者と掲載内容を相談します。画像に入れなければならない情報と、リンク先で説明する情報を整理してください。法令や媒体の規定に関わる表示は、自己判断で省略せず、担当者の確認を受けます。

※表は横にスクロールできます。

行動を示す文言は、次に起きることと合わせる

CTAは、利用者に取ってほしい次の行動を示すものです。「詳しく見る」「日程を確認する」「相談方法を見る」など、移動後に何ができるかが分かる表現を選びます。クリックしただけで申込みが確定するわけではないなら、確定したように受け取られる文言を避けます。

ボタン風の形を描く場合も、媒体のルールと実際の機能を確認します。閉じる、再生、ダウンロードなどを装って、実際には別のページへ移動させる表現は誤解を招きます。画像に描いた形と、利用者が期待する動作を一致させることが大切です。

自分のサイトへ置くバナーでは、画像全体をリンクにするか、別のボタンと組み合わせるかも考えます。見た目だけに頼らず、リンク先の目的が伝わるようにします。実装担当と相談し、キーボード操作や代替テキストなど、画像の外側の仕組みも整えましょう。

二案を作るときは、比べたい違いを決める

A案とB案を作るなら、何の違いを比較するのかを先に決めます。たとえば見出しの訴求だけを変え、写真と配置はそろえる方法があります。色も写真も見出しも全部違うと、どの要素が印象に影響したのか説明しにくくなります。

仮定例では、A案を体験の入りやすさ、B案を完成品の魅力に寄せると、判断の違いを話し合えます。ただし、配信していない段階で「Bの方が売れる」と断定はできません。制作時には、想定読者にどう伝わるかという仮説として説明します。

依頼者から「もっと目立たせたい」と言われた場合も、何を目立たせるかを確認します。全体を派手にするより、見出しを優先する、写真を整理する、CTAを探しやすくするなど、目的へつながる変更に置き換えると、具体的な修正になります。

文字・写真・余白を配置｜小さくても読める画面にする

最初は白黒の簡単な配置で組む

色や写真の細部を調整する前に、見出し、補足、画像、CTAの場所を簡単な箱で決めます。最も大きい見出し、次に見る写真、最後に行動の案内というように、読む順序を作ります。装飾を入れなくても意味が通じる骨組みを目指しましょう。

レイアウトの案は、紙に小さく描いても構いません。横長なら文字と写真を左右へ分ける、正方形なら上下のまとまりで見せるなど、掲載枠の比率に合わせて考えます。使うツールが違っても、情報の順番を決める作業は共通です。

テンプレートを使う場合も、その構造が自分の原稿に合うかを確認します。見本が短い英語だから整っているだけで、日本語の見出しを入れたら窮屈になることがあります。枠に文字を押し込むのではなく、原稿と配置の両方を調整します。

文字の大きさだけでなく、背景との関係を見る

大きな文字でも、写真の細かい模様と重なると読みにくくなります。文字の後ろに落ち着いた場所を確保する、背景を整理する、必要に応じて帯などを使う方法があります。縁取りや影を重ねる前に、背景そのものとの相性を確認しましょう。

Webの読みやすさを考える参考として、W3Cのコントラストに関する解説があります。通常の文字と大きな文字では基準が分かれ、画像内の文字にも関係します。数値だけで完成とせず、実際の表示サイズで、線の細さや文字のつぶれも確認することが必要です。

強調色を使うなら、同じ色が同じ役割を持つようにします。見出しも補足もCTAもすべて強い色だと、優先順位が消えてしまいます。色を増やすより、目立たせる場所を一つ決め、ほかを落ち着かせる方が整理しやすくなります。

写真は伝える内容と文字の置き場で選ぶ

写真は、きれいかどうかだけでなく、案内の内容が伝わるか、文字を置ける余地があるかで選びます。陶芸体験なら、完成品を見せるのか、制作中の手元を見せるのかで意味が変わります。見出しの訴求と合う写真を選ぶことが大切です。

人物や商品の重要な部分が端へ寄りすぎると、別サイズへ展開した際に切り取りに困ります。写真を使う前に、正方形や横長へ切り取っても意味が残るかを確認します。必要なら、構図の違う素材を用意する方が無理な加工を減らせます。

素材の権利も確認してください。広告利用が許されるか、人物や商標に関する条件があるか、加工や納品が可能かは素材によって違います。生成画像を使う場合も、実在の施設、完成品、参加者の実績だと誤認させない見せ方を考える必要があります。

※表は横にスクロールできます。

余白と整列を使い、飾りを足す前に引く

関連する情報を近くに置き、別の情報を少し離すと、まとまりが分かりやすくなります。見出しと補足の距離、写真と文字の境界、CTAの周囲などに余白を設けます。空いている場所があるからという理由だけで、アイコンや模様を追加しないようにしましょう。

文字の左端、ボタンの幅、写真の端など、そろえる基準を決めると落ち着いた見た目になります。すべてを中央へ置けば必ず整うわけではありません。文字量と写真の重さを見ながら、読み始める位置が分かる配置を選びます。

装飾を外した状態で見て、案内の意味が弱くなるなら、必要な装飾だった可能性があります。意味が変わらず読みやすくなるなら、減らしてもよいでしょう。足した要素の一つひとつに役割を説明できると、修正の判断もぶれにくくなります。

画像リンクの情報を、画像の外でも伝える

バナーがリンクとして機能する場合は、画像を見られない環境でも目的が分かるようにする必要があります。W3Cの機能を持つ画像の解説では、リンクやボタンとして使う画像の代替テキストは、その機能や目的を伝える考え方が示されています。

たとえば「青い背景に器の写真」という見た目だけの説明では、押した後に何が起きるか伝わりません。掲載の文脈に合わせて、体験イベントの日程を確認するリンクであることを分かるようにします。隣のリンク文字と同じ内容を重ねる場合などは、実装担当と全体の読み上げ方を確認します。

また、重要な日付や条件を画像の中だけに閉じ込めない工夫も考えられます。本文や案内ページにも必要な情報を置けば、画像が表示されない場合や、内容を検索したい場合にも確認しやすくなります。バナー制作だけで完結させず、掲載ページとの役割分担を考えましょう。

複数サイズへ展開する｜書き出しと表示テストの進め方

同じ比率の縮小と、違う比率への展開を分ける

同じ比率で小さくする場合でも、文字や細い線が読めるかを確認する必要があります。横長から正方形、縦長へ変える場合は、単純な縮小だけでは収まらないため、配置を組み直します。画像の縦横比を無理に変えると、写真や文字が変形してしまいます。

複数サイズでは、中心の見出しと行動の意味を共通にし、写真の切り取り方や改行、情報量を調整します。すべての版で見た目を完全に同じにすることより、同じ案内だと分かり、必要な情報が読めることを優先します。

小さい枠に全情報が入らない場合は、文字を縮め続けるのではなく、原稿の優先順位へ戻ります。省略できる情報と必要な条件を依頼者と確認し、リンク先で補足できるかを考えます。勝手に重要な条件を消してはいけません。

ファイル形式と容量は掲載先の指定で決める

写真が多い画像と、文字・図形が中心の画像では、形式や圧縮による変化が異なります。JPG、PNGなどのどれを使うかは、掲載先で受け付ける形式と、画質・容量のバランスで選びます。自分のサイトなら別の形式を使える場合もありますが、広告入稿へ同じ条件を当てはめないでください。

たとえば、確認日時点のGoogle広告のアップロード型画像広告では、GIF・JPG・PNGと最大150KBという仕様が案内されています。これはその形式の条件であり、すべてのバナー画像の上限ではありません。実際に使う媒体・広告形式の最新案内を確認して書き出します。

容量を下げるときは、圧縮だけを強くする前に、不要な細部やノイズの多い写真がないかも見直します。文字の周囲ににじみが出たり、細い線が欠けたりしたら、設定を戻して別の方法を検討します。数字の条件を満たすことと、読める画像であることの両方が必要です。

※表は横にスクロールできます。

書き出した画像を実際の大きさで確認する

編集画面の見た目だけで納品を決めず、出力した画像ファイルを開いて確認します。指定寸法になっているか、透明部分が意図どおりか、写真の切れ方や文字の改行が変わっていないかを見ます。出力ミスは、制作画面を見ているだけでは気づけないことがあります。

次に、掲載予定に近い大きさで表示して読みます。大きなモニターで拡大して見たときと、スマートフォンの中で小さく表示されたときでは印象が変わります。見出しだけは読めても、重要な対象条件が読めないなら、そのまま完成とはしないでください。

掲載画面へ試し置きできる場合は、周囲との関係も確認します。隣に強い色の画像がある、余白が狭い、背景と境界が分からないなど、単体では見えない問題があります。公開する権限がない場合は、確認用の画面やモックで相談し、勝手に本番へ掲載しないようにします。

ファイル名と納品一覧をそろえる

複数サイズを作ったら、どの画像をどの枠へ使うか分かる一覧を用意します。ファイル名には、案件、掲載先、寸法、版などを、相手の管理方法に合わせて含めます。似た画像をたくさん送るだけでは、担当者が古い版を選ぶ原因になります。

自作の命名例なら「pottery_web_square_v02」のように、内容・用途・版を区別できます。これは固定のルールではなく、納品先の指定を優先します。日付や期間を入れる場合は、掲載内容の有効期間とファイル更新日を混同しないようにしてください。

編集用データ、確認用画像、掲載用画像は、必要に応じて分けます。編集用ファイルまで渡す契約なのか、素材の再配布条件に問題がないかも確認します。外部素材を含む場合、完成画像を渡せることと、元素材をそのまま渡せることが同じとは限りません。

変更しやすい情報を運用の中で管理する

日付や価格などが変わるバナーでは、どの版が現行か、誰が更新を依頼するかを決めます。複数サイズのうち一枚だけ直し忘れると、同じキャンペーンで異なる情報が出ることになります。元原稿を一つにまとめ、各サイズへ反映した結果を照合しましょう。

掲載終了後に画像を外す担当と、終了ページへの扱いも相談しておきます。古い告知を残す場合は、終了したことが分かるかを確認します。制作した画像が長く使われるほど、作成時点の正しさだけでなく、更新の仕組みが重要になります。

運用しやすいデザインにするため、毎回変わる日付や商品名を無理な位置へ固定しない工夫もあります。長い名称になった場合、日付が二行になった場合などを、練習用の文字で試しておくと、次回の更新時に崩れにくい構成を見つけられます。

修正・納品・改善｜根拠を説明して次の制作につなげる

修正依頼を目的に置き換える

「もっと明るく」「高級感を出したい」「目立たない」といった依頼は、そのままでは変更の方向が広すぎます。どの相手へ、何を伝えるために、どの部分を変えたいのかを確認します。言葉の印象だけでなく、掲載場面と目的へ戻すと具体化できます。

たとえば「目立たない」の原因が、文字と背景の明暗差なのか、見出しが弱いのか、周囲の画像に埋もれているのかで対応は変わります。色を派手にする前に、問題の場所を一つずつ見ます。変更理由が説明できると、依頼者も判断しやすくなります。

修正案を返す際は、「見出しを先に読めるように写真の面積を調整しました」のように、変更と意図を短く添えます。相手の好みを否定する必要はありませんが、目的に合わない変更になりそうなら、理由と別案を示して相談しましょう。

納品前は内容・画像・行き先を別々に検品する

一度に全部を見ようとすると、文章を読んでいる間に寸法を忘れるなど、確認が抜けやすくなります。原稿の校正、画像の品質、掲載・リンクの条件を別の回として点検すると、注意する対象を絞れます。可能なら、内容を作った人以外にも重要項目を見てもらいます。

校正では、商品名、日付、数字、対象条件、URLとの整合を確認します。画像では、寸法、容量、形式、切れ、にじみ、余白を見ます。行き先は、公開されている正しいページか、バナーの約束が確認できるかを調べます。どれか一つが合格でも、ほかを省略できません。

掲載前に広告審査が必要な場合は、制作上の確認と審査通過を分けて考えます。公式仕様を読んで作っても、個別の内容や業種によって確認事項が変わることがあります。審査に通る、成果が出ると保証せず、担当者と必要な確認を進めてください。

※表は横にスクロールできます。

結果が悪くても、画像だけを原因にしない

配信後の反応は、バナーの見た目だけで決まるものではありません。掲載場所、読者、配信条件、時期、案内内容、リンク先の使いやすさなどが関係します。クリックが少ないという結果だけで、写真の色が原因だと断定しないようにしましょう。

比較する場合は、できるだけ条件をそろえ、何を変えたかを記録します。表示機会が大きく違う、配信期間が違う、対象者が違う場合は、単純に数字を並べただけでは判断しにくくなります。少ないデータから確かな勝ち負けを言い切らないことも重要です。

バナーの役割が詳細ページへの案内なら、クリック後の行動も含めて考えます。多く押されても、内容とのずれですぐ離脱されるなら、目的に合っていない可能性があります。数値の意味と、利用者へ約束した内容を合わせて振り返りましょう。

初心者の練習は、ひとつの案件を最後まで作る

学習用には、架空の依頼条件を自分で書き、原稿、画像、サイズ展開、検品一覧まで一組にしてみてください。たとえば、陶芸体験の詳細ページへ案内する正方形と横長の二種類を作り、違う比率でも同じ意味が伝わるかを確認します。実案件や実績として偽らず、自主制作と明記します。

完成後は、最初の条件と照らし合わせ、何を優先し、何を省いたかを説明します。色や書体の名前を並べるより、「初心者向けと分かる見出しを主役にし、日時の詳細はリンク先へまとめた」と話せる方が、制作の判断が伝わります。

AdobeのWebバナー制作の公式ガイドも、ツールで形にする際の参考になります。操作教材を見ながら一枚を再現した後は、原稿や掲載比率を変えて、自分で調整する練習へ進むと理解を確かめやすくなります。

添削を受けるときは、条件と迷いを添える

完成画像だけを見せて「どうですか」と聞くより、読者、掲載場所、目的、必要条件を一緒に示すと、具体的な助言を受けやすくなります。さらに「見出しと写真のどちらを優先するか迷った」と、自分の判断点を添えると、次の制作へ使える学びになりやすくなります。

継続的に添削やデザインの基礎を学びたい場合は、Webデザインスクールの学習内容・副業支援の比較で、課題へのレビュー範囲を確認できます。受講すれば案件が取れると考えるのではなく、今の制作で何を自分だけでは判断しにくいかを整理して選びましょう。

バナーは、小さな画像の中で全部を説明するものではありません。必要な相手へ中心の情報を届け、次のページへ自然につなぐための入口です。掲載条件を確かめ、伝える順番を決め、実際の大きさで読み直す。この流れを一枚ずつ繰り返すことが、作り方を身につける近道になります。