ChatGPTとFigmaを組み合わせる方法｜Webデザイン・ワイヤーフレーム・コーディングを効率化する使い方

Web制作やUIデザインをしていると、Figmaを使う機会が増えてきました。

Figmaは、ワイヤーフレーム作成、Webデザイン、UI設計、プロトタイプ、コメント共有、Dev Modeでの実装確認など、Web制作のさまざまな場面で活用できる便利なツールです。

一方で、最近はChatGPTを使って、文章作成、構成案作成、アイデア出し、コード作成、改善提案などを行う人も増えています。

では、ChatGPTとFigmaを組み合わせると、何ができるのでしょうか。

結論から言うと、ChatGPTとFigmaを組み合わせることで、Web制作の「考える作業」と「形にする作業」を効率化できます。

例えば、ChatGPTでLPの構成案を作り、それをFigmaでワイヤーフレームにする。

ChatGPTでキャッチコピーやCTA文言を作り、Figmaのデザインに反映する。

Figmaで作ったデザインを見ながら、ChatGPTに改善案やコーディング方針を相談する。

このように使うことで、ゼロから悩む時間を減らし、より早く、より整理されたデザイン制作ができるようになります。

Figma公式でも、Figma AIにはデザイン生成・画像生成・編集・検索などを支援する機能があり、Figma Makeはアイデアや既存Figmaデザインからプロトタイプ、Webアプリ、インタラクティブUIを作るためのAI搭載ツールとして説明されています。(help.figma.com) また、FigmaはChatGPTとの連携についても公式ヘルプで案内しており、ChatGPTからFigma関連のファイル生成や作業につなげられる例が紹介されています。(help.figma.com)

この記事では、ChatGPTとFigmaを組み合わせる方法について、初心者にもわかりやすく解説します。

Webデザイン、ワイヤーフレーム、LP制作、コンポーネント設計、コーディング、チーム共有まで、実務で使いやすい活用例を紹介します。

ChatGPTとFigmaの役割の違い

まず、ChatGPTとFigmaは役割が違います。

Figmaは、デザインを視覚的に作るツールです。

画面を作る、余白を調整する、文字を配置する、画像を入れる、コンポーネントを作る、プロトタイプを作る、といった「見える形」にする作業が得意です。

一方、ChatGPTは、文章やアイデアを整理するツールです。

構成を考える、コピーを書く、改善案を出す、チェックリストを作る、コードを書く、説明文を作る、といった「考えを言語化する作業」が得意です。

つまり、ざっくり言うと以下のような関係です。

ChatGPT：考える・整理する・文章化する
Figma：配置する・見せる・共有する

この2つを組み合わせると、Web制作の流れがかなりスムーズになります。

例えば、いきなりFigmaを開いてデザインを始めると、何をどの順番で配置すればよいか迷うことがあります。

そこで先にChatGPTで構成を整理しておけば、Figma上で迷わずワイヤーフレームを作りやすくなります。

組み合わせ方1：サイト構成をChatGPTで作る

FigmaでWebデザインを作る前に、まずChatGPTでサイト構成を作る方法があります。

特に、LPやサービスサイトの構成を考えるときに便利です。

例えば、次のように依頼します。

以下の条件で、LPの構成案を作ってください。

目的：無料相談の申し込みを増やす
ターゲット：Web担当者がいない中小企業の経営者
サービス：WordPressサイトの保守・更新代行
悩み：更新できない、セキュリティが不安、制作会社と連絡が取れない
ゴール：お問い合わせフォームへの送客

各セクションの順番、役割、入れる内容、CTAの位置を整理してください。

すると、ChatGPTは以下のような構成案を出せます。

1. ファーストビュー
2. よくある悩み
3. サービス概要
4. 選ばれる理由
5. 対応範囲
6. 料金プラン
7. よくある質問
8. お問い合わせCTA

この構成をもとに、Figmaで各セクションを作っていきます。

いきなりFigmaで考えるよりも、まずテキストで構成を整理してから作る方が、迷いが少なくなります。

組み合わせ方2：ワイヤーフレームのたたき台を作る

ChatGPTは、ワイヤーフレームのたたき台作成にも向いています。

ワイヤーフレームとは、Webページの設計図のようなものです。

色や装飾を作り込む前に、どこに見出しを置くか、どこに画像を置くか、どこにボタンを置くかを整理します。

ChatGPTにセクションごとの構成を出してもらい、それをFigmaに落とし込めば、ワイヤーフレーム作成がかなり早くなります。

例えば、ChatGPTに次のように依頼できます。

以下のLP構成をもとに、Figmaで作るワイヤーフレームの配置案を作ってください。

各セクションについて、
・見出し
・本文
・画像の有無
・CTAボタン
・PC版のレイアウト
・スマホ版のレイアウト
を整理してください。

このようにすると、Figmaでどのように配置すればよいかが見えやすくなります。

Figma上では、最初から完成デザインを作る必要はありません。

まずは以下のような低精度ワイヤーフレームで十分です。

画像：グレーの四角
見出し：太めのテキスト
本文：ダミーテキスト
ボタン：シンプルな長方形
セクション：余白で区切る

ChatGPTで構成を作り、Figmaで視覚化する。

この流れは、初心者にもかなりおすすめです。

組み合わせ方3：キャッチコピーを作る

Figmaでデザインを作っていると、見出しやキャッチコピーで手が止まることがあります。

特にファーストビューのコピーは重要です。

ユーザーがページを開いた瞬間に、

「自分に関係がありそう」
「このサービスは役に立ちそう」
「もう少し読んでみよう」

と思ってもらう必要があります。

ChatGPTを使えば、キャッチコピー案を複数出せます。

例えば、次のように依頼します。

以下のサービスLPのファーストビューに使うキャッチコピーを20個提案してください。

サービス：WordPress保守・更新代行
ターゲット：Web担当者がいない中小企業
強み：更新作業、バックアップ、セキュリティ、軽微な修正まで月額対応
雰囲気：安心感、わかりやすさ、売り込みすぎない

すると、複数のコピー案を比較できます。

その中から良いものを選び、Figmaに入れて見た目を確認します。

コピーは、文章だけで見るのと、Figma上でデザインに入れて見るのとでは印象が変わります。

そのため、ChatGPTで複数案を作り、Figmaで実際に配置して比較するのがおすすめです。

組み合わせ方4：CTA文言を改善する

CTAとは、Call To Actionの略で、ユーザーに行動を促す部分です。

例えば、以下のようなボタン文言です。

お問い合わせする
無料で相談する
資料をダウンロードする
LINEで相談する
予約する
今すぐ申し込む

CTA文言は、少しの違いで印象が変わります。

例えば、「お問い合わせ」だけだと少し硬い印象になることがあります。

一方で、「まずは無料で相談する」にすると、行動のハードルが下がる場合があります。

ChatGPTには、CTA文言の候補を出してもらえます。

無料相談につなげるLPのCTA文言を30個提案してください。
売り込み感が強すぎず、初心者でも押しやすい表現にしてください。

出てきた候補をFigma上のボタンに入れて、見た目や文字量を確認します。

ボタン内に入れると長すぎる文言もあります。

その場合は、Figmaで実際に配置して、ボタン幅やスマホ表示も確認しましょう。

組み合わせ方5：Figmaの余白や構成をChatGPTに相談する

Figmaでデザインを作っていると、

「この構成で読みやすいか」
「CTAの位置は自然か」
「セクションの順番はこれでよいか」
「情報量が多すぎないか」

と迷うことがあります。

このようなときは、Figmaで作った内容をテキスト化して、ChatGPTに相談できます。

例えば、以下のように伝えます。

以下のLP構成を見て、ユーザー心理の流れとして不自然な点を教えてください。

1. ファーストビュー
2. サービス概要
3. 料金
4. お客様の声
5. よくある質問
6. お問い合わせ

目的は無料相談の申し込みです。
ターゲットはWeb担当者がいない中小企業の経営者です。

すると、ChatGPTは改善点を出してくれます。

例えば、

料金を出す前に、選ばれる理由や対応範囲を説明した方がよい
悩みの提示がないため、自分ごと化しにくい
CTAが後半だけなら、途中にも配置した方がよい

といった意見です。

もちろん、最終判断は人間が行います。

ただ、ChatGPTをレビュー役として使うことで、客観的な視点を得やすくなります。

組み合わせ方6：Figmaのコンポーネント設計に使う

Figmaで実務デザインを作るなら、コンポーネント設計が重要です。

コンポーネントとは、再利用できるデザインパーツのことです。

例えば、

ボタン
カード
フォーム
ヘッダー
フッター
CTA
FAQ
ナビゲーション

などです。

ChatGPTは、どのパーツをコンポーネント化すべきか整理するのにも使えます。

例えば、次のように依頼します。

LPデザインをFigmaで作ります。
以下の構成の中で、コンポーネント化しておくべきパーツを整理してください。

1. ファーストビュー
2. 悩みの提示
3. サービス紹介
4. 選ばれる理由
5. 料金
6. FAQ
7. CTA

すると、以下のような提案ができます。

共通ボタン
セクション見出し
カード
FAQアイテム
料金プランカード
CTAブロック
アイコン付きリスト

これをもとにFigmaでコンポーネントを作れば、修正に強いデザインデータになります。

また、VariantsやComponent propertiesの設計案もChatGPTに相談できます。

組み合わせ方7：デザインルールを整理する

Figmaでチーム制作をする場合、デザインルールを整理しておくことが大切です。

色、フォント、余白、角丸、ボタン、カードなどのルールがバラバラだと、ページ全体の統一感がなくなります。

ChatGPTには、デザインルールの整理も依頼できます。

例えば、

FigmaでWebサイトのデザインシステムを作りたいです。
小規模なコーポレートサイト向けに、最低限整理しておくべきルールを一覧にしてください。

すると、以下のような項目を出せます。

カラー
タイポグラフィ
余白
角丸
ボタン
フォーム
カード
アイコン
コンポーネント命名
画像ルール

これをFigmaのスタイルガイドページにまとめると、チームで共有しやすくなります。

Figmaでは、ライブラリを使ってコンポーネント、スタイル、Variablesなどを共有できます。チームで再利用するボタンやアイコン、カラー、値をまとめて管理できるため、ChatGPTで設計案を整理し、Figmaで実際のルールとして作る流れが相性良いです。(help.figma.com)

組み合わせ方8：Figmaデータのチェックリストを作る

デザインデータを作った後、確認すべきことはたくさんあります。

例えば、

PC版とスマホ版があるか
フォントサイズは統一されているか
余白ルールは崩れていないか
コンポーネントが使われているか
画像を書き出せるか
CTAの文言は適切か
コメントが残っていないか
Dev Modeで確認しやすいか

ChatGPTを使えば、Figma確認用のチェックリストを作れます。

Figmaデザインをコーディング前に確認するチェックリストを作ってください。
デザイナー・コーダー・ディレクター向けに分けてください。

このように依頼すれば、実務で使えるチェックリストを作れます。

そのチェックリストをFigmaファイルの表紙ページやNotion、Google Docsなどに置いておくと、チームで使いやすくなります。

組み合わせ方9：Dev Modeで確認した内容をCSSにする

FigmaにはDev Modeがあります。

Dev Modeは、コーダーやエンジニアがデザインを確認しやすくするためのモードです。

Figma公式ヘルプでは、Dev Modeはデザインファイルを検査・移動するための開発者向けインターフェースで、選択したレイヤーのサイズ、余白、色、フォント、コードスニペットなどを確認できると説明されています。(help.figma.com)

Dev Modeで確認した情報をもとに、ChatGPTへCSSの整理を依頼することもできます。

例えば、Figmaでボタンの情報を確認して、以下のように入力します。

Figmaで確認したボタンの仕様は以下です。

幅：中身に合わせる
padding：上下12px、左右24px
背景色：#005BAC
文字色：#FFFFFF
角丸：999px
フォントサイズ：16px
フォントウェイト：700
アイコンとのgap：8px

この仕様をもとに、保守しやすいCSSを書いてください。

すると、以下のようなCSSに整理できます。

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background-color: #005bac;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

Figmaから出てくるコードをそのまま使うのではなく、ChatGPTで実装しやすいCSSへ整理するのがおすすめです。

組み合わせ方10：レスポンシブ対応を考える

FigmaでPC版とスマホ版を作っている場合、ChatGPTにレスポンシブ実装の考え方を相談できます。

例えば、Figma上で以下のようなデザインだったとします。

PC：カード3列
スマホ：カード1列
PC：画像とテキスト横並び
スマホ：画像が上、テキストが下
PC：セクション余白120px
スマホ：セクション余白64px

この内容をChatGPTに伝えると、CSSの考え方を整理できます。

このFigmaデザインをレスポンシブ対応する場合のCSS設計を考えてください。
PCでは3カラム、スマホでは1カラムにしたいです。

すると、以下のようなコード案を作れます。

.card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 767px) {
  .card-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

ChatGPTは、Figmaの見た目を直接完璧に理解するわけではありません。

しかし、Figmaで確認した情報をテキストで伝えれば、実装方針やCSS作成の補助として使えます。

組み合わせ方11：Figmaから画像生成や素材作成につなげる

ChatGPTは、画像生成用のプロンプト作成にも使えます。

例えば、Figmaでバナーやサムネイルを作るとき、背景画像やイラスト素材が必要になることがあります。

そのときにChatGPTへ次のように依頼できます。

Figmaで使うWeb制作向けのサムネイル背景画像を生成したいです。
テーマは「AIとFigmaでワイヤーフレームを作る方法」です。
画像生成AIに入れるプロンプトを作ってください。

ChatGPTで画像生成用プロンプトを作り、そのプロンプトを画像生成ツールで使い、できた画像をFigmaに配置する流れです。

Figma自体にもAI画像生成・編集機能があり、Figma DesignやFigJam、Figma Slides、Figma Sitesなどでテキストプロンプトから画像生成や編集ができる機能が公式ヘルプで案内されています。(help.figma.com)

つまり、ChatGPTで「どんな画像が必要か」を言語化し、Figmaや画像生成AIで素材化する、という使い方もできます。

組み合わせ方12：チーム共有用の説明文を作る

Figmaで作ったデザインをチームやクライアントに共有するとき、説明文が必要になることがあります。

例えば、

今回のデザイン方針
ファーストビューの意図
CTA配置の理由
スマホ版で変更した点
前回からの修正内容

こうした説明文もChatGPTで作れます。

例えば、次のように依頼します。

Figmaで作ったLPデザインをクライアントに共有します。
以下の内容をもとに、やわらかく丁寧な説明文を作ってください。

・ファーストビューは無料相談への導線を強調
・悩みの提示を前半に配置
・料金前に選ばれる理由を入れて不安を減らす
・スマホではCTAボタンを押しやすく調整

すると、クライアント向けにわかりやすい説明文を作れます。

デザインを見せるだけではなく、「なぜこの構成にしたのか」を説明できると、説得力が上がります。

組み合わせ方13：Figma MakeとChatGPTを使う

Figma Makeを使うと、文章で指示してプロトタイプやWebアプリに近いものを生成できます。

Figma公式ヘルプでは、Figma MakeはAI搭載のprompt-to-appツールで、アイデアや既存のFigmaデザインを機能的なプロトタイプ、Webアプリ、インタラクティブUIとして具現化できると説明されています。(help.figma.com)

ChatGPTは、このFigma Makeに入れるプロンプト作成にも使えます。

例えば、Figma Makeで作りたいものをChatGPTに整理してもらいます。

Figma Makeで、Web制作会社のLPプロトタイプを作りたいです。
目的、ターゲット、必要なセクション、CTA、雰囲気を整理したプロンプトを作ってください。

ChatGPTが出したプロンプトをFigma Makeに入れれば、より整理された指示で生成できます。

AIツールを使うときは、いきなり短い指示を入れるよりも、ChatGPTで条件を整理してから入れる方が精度が上がりやすいです。

ChatGPTとFigmaを組み合わせる基本フロー

実務で使うなら、以下の流れがおすすめです。

1. ChatGPTで目的・ターゲットを整理する
2. ChatGPTで構成案を作る
3. ChatGPTで見出し・CTA文言を作る
4. Figmaでワイヤーフレームを作る
5. Figmaでデザインを作る
6. ChatGPTで改善点を相談する
7. Figmaで修正する
8. Dev Modeで数値を確認する
9. ChatGPTでCSSや実装方針を整理する
10. チームやクライアントへ共有する

この流れにすると、ChatGPTとFigmaの役割が明確になります。

ChatGPTは、考える工程を助ける。

Figmaは、見える形にする。

この役割分担が大切です。

実務で使えるプロンプト例

ここからは、ChatGPTとFigmaを組み合わせるときに使いやすいプロンプト例を紹介します。

サイト構成を作るプロンプト

以下の条件で、コーポレートサイトのトップページ構成を作ってください。

業種：
ターゲット：
サイトの目的：
強み：
必要なCTA：

各セクションの順番、役割、入れる内容を整理してください。

ワイヤーフレーム案を作るプロンプト

以下のサイト構成をもとに、Figmaで作るワイヤーフレームの配置案を作ってください。

各セクションについて、
・見出し
・本文
・画像
・ボタン
・PC版レイアウト
・スマホ版レイアウト
を整理してください。

Figma用コンポーネントを整理するプロンプト

以下のLP構成をもとに、Figmaでコンポーネント化すべきパーツを一覧にしてください。
ボタン、カード、見出し、CTA、FAQなど、実務で再利用しやすい単位で整理してください。

デザイン改善を相談するプロンプト

以下のLP構成について、無料相談につなげる流れとして改善点を教えてください。
ターゲットは初心者で、売り込み感を強くしすぎない方向です。

CSS作成を依頼するプロンプト

Figmaで確認した以下のデザイン仕様をもとに、HTML/CSSを書いてください。
レスポンシブ対応も含めてください。

PC：
SP：
カラー：
余白：
フォント：

ChatGPTとFigmaを組み合わせるメリット

ChatGPTとFigmaを組み合わせるメリットはたくさんあります。

主なメリットは以下です。

構成作りが早くなる
ワイヤーフレーム作成がスムーズになる
コピーやCTA文言に悩む時間が減る
デザイン改善の視点を得られる
コーディング方針を整理できる
チーム共有用の説明文を作れる
複数案を比較しやすくなる

特に、初心者にとっては「何から考えればよいかわからない」という状態を減らせるのが大きいです。

Figmaだけを開いて悩むのではなく、まずChatGPTで考えを整理してからFigmaに入る。

これだけでも制作スピードはかなり変わります。

注意点1：ChatGPTに丸投げしない

ChatGPTは便利ですが、丸投げはおすすめしません。

例えば、

いい感じのLP構成を作って

だけでは、一般的な構成になりやすいです。

より精度を上げるには、以下を伝える必要があります。

目的
ターゲット
サービス内容
悩み
強み
競合との差別化
ゴール
トーン

ChatGPTは、与えられた情報をもとに回答します。

情報が少ないほど、出力も浅くなります。

実務では、ヒアリングした内容やクライアントの強みを入れて依頼することが大切です。

注意点2：Figma上で必ず見た目を確認する

ChatGPTで良さそうな見出しや構成ができても、Figmaに入れると印象が変わることがあります。

例えば、文章としては良いコピーでも、ボタンに入れると長すぎる場合があります。

セクション構成としては自然でも、Figma上で見ると情報量が多すぎる場合があります。

そのため、ChatGPTの出力は必ずFigmaで視覚的に確認しましょう。

デザインは、文章だけでは判断できません。

余白、文字量、視線誘導、スマホ表示、CTAの見え方まで確認する必要があります。

注意点3：実装しやすさも考える

Figmaで見た目がきれいでも、実装しにくい構造になっている場合があります。

例えば、

余白がバラバラ
画像サイズが不規則
PCとスマホで構造が大きく違いすぎる
コンポーネント化されていない
hoverやフォーム状態がない

このような状態だと、コーディング時に迷いやすくなります。

ChatGPTには、実装しやすい構造かどうかを相談できます。

このFigmaデザインをコーディングする前提で、実装しにくくなりそうなポイントを教えてください。

また、Dev Modeで確認した数値をChatGPTに渡せば、CSS設計の相談もできます。

注意点4：AIの内容は必ず確認する

ChatGPTが出した文章や構成は、必ず人間が確認しましょう。

特に、以下は注意が必要です。

料金
実績
法的な表現
医療・金融など専門性が高い内容
クライアントのサービス内容
競合比較

AIはそれらしい文章を作ることができますが、事実確認が必要な内容では間違える可能性があります。

そのままFigmaに入れてクライアントに見せるのではなく、内容を確認してから使いましょう。

まとめ

ChatGPTとFigmaを組み合わせると、Web制作やUIデザインの流れを大きく効率化できます。

ChatGPTは、構成案、ワイヤーフレーム案、コピー、CTA、チェックリスト、改善案、CSS方針など、考える作業や文章化が得意です。

Figmaは、ワイヤーフレーム、デザイン、コンポーネント、プロトタイプ、コメント共有、Dev Modeでの確認など、視覚化と共有が得意です。

この2つを組み合わせることで、

ChatGPTで考える
Figmaで形にする
ChatGPTで改善する
Figmaで共有する

という流れが作れます。

特に初心者の方は、いきなりFigmaを開いて悩むのではなく、まずChatGPTで目的、ターゲット、構成を整理するところから始めるのがおすすめです。

その後、Figmaでワイヤーフレームに落とし込み、必要に応じてChatGPTで見出しやCTA、改善案を作っていくと、制作がかなりスムーズになります。

ただし、ChatGPTに丸投げするのではなく、最終的な判断は人間が行うことが大切です。

AIはあくまで考えるための補助です。

目的に合っているか。

ターゲットに伝わるか。

Figma上で見やすいか。

実装しやすいか。

この判断は、Web制作者やデザイナーの大切な役割です。

ChatGPTとFigmaをうまく組み合わせれば、作業時間を短縮しながら、より整理されたデザイン制作ができるようになります。

これからWeb制作やFigmaを学ぶ方は、ぜひChatGPTを「構成と改善の相棒」として活用してみてください。