SNSデザイン・投稿画像 / 非公式Figmaガイド
FigmaでYouTubeサムネイル設計
サムネイルの視認性、文字量、人物画像、権利注意を確認します。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
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サイト群の導線
一覧で小さく表示される前提
サムネイルは一覧で実際よりかなり小さく表示されます。作った画面で読めても、一覧では読めないことがあります。
- 文字は10字前後まで
- 太い書体を使う — 細い線は縮小で消えます
- 背景と文字の明暗を離す
- 顔や表情を入れると目に留まりやすい
確認は簡単です。縮小して、少し離れて見てください。そこで読めなければ一覧でも読めません。
再生時間の表示と重なる位置
サムネイルの右下には再生時間が重なります。ここに文字や重要な要素を置かないでください。
- 右下は空ける
- 四隅も余裕を持たせる — 表示場所によって切られます
- 要点は中央寄りに
実際の一覧で確認するのが確実です。作成画面では重なりが見えません。投稿前のプレビューまで進んで見てください。
内容と合っているか
目を引くことだけを狙うと、長期的に不利になります。
- 中身と食い違わない — 開いた人が「違った」と感じると次から開かれません
- 誇張しない — 「衝撃」「ヤバい」は内容が伴わないと逆効果
- 過去の投稿と見分けが付く — 揃えすぎると新旧が区別できません
入口で誇張しても、離脱が早まるだけです。クリックされることより、見続けてもらうことのほうが評価されます。
並べた時に揃うか
サムネイルは1枚ずつ作りますが、見られるのは並んだ状態です。
- 文字の位置を固定する
- 色は3色程度に決めておく
- 1要素だけ変える — 全部同じだと新旧が区別できません
先に型を1つ作り、流し込む形にしてください。1枚ずつ考えると必ずばらつき、制作時間も伸びます。