基礎・初心者 / 非公式Figmaガイド
Figmaデザイン確認チェックリスト
Figmaで作った画面を公開やCodex依頼の前に確認するチェック項目をまとめます。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
FigmaをWebデザインやAIガイド群で使う前の基本を整理します。 Figmaで作った画面を公開やCodex依頼の前に確認するチェック項目をまとめます。
Figmaで確認すること
Figmaでは、見た目だけでなく、目的、読者、導線、余白、スマホ表示、公開前の安全注意を分けて確認します。AIに任せる前に、人間が決める範囲を整理します。
役割分担の比較表
| 確認すること | Figmaで見ること | AIサイト群での役割 |
|---|---|---|
| 目的 | 何を設計するページかを決める | ChatGPTで文章、Figmaで設計、Codexで実装へつなぐ |
| レイアウト | 見出し、余白、カード、CTA、画像配置を見る | Canva素材やCodex実装へ渡しやすくする |
| スマホ確認 | 390px前後で読めるか確認する | Codex公開前チェックへつなぐ |
| 安全注意 | 共有範囲と未公開情報を確認する | HALやGitHub Secrets注意へつなぐ |
チェックリスト
- 作りたいものを決めた
- 親ページへ戻れる
- 次に読むページを決めた
- Figma公式サイトではない前提を明記している
- 個人情報、会社情報、顧客情報を入れていない
- 公式ロゴ、公式画像、公式UIスクリーンショットを使っていない
- 料金、仕様、提供範囲、成果を断定していない
安全注意
個人情報、会社情報、顧客情報、APIキー、token、Secrets、.env を掲載しないでください。Figmaファイルを外部AIへ渡すときは、伏せる情報と共有してよい情報を分けてから相談します。
AIサイト群の導線
見る順番を固定する
確認は影響の大きい順に見ると、時間を使い切りません。
- 文言 — 誤字、日付、金額、連絡先
- 狭い画面での崩れ
- 目的の行動に辿り着けるか
- 余白や色の統一
4番目から始めないでください。余白が数ピクセル違うことより、電話番号が間違っていることのほうが問題です。順番を毎回同じにすると、抜けが減ります。
文言だけを読み直す
デザインを見ている間、文字は「形」として処理されるので誤字が目に入りません。
- 見た目が固まってから、文章だけを読む
- 数字は声に出す — 日付、電話番号、金額
- 元の資料と1文字ずつ突き合わせる
2番目が効きます。連絡先の数字は、間違っていても文章として違和感がありません。目で追うと飛ばします。
他人に見てもらう
作った本人は前提を知っているので、伝わっているかを判断できません。
- 説明せずに見せる — 説明が要る時点で伝わっていません
- 何のページか聞く
- どこで詰まったか聞く
2番目の答えがずれていたら、装飾ではなく構成を直してください。項目が決まっていれば、内容を知らない人のほうが正確に確認できます。
項目を増やしすぎない
チェックリストは、長いほど使われなくなります。
- 5項目までに絞る
- 増やしたくなったら、まず1つ削れないか考える
- 省いてよい場面を決めておく — 自分用のメモ、作り直す前提の下書き
3番目があると、省いてはいけない場面で手を抜かなくなります。「全部やる」と決めたリストは、いずれ全部やらなくなります。