バナーを作ってみよう!

• 参考バナーのデザインを確認しよう
• Figma実践

これまでFigmaの使い方の基礎を学んできました。
この動画では、WebサイトやSNSで目を引くデザインを作る第一歩として、
今回はFigmaを使ったバナー制作に挑戦してみましょう。

参考バナーのデザインを確認しよう

まずは用意されたバナーを見てみましょう。
figmaファイルはこちら!

• サイズはどれくらいか
• 文字の大きさや書体はどうか
• 余白のバランスはどうなっているか
• 色数や配色のルールはあるか

すぐに作り始めず、まずは「なぜこのデザインになっているのか」を考えることが大切です。

Figma実践

日本語化はお済みですか?

この後の説明はFigmaの表示が日本語であることを前提にして進めます。
まだ、Figmaの日本語化がお済みでない方はこちらの記事を参考にFigmaの表示を日本語に変更しましょう。

1. レイヤーを用意

ワイヤーフレーム (F) を使い、見本と同じバナーサイズを設定。
レイヤー名を「背景」「テキスト」「装飾」などに分けておくと後の編集が楽になります。

2. 背景を作る

見本を参考に、背景色やグラデーションを再現します。

• 塗りから色を設定
• グラデーションの場合は、「線形」や「放射状」を選択し、色を2〜3色設定
• 写真入り → 見本に近い素材を配置し、サイズやトリミングを調整

3. テキストを再現

• テキスト (T) を使って見本のキャッチコピーや説明文を入力
• フォントを見本と似たものに変更（Google Fontsを使うと似た書体が見つかりやすい）
• 文字サイズ、太さ（Bold / Medium / Regular）を見本に合わせる
• 行間（Line Height）や文字間（Letter Spacing）も細かく調整

4. 装飾や図形を追加

• シェイプツールで円・長方形・線を追加
• 塗りつぶしや境界線の色を見本に合わせる
• 影（Drop Shadow）やぼかし（Blur）をエフェクトで再現

5. 細部を調整

最後に見本と見比べながら、余白・配置・サイズ感を微調整します。

• 拡大して細かい位置を合わせる
• 「整列」 機能で中央揃えや等間隔を維持
• 色コードを見本に近づける（Figmaのスポイトツールが便利）

6. 完成＆書き出し

• バナーが完成したら、右下のエクスポートからPNGまたはJPGで保存
• 実際にSNSやブログ用のサンプルとして表示してみる

模写練習は「ゼロから作る」よりも短時間でデザインの基礎が学べる方法です。
特にバナーは配色・文字サイズ・余白といったデザインの基礎が詰まっているため、初心者に最適。
まずは1枚、完成までやり切ることを目標に進めてみましょう。