Figmaでバナーを作る練習法：Canvaとの違いも徹底比較

なぜ今、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で新規ファイルを作る

▶ 手順

1. https://www.figma.com/ にアクセス
2. 「New Design File」をクリック
3. Frame（Fキー） を使ってキャンバスを作成

💡サイズの目安（px単位）：

• Instagram投稿：1080×1080
• X（Twitter）ヘッダー：1500×500
• Webバナー広告（一般的）：300×250 / 728×90 / 1200×628

コツ
最初は正方形（1080×1080）から始めると、構成の感覚をつかみやすいです。

レイアウトを作る（構図を決める）

レイアウト＝「視線の流れをどう誘導するか」です。
バナーで最も重要な部分になります。

Figmaでは「グリッド」や「オートレイアウト」を使うことで、きれいな構図を作りやすくなります。

▶ 設定方法

1. フレームを選択 → 右パネルで「Layout Grid」をON
2. 「Grid」を「Columns（列）」に変更
3. Margin：16、Gutter：16 に設定

▶ 構図パターン例

• Z型構図： 左上→右下に流れる（広告・誘導系）
• 三分割構図： 上中下で視線を整理（情報整理系）
• 中央集中構図： テキストや写真を真ん中に（SNS系）

テキスト・画像・色を配置する

▶ テキスト（Tキー）

キャッチコピー → メインコピー → 補足 の3段構成で考えましょう。

例：

キャッチコピー：今すぐ試せる！
メインコピー：無料デザイン講座、受付中。
補足：初心者OK｜Figmaで学ぶデザイン基礎

フォントの目安：

• 見出し：Noto Sans JP Bold（24〜36px）
• 本文：Regular（14〜18px）

▶ 画像の挿入

1. メニューから「Place Image（Shift＋Ctrl＋K）」
2. 背景写真を選択
3. 右側パネル → Fillモードを「Crop」または「Fit」に設定

💡 背景がうるさいときは：

• 透明度を下げる（Opacity 80%程度）
• 上に白や黒の半透明レイヤーを重ねる（#000 / 0.4）

▶ 配色のコツ

初心者が迷わない3色ルール：

役割	用途	例
メインカラー	ブランドを象徴	ブルー・オレンジなど
サブカラー	補助や背景	グレー・ベージュ
アクセントカラー	強調部分	赤・黄・緑など

配色サイト例：https://coolors.co

Canvaとの違いを実感するポイント

① デザインの自由度

Canvaはテンプレに沿う構成が多く、
Figmaはレイヤーや整列を自由に組めるため、「オリジナル構成」が作れます。

② 精密な位置合わせ

Figmaは「ガイド・スナップ・数値入力」で1px単位の調整が可能。
細部にこだわるデザインには圧倒的に強いです。

③ UI/UXの学習につながる

ボタン、カード、テキスト間など、UIデザインの基礎構造がそのままバナーにも応用できます。

Canvaで「きれいに作る」ことに慣れた人が、
Figmaで「意味を持って配置する」練習をすると一気に上達します。

---

完成したら書き出してSNSに投稿！

1. 完成したフレームを選択
2. 右下の「Export」→「+」ボタン
3. PNG / JPG形式で保存

おすすめ設定：

• 解像度：2x（Retina対応）
• 背景透過：PNG形式

そのままInstagramやX（Twitter）にアップして、反応を見てみましょう。
「視線が止まる」デザインができれば上達のサインです。

練習のコツと題材アイデア

練習テーマ例

• 「期間限定セール」バナー（赤×黒で強調）
• 「イベント告知」バナー（写真＋文字で構成）
• 「勉強法まとめ」バナー（アイコン×配色で情報整理）

練習の進め方

1. Canvaのテンプレを選ぶ
2. それをFigmaで再現してみる
3. 要素を分解し、「なぜこの位置？この色？」と考える

この“模写練習”を3〜5回繰り返すだけで、
デザイン構成力が一気に身につきます。

まとめ：Canvaで“感覚”、Figmaで“設計”を学ぼう

• Canvaは“見た目を整える”練習に最適
• Figmaは“構造を理解する”練習に最適

どちらも使い分けることで、
「感覚で作る」から「意図を持って作る」デザイナーにステップアップできます。

まずはFigmaで1枚のバナーを「ゼロから構成」してみましょう。
Canvaでは気づかなかった“デザインのロジック”が見えてきます。

Favorite