Codex連携 / 非公式Figmaガイド
Figma Codex実装エラー確認
HTML/CSS化後の表示崩れ、リンク切れ、画像404を確認します。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
Figma設計をCodexへ渡す前の指示、停止条件、HTML/CSS化を整理します。 HTML/CSS化後の表示崩れ、リンク切れ、画像404を確認します。
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番目を先に見ると、そこで時間が尽きます。余白が数ピクセル違うことより、文言が古いことのほうが問題です。
デザインと違って見える時の切り分け
「デザインと違う」と感じた時、原因は3つに分かれます。
- 指定が伝わっていない — デザイン側に書いていなかった
- 実装の都合で変えた — 理由があるはずなので聞く
- 単純な見落とし
1番目が最も多い原因です。文字が長くなった時、データが無い時、押した後の状態——これらはデザインに描かれないまま渡ることがよくあります。描いていない状態は、実装側が決めることになります。
指摘の伝え方
直してほしい箇所は、伝え方で手戻りが変わります。
- どの画面のどこか — 画面名と位置
- 今どうなっていて、どうしたいか
- 優先度 — 直さないと出せないのか、余裕があれば直したいのか
3番目を付けてください。すべてを同じ強さで伝えると、重要な指摘が埋もれます。数が多い時ほど、順位を付けて渡すほうが早く直ります。
直った後にもう一度見る
指摘した箇所が直っても、別の場所が崩れていることがあります。
- 直した箇所の周辺
- 同じ部品を使っている他の画面
- 狭い画面での見え方
2番目が見落とされます。共通の部品を直すと、使っている全画面に影響します。1か所だけ確認して終わらせないでください。