SNSデザイン・投稿画像 / 非公式Figmaガイド
FigmaでSNSサムネイル設計
SNSサムネイルの文字量、視認性、素材権利を確認します。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
SNS画像、サムネイル、投稿前確認、スマホ表示、素材権利を整理します。 SNSサムネイルの文字量、視認性、素材権利を確認します。
Figmaで確認すること
Figmaでは、見た目だけでなく、目的、読者、導線、余白、スマホ表示、公開前の安全注意を分けて確認します。AIに任せる前に、人間が決める範囲を整理します。
役割分担の比較表
| 確認すること | Figmaで見ること | AIサイト群での役割 |
|---|---|---|
| 目的 | 何を設計するページかを決める | ChatGPTで文章、Figmaで設計、Codexで実装へつなぐ |
| レイアウト | 見出し、余白、カード、CTA、画像配置を見る | Canva素材やCodex実装へ渡しやすくする |
| スマホ確認 | 390px前後で読めるか確認する | Codex公開前チェックへつなぐ |
| 安全注意 | 共有範囲と未公開情報を確認する | HALやGitHub Secrets注意へつなぐ |
チェックリスト
- スマホで文字が読める
- 著作権と人物画像を確認した
- SNS成果を保証しない
- Figma公式サイトではない前提を明記している
- 個人情報、会社情報、顧客情報を入れていない
- 公式ロゴ、公式画像、公式UIスクリーンショットを使っていない
- 料金、仕様、提供範囲、成果を断定していない
安全注意
個人情報、会社情報、顧客情報、APIキー、token、Secrets、.env を掲載しないでください。Figmaファイルを外部AIへ渡すときは、伏せる情報と共有してよい情報を分けてから相談します。
AIサイト群の導線
サムネイルは本文ではなく「入口」
サムネイルに情報を詰め込むと、かえって見られなくなります。役割は説明ではなく「これは自分に関係がある」と一瞬で伝えることです。
- 入れる — 対象、扱う話題、印象に残る1語
- 入れない — 説明文、細かい条件、複数のメッセージ
迷ったら、1つに絞ってください。2つ入れると、どちらも印象に残りません。残りは本文で伝えれば足ります。
並べた時に揃うか
サムネイルは1枚ずつ作りますが、見られるのは並んだ状態です。次を揃えておくと、まとまって見えます。
- 文字の位置 — 毎回同じ場所に置く
- 色の使い方 — 3色程度に決めておく
- 余白の取り方
1枚ずつ作ると、必ずばらつきます。先に型を1つ作り、その型に流し込む形にしてください。作る速度も上がります。
ただし、全部が同じに見えるのも問題です。同じ型の中で、色か写真のどちらかを変えると、揃いつつ区別が付きます。
更新する時に気をつけること
過去のサムネイルを作り直す場合、次を確認してください。
- 過去の投稿と混ざらないか — 同じ見た目だと、新しい投稿と誤解されます
- 内容と合っているか — 見た目だけ新しくして中身が古いと、見た人が損をします
- 一括で変えるか、順に変えるか — 途中の状態が長く続くと、統一感が崩れます
2番目に注意してください。サムネイルを新しくすると、中身も新しいと受け取られます。見た目を更新するなら、本文の日付や数字も同時に確認してください。
作る前に決めておくと速い
1枚ごとに考えると時間がかかります。先に決めておくと、制作時間が半分以下になります。
- 使う書体を2つまで
- 使う色を3つまで
- 文字を置く位置を1か所に固定
- 背景の作り方を2〜3パターン用意
この4つを決めておけば、あとは差し替えるだけになります。毎回ゼロから考えると、続きません。続けることのほうが、1枚の完成度より効きます。