Figmaでバナーを作るには、フレーム作成からテキスト配置、画像処理、配色調整、エクスポートまでの流れを順番に押さえれば、初心者でも案件に通用する仕上がりになります。この記事では、サイズ設定から書き出し形式まで、実務で使える手順とコツを具体的に解説します。
▶ 3日で初案件PR
この記事でわかること
Figmaバナー作成の5ステップを最短15分で把握できます。テンプレートとゼロ作成のどちらを選ぶべきか3問で判定できます。素人っぽく見える原因と7つの改善コツを確認できます。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
Figmaでバナーを作る基本の流れは、フレーム作成・テキスト配置・画像処理・配色調整・エクスポートの5段階です。最初に掲載場所とサイズを決めてしまうと、デザインの方向性が固まり、作業中に迷う場面が大幅に減ります。テンプレートを起点にするか、ゼロから作るかは記事の診断フローで判断できます。
最初に確認すること
バナーの掲載場所（Web記事・SNS・LP等）と求められるサイズを先に確認します。サイズが決まるとフレームサイズが確定し、フォントサイズ・余白・画像の配置比率の目安も自然に決まります。この確認に5分かけるだけで、後の作り直しをほぼ防げます。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| サイズが決まっていない | Figmaバナーは掲載場所でサイズを先に決める | 3分 |
| テンプレートとゼロ作成で迷っている | テンプレートかゼロ作成かを3問で判定 | 3分 |
| 手順を順番に学びたい | Figmaバナーは5ステップで完成 | 15分 |
| 素人っぽく見える原因を知りたい | 見た目が整う7つのコツ | 10分 |
| 書き出し形式を確認したい | 書き出しはPNG・JPG・PDFで使い分け | 5分 |
Figmaバナーは掲載場所でサイズを先に決める
バナーのサイズは掲載場所によって変わります。デザインを始める前にサイズを固定することが、作業全体の起点です。サイズを決めずに進めると「文字が切れる」「画像比率がずれる」といった修正が発生し、作業が二度手間になります。
用途別の代表サイズと使い分け
Webメディアのヘッダー画像には1200px×630pxがよく使われます。SNSでのシェア時にも適切に表示されるサイズで、ブログ記事のアイキャッチやOGP画像として流用できます。横長のサイドバーバナーやLP内バナーには660px×270pxが使われることが多く、横幅に対してテキストが収まりやすい比率です。SNS用のバナーはプラットフォームごとに推奨サイズが異なるため、掲載先の公式ガイドラインを確認してください。
Figma公式サイトでは、バナーメーカーを使って複数のSNSサイズに対応したテンプレートを選択できます。同一デザインを複製してサイズを変える「派生展開」も、Figmaで作業しやすい操作の1つです。
フレームの作り方と設定手順
Figmaでフレームを作成するには、左上のツールバーから「フレーム（F）」を選び、キャンバス上にドラッグするか、右サイドバーの幅・高さに数値を直接入力します。1200px×630pxのフレームを作るには、幅欄に1200、高さ欄に630と入力してEnterを押すと寸法が確定します。フレームを作った直後は背景色が白になっていることが多いため、右サイドバーの「塗り」から任意の背景色に変更してください。
まずフレームと背景色だけを決めて、他の要素はすべて後回しにすると作業を進めやすくなります。
サイズを間違えたときの修正方法
フレームのサイズを作成後に変更したい場合は、フレームを選択した状態で右サイドバーの幅・高さを直接書き換えます。ただし内側に配置済みのテキストや画像は自動でリサイズされないため、サイズ変更後に各要素の位置とサイズを手動で調整する必要があります。サイズを後から大きく変えると全体の修正量が増えます。最初にサイズを固定してから要素を配置する順序を守ることが、時間の節約につながります。
CHECK
▶ 今すぐやること: バナーの掲載場所を1か所決め、Figmaで幅×高さを入力したフレームを1つ作る（5分）
Q: Figmaのフレームはアートボードと同じですか？
A： 機能的にほぼ同じです。Figmaではキャンバス内の制作エリアを「フレーム」と呼び、他のツールでいうアートボードに相当します。フレームの中に要素を配置してバナーを構成します。
Q： サイズは後から変更できますか？
A： 変更できます。ただし内側の要素は自動調整されないため、変更後に各要素の位置・サイズを手動で直す手間が発生します。最初に確定させると修正が少なくて済みます。
テンプレートかゼロ作成かを3問で判定
テンプレートを使うかゼロから作るかは、納期・スキルレベル・デザインの自由度によって判断が変わります。どちらが正解というわけではなく、案件の条件に合わせて選ぶのが実務的な考え方です。フリーランスのWebデザイナーがFigmaを使うメリットでも触れられているように、Figmaはテンプレート活用と独自制作の両方に対応した汎用性の高いツールです。
Q1: 納期が3日以内ですか？
Yesの場合はQ2へ進みます。Noの場合はQ3へ進みます。
Q2: 発注先からデザインの方向性が明確に指定されていますか？
Yesの場合はテンプレートを使い、指定に合わせてカスタマイズします（Result A）。Noの場合はQ3へ進みます。
Q3: Figmaの操作に慣れていますか？
Yesの場合はゼロ作成でも対応できます（Result B）。Noの場合はテンプレートを起点に構成を学びながら進めます（Result C）。
Result A: テンプレートを使いカスタマイズする
Figma公式のバナーメーカーからテンプレートを選び、テキスト・色・画像を差し替えます。構成はすでに整っているため、短時間で仕上がりに近い状態になります。
Result B: ゼロ作成で進める
フレームを作り、情報を整理してから配置を決めます。次のH2「Figmaバナーは5ステップで完成」の手順に沿って進めると効率よく作れます。
Result C: テンプレートを模写しながら操作を覚える
テンプレートを参照しながら同じ構成をゼロから再現する方法が、操作習得と成果物の確保を同時に達成できます。完成したら徐々に独自の要素を加えていきます。
Q: 無料のFigmaテンプレートはどこで手に入りますか？
A： Figmaのコミュニティページや、バナーメーカーのページでテンプレートを無料で入手できます。「Banner」で検索すると用途別のテンプレートが表示されます。
Q： テンプレートをそのまま納品してもよいですか？
A： テンプレートをベースにテキスト・画像・色を変更して納品することは一般的な実務の進め方です。テンプレートのライセンス条件を事前に確認してください。
Figmaバナーは5ステップで完成
バナー作成の基本手順は、フレーム作成→テキスト配置→画像配置→配色・余白調整→エクスポートの順番です。この順序を守ると「サイズが合わない」「文字が見づらい」という手戻りが起きにくくなります。最初は文字・図形だけで全体のレイアウトを組み、画像の配置は後半に回す進め方が実務ではよく取られます。
ステップ1: フレームを作りレイアウトを決める
フレームを作成したら、実際のテキストや画像を配置する前に、大まかなゾーニング（タイトルをどこに置くか、画像をどこに配置するかの分割）を決めます。長方形ツール（R）で仮の色ブロックを置くと、バランスを確認しながら構成を検討できます。仮ブロックの段階でタイトル・サブタイトル・CTAの配置を固めると、後の作業がスムーズになります。
ステップ2: テキストを3階層に分けて配置する
テキストは「タイトル（主要な訴求文）」「サブタイトル（補足情報）」「補足テキスト（日時・URL・CTAなど）」の3階層に分けると情報の優先度が整理されます。タイトルのフォントサイズは大きめに始め、全体を見ながら調整すると収まりを確認しやすいです。1行あたりの文字数が多すぎると読みにくくなるため、折り返し位置を意識しながら文字量を調整してください。
Auto Layoutを使うと、日時・場所・CTAなどの複数要素を整列・均等配置できます。要素を選択して右クリックから「Add Auto Layout」、またはShift+Aで起動できます。
ステップ3: 画像素材を配置しレイヤーを整理する
画像素材を配置するには、デスクトップからキャンバスにドラッグ&ドロップするか、メニューのFile→Place imageから読み込みます。画像を特定の形に収めるには、図形の上に画像をドラッグして「Use as fill」を選ぶと、画像がマスクされた状態で配置されます。
写真をそのまま置くとテキストが見づらくなることがあります。レイヤーパネルで画像レイヤーをテキストの下に移動し、画像の上に半透明の黒い長方形を重ねると文字の視認性が上がります。写真を配置した後にレイヤーの順番を調整することは、Figmaでバナーを作る際によく発生する作業です。なお、画像トリミング無料サイトを活用して素材を事前に最適なサイズに整えておくと、Figma内での作業がスムーズになります。
ステップ4: 配色と余白を整える
使う色を3色以内に絞ることで読みやすさを保てます。背景色・テキスト色・アクセント色の3色を最初に決め、それ以外の色を追加するときは既存の3色から派生させるとまとまりが出ます。
余白は、フレームの端からコンテンツまでの距離を統一することで整って見えます。複数要素を選択した状態で右サイドバーの「Align」機能を使うと、左右の余白を同じ数値に揃えられます。
ステップ5: エクスポートして完成
右サイドバー下部の「Export」セクションから書き出しを行います。フレームを選択した状態でExportに＋ボタンを押すと書き出し設定が追加されます。形式はPNG・JPG・PDFから選択でき、拡大率を「2x」にすると実際の表示サイズの2倍の解像度で書き出せます。Webに掲載する場合はPNG、ファイルサイズを小さくしたい場合はJPGが実務でよく選ばれます。
CHECK
▶ 今すぐやること: フレームを作り、長方形ツールで仮ブロックを3つ置いてレイアウトのゾーニングを確認する（10分）
Q: Auto Layoutはどんなときに使いますか？
A： 複数の要素を等間隔に整列させたいときや、テキスト量が変わっても自動で幅・高さを調整したいときに有効です。ボタンのテキスト変更時にサイズを手動で直す手間が省けます。
Q： 画像はどの段階で配置するのがよいですか？
A： テキストのレイアウトを固めた後に画像を配置すると手戻りを減らせます。画像を先に置くと、テキストの読みやすさに引きずられてレイアウトを変更する場面が増えます。
Q： エクスポートしても解像度が低く見える場合はどうすればよいですか？
A： エクスポート設定の倍率を2xまたは3xにすると解像度が上がります。Webメディアでは2xが標準的で、印刷用途では3x以上を指定するケースもあります。
PR提供: 日本デザインスクール（デザスク）
見た目が整う7つのコツ
手順通りに作っても「なんとなく素人っぽい」と感じる場合は、余白・フォントサイズ・配色・画像の処理といった細かな調整が整っていないことが多くあります。7つのコツを順番に確認すると、見た目の完成度を上げやすくなります。
コツ1〜3: テキストと余白を整える
コツ1は「余白を均等に取ること」です。フレームの端からコンテンツまでの距離が左右・上下で統一されていると、整理されて見えます。フレーム幅の8〜10%程度を左右余白にとると収まりがよい場合が多くあります。
コツ2は「フォントを2種類以内に絞ること」です。タイトルと本文で異なるフォントを使う場合も、使うフォントは2種類までにすると統一感が出ます。3種類以上混在すると情報の優先度が伝わりにくくなります。
コツ3は「行の長さを意識した改行をすること」です。1行が長すぎると読みにくく、短すぎると間延びして見えます。タイトルは1行か2行以内が読みやすい目安です。
コツ4〜5: 画像と色の処理
コツ4は「写真の上にオーバーレイを重ねること」です。写真をそのまま背景にするとテキストが見えにくくなります。写真の上に黒または白の長方形を重ね、透明度を30〜60%程度に調整するとテキストの可読性が上がります。写真の内容によって適切な透明度が変わるため、10%単位で試しながら確認してください。
コツ5は「グラデーションを使って素材となじませること」です。写真と背景色の境界が急に切れている場合、グラデーションを使って境界をなじませると自然な見た目になります。Figmaでは塗り設定を「Linear」に切り替えるとグラデーションを適用できます。配置からグラデーション調整、配色展開までの手順はFigmaでバナー画像を作ってみよう〜グラフィック入門〜にまとめられています。
コツ6〜7: 仕上げの確認
コツ6は「スマホで読めるかを書き出し前に確認すること」です。Figmaのプレビュー機能やスマートフォンへの書き出しを使い、実際の表示サイズで文字が読める大きさかを確認します。PC上で作業すると文字が小さすぎることに気づきにくいため、スマホでの確認は書き出しのひとつ前に行ってください。
コツ7は「画像素材を別ツールで加工してからFigmaに配置すること」です。切り抜きや背景除去が必要な写真素材は、Figmaの外で加工を済ませてからPNGで書き出し、Figmaに持ち込む方が作業効率がよいです。素材収集・写真加工・Figmaへの配置・フォント調整という実務の流れは、無名フリーランスWebデザイナーのバナー単価と作り方に詳しく書かれています。画像文字入れ無料ツールを使ってテキスト入り素材を事前に作成しておくと、Figma内の作業工数をさらに短縮できます。
Q: 配色に自信がないときはどうすればよいですか？
A： クライアントのWebサイトやロゴから色を抽出してバナーの配色に使うと、ブランドと統一感が出やすくなります。FigmaのスポイトツールでWebサイトの色を直接拾えます。
Q： フォントはどこで入手できますか？
A： Google FontsやAdobe Fontsから無料または契約ライセンス内で使えるフォントを入手できます。端末にインストールしたフォントはFigmaを再起動または再読み込みすると認識される場合があります。
Q： 見た目はよいのに「重たく見える」と言われます。原因は何ですか？
A： 余白の不足・要素の多さ・濃い色の面積が大きすぎることが原因として挙げられます。余白を増やし、要素を減らし、アクセントカラーの面積を小さくすると軽快な印象に近づきます。
書き出しはPNG・JPG・PDFで使い分け
Figmaでは、バナーをPNG・JPG・PDFの3形式でエクスポートできます。用途に合わない形式で書き出すと、画質の劣化やファイルサイズの問題が後から発覚します。納品前に形式を確認してください。
形式別の使い分け
PNG・JPG・PDFの使い分けは用途と透過の有無で決まります。
PNGは背景透過が必要な場合や、文字・ロゴを含む画像でシャープさを保ちたい場合に適しています。ファイルサイズはJPGより大きくなることが多いですが、画質の劣化がありません。
JPGは写真を中心とした画像でファイルサイズを小さくしたい場合に適しています。背景透過はできませんが、Webページへの掲載においてページ読み込み速度を意識する場面ではJPGが選ばれることが多くあります。画像圧縮で画質落とさない方法を参照すると、書き出し後のファイルを最適化する手順も確認できます。
PDFは印刷用途や複数ページのプレゼン資料として納品する場合に使われます。Webバナーとして使うことはほとんどありません。
フリーランスWebデザイナーがFigmaをバナーなどの画像制作に活用している実態は、フリーランスのWebデザイナーがFigmaを使うメリットでも取り上げられています。
書き出し時の解像度設定
エクスポート設定の倍率を1xにすると、フレームで設定したピクセル数そのままで書き出されます。Webに掲載する場合は2xにすると、Retinaディスプレイでもシャープに表示されます。ただし2xにするとファイルサイズも倍近くになるため、掲載先のファイルサイズ上限がある場合は事前に確認してください。
Exportセクションの倍率（「1x」と表示されているドロップダウン）を変更するだけで解像度を調整できます。
| 書き出し形式 | 透過 | ファイルサイズ | 主な用途 |
| PNG | 可 | 大きめ | Webバナー・ロゴ・透過あり画像 |
| JPG | 不可 | 小さめ | 写真中心バナー・ファイルサイズ重視 |
| 不可 | 可変 | 印刷用・プレゼン資料 |
Q: 書き出し後にファイルサイズが大きすぎた場合はどうすればよいですか？
A： JPG形式に変更するか、エクスポート設定の倍率を2xから1xに下げることでファイルサイズを小さくできます。画質とファイルサイズはトレードオフになるため、掲載先の要件に合わせて調整してください。
Q： PNGとJPGのどちらを選べばよいかわからない場合はどうすればよいですか？
A： 迷ったらPNGを選ぶと画質の劣化は防げます。ただし掲載先でファイルサイズ上限が指定されている場合や、写真素材をメインに使った背景透過不要のバナーではJPGが適しています。
まとめ: Figmaバナーは5ステップで仕上がる
Figmaでバナーを作る手順は、サイズ決定・フレーム作成・テキスト配置・画像処理・エクスポートの5段階に整理できます。サイズと掲載場所を最初に固定することが、作業中の手戻りを防ぐうえでの核心です。見た目の完成度は、余白の均等化・フォントの絞り込み・画像へのオーバーレイという3点を意識するだけで大きく変わります。
デザインは最初から完璧を目指すと手が止まります。まずサイズを決めてフレームを作り、仮のテキストを置いてみることが第一歩です。初めて作ったバナーが思い通りにならなくても、1枚作るたびに操作の感覚はつかめてきます。案件で通用する見た目には、正確な手順と小さな積み重ねで近づけます。
| 状況 | 次の一歩 | 所要時間 |
| まだフレームも作っていない | 掲載場所を1つ決め、サイズを入力してフレームを作る | 5分 |
| テキストは置いたが素人っぽい | コツ1〜3（余白・フォント・改行）を1つずつ確認する | 10分 |
| 画像をどう処理すればよいか迷う | コツ4（オーバーレイ）を適用して透明度を調整する | 5分 |
| 書き出し方がわからない | Exportセクションで形式と倍率を確認してエクスポートする | 3分 |
Figmaバナー作り方に関するよくある質問
Q: Figmaは無料で使えますか？
A： 個人での利用や小規模チームでの利用であれば、Figmaの無料プランで基本的なバナー作成は対応できます。商用利用の条件や機能制限についてはFigma公式サイトの料金ページをご確認ください。
Q： Figmaで作ったバナーはそのまま納品できますか？
A： PNG・JPG・PDFで書き出したファイルを納品するのが一般的な実務の流れです。Figmaのファイル（.fig形式）自体を納品する場合は、クライアントがFigmaアカウントを持っているかを確認してから渡します。
Q： 初心者がFigmaでバナーを作るのにどのくらいかかりますか？
A： 初回は操作の確認を含めて2〜3時間を見ておくと余裕をもって作業できます。テンプレートを使う場合はテキスト・色・画像の差し替えだけになるため、30〜60分程度で仕上がる場合もあります。2枚目以降は操作に慣れた分、作業時間が短くなります。
Q： Figmaの操作を覚えるよい方法はありますか？
A： 完成しているバナーのデザインをFigmaで再現する「模写」が、操作習得と作品蓄積を同時に進めやすい方法の1つです。フレーム作成・テキスト追加・レイヤー調整を学ぶ流れは独学でバナーデザインができる！Figmaの使い方を初心者向けに解説も参考になります。
【出典・参照元】
Figma公式：無料バナーメーカー（バナーサイズ・テンプレート・エクスポート形式の記述で参照）
無名フリーランスWebデザイナーのバナー単価と作り方（素材収集・写真加工・Figmaへの配置の実務フローで参照）
Figmaでバナー画像を作ってみよう〜グラフィック入門〜（グラデーション・配色展開の手順で参照）
独学でバナーデザインができる！Figmaの使い方を初心者向けに解説（Figma模写による操作習得の説明で参照）
フリーランスのWebデザイナーがFigmaを使うメリット（フリーランスのFigma活用実態の記述で参照）