GitHub連携・制作管理 / 非公式Figmaガイド
Figma GitHub Secrets注意
Figma設計やCodex作業とGitHub Secretsを混ぜないための注意です。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
Figma設計、Codex実装、GitHub管理、PR確認、Secrets注意をつなげます。 Figma設計やCodex作業とGitHub Secretsを混ぜないための注意です。
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サイト群の導線
デザインファイルに残る秘密情報
コードだけでなく、デザインファイルにも見せてはいけないものが混ざります。
- ダミーとして入れた実際の顧客名・金額
- 管理画面の設計に含まれるキーやID
- 非表示レイヤーやアートボード外の作業用素材
- 社内向けのコメント
1番目が最も多い形です。「あとで差し替える」と思って実データを入れると、そのまま残ります。仮置きには最初から架空の値を使ってください。
書き出した素材にも注意する
画像として書き出したものにも、意図しない情報が入ることがあります。
- 画面の写真 — タブ名、通知、ファイル一覧
- スクリーンショットの周辺 — 別のウィンドウ
- 写真に残る位置情報
資料の画像は、必要な部分だけを切り出してください。全画面を撮ると、写す予定のなかったものが必ず入ります。
入れてしまった後の対応
気づいた時点で対応すれば、被害を小さくできます。順番が重要です。
- その値を無効にする — キーなら失効させて作り直す
- 組織のものなら報告する
- ファイルや履歴から消す — 1番目より後でよい
消しても、既に渡った値は無効になりません。先に値そのものを使えなくしてください。
そもそも置かない仕組み
気をつけるだけでは、いずれ入ります。
- 実データを使わない — ダミー用の名前と数字を決めておく
- 共有の範囲を最初から絞る
- 公開前の確認を手順にする — 非表示レイヤーとコメントを見る
1番目が最も効きます。チームでダミーの氏名・住所・金額を決めておくと、誰が作っても実データが入りません。