AIガイド群横断 / 非公式Figmaガイド
FigmaとGitHubの違い
Figmaは設計、GitHubは変更管理やPR確認という違いを整理します。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
Figma、Codex、Canva、ChatGPT、GitHub、HAL、Copilotの役割を比較します。 Figmaは設計、GitHubは変更管理やPR確認という違いを整理します。
Figmaで確認すること
Figmaでは、見た目だけでなく、目的、読者、導線、余白、スマホ表示、公開前の安全注意を分けて確認します。AIに任せる前に、人間が決める範囲を整理します。
役割分担の比較表
| 確認すること | Figmaで見ること | AIサイト群での役割 |
|---|---|---|
| 目的 | 何を設計するページかを決める | ChatGPTで文章、Figmaで設計、Codexで実装へつなぐ |
| レイアウト | 見出し、余白、カード、CTA、画像配置を見る | Canva素材やCodex実装へ渡しやすくする |
| スマホ確認 | 390px前後で読めるか確認する | Codex公開前チェックへつなぐ |
| 安全注意 | 共有範囲と未公開情報を確認する | HALやGitHub Secrets注意へつなぐ |
チェックリスト
- ツールごとの役割を分けた
- AIに任せすぎない
- 公開前に人間が確認した
- Figma公式サイトではない前提を明記している
- 個人情報、会社情報、顧客情報を入れていない
- 公式ロゴ、公式画像、公式UIスクリーンショットを使っていない
- 料金、仕様、提供範囲、成果を断定していない
安全注意
個人情報、会社情報、顧客情報、APIキー、token、Secrets、.env を掲載しないでください。Figmaファイルを外部AIへ渡すときは、伏せる情報と共有してよい情報を分けてから相談します。
AIサイト群の導線
そもそも役割が違う
この2つは競合するものではありません。扱うものが違います。
- デザインツール — 見た目を作り、共有し、実装へ渡す
- コード管理 — 変更の履歴を残し、複数人の作業を合流させる
「どちらを使うか」ではなく「両方をどうつなぐか」が実際の問題です。比較記事を読む時は、何を比べているのかを確認してください。
デザインの履歴管理が難しい理由
デザインファイルをコードと同じ仕組みで管理しようとすると、うまくいきません。
- 差分が人間に読める形にならない — 画像に近いため
- 分岐して合流させにくい
- ファイルが大きい
そのため、デザインの履歴はツール内の機能で管理し、コードとは別に持つのが現実的です。両方を1つに入れようとすると、どちらの運用も窮屈になります。
つなぐのは「対応関係」
履歴ではなく、どのデザインがどの実装に対応するかが分かれば足ります。
- 変更の説明に、対応するデザインのURLを書く
- フレーム名と画面名を揃える
- 課題管理に両方のURLを置く
1番目が最も手間が少なく効きます。レビューする人は、コードだけ見ても合っているか判断できません。
書き出した素材の置き場所
画像をどこで管理するかは先に決めてください。
- コードと一緒に置く — 版がずれない。容量は増えます
- 別の場所に置いて参照する — 軽いが、差し替えに気づけないことがあります
途中で方針を変えないでください。混在すると「どちらが最新か」が分からなくなります。ファイル名に日付を入れておくと判断できます。