なぜ今、Figmaでバナーを作るのか？
SNSや広告で使う「バナー」は、デザイン練習に最適な題材です。
短時間で成果が見えやすく、デザインの基礎（構図・配色・フォント・視線誘導）を一度に学べるからです。
最近では、手軽にデザインできる Canva（キャンバ） が人気ですが、
プロ志向の人やWebデザインを本格的に学びたい人には Figma（フィグマ） が圧倒的におすすめです。
FigmaはUI/UXデザインツールとして知られていますが、
バナー制作の練習にも最適なんです。
この記事では、Figmaでのバナー練習法と、Canvaとの違いをわかりやすく解説します。
FigmaとCanvaの違いをざっくり比較
| 項目 | Figma | Canva |
|---|---|---|
| ツールの特徴 | UI/UX設計ツール | テンプレート型デザインツール |
| 操作性 | 自由度が高い（やや上級者向け） | 直感的で簡単（初心者向け） |
| 学習目的 | Web/UIデザインの基礎習得 | SNS・印刷物などの軽いデザイン |
| 作業形式 | クラウド上でリアルタイム編集 | クラウド上でテンプレ編集 |
| 共同作業 | ◎ リアルタイム同時編集 | ○ 共有編集は可能 |
| カラーマネジメント | 詳細に設定可能 | 制限あり |
| ファイル出力 | PNG / JPG / SVG / PDF | PNG / JPG / PDF |
| 料金 | 無料〜（プロ向け有料） | 無料〜（Proプランあり） |
結論
- Canva： 手軽に「雰囲気で作りたい」人向け
- Figma： 「デザイン理論を練習したい」人向け
つまり、“感覚”から“論理的デザイン”へステップアップしたい人にはFigmaが最適です。
バナー制作の目的を決める
まず、Figmaを開く前に考えるべきことがあります。
それは「誰に・何を・どんな印象で伝えたいか」という3点です。
たとえば：
| タイプ | 目的 | イメージ |
|---|---|---|
| SNS投稿バナー | クリック・シェアを促す | キャッチー・明るい |
| 広告バナー | サービス紹介・誘導 | 信頼感・シンプル |
| キャンペーン告知 | 限定感・スピード感を演出 | 赤・黒・強調文字 |
| ブログ用サムネ | 記事の内容を視覚で伝える | トーン統一・見やすい |
ポイント
Figmaではテンプレが少ないぶん、“設計思考”で構成を考える力が自然に身につきます。
Figmaで新規ファイルを作る
▶ 手順
- https://www.figma.com/ にアクセス
- 「New Design File」をクリック
Frame（Fキー）を使ってキャンバスを作成
💡サイズの目安（px単位）：
- Instagram投稿：1080×1080
- X（Twitter）ヘッダー：1500×500
- Webバナー広告（一般的）：300×250 / 728×90 / 1200×628
コツ
最初は正方形（1080×1080）から始めると、構成の感覚をつかみやすいです。
レイアウトを作る（構図を決める）
レイアウト＝「視線の流れをどう誘導するか」です。
バナーで最も重要な部分になります。
Figmaでは「グリッド」や「オートレイアウト」を使うことで、きれいな構図を作りやすくなります。
▶ 設定方法
- フレームを選択 → 右パネルで「Layout Grid」をON
- 「Grid」を「Columns（列）」に変更
- Margin：16、Gutter：16 に設定
▶ 構図パターン例
- Z型構図： 左上→右下に流れる（広告・誘導系）
- 三分割構図： 上中下で視線を整理（情報整理系）
- 中央集中構図： テキストや写真を真ん中に（SNS系）
テキスト・画像・色を配置する
▶ テキスト（Tキー）
キャッチコピー → メインコピー → 補足 の3段構成で考えましょう。
例：
キャッチコピー：今すぐ試せる！
メインコピー：無料デザイン講座、受付中。
補足：初心者OK｜Figmaで学ぶデザイン基礎フォントの目安：
- 見出し：Noto Sans JP Bold（24〜36px）
- 本文：Regular（14〜18px）
▶ 画像の挿入
- メニューから「Place Image（Shift＋Ctrl＋K）」
- 背景写真を選択
- 右側パネル → Fillモードを「Crop」または「Fit」に設定
💡 背景がうるさいときは：
- 透明度を下げる（Opacity 80%程度）
- 上に白や黒の半透明レイヤーを重ねる（#000 / 0.4）
▶ 配色のコツ
初心者が迷わない3色ルール：
| 役割 | 用途 | 例 |
|---|---|---|
| メインカラー | ブランドを象徴 | ブルー・オレンジなど |
| サブカラー | 補助や背景 | グレー・ベージュ |
| アクセントカラー | 強調部分 | 赤・黄・緑など |
配色サイト例：https://coolors.co
Canvaとの違いを実感するポイント
① デザインの自由度
Canvaはテンプレに沿う構成が多く、
Figmaはレイヤーや整列を自由に組めるため、「オリジナル構成」が作れます。
② 精密な位置合わせ
Figmaは「ガイド・スナップ・数値入力」で1px単位の調整が可能。
細部にこだわるデザインには圧倒的に強いです。
③ UI/UXの学習につながる
ボタン、カード、テキスト間など、UIデザインの基礎構造がそのままバナーにも応用できます。
Canvaで「きれいに作る」ことに慣れた人が、
Figmaで「意味を持って配置する」練習をすると一気に上達します。
完成したら書き出してSNSに投稿！
- 完成したフレームを選択
- 右下の「Export」→「+」ボタン
- PNG / JPG形式で保存
おすすめ設定：
- 解像度：2x（Retina対応）
- 背景透過：PNG形式
そのままInstagramやX（Twitter）にアップして、反応を見てみましょう。
「視線が止まる」デザインができれば上達のサインです。
練習のコツと題材アイデア
練習テーマ例
- 「期間限定セール」バナー（赤×黒で強調）
- 「イベント告知」バナー（写真＋文字で構成）
- 「勉強法まとめ」バナー（アイコン×配色で情報整理）
練習の進め方
- Canvaのテンプレを選ぶ
- それをFigmaで再現してみる
- 要素を分解し、「なぜこの位置？この色？」と考える
この“模写練習”を3〜5回繰り返すだけで、
デザイン構成力が一気に身につきます。
まとめ：Canvaで“感覚”、Figmaで“設計”を学ぼう
- Canvaは“見た目を整える”練習に最適
- Figmaは“構造を理解する”練習に最適
どちらも使い分けることで、
「感覚で作る」から「意図を持って作る」デザイナーにステップアップできます。
まずはFigmaで1枚のバナーを「ゼロから構成」してみましょう。
Canvaでは気づかなかった“デザインのロジック”が見えてきます。
