Figmaでバナーを作ること自体は、フレームを置いて文字と画像を並べるだけです。つまずくのはそのあとで、300×250・728×90・1080×1080と媒体ごとのサイズに1枚ずつ展開しはじめた瞬間に、作業が一気に重くなります。
Figmaには、この「サイズ展開」を速くするための仕組みが用意されています。オートレイアウト、コンポーネント、バリアントの3つです。この記事では、Figmaバナーを1枚作る手順から、その1枚を主要サイズへ展開するところまで、実際の操作順にまとめました。
この記事でわかること
- Figmaでバナーを作る前に決めておく3つのこと（目的・基準サイズ・訴求）
- フレーム作成からオートレイアウトまで、バナー1枚を作る手順
- コンポーネントとバリアントで、サイズ展開の手戻りを減らすやり方
- GDN・Metaの主要サイズ早見表と、2x書き出しの設定
- Figmaでのサイズ展開が重くなる場面と、その先の選択肢
Figmaでの訴求設計からサイズ展開まで、URLを入れるだけで自動化したい方へ。Tasky ならマジックリサイズで主要サイズへ自動展開できます。7日間の無料トライアルあり。
Figmaでバナーを作る前に決める3つのこと
手を動かす前に、3つだけ決めておきます。Figmaバナーの出来は、ここでほぼ決まります。ここが曖昧なまま作り始めると、サイズ展開の段階で全サイズを作り直すことになります。
1. 目的を1つに絞る。 認知・サイトへの誘導・CV獲得のどれを狙うかで、載せるコピーもCTAも変わります。1枚に複数の目的を詰めると、どれも中途半端になります。
2. 基準サイズを1つ決める。 いきなり全サイズを作らず、まず「基準の1枚」を仕上げます。おすすめはGoogleディスプレイ広告（GDN）の300×250です。インプレッションが多く、縦横のバランスが中間的で、他サイズへ展開しやすいためです（Google広告ヘルプ）。
3. 訴求を1つに絞る。 バナーが目に触れる時間は短く、複数のメッセージは読まれません。ターゲットの課題に直接応える一言を1つだけ選びます。訴求の決め方はバナー広告の作り方5ステップで詳しく扱っています。
この3つが決まっていれば、Figmaでの作業は「設計を形にするだけ」になります。
Figmaでバナーを作る5ステップ
まず、Figmaバナーの土台になる基準サイズの1枚を作ります。デザインツールの操作に慣れていなくても、順番どおり進めれば形になります。
Step 1. フレームを基準サイズで作る
ツールバーのFrameツール（ショートカットF）を選び、右側のパネルからサイズを300×250に設定します。Figmaの「フレーム」は、バナーの外枠そのものです。このフレーム単位で、あとから書き出します。
背景色は、フレームのFillで指定します。透過のまま書き出したい場合は、背景を塗らずに空けておきます。
Step 2. オートレイアウトで要素を組む
見出し・画像・CTAボタンを置いたら、それらをまとめて選択し、⇧A（Shift+A）でオートレイアウトを適用します。オートレイアウトは、要素の間隔や余白を自動で保ちながら並べる仕組みです（Figma公式ヘルプ）。
設定できるのは主に4つです。
| プロパティ | 役割 |
|---|---|
| Direction | 縦・横・グリッドのどれで並べるか |
| Padding | フレームの端と中身の余白（辺ごとに指定可） |
| Gap | 要素どうしの間隔 |
| Resizing | Hug（中身に合わせる）/ Fill（親いっぱいに広がる）/ Fixed（固定） |
オートレイアウトを使う利点は、あとで文字量が増えてもレイアウトが崩れないことです。たとえば見出しのResizingをFixed、ボタンをHugにしておけば、コピーを差し替えても余白が自動で整います。
Step 3. 文字・色・ロゴを整える
テキストは、見出し・サブコピー・CTAの3つが基本です。見出しは短く、ターゲットの課題に応える一言にします。
配色は3色までに絞ると、視線が散りません。背景・メイン・アクセントの3役で考え、CTAボタンにアクセント色を使うと自然に目立ちます。ロゴは背景に重ねても読めるよう、透過PNGで用意しておきます。デザインの詰め方は別記事にまとめています。
ここまでで、Figmaバナーの基準1枚が完成します。次は、この1枚を他サイズへ展開します。
基準の1枚から全サイズへの展開に時間を取られていませんか。Tasky なら1枚作れば主要サイズへ自動展開でき、追加はクレジットのみです。外注のサイズ展開は1サイズあたり+2,000〜5,000円が相場です。
コンポーネントとバリアントでサイズ展開を速くする
ここがFigmaバナー制作の要です。1枚ずつ別物として作ると、修正のたびに全サイズを直すことになります。コンポーネントとバリアントを使うと、この手戻りを減らせます。
マスターをコンポーネント化する
完成した基準バナーを選び、コンポーネント化します。コンポーネントには「マスター（main component）」と「インスタンス（複製）」の関係があり、マスターを直すとインスタンスにも反映されます（Figma公式ヘルプ）。ロゴやブランド色のような共通要素は、マスターを1回直せば全サイズに行き渡ります。
注意点が1つあります。マスターを複製して別マスターを作ると、元のインスタンスとの紐付けが切れます（Figmaコミュニティで報告）。サイズ違いは複製ではなく、次のバリアントでまとめます。
バリアントでサイズ違いを1セットにする
サイズ違いのフレームを複数用意し、まとめて選択して「Combine as variants」でバリアントにします。バリアントは、size などのプロパティと値を定義して、1つのコンポーネントセットに集約する機能です（Figma公式ヘルプ）。右パネルでサイズを選ぶだけで表示を切り替えられます。
命名を banner/300x250 banner/728x90 のように / 区切りにすると、プロパティと値が自動で整理されます。
崩れを防ぐのはオートレイアウトとResizing
サイズを変えると、中身がはみ出したり寄ったりします。これを防ぐのが、Step 2で設定したオートレイアウトのResizingです。横長の728×90では要素を横並び（Direction: Horizontal）、縦長の1080×1920では縦並びにし、余白はPaddingで調整します。
ただし、縦横比が大きく変わるサイズは、同じ構成では成立しないこともあります。その場合はバリアントごとに並び順を組み替えます。ここが、Figmaでのサイズ展開でいちばん手数のかかる部分です。
媒体別サイズと書き出し設定
Figmaバナーを配信するサイズは、媒体に合わせます。主要な媒体のサイズは次のとおりです。
| 媒体 | サイズ（px） | 用途 |
|---|---|---|
| GDN | 300×250 | ミディアムレクタングル（最重要） |
| GDN | 728×90 | リーダーボード |
| GDN | 320×50 | モバイルバナー |
| Meta | 1080×1080 | フィード（正方形） |
| Meta | 1200×628 | フィード（横長） |
GDNはこの3サイズでインプレッションの大半をカバーできます（Google広告ヘルプ）。Metaのフィードは正方形と横長が基本です（Meta広告ガイド）。まずこの5サイズを揃えれば、主要な配信面には対応できます。各媒体の規定は広告バナーサイズ一覧に、デマンドジェネレーション向けはデマンドジェネレーションの画像サイズにまとめています。
書き出しは右パネルのExportから
書き出したいフレームを選び、右パネルのExportの「＋」を押します。既定はPNG・1xです。形式はPNG・JPG・SVG・PDFから選べ、スケールは1x・2x・3xを指定できます（Figma公式ヘルプ）。
実務では次の点を押さえます。
- 高解像度は2xで。 名前欄に
@2xを付けておくと、解像度が後から分かります。 - 複数サイズは一括で。 フレームを複数選択してからExportを押すと、まとめて書き出せます。
- 容量に注意。 GDNは1ファイル150KBが上限です。写真を使うバナーはJPGで書き出し、必要なら圧縮します。
- 透過したいとき。 PNGで透過を残すには、フレームの背景を透明にしておきます。非表示レイヤーは書き出しに含まれません。
Figmaでのサイズ展開が重くなるとき
ここまでの手順で、Figmaバナーの制作とサイズ展開はかなり速くなります。ただし、枚数が増えると別の壁にぶつかります。
バリアントで5サイズまでは現実的ですが、「10サイズ×多言語×訴求3パターン」のような掛け算になると、手作業が残ります。Figmaのコミュニティでも、14サイズ・15言語・フォント違いのような大量展開では標準機能だけでは追いつかず、書き出しプラグインや有料テンプレートで補う例が報告されています。
検証を速く回したいほど、この展開作業がボトルネックになります。1枚のクオリティより、何パターン試せたかのほうが成果に効くためです。
ここで選択肢になるのが、設計と展開を自動化するAIツールです。たとえばTaskyは、商品URLを入力すると訴求設計からバナー生成までを自動で行い、1枚作ればマジックリサイズで主要サイズへ自動展開します。制作コストは1枚あたり約45円〜、月間で約180枚まで生成できます。「Figmaでの設計は分かったが、展開に時間をかけたくない」という場合の現実的な選択肢になります。
よくある質問
Q1. Figmaでバナーは無料で作れますか？
作れます。Figmaの無料プランでも、フレーム作成・オートレイアウト・書き出しまで使えます。ただし、作ったコンポーネントをチームのライブラリとして公開・共有するには有料プランが必要です（Figma公式ヘルプ）。個人でバナーを作って書き出すだけなら、無料プランで十分です。
Q2. Figmaとイラレ・Canvaのどれがバナー制作に向いていますか？
目的で選びます。Figmaは、コンポーネントとバリアントでサイズ展開を仕組み化したい場合に向きます。Canvaはテンプレートから手早く1枚作るのに向き、Illustratorは印刷物も含めた細かい作り込みに強いです。Web広告のバナーを複数サイズ運用するなら、Figmaのオートレイアウトが扱いやすいです。
Q3. Figmaで作ったバナーを複数サイズに展開する一番速い方法は？
基準サイズをコンポーネント化し、サイズ違いをバリアントにまとめ、オートレイアウトで崩れを防ぐ流れです。共通要素はマスターを1回直せば全サイズに反映されます。それでも枚数が多い場合は、書き出しプラグインや自動展開ツールを併用します。
Q4. Figmaのバナーはそのまま広告に入稿できますか？
書き出せば入稿できます。PNGまたはJPGで書き出し、媒体の容量上限（GDNは150KB）に収めます。高解像度ディスプレイ向けには2xも用意しておくと安心です。
本記事の手順を試したうえで、展開と検証をもっと速くしたい方へ。Taskyの7日間無料トライアルなら、URLを入れるだけで訴求設計からサイズ展開まで体験できます。登録は3分です。
まとめ
Figmaでバナーを作り、サイズ展開まで進める手順を整理しました。
- 作り始める前に、目的・基準サイズ・訴求を1つずつ決める
- 基準サイズの1枚を、フレーム→オートレイアウト→文字・色・ロゴの順で仕上げる
- コンポーネント化で共通要素をまとめ、バリアントでサイズ違いを1セットにする
- GDN3サイズ＋Meta2サイズを基本に、2xで書き出す
- 掛け算の量産になると手作業が残る。ここが自動化の検討ポイント
Figmaの強みは、サイズ展開を仕組み化できることです。まずは基準の1枚をていねいに作り、コンポーネントとバリアントで展開する。この流れを押さえれば、媒体ごとの作り直しから抜け出せます。
バナー制作の基礎をさらに知りたい方はバナー広告の作り方5ステップを、媒体別のサイズ規定は広告バナーサイズ一覧もあわせてご覧ください。
