「バナーを作ってみたいけど、どのツールを使えばいい？」
「Photoshopは難しそうだし、お金もかかる…」
そんな人におすすめなのが、無料で使える「Figma」。
WEBデザイン業界でもよく使われるツールで、バナー作成にもピッタリ。
この記事では、Figmaの基本操作から実際のバナー作成の手順まで、初心者向けに解説する！
目次
1. なぜFigmaでバナーを作るのがおすすめ？
① 無料で使える！
Photoshopは有料だけど、Figmaは無料プランで十分に使える。
ブラウザ上で動くので、ソフトのインストールも不要！
② シンプルな操作で初心者向け
ドラッグ＆ドロップで簡単にデザインできる。
レイヤーやフォントの変更も、直感的に操作可能。
③ チーム作業にも強い（案件にも活用できる）
クラウド上で管理できるから、クライアントとのやり取りもスムーズ。
2. Figmaの基本操作（まずはこれだけ覚えよう）
① Figmaの画面構成を知る
- 左側：レイヤーパネル（オブジェクトの一覧）
- 中央：キャンバス（実際にデザインを作るスペース）
- 右側：プロパティパネル（色・フォント・サイズの変更）
② よく使う基本ツール
- フレーム（Frame） → バナーのサイズを決める
- テキスト（Text） → 文字を入力する
- 図形（Rectangle, Circle） → ボタンや背景を作る
- 画像の配置（Place Image） → 写真を入れる
3. 実際にバナーを作ってみよう（シンプルな例）
ここでは、**「SALEバナー」**を作る手順を解説！
① バナーのサイズを設定する
- 横 800px × 縦 400px（Web広告用）
- Figmaで「Frame（フレーム）」を作成
② 背景色を決める
- 「SALE」バナーなら、赤や黄色など目立つ色がオススメ
③ 文字を配置する
- 「SALE 50% OFF」 のように、大きな文字を入力
- フォントは「Bebas Neue」や「Noto Sans JP」など太めが見やすい
④ 画像を追加する
- 商品画像や、シンプルなアイコンを入れる
- Figmaの「Place Image」機能を使えば簡単に配置できる
⑤ レイアウトを調整する
- 余白をしっかり取る（詰め込みすぎない）
- 文字に強弱をつける（「SALE」は特に大きく！）
📌 作成例の画像は後ほど追加！
4. 作ったバナーをエクスポートしよう
完成したバナーは、PNG / JPG / SVG 形式で保存できる。
エクスポート手順
- エクスポートしたいオブジェクトを選択
- 右側の「Export」ボタンをクリック
- 画像形式（PNG / JPG など）を選んで「Export」
これで、バナーの完成！
5. まとめ & 次のステップ
Figmaを使えば、初心者でも簡単にバナーが作れる！
今日のポイント
✅ 無料で使えるFigmaは初心者向け
✅ 基本ツール（フレーム・テキスト・画像）を覚えればOK
✅ バナー作成は「シンプル・視線誘導・余白」が大事
✅ 作ったバナーはPNG/JPGでエクスポートできる
