GitHub連携・制作管理 / 非公式Figmaガイド
Figma GitHub制作ワークフロー
Figma設計、Codex実装、GitHub管理、PR確認の流れを整理します。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
Figma設計、Codex実装、GitHub管理、PR確認、Secrets注意をつなげます。 Figma設計、Codex実装、GitHub管理、PR確認の流れを整理します。
Figmaで確認すること
Figmaでは、見た目だけでなく、目的、読者、導線、余白、スマホ表示、公開前の安全注意を分けて確認します。AIに任せる前に、人間が決める範囲を整理します。
役割分担の比較表
| 確認すること | Figmaで見ること | AIサイト群での役割 |
|---|---|---|
| 目的 | 何を設計するページかを決める | ChatGPTで文章、Figmaで設計、Codexで実装へつなぐ |
| レイアウト | 見出し、余白、カード、CTA、画像配置を見る | Canva素材やCodex実装へ渡しやすくする |
| スマホ確認 | 390px前後で読めるか確認する | Codex公開前チェックへつなぐ |
| 安全注意 | 共有範囲と未公開情報を確認する | HALやGitHub Secrets注意へつなぐ |
チェックリスト
- PRとdiffを確認した
- Secretsや.envをcommitしない
- privateでも安全と思い込まない
- Figma公式サイトではない前提を明記している
- 個人情報、会社情報、顧客情報を入れていない
- 公式ロゴ、公式画像、公式UIスクリーンショットを使っていない
- 料金、仕様、提供範囲、成果を断定していない
安全注意
個人情報、会社情報、顧客情報、APIキー、token、Secrets、.env を掲載しないでください。Figmaファイルを外部AIへ渡すときは、伏せる情報と共有してよい情報を分けてから相談します。
AIサイト群の導線
作業の受け渡しで決めること
デザインと実装を行き来する場合、先に決めておくと手戻りが減ります。
- どの単位で渡すか — 画面ごとか、機能ごとか
- 渡した後にデザインを変えてよいか — 変える場合の伝え方
- 誰が確認するか
2番目が最も揉めます。実装が進んでいる最中にデザインを直すと、両方の作業が中断されます。気づいた点は書き留めて、区切りでまとめて反映してください。
共通部分を先に固める
渡す順番で作業量が変わります。
- 共通部分を先に — ヘッダー、フッター、ボタン、文字の大きさ
- 個別の画面は後に
- 動きのある部分は最後
共通部分を先に確定させると、以降の画面で同じ議論を繰り返さずに済みます。逆順で進めると、画面ごとに違う値が使われます。
記録を残しておく
後から「なぜこうなっているか」を辿れるようにしてください。
- どの版を渡したか
- 変更した理由 — 見た目の好みか、制約によるものか
- 確認していない部分
2番目が効きます。理由が分からない指定は、次に触る人が変えてよいか判断できず、そのまま残ります。1行で構いません。
止まった時にどうするか決めておく
作業が止まる原因はいくつかあり、先に決めておくと待ち時間が減ります。
- 判断待ち — 誰が決めるかを事前に決めておく
- 素材待ち — 仮のもので進めてよいか
- 確認待ち — いつまでに返すか
2番目を決めておくと止まりません。「素材が来るまで待つ」より「仮で組んでおいて差し替える」ほうが、全体が早く終わります。