AIでワイヤーフレームを作る方法｜ChatGPTとFigmaを使った効率的なサイト設計の進め方

WebサイトやLPを作るとき、いきなりデザインから始めていませんか？

Web制作では、見た目のデザインを作る前に「ワイヤーフレーム」を作ることがとても大切です。

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

どこに見出しを置くのか、どこに画像を配置するのか、どの順番で情報を見せるのか、
どこにお問い合わせボタンを置くのかを整理するために作ります。

しかし、初心者の方にとってワイヤーフレーム作成は意外と難しい作業です。

「何から考えればいいかわからない」
「ページ構成が思いつかない」
「情報の順番に迷う」
「Figmaを開いても手が止まる」
「クライアントに見せる形にするまで時間がかかる」

このような悩みを持つ方も多いのではないでしょうか。

そこで活用したいのがAIです。

ChatGPTのようなAIを使えば、ページ構成の整理、ターゲットの明確化、
必要なセクションの洗い出し、ワイヤーフレームのたたき台作成、見出しやCTA文言の提案まで効率化できます。

もちろん、AIだけで完璧なワイヤーフレームが完成するわけではありません。

最終的には、人間が目的やユーザー心理、導線、実装しやすさを考えて調整する必要があります。

しかし、ゼロから考える時間を大きく減らし、初期案を作るスピードを上げることはできます。

この記事では、AIでワイヤーフレームを作る方法について、初心者向けにわかりやすく解説します。

ChatGPTで構成を作り、Figmaでワイヤーフレームに落とし込む流れ、実務で使えるプロンプト例、注意点まで紹介します。

ワイヤーフレームとは？

ワイヤーフレームとは、Webサイトやアプリ画面の骨組みを表した設計図です。

完成デザインのように、色や写真、細かい装飾を作り込むものではありません。

主な目的は、ページの構成や情報の優先順位を整理することです。

例えば、サービスLPであれば、以下のような構成が考えられます。

1. ファーストビュー
2. 悩み・課題の提示
3. 解決策の提示
4. サービスの特徴
5. 選ばれる理由
6. 実績・お客様の声
7. 料金
8. よくある質問
9. お問い合わせ

このような流れを先に決めておくことで、デザインやコーディングに入った後の手戻りを減らせます。

ワイヤーフレームで大切なのは、見た目の美しさではありません。

大切なのは、ユーザーに必要な情報が正しい順番で届くことです。

「誰に向けたページなのか」
「何を伝えるのか」
「どの順番で見せるのか」
「どこで行動してもらうのか」

これを整理するのがワイヤーフレームの役割です。

AIでワイヤーフレームを作るメリット

AIを使ってワイヤーフレームを作る最大のメリットは、ゼロから考える時間を短縮できることです。

通常、ワイヤーフレームを作るには、目的整理、ターゲット整理、情報整理、
構成作成、導線設計など、いくつもの工程があります。

慣れていないと、この初期段階でかなり時間がかかります。

AIを使えば、最初のたたき台をすばやく作れます。

例えば、

「介護施設向けのWebサイト構成を考えて」
「税理士事務所のLP構成を作って」
「採用サイトのトップページに必要なセクションを出して」
「無料相談につなげるLPのワイヤーフレーム案を作って」

と依頼すれば、AIが構成案を出してくれます。

もちろん、そのまま使うのではなく、案件に合わせて修正する必要はあります。

しかし、何もない状態から考えるよりも、かなり楽になります。

AIを使うメリットは以下です。

構成案をすばやく作れる
必要なセクションを洗い出せる
ユーザー心理に沿った流れを考えやすい
見出しやCTA文言の案も出せる
複数パターンを比較できる
初心者でも設計のたたき台を作りやすい

特に、Web制作初心者や、構成作りに苦手意識がある方には相性が良いです。

AIで作れるのは「完成品」ではなく「たたき台」

ここで大切なのは、AIで作れるワイヤーフレームは完成品ではなく、あくまでたたき台だということです。

AIは便利ですが、クライアントの本当の強み、事業背景、ユーザーの不安、
競合との差別化、現場の事情までは完全には理解できません。

そのため、AIが出した構成をそのまま使うと、どこか一般的な内容になりやすいです。

例えば、どの業種でも使えそうな、

サービス紹介
選ばれる理由
お客様の声
料金
よくある質問
お問い合わせ

という構成は作れます。

しかし、その会社ならではの強みや、ユーザーが本当に知りたい情報を入れるには、人間の判断が必要です。

AIは、最初の方向性を出すために使う。

人間は、それを案件に合わせて編集する。

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

AIを「全部作ってくれる存在」と考えるよりも、「考える時間を短縮してくれる相棒」と考えると、実務で使いやすくなります。

AIでワイヤーフレームを作る基本の流れ

AIでワイヤーフレームを作る流れは、以下のように進めるのがおすすめです。

1. サイトの目的を整理する
2. ターゲットを整理する
3. 掲載情報を洗い出す
4. AIに構成案を出してもらう
5. セクションごとの役割を整理する
6. 見出し・CTA文言を作る
7. Figmaでワイヤーフレーム化する
8. 人間が導線と情報量を調整する
9. クライアントやチームに共有する

いきなりAIに「ワイヤーフレームを作って」と投げるよりも、目的やターゲットを伝えた方が精度が上がります。

AIは、与えられた情報をもとに回答するため、入力する情報が少ないと、出力も一般的になります。

逆に、目的、ターゲット、サービス内容、悩み、ゴールを伝えると、より実務に近い構成案を出しやすくなります。

1. サイトの目的を整理する

まず最初に決めるべきことは、サイトやページの目的です。

目的が曖昧なままワイヤーフレームを作ると、構成も曖昧になります。

例えば、同じサービスサイトでも目的によって構成は変わります。

お問い合わせを増やしたい
資料請求を増やしたい
無料相談につなげたい
採用応募を増やしたい
商品購入につなげたい
サービス内容を理解してもらいたい
信頼感を高めたい

LPの場合は、特に目的を1つに絞ることが大切です。

「お問い合わせも欲しいし、資料請求も欲しいし、
採用もしたい」というように目的が複数あると、ページの導線が弱くなります。

AIに依頼する前に、まずは次のように整理しましょう。

このページの目的は、訪問介護事業者から無料相談の申し込みを増やすことです。

または、

このLPの目的は、Web制作サービスの資料請求を増やすことです。

目的が明確になると、AIも構成を考えやすくなります。

2. ターゲットを整理する

次に、誰に向けたページなのかを整理します。

ターゲットが曖昧だと、ページ全体のメッセージもぼやけます。

例えば、Web制作サービスのLPでも、ターゲットによって訴求は変わります。

個人事業主向けなら、

初めてでも相談しやすい
低コストで始められる
公開後の運用もサポート

という内容が響きやすいかもしれません。

一方、中小企業向けなら、

信頼感のある企業サイトが作れる
採用や問い合わせにつながる
WordPressで更新しやすい
保守運用も任せられる

という訴求が向いているかもしれません。

AIに依頼するときは、ターゲット情報をできるだけ具体的に伝えましょう。

例えば、次のような形です。

ターゲットは、Web担当者がいない中小企業の経営者です。
ホームページが古く、問い合わせや採用に課題を感じています。

このように伝えると、AIはその人に向けた構成を考えやすくなります。

3. 掲載情報を洗い出す

次に、ページに載せる情報を洗い出します。

この段階でもAIは使えます。

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

訪問介護事業者向けのWeb保守サービスLPに必要な掲載情報を洗い出してください。

すると、AIは以下のような項目を提案してくれます。

サービス概要
対象者
よくある悩み
提供できるサポート
料金プラン
導入メリット
対応範囲
よくある質問
お問い合わせ導線

このように、必要な情報を漏れなく出すのにAIは便利です。

ただし、実際にはクライアントごとに必要な情報が違います。

AIが出した項目を見ながら、

「これは必要」
「これは不要」
「これは別ページでよい」
「これはもっと詳しく必要」

と人間が判断していきます。

4. AIに構成案を出してもらう

目的、ターゲット、掲載情報が整理できたら、AIに構成案を作ってもらいます。

例えば、次のようなプロンプトが使えます。

以下の条件で、Webサイトのトップページのワイヤーフレーム構成案を作ってください。

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

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

このように伝えると、AIは単なるセクション名だけでなく、それぞれの役割まで整理してくれます。

出力例としては、次のような形になります。

1. ファーストビュー
役割：誰向けのサービスかを一瞬で伝える
内容：キャッチコピー、サブコピー、CTA、安心材料

2. 悩みの提示
役割：ターゲットに自分ごと化してもらう
内容：更新できない、管理者がいない、セキュリティが不安

3. サービス概要
役割：何をしてくれるサービスかを説明する
内容：WordPress更新、バックアップ、セキュリティ、軽微な修正

4. 選ばれる理由
役割：他社との違いを伝える
内容：Web制作者が対応、介護業界対応、保守から改善提案まで対応

5. 料金
役割：申し込み前の不安を減らす
内容：月額プラン、対応範囲

6. よくある質問
役割：不安を解消する
内容：契約期間、対応範囲、緊急対応など

7. CTA
役割：無料相談へ誘導する
内容：フォームボタン、電話番号、相談しやすい文言

このように、AIを使うと構成の初期案がかなり早く作れます。

5. セクションごとの役割を整理する

AIで構成案を出したら、それぞれのセクションに役割があるか確認しましょう。

ワイヤーフレームでは、ただ情報を並べるだけでは不十分です。

各セクションには、ユーザー心理に沿った役割があります。

例えば、LPであれば以下のような流れです。

興味を引く
悩みに共感する
解決策を示す
信頼材料を見せる
不安を解消する
行動を促す

もし、構成の中に似たような内容が重複している場合は、整理します。

例えば、「サービスの特徴」と「選ばれる理由」がほとんど同じ内容になっている場合は、
統合した方がよいかもしれません。

また、いきなり料金を出すよりも、先にメリットや信頼材料を見せた方がよい場合もあります。

AIの構成案を見ながら、ユーザーが自然に読み進められる流れになっているか確認しましょう。

6. 見出しやCTA文言もAIで作る

ワイヤーフレームでは、セクション名だけでなく、見出しやCTA文言もある程度入れておくと確認しやすくなります。

AIは見出し案やボタン文言の作成にも使えます。

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

上記のLP構成に合わせて、各セクションの見出し案を3パターンずつ作ってください。
初心者にも伝わるやさしい表現でお願いします。

すると、以下のような案を出してくれます。

こんなお悩みはありませんか？
ホームページの管理、止まっていませんか？
Web担当者がいなくても、サイト管理は任せられます

CTA文言もAIに出してもらえます。

無料で相談してみる
まずは相談する
Webサイト管理について相談する
資料をダウンロードする
お問い合わせはこちら

ただし、CTA文言はページの目的に合わせて選ぶことが大切です。

例えば、無料相談が目的なら「無料で相談する」。

資料請求が目的なら「資料をダウンロードする」。

LINE登録が目的なら「LINEで相談する」。

このように、ユーザーにしてほしい行動と一致させましょう。

7. Figmaでワイヤーフレームに落とし込む

AIで構成ができたら、次はFigmaに落とし込みます。

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

まずは低精度ワイヤーフレームで十分です。

低精度ワイヤーフレームとは、色や写真を入れずに、四角形とテキストだけで構成を表すものです。

例えば、

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

このくらいで問題ありません。

重要なのは、見た目ではなく構成です。

Figmaで作るときは、以下の流れがおすすめです。

1. PC用フレームを作る
2. セクションごとに大きなブロックを置く
3. 見出し・本文・画像・CTAを配置する
4. セクションの順番を調整する
5. スマホ版も作る
6. コメントで確認する

AIで作ったテキスト構成を、そのままFigmaのセクションに反映していくイメージです。

8. Figmaで作るときはAuto Layoutを使う

Figmaでワイヤーフレームを作る場合、Auto Layoutを使うと便利です。

Auto Layoutを使うと、要素同士の間隔や内側の余白を管理しやすくなります。

例えば、カードやCTA、FAQ、ボタンなどに使えます。

ボタン：横方向のAuto Layout
カード：縦方向のAuto Layout
FAQ：質問と回答を縦方向に配置
CTA：見出し・本文・ボタンを縦方向に配置

ワイヤーフレームの段階でもAuto Layoutを使っておくと、後から文章量が変わったときに崩れにくくなります。

AIで出した見出しや本文は、あとで変更する可能性があります。

そのため、手作業で固定配置するよりも、Auto Layoutで柔軟に作っておく方が修正しやすいです。

9. AIに複数パターンを出してもらう

AIの便利な使い方のひとつが、複数パターンをすぐに出せることです。

例えば、LP構成でも以下のように依頼できます。

同じ条件で、LP構成を3パターン作ってください。

1つ目：信頼感重視
2つ目：悩み共感重視
3つ目：料金のわかりやすさ重視

すると、違う切り口の構成が出てきます。

例えば、

信頼感重視：実績・導入事例・お客様の声を早めに配置
悩み共感重視：悩みの提示やチェックリストを前半に配置
料金重視：料金プランや対応範囲をわかりやすく配置

このように複数案を比較すると、より良い構成を選びやすくなります。

人間だけで3パターン考えると時間がかかりますが、AIなら短時間でたたき台を作れます。

10. AIでスマホ版の構成も考える

ワイヤーフレームを作るときは、PC版だけでなくスマホ版も考える必要があります。

現在のWebサイトでは、スマホから見られることも多いため、スマホ版の構成は重要です。

PC版では横並びにできる要素も、スマホでは縦並びになります。

例えば、

PC：3カラムカード
SP：1カラムカード

PC：画像とテキストを横並び
SP：画像→テキストの縦並び

PC：ヘッダーナビ表示
SP：ハンバーガーメニュー

PC：大きな余白
SP：少し狭めの余白

AIにスマホ版の注意点を聞くこともできます。

このLP構成をスマホ版にする場合、注意すべきレイアウト変更点を教えてください。

すると、CTAの位置、カードの並び、余白、文字サイズ、固定ボタンなどの注意点を出してくれます。

スマホ版は後回しにすると手戻りが増えるため、ワイヤーフレームの段階で考えておきましょう。

11. AIでユーザー心理を確認する

ワイヤーフレームで重要なのは、ユーザー心理に沿った流れになっているかです。

AIには、構成のチェック役として使うこともできます。

例えば、作った構成をAIに貼り付けて、次のように聞きます。

このLP構成は、無料相談につなげる流れとして自然ですか？
ユーザー心理の観点から、改善点を教えてください。

すると、AIは以下のような改善点を出してくれることがあります。

悩みの提示が少し弱い
料金の前に信頼材料を入れた方がよい
CTAが後半に偏っている
FAQで不安解消を強化した方がよい
ファーストビューに対象者が明記されていない

このように、AIをレビュー役として使うこともできます。

ただし、最終判断は人間が行います。

AIの意見は参考にしつつ、案件の目的やユーザーに合わせて調整しましょう。

12. AIでワイヤーフレーム用の文章量を整える

Figmaでワイヤーフレームを作るとき、見出しや本文の文章量が重要です。

短すぎるダミーテキストだけで作ると、実際の原稿を入れたときに崩れることがあります。

AIを使えば、セクションごとの仮テキストを作れます。

例えば、

このサービスLPのワイヤーフレームに入れる仮見出しと仮本文を作ってください。
本文は各セクション2〜3行程度でお願いします。

このように依頼すると、Figmaに入れやすい文章量で作ってくれます。

ワイヤーフレーム段階では、完全な原稿である必要はありません。

ただし、実際に近い文字量を入れておくことで、レイアウト崩れを防ぎやすくなります。

13. AIで競合サイトの構成を参考にする

ワイヤーフレームを作る前に、競合サイトの構成を参考にすることもあります。

ただし、競合サイトをそのまま真似するのはよくありません。

参考にするのは、構成の考え方や情報の出し方です。

AIには、競合分析の観点を出してもらうことができます。

介護施設向けWebサイトのワイヤーフレームを作る前に、競合サイトを見るときのチェックポイントを教えてください。

すると、以下のような観点が出てきます。

ファーストビューの訴求
問い合わせ導線
料金やサービス内容の見せ方
実績やお客様の声
よくある質問
スマホでのCTA
信頼材料

これらを参考にしながら、自分の案件に合ったワイヤーフレームを作ります。

AIでワイヤーフレームを作るプロンプト例

ここからは、実務で使いやすいプロンプト例を紹介します。

プロンプト1：構成案を作る

以下の条件で、LPのワイヤーフレーム構成案を作ってください。

目的：
ターゲット：
サービス内容：
ユーザーの悩み：
最終ゴール：

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

プロンプト2：トップページ構成を作る

以下のサービスサイトのトップページ構成を作ってください。

業種：
ターゲット：
サイトの目的：
主なサービス：
強み：
必要なページ：

トップページに必要なセクションを、上から順番に提案してください。

プロンプト3：見出し案を作る

以下のLP構成に合わせて、各セクションの見出し案を3つずつ作ってください。
初心者にも伝わるわかりやすい表現にしてください。

プロンプト4：CTA案を作る

このLPの目的は無料相談の申し込みです。
押したくなるCTAボタン文言を20個提案してください。
やさしく、売り込み感が強すぎない表現でお願いします。

プロンプト5：構成を改善する

以下のワイヤーフレーム構成を見て、ユーザー心理の流れとして不自然な点や改善点を教えてください。
目的はお問い合わせ獲得です。

プロンプト6：スマホ版の注意点を出す

このPC版ワイヤーフレームをスマホ版にする場合の注意点を教えてください。
レイアウト、余白、CTA、文字量、画像の見せ方に分けて整理してください。

AIで作ったワイヤーフレームの注意点

AIでワイヤーフレームを作ると便利ですが、注意点もあります。

1. 一般的な構成になりやすい

AIは、多くのWebサイトに共通する構成を出すのが得意です。

しかし、その会社ならではの強みや独自性は、人間が追加する必要があります。

2. 情報の優先順位がズレることがある

AIが出した順番が、必ず正しいとは限りません。

ユーザーが本当に知りたい順番になっているか、人間が確認しましょう。

3. CTAが多すぎることがある

AIはCTAを多めに提案することがあります。

CTAは重要ですが、多すぎるとしつこく見える場合もあります。

ページの流れに合わせて調整しましょう。

4. 実装のしやすさまでは考慮されない

AIが出す構成は、必ずしもコーディングしやすいとは限りません。

Figmaに落とし込む段階で、セクション構造やレスポンシブ対応を考える必要があります。

5. クライアント情報が不足すると浅くなる

AIに与える情報が少ないと、出力も浅くなります。

事業内容、ターゲット、強み、目的、悩みなどをできるだけ具体的に伝えましょう。

AIと人間の役割分担

AIでワイヤーフレームを作るときは、AIと人間の役割を分けることが大切です。

AIが得意なことは以下です。

構成案を出す
必要な情報を洗い出す
見出し案を作る
CTA案を出す
複数パターンを作る
改善点を提案する

一方、人間がやるべきことは以下です。

目的を決める
ターゲットを理解する
クライアントの強みを整理する
優先順位を判断する
情報を取捨選択する
Figmaで見やすく設計する
実装しやすい構造にする
最終判断をする

つまり、AIは考える材料を出す役割。

人間は判断して整える役割です。

この分担を意識すると、AIを実務で使いやすくなります。

まとめ

AIを使えば、ワイヤーフレーム作成の初期工程をかなり効率化できます。

特に、ページ構成のたたき台、必要なセクションの洗い出し、見出しやCTAの案出し、
スマホ版の注意点、構成改善のレビューなどに役立ちます。

ただし、AIが作ったものをそのまま使えばよいわけではありません。

AIは一般的な構成を出すのは得意ですが、クライアント独自の強みや、
ユーザー心理に合わせた細かな調整は人間が行う必要があります。

AIでワイヤーフレームを作る基本の流れは以下です。

1. サイトの目的を整理する
2. ターゲットを整理する
3. 掲載情報を洗い出す
4. AIに構成案を出してもらう
5. セクションごとの役割を確認する
6. 見出しやCTA文言を作る
7. Figmaでワイヤーフレーム化する
8. 人間が導線と情報量を調整する

AIは、ワイヤーフレーム作成を自動化するというより、設計の初速を上げるための道具です。

ゼロから悩む時間を減らし、複数案を比較し、より良い構成を考えるために使うのがおすすめです。

初心者の方は、まずChatGPTに「目的・ターゲット・サービス内容」を伝えて、
LP構成案を作ってもらうところから始めてみましょう。

その構成をFigmaに落とし込み、セクションごとに見出し、本文、画像、CTAを配置するだけでも、
ワイヤーフレーム作成の練習になります。

AIをうまく使えば、ワイヤーフレーム作成はもっと早く、もっと考えやすくなります。

大切なのは、AIに任せきるのではなく、AIを使って人間の判断を強化することです。

AIとFigmaを組み合わせて、効率よく、伝わりやすいワイヤーフレームを作っていきましょう。