Figmaで作ろう！バナー講座　入門編

Figmaを使って、実際のバナー制作と同じ流れで進めていきましょう。
今回は、よくある ECサイトのセール告知バナー を題材に、次のステップで解説します。

1. 依頼文から必要な情報を整理する
2. バナーの文言を最適化する（短く・伝わりやすく）
3. ガイド（グリッド）を引く
4. 文字のレイアウト・書体選び
5. 配色・コントラストの調整
6. 情報の優先度に合わせて見た目のバランスを取る

入門編でもプロっぽいバナーが作れる流れになっています。

フレーム作成とレイアウトガイドの作成

フレームを作成したら、次にレイアウトガイドを設定します。
列・行のガイドをあらかじめ入れておくことで、テキストの配置がしやすくなり、レイアウトのバランスも整いやすくなります。

テキスト入力とタイポグラフィの設定

テキストツールを使って、バナーに必要な文字を入力していきます。
入力したテキストは、まず フレーム中央へ整列 させ、基準となる位置を決めておきましょう。
そのまま複数のテキストを作成する場合は、Alt（Option）キーを押しながらドラッグしてコピーすると効率的です。
コピーしたテキストはダブルクリックで編集できるので、文言ごとに内容を変更していきます。

また、見出し（メイン訴求）と補足文では役割が異なるため、フォントサイズや太さ（太字・中太など）もここで調整して、メリハリをつけておきましょう。

構成を見直してみる

テキストをすべて配置し終えたら、次はレイアウトの構成を見直していきます。
バナーは “一瞬で読まれる” ため、どの情報を一番強調するか を考えて順番を入れ替えることが重要です。
ここでは、以下のポイントを意識しながらブラッシュアップしていきます。

▼ レイアウト調整のポイント

この調整により、ユーザーが見た瞬間に
「SALE → 割引率 → FINAL → 期間」 という順番で自然に読み進められる構成になります。

フレームの塗りを入れ、文字色のコントラストを考える

すべての文字の配置がまとまったら、次はフレームに背景色を入れてバナー全体の印象を仕上げていきます。
ここでは、線形（リニア）グラデーション を使って、上から下へ色が変わるシンプルな背景を作成します。