GitHub連携・制作管理 / 非公式Figmaガイド
Figma GitHub Codex連携
Figma設計、Codex修正、GitHub確認を役割別に整理します。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
Figma設計、Codex実装、GitHub管理、PR確認、Secrets注意をつなげます。 Figma設計、Codex修正、GitHub確認を役割別に整理します。
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サイト群の導線
デザインとコードは別に管理する
デザインファイルをコードと同じ仕組みで管理しようとすると、どちらの運用も窮屈になります。
- コード — 行単位で差分が取れる。分岐して合流できる
- デザイン — 画像に近く、差分が人間に読める形になりません
つなぐのは「履歴」ではなく「対応関係」です。どのデザインがどの実装に対応しているかが分かれば足ります。履歴はそれぞれの仕組みで管理してください。
対応関係をどこに書くか
次のどこかに書いておくと、後から追えます。
- 変更の説明 — 対応するデザインのURL
- デザイン側のフレーム名 — 実装側の画面名と揃える
- 課題管理のチケット — 両方のURLを1か所に
1番目が最も手間が少なく効きます。レビューする人は、コードだけ見ても「これで合っているか」を判断できません。デザインのURLがあれば、その場で見比べられます。
書き出した素材の置き場所
画像をどこで管理するかは、先に決めておいてください。
- コードと一緒に置く — 版がずれない。ただし容量が増えます
- 別の場所に置いて参照する — 軽いが、差し替えに気づけないことがあります
途中で方針を変えないでください。混在すると「どちらが最新か」が分からなくなります。ファイル名に日付を入れておくと、後から見て判断できます。
権限を渡す前に決めること
制作の外注や共同作業で権限を渡す場合、先に決めておくと揉めません。
- いつまで必要か — 案件終了で外す前提にする
- 誰が外すか — 渡した本人が管理する
- どこまで見せるか — 他の案件が見えない構成にする
権限は増える方向にだけ動き、誰も減らしません。渡す時点で「いつ外すか」を記録してください。