Codex連携 / 非公式Figmaガイド
Figma設計をCSSへ反映する前に
余白、色、カード、ボタン、レスポンシブをCSSへ落とす前に確認します。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
Figma設計をCodexへ渡す前の指示、停止条件、HTML/CSS化を整理します。 余白、色、カード、ボタン、レスポンシブをCSSへ落とす前に確認します。
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サイト群の導線
渡す前に値を整理する
デザインをそのまま渡すと、実装側で定義が増えます。渡す前に次を減らしてください。
- 色 — 似た色が並んでいないか。全部書き出して数える
- 文字の大きさ — 5〜6種類に収める
- 余白 — 基準の倍数だけを使う
1番目が効きます。感覚で少しずつ変えた色は、実装では全部別の値になります。統合できるものはまとめてください。
単位と基準を決めておく
実装で迷いが出ないよう、次を決めてから渡してください。
- 文字の大きさを固定にするか、可変にするか
- 余白の基準値 — 4か8のどちらの倍数か
- 角の丸みの種類 — 2〜3種類に絞る
決めずに渡すと、画面ごとに違う値が使われます。後から統一するのは、最初に決めるより何倍も手間がかかります。
見た目だけでは伝わらないこと
静止した画面から読み取れない指定があります。添えてください。
- 文字が想定より長くなった時 — 折り返すか、省略するか
- 画面幅が変わった時に何から隠すか
- 押した時・読み込み中・無効の見え方
2番目はデザインの判断です。「狭くなったら何を残すか」を実装に委ねないでください。優先順位を決めるのは作った側の役割です。
決めた値を一覧にしておく
色・文字サイズ・余白の値は、1か所にまとめておくと後から探せます。
- それぞれの値と、使う場面
- いつ決めたか
- 変えた場合の影響範囲
一覧が無いと、次に触る人が新しい値を足します。これが積み重なると、似た値が何十個も並ぶ状態になります。