AIガイド群横断 / 非公式Figmaガイド
FigmaでAIサイト制作を設計する
AIガイド群のようなサイトを設計、実装、公開確認へ進める流れです。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
Figma、Codex、Canva、ChatGPT、GitHub、HAL、Copilotの役割を比較します。 AIガイド群のようなサイトを設計、実装、公開確認へ進める流れです。
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サイト群の導線
どこまでAIに任せるか
サイト制作でAIを使う場合、工程で分けると判断しやすくなります。
- 任せやすい — 案を数多く出す、文言の言い換え、繰り返しの調整、コードの下書き
- 任せにくい — 誰に向けるか決める、優先順位を決める、公開してよいか判断する
境目は「正解が1つに決まらないもの」です。決まらないものを任せると、それらしいが根拠のない案が返ってきます。
進める順番
いきなり画面を作らせると、後戻りが大きくなります。
- そのサイトで何をしてほしいか決める（自分で）
- 載せる内容を書き出す（自分で）
- 文章にする・言い換える（任せてよい）
- 版面に配置する
- 実装する（任せてよい）
- 数字・固有名詞・素材の条件を確認する（自分で）
1・2・6は人が決める工程です。ここを飛ばすと、見た目は整っているのに中身がずれた成果物になります。
公開前に必ず確認すること
できあがったものは、次を自分で確認してください。
- 数字と固有名詞 — 根拠のない数字が入ることがあります
- 断定表現 — 「必ず」「No.1」は根拠が要ります
- 使った素材の条件
- 連絡先と会社情報 — 実在の情報になっているか
4番目に注意してください。example.com のようなダミーが残ったまま公開される例があります。実際に押して確かめてください。
作った後の保守を考えておく
作って終わりにすると、数か月で古くなります。
- 更新が必要な箇所を一覧にする — 料金、日付、実績
- 誰が直すか決める
- 直せる形にしておく — 画像に文字を焼き込みすぎない
3番目が後から効きます。文字が画像になっていると、少しの修正でも作り直しになります。