ChatGPT連携 / 非公式Figmaガイド
ChatGPTでLP文章を作りFigmaへ渡す
LPの見出し、比較、FAQ、CTA文章をFigma設計へつなげます。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
ChatGPTで文章や指示文を整え、Figmaで設計し、Codexへつなげます。 LPの見出し、比較、FAQ、CTA文章をFigma設計へつなげます。
Figmaで確認すること
Figmaでは、見た目だけでなく、目的、読者、導線、余白、スマホ表示、公開前の安全注意を分けて確認します。AIに任せる前に、人間が決める範囲を整理します。
役割分担の比較表
| 確認すること | Figmaで見ること | AIサイト群での役割 |
|---|---|---|
| 目的 | 何を設計するページかを決める | ChatGPTで文章、Figmaで設計、Codexで実装へつなぐ |
| レイアウト | 見出し、余白、カード、CTA、画像配置を見る | Canva素材やCodex実装へ渡しやすくする |
| スマホ確認 | 390px前後で読めるか確認する | Codex公開前チェックへつなぐ |
| 安全注意 | 共有範囲と未公開情報を確認する | HALやGitHub Secrets注意へつなぐ |
チェックリスト
- 文章や指示文を人間が確認した
- 個人情報を伏せた
- そのまま公開しない
- Figma公式サイトではない前提を明記している
- 個人情報、会社情報、顧客情報を入れていない
- 公式ロゴ、公式画像、公式UIスクリーンショットを使っていない
- 料金、仕様、提供範囲、成果を断定していない
安全注意
個人情報、会社情報、顧客情報、APIキー、token、Secrets、.env を掲載しないでください。Figmaファイルを外部AIへ渡すときは、伏せる情報と共有してよい情報を分けてから相談します。
AIサイト群の導線
文章を先に決めるか、レイアウトを先に決めるか
LPを作る時、この順番で迷います。結論としては文章が先です。
- 文章が先 — 伝えたいことが決まってから、それが収まる形を作る
- レイアウトが先 — 枠に合わせて文章を削るので、要点が落ちる
枠を先に作ると、「ここに30文字」という制約から書くことになり、言いたいことより収まりが優先されます。先に言いたいことを全部書き出し、削ってから配置してください。
AIに書かせた文章で必ず直すところ
下書きとしては使えますが、そのまま載せると次が起きます。
- 誰にでも当てはまる表現になる — 「あなたの課題を解決します」のような文
- 根拠のない数字が入る — 実績や割合を勝手に補うことがあります
- 同じ意味の言葉が並ぶ — 字数を埋めるために重複します
2番目は必ず確認してください。掲載する数字は、自分で出どころを言えるものだけにしてください。根拠のない数字は、指摘された時に説明できません。
1番目への対処は簡単です。「誰に向けた文か」を先に渡してください。対象が決まっていない状態で書かせると、必ず一般論になります。
字数を決めてから頼む
LPの文章は、置く場所によって必要な長さが決まっています。先に測ってから頼むと、手直しが減ります。
- 見出し — 15〜25字。スマホで1〜2行に収まる範囲
- 説明文 — 60〜100字
- ボタンの文言 — 10字前後。何が起きるかが分かる動詞
ボタンの文言は軽く見られがちですが、「送信」より「無料で相談する」のほうが、押した後に何が起きるかが分かります。押す前の不安を減らすのが、この10字の役割です。
書けた文章を声に出して読む
画面で読むと通ってしまう文章も、声に出すと引っかかります。とくに次が見つかります。
- 一文が長すぎる — 息が続かない箇所は、読む人も詰まります
- 同じ語尾が続く — 単調に感じる原因です
- 言い切っていない — 「〜かもしれません」が並ぶと、頼りなく読めます
3番目は、AIに書かせた文章で起きやすい形です。断定を避けた表現が続くと、何も言っていないページになります。事実として言えることは、言い切ってください。