Figma無料プランで始めるバナー制作7ステップ

はじめに

―そんな理由で立ち止まっていませんか？
実は Figmaの無料プラン だけで、SNS用のバナーは十分プロレベルに仕上がります。本記事では、完全未経験でも 7ステップ・最短3時間 で“映える1枚”を作れるよう、手順を丁寧に解説します。途中に 神ショートカット や 無料プラグイン の小ネタも挟むので、「読んで→即クリック」しながら進めてください。

Step 0. 無料プランの制限を知り味方につける

機能	無料プラン	有料プラン
編集履歴	30日間	無制限
バージョン固定	―	〇
プロジェクト数	3	無制限

攻略法
・「完成したら複製→日付リネーム」で擬似的にバージョン保存
 ・“途中経過はフレーム縦積み”で履歴をファイル内に残す

Step 1. 環境構築：アカウント作成＆日本語フォント設定（10分）

神ショートカット

Ctrl + / でコマンド検索→「language」と打てば1秒で言語切替にアクセス。

Step 2. キャンバス＆グリッド：迷わない下地づくり（5分）

たったこれだけで“配置迷子”が激減。グリッドは完成後オフにしても良い。

Step 3. 画像配置：Unsplash＋時短マスク技（15分）

裏技：Shift + O でオブジェクトをFrame化すると、別解像度でも比率が保たれ作業が爆速。

Unsplashとは？

Unsplash は「著作権フリー（実質CC0相当）の高解像度写真を無料でダウンロード＆商用利用できる」海外の画像共有サービスです。2013年にスタートし、現在は300万枚以上の写真が公開されています。制作者クレジットは任意ですが、リンク表示でフォトグラファーを支援できます。

特徴	詳細
ライセンス	Unsplash License（商用・改変OK、帰属任意）
画質	3000px 超の高解像度が多数
ジャンル	風景・人物・テクスチャ・フラットレイなど多彩
API／プラグイン	Figma・Photoshop・Sketch ほか公式連携

Figmaで使える無料画像プラグイン

プラグイン	概要	特徴
Unsplash	キーワード検索で高解像度写真を1クリック挿入	ランダム機能が便利
Lorem Picsum	ダミー写真用のジェネレーター	解像度指定可・超軽量
Pexels	商用可の写真・動画を提供	人物・ライフスタイルが豊富
Pixabay	写真＋ベクター＋動画対応	イラスト素材が多い
Storyset	カスタマイズ可能な無料イラスト	カラー変更やモーションGIF対応
Icons8	写真・アイコン・イラストが一体化	UI素材を一括検索
Remove BG	画像の背景自動削除	写真を即PNG透過に

Step 4. タイポグラフィ：読みやすく魅せる文字組み3原則（10分）

原則	やること	ショートカット
太さ差	見出しと本文は2 段階以上差を付ける	Cmd + B でBold
行間	日本語は行送り＝フォントサイズ×1.2	Opt + ↑/↓
行揃え	SNSバナーは中央揃えが無難	Shift + Cmd + C

おすすめ組み合わせ
見出し：游ゴシック / DNP ShueiGoGinStd / Zen Kaku Gothic New
英語見出し：Futura

Step 5. 配色：Color Stylesと神プラグインで迷子回避（8分）

Step 6. コンポーネント化：サイズ違いを一撃量産（12分）

無料プランでもComponentは無制限。使わなきゃ損！

Figma Component の“ここがスゴい” 7 ポイント

POINT	どう役立つか	Tips
再利用で一括変更	1 か所を直すだけで全インスタンスが更新。色や文言の差し替え地獄とサヨナラ	変更後は ⌥⌘B（Publish）でチームに即共有
Variantsでバリエ爆速	同じボタンでも「Primary／Secondary」「Hover／Disabled」を1つの親で管理	プロパティ名を「State」「Size」にそろえると後から検索しやすい
Auto Layoutと相性抜群	テキスト長が変わってもパディングが自動調整 → サイズ違いバナーを量産するときに最強	親FrameにAuto Layout → 子ComponentにAuto Layout の二段組が鉄板
Overridesが柔軟	インスタンスごとに画像・文字だけ変更可。レイアウト崩れなしで差し替え	迷ったら “Detach” せず Override で粘る方が後から楽
ライブラリ化でチーム統一	Publish すれば他ファイルから Assets パネルで呼び出し → デザインガイドラインの自動反映	ライブラリ名の頭に「00_」と付けるとリスト上部に固定できる
コード連携がスムーズ	Component名＝クラス名、Variants＝Props とマッピングしやすい → フロント実装が時短	開発者には右パネルの “Code” タブで CSS 値を渡すと会話が早い
ファイル容量を節約	重いSVGや写真を親Componentに1回置くだけなのでFigmaが軽い	ラスター画像は圧縮してから親に置くとさらに快適

Step 7. 書き出し：命名規則と軽量化で納品までスムーズ（5分）

項目	設定値	理由
Format	PNG24	透過維持・劣化なし
Suffix	-1080, -640	サイズ判別
圧縮	Compress PNG/JPEGプラグイン	SNS圧縮＋高速表示

よくある質問 FAQ

Figmaはブラウザで重くない？

Chrome拡張を減らせばOK。メモリ4GB以上推奨。

画像がぼやけて見える…

View > Pixel Preview をOFF。実表示と異なるピクセル等倍を確かめよう。

無料フォントが足りない

Google Fonts JP＋Adobe Fonts（Starter無料枠）を組み合わせると約300書体カバー。

まとめ＆今日のアクション

1. 無料プランの制限を逆手に取る
2. アカウント・フォント設定で日本語環境を整備
3. グリッド×フレームで迷わない下地
4. Unsplash＆マスクで画像配置を高速化
5. 太さ・行間・揃えの3原則で文字を決める
6. Color Styles＋プラグインで配色迷子を阻止
7. コンポーネント化で複数サイズを一気に書き出し

今日やるミニ課題

1. 記事通りに1080×1080バナーを1枚作る
2. #figma練習 でSNS投稿→アウトプット習慣化
3. Color Stylesを使い、Primary／Secondary／Accentを登録

「できた！」と思ったら、ぜひこのページをシェアして、同じく“Figmaでバナーを作りたい初心者”にバトンを渡しましょう。今日があなたの “作れるデザイナー” デビューの1日目です！