ChatGPTをワイヤーフレーム作成に活用すると、作業時間を大幅に短縮できます。要件定義からFigma連携まで5つの実務ハックと具体的プロンプト例を、今日から使える形式で解説します。
この記事でわかること
この記事を読むと、ChatGPTで構成案を30分以内に完成させる3ステップの手順、修正回数を2回以内に抑えるプロンプト構造、コーダーへの仕様共有を効率化するHTMLテンプレート活用法がわかります。
この記事の結論
ChatGPTはテキスト形式で構成案・見出し・本文を同時生成し、FigmaやAdobe XDで視覚化するという「テキスト生成＋ツール連携」の分業で機能します。OOUI手法（オブジェクト抽出→ビュー設計→作成）に沿って指示を構造化すると、初回の構成案が30分以内に完成します。「決まっていること（制約・要件）」と「何をしてほしいか（タスク）」を分けてプロンプトを書くことが、意図通りの出力を得る最短経路です。
今日やるべき1つ
手元の既存案件（または練習用サイト）を1つ選び、ターゲットユーザーとページ目的を2行で書き、この記事のハック1のプロンプトをそのままコピーして貼り付けてください。所要時間：約10分。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| ChatGPTで何ができるか基本を知りたい | ChatGPTワイヤーフレームは4つの役割で機能 | 5分 |
| 具体的なプロンプトをすぐ使いたい | ChatGPTワイヤーフレームは5つの実務ハックで効率化 | 10分 |
| OOUI手法の3ステップを知りたい | ChatGPTワイヤーフレームは3ステップで設計 | 7分 |
| 自分の状況に合った手順を選びたい | ChatGPTワイヤーフレームは状況で3パターン | 4分 |
| 実際の活用事例を確認したい | ChatGPTワイヤーフレームの実例は2パターン | 6分 |
ChatGPTワイヤーフレームは4つの役割で機能
ChatGPTを使い始める前に「何ができて何ができないのか」を整理しておくと、後の指示設計がスムーズになります。基本的な役割と限界を把握しておくことで、ツール連携の方針も自然と決まります。
ChatGPTの出力は「テキスト構成案」が本体
ChatGPTはワイヤーフレームを画像ファイルとして出力できません。出力されるのは「構成案（テキスト形式）」「各セクションの見出し案」「簡易な本文案」「HTMLテンプレート」の4種類です。ChatGPTの役割は「何をどこに配置するかの設計図をテキストで渡すこと」であり、FigmaやAdobe XDが「その設計図を視覚的なレイアウトに変換すること」を担うという明確な分業関係にあります。この前提を持つだけで、「ChatGPTで全部完結させようとして失敗する」という最もよくある間違いを防げます。
作業時間短縮の根拠は工程分解にある
作業効率を上げる方法として生成AI活用が注目される背景には、工程分解という考え方があります。作業時間が短縮される理由は「アイデアの言語化」と「構成の整合性確認」という2つの工程がほぼ自動化されるからです（Hakky Handbook）。従来、フリーランスが1案件のワイヤーフレーム提案書を作成する場合、情報整理に2〜3時間、見出し・本文の下書きに3〜4時間を費やすことが多い状況でした。ChatGPTを導入すると情報整理は30分、見出し・本文の下書きは30分に圧縮でき、残りの時間をレイアウト品質の向上とクライアント折衝に充てられます。削減された工数をどこに再投資するかを決めておくことで、時間短縮がそのまま提案品質の向上につながります。
4つの出力タイプと使い道
ChatGPTがワイヤーフレーム文脈で生成できる出力は、用途によって使い分けが必要です。第1は「セクション構成案」で、ページ全体の情報階層を示したものであり要件定義フェーズに使います。第2は「見出し・本文の原稿案」で、各セクションに入れるテキストの初稿として使い、クライアント確認用の提案書に直接貼り付けられます。第3は「HTMLテンプレート」で、コーダーへの仕様共有やプロトタイプの素材として機能します。第4は「フィードバック対応案」で、クライアントから修正指摘を受けた際にChatGPTへ指示し直すことで改訂版を素早く作れます。4つの出力タイプを「どのフェーズで使うか」をあらかじめ決めておくと、プロンプト設計が一貫して効率的になります。
機密情報を入力しない運用ルール
ChatGPTを業務で使う際、企業機密情報や情報解禁前の内容は入力してはなりません（スキルハブ）。具体的には「クライアント名・実際の商品価格・未公表の機能仕様・個人情報」が該当します。代わりに「BtoBソリューション企業のトップページ」「価格帯：月額3万〜10万円のSaaSサービス」のように情報を抽象化してプロンプトに含めることで、意図通りの構成案を得ながらセキュリティリスクを回避できます。「何を入力しないか」のフィルタを最初に決めておくことが、チームでChatGPTを運用する際のトラブル防止になります。
CHECK
▶ 今すぐやること: 直近案件のクライアント情報を「抽象化リスト」として書き出し、ChatGPTに入力してよい情報と入力禁止の情報を2列に分けてメモする（5分）
Q: ChatGPTでワイヤーフレームの画像を直接生成できますか？
A： できません。ChatGPTが出力するのはテキスト形式の構成案とHTMLテンプレートです。視覚的なレイアウトはFigmaやAdobe XDで別途作成する必要があります。
Q： ChatGPTで作った構成案はそのままクライアントに提出できますか？
A： 初期提案の素材としては活用できますが、そのまま提出するのは推奨しません。内容の論理整合性を確認し、クライアントの業界特性や競合状況との差異を補正してから提出することで、承認率が高まります。
ChatGPTワイヤーフレームは3ステップで設計
OOUI手法を使うと「考える順番」が固定されるため、最初の一歩を踏み出すコストが大きく下がります。手が止まりやすい「何から始めればいいかわからない」状態を、この3ステップで解消できます。
STEP1：オブジェクト抽出でページ要素を棚卸しする
OOUIの最初のステップは、ページ上に存在すべき「オブジェクト（もの・概念）」を列挙することです。コーポレートサイトのトップページなら「企業概要」「サービス一覧」「実績・事例」「お問い合わせ」「ニュース」がオブジェクトになります。このステップでChatGPTに使えるプロンプトは「BtoB向けSaaS企業のコーポレートサイトのトップページに必要な情報要素を、訪問者の行動目的ごとにリストアップしてください」という形式です。オブジェクトを先に固定することで、後のビュー設計でセクションの抜け漏れが発生しにくくなるという構造的なメリットがあります（note: マットヤマノ）。
STEP2：ビュー設計でセクションの順序を決める
ビュー設計は「どのオブジェクトをどのセクションとして、どの順番で見せるか」を設計する工程です。STEP1で列挙したオブジェクトをChatGPTに渡し、「上記の情報要素を、初回訪問者の購買意思決定フローに沿って並び替え、各セクションの役割を1行で説明してください」と指示します。このとき「ヒーローセクション→課題提示→解決策（サービス）→実績→CTA」というおおよその型を先にChatGPTに伝えると、逸脱した出力を防げます。ビュー設計の出力をそのまま提案書の「ページ構成説明」として使うことで、原稿とワイヤーの方向性が一致した状態を維持できます。
STEP3：各セクションのテキストを生成してFigmaへ転写する
ビュー設計が確定したら、セクションごとに「見出し案3つ」「本文案1つ（40〜60文字）」「CTAボタンテキスト1つ」を生成します。プロンプト例は「上記のサービスセクションについて、ターゲットを中小企業の経営者として、見出し案を3パターン、本文案を1つ（50文字以内）、CTAボタンテキストを2つ生成してください」です。生成されたテキストをFigmaのテキストレイヤーに貼り付け、四角のプレースホルダーで構成を組むと、ワイヤーフレームの骨格が完成します。「テキストを先に確定させてからレイアウトを組む」という順序を守ることで、後からテキスト変更によってレイアウトが崩れる手戻りを防止できます。なお、FigmaのAI機能を組み合わせると、この転写作業をさらに効率化できます。
CHECK
▶ 今すぐやること: 直近のサイト案件でSTEP1のオブジェクト抽出プロンプトを実行し、生成されたオブジェクトリストを手元のメモに貼り付ける（15分）
Q: OOUIとは何ですか？
A： OOUI（Object-Oriented User Interface）はUI設計の手法で、画面を「オブジェクト（もの）」単位で構造化するアプローチです。ページに存在すべき情報要素を先に定義し、その後に表示方法（ビュー）を設計するため、情報の抜け漏れが起きにくいという特徴があります。
Q： FigmaがなくてもOOUI手法は使えますか？
A： 使えます。STEP1とSTEP2はChatGPTとテキストエディタのみで完結します。STEP3の視覚化ではFigmaが最も効率的ですが、SketchやAdobe XD、あるいはPowerPointでも代替可能です。
ChatGPTワイヤーフレームは状況で3パターン
担当案件の種類や進捗フェーズによって、ChatGPTの使い方は変わります。「自分が今どの状況にいるか」を判断できると、適切なハックを選べます。
下記の2問に答えることで、自分に合ったルートがわかります。新規サイトの場合はQ2へ進み、リニューアルの場合はResult Cを参照してください。Q2では要件定義書の有無を確認し、受け取っている場合はResult A、受け取っていない場合はResult Bへ進みます。
Result A: 要件定義活用ルート（作業時間の目安：2〜3時間）
受け取った要件定義書から「目的・ターゲット・主要機能」を3行に抜粋し、その3行をChatGPTに渡してOOUI手法のSTEP1を実行してください。要件定義書がある場合は「決まっていること（制約）」がすでに固まっているため、プロンプトの精度が高まりやすく、最初の構成案で大きく方向性が外れるリスクが低くなります。
Result B: ゼロ出発ルート（作業時間の目安：3〜4時間）
まずChatGPTに「{業種}×{ターゲット}のコーポレートサイトでよく訴求されるメッセージ上位5つを挙げてください」と入力し、競合分析の代替として使います。その出力をベースにSTEP1のオブジェクト抽出へ進むと、白紙からではなく「参照点あり」の状態でワイヤー設計を始められます。
Result C: 既存サイト分析ルート（作業時間の目安：1.5〜2時間）
既存サイトの現在の構成をテキストで書き出し、「現在のページ構成は以下の通りです。リニューアルでユーザーの滞在時間を伸ばすために改善すべき点を3つ挙げてください」と入力します。改善点が出力されたら、その改善点に対応した新しいセクション構成を生成させ、差分として提案書に使います。
CHECK
▶ 今すぐやること: 上記の2問に答えて自分のResultを確認し、該当ルートの「最初の1プロンプト」を今日中に実行する（10分）
Q: クライアントの要件定義が曖昧な場合はどうしますか？
A： 「曖昧な要件定義をChatGPTに渡して整理させる」アプローチが有効です。「以下はクライアントからのヒアリング内容です。不明確な点を質問形式でリストアップしてください」と入力すると、次回ヒアリングで確認すべき項目が自動的に抽出できます。
Q： 既存サイトのURLをChatGPTに渡せますか？
A： ChatGPTの標準機能ではURLを直接読み込めません。ブラウザで既存サイトのテキスト情報をコピーしてChatGPTに貼り付けるか、GPT-4oのWeb閲覧機能（有効化している場合）を使う方法があります。
ChatGPTワイヤーフレームの実例は2パターン
成功パターンと失敗パターンの両方を知っておくことで、同じ落とし穴にはまるリスクを減らせます。
ケース1（成功パターン）: OOUI手法で初回提案を通したフリーランスデザイナー
あるフリーランスデザイナーが、BtoB向けSaaS企業のコーポレートサイトリニューアル案件を受注した際の事例です。最初にOOUIのSTEP1（オブジェクト抽出）を実行し、ChatGPTが出力したオブジェクトリストをクライアントと共有することで「何を載せるか」の合意を先に取りました。その後STEP2のビュー設計でセクション順を決定し、STEP3でセクションごとの見出し・本文案を生成してFigmaに転写しました。
note: マットヤマノでは「OOUIの設計手法を使って、理論立てられたプロセスでAIに任せやすい仮説で自動生成にチャレンジ。3STEP（オブジェクト抽出→ビュー設計→作成）が有効」と報告されています。
「まずFigmaを開いてレイアウトから始める」というアプローチを取っていた場合、テキスト内容が固まらないままレイアウト調整を繰り返し、後から構成の見直しで大きな手戻りが発生する可能性があります。
ケース2（失敗パターン）: 指示が曖昧で何度も修正が発生したケース
Web制作の経験はあるものの生成AIをほぼ使ったことのない担当者が、ランディングページのワイヤーフレーム作成にChatGPTを初めて使ったケースです。最初のプロンプトは「LPのワイヤーフレームを作ってください」という1行でした。ChatGPTは一般的なLP構成を出力しましたが、クライアントの業種・ターゲット・訴求ポイントが何も伝わっていなかったため、修正指示を繰り返すことになり、結果として手動作成より時間がかかりました。
シャノンのユーザーは「指示が曖昧でも”意図”を汲み取ってくれることがわかった。一人でも制作の最初の一歩を踏み出せる。構成から実装まで一貫してサポート」と語っています。
最初から「業種・ターゲット・主要訴求の3点を必ず含むプロンプトテンプレート」を使っていた場合、修正回数を1〜2回に抑えられ、時間短縮になります。また、ChatGPTとClaudeの違いを理解して用途別に使い分けると、出力精度がさらに高まります。
CHECK
▶ 今すぐやること: ケース2の失敗パターンを参考に、自分が使うプロンプトに「業種・ターゲット・主要訴求の3点」が含まれているかを確認し、不足していれば追記する（5分）
Q: 初めてChatGPTをワイヤーフレームに使う場合、どのくらい修正が必要ですか？
A： プロンプトに「業種・ターゲット・主要訴求の3点」を含めた場合、修正回数の目安は2〜3回です。初回プロンプトが曖昧な場合はより多くの修正が必要になります。修正回数を減らすにはこの記事のハック1で紹介するプロンプト構造を使うことが最短経路です。
Q： ChatGPTの出力品質はGPTのバージョンによって変わりますか？
A： 変わります。GPT-4oはGPT-3.5と比較して指示の解釈精度が高く、複雑な制約（「BtoB向け・ターゲットは中小企業経営者・訴求はコスト削減」等）を正確に反映した出力を生成しやすいとされています。フリーランスの実務用途ではGPT-4o（有料プラン）の使用を検討してください。
ChatGPTワイヤーフレームは5つの実務ハックで効率化
ここで紹介する5つのハックは、フリーランスが実際の案件で使える手順に絞っています。「知識としてわかる」ではなく「今日から使える」形式で設計しています。
ハック1: プロンプト構造化で修正回数を減らす
【対象】: ワイヤーフレーム作成の指示が曖昧になりやすいフリーランスWebデザイナー・コーダー
【手順】: まず「決まっていること」ブロックを書きます。業種・ターゲット・ページ目的・制約（機密情報除外済み）を3〜5行で記述してください（5分）。次に「何をしてほしいか」ブロックを書きます。「上記の条件をもとに、トップページの構成案をセクション単位でリストアップし、各セクションの役割を1行で説明してください」と明記してください（3分）。出力を受け取ったら「セクション順の根拠を説明してください」と追加質問して意図の整合性を確認します（5分）。
【ポイントと理由】: 「制約ブロック（決まっていること）」と「タスクブロック（何をしてほしいか）」を明示的に分ける構造にすると修正回数が減ります。ChatGPTは入力された制約の範囲内でのみ最適化を行うため、制約が未定義のまま指示を出すと汎用的な出力しか返しません。「制約の明示＝出力の絞り込み」という関係が成立しており、プロンプトに詳細な条件を含めるほど出力精度が上がる傾向があります（スキルハブ）。
【注意点】: 1プロンプトに複数タスクを詰め込む必要はありません。「構成案の作成」と「見出し・本文案の生成」は別のプロンプトとして送ることで、各出力の精度が上がります。
ハック2: 原稿・構成の同時生成で提案書作成を効率化する
【対象】: 原稿作成とワイヤーフレーム作成を別々に行っており、内容の不一致が起きやすいフリーランス
【手順】: ハック1の構成案が確定したら「上記の構成案の各セクションについて、見出し案を2パターンと本文案を1つ（40〜60文字）ずつ生成してください」と入力します（3分）。生成された見出し・本文案を提案書の原稿欄に貼り付け（10分）、原稿を確認しながらFigmaで各セクションのプレースホルダー（四角）を配置し、テキストレイヤーに貼り付けます（20分）。
【ポイントと理由】: 「まずワイヤーを作り、後から原稿を考える」というアプローチでは、テキストレイヤーがダミー文字（lorem ipsum）のままになり、クライアントが情報量や訴求内容を判断できない状態が生まれます。原稿と構成を同時生成するアプローチでは、ChatGPTが出力した見出し・本文案をそのままFigmaのテキストレイヤーに入れるため、クライアントが「実際に完成した際のイメージ」を確認しやすくなり、初回提案の承認率が上がります（ラインドットデザイン）。
【注意点】: 生成された原稿をそのまま最終納品物に使わないでください。ChatGPTの文章は情報の正確性をクライアントが確認できていないため、必ず内容の事実確認を行ってから使用します。
ハック3: HTMLテンプレート生成でコーダーへの仕様共有を効率化する
【対象】: ワイヤーフレームをコーダーやエンジニアに仕様として渡す必要があるフリーランスディレクター・デザイナー
【手順】: 確定した構成案をもとに「以下の構成案をHTMLテンプレートとして出力してください。各セクションにはクラス名を付け、コメントアウトで役割を明記してください」と入力します（5分）。出力されたHTMLをテキストファイルとして保存し（2分）、コーダーに「このHTMLテンプレートをベースに、CSSでレイアウトを組んでください」と渡します（5分）。必要に応じて「上記のHTMLに対してグリッドレイアウトのCSSも生成してください」と追加指示してください（3分）。
【ポイントと理由】: Figmaを使えないクライアントやスモールチームでは、HTMLテンプレートの方がコーダーが意図を正確に読み取りやすいケースがあります。ChatGPTが生成するHTMLはセクション構造とクラス名が整った「骨格」として機能するため、コーダーがゼロから構造を解釈する手間が省けます（RDLP）。FigmaとHTMLテンプレートは「どちらか一方」ではなく、両方を並行して使うことが最も効率的です。
【注意点】: ChatGPTが生成するHTMLはアクセシビリティ対応（aria属性、alt属性等）が不完全な場合があります。コーダーへの引き渡し前に、aria-labelとalt属性が正しく設定されているかを確認してください。
ハック4: フィードバックループで品質を2往復以内に収束させる
【対象】: ChatGPTの出力が意図と違い、修正ループが長引きやすいフリーランス全般
【手順】: 初回出力を受け取ったら、Figmaで仮組みしたワイヤーフレームのスクリーンショットを撮ります（5分）。スクリーンショットを「このワイヤーフレームの問題点を3つ挙げてください」とともにChatGPTに貼り付けて送ります（GPT-4oの画像認識機能を使用）（5分）。ChatGPTが指摘した問題点のうち、クライアントの要件と合致するものだけを採用し、修正版の構成案を再生成させます（10分）。
【ポイントと理由】: 視覚的なレイアウトの問題を言語で正確に伝えるのは難しく、説明の不正確さによって意図と違う修正結果が返ってきます。スクリーンショットをそのままChatGPTに渡すことで、「左カラムが右より重く見える」「CTAが下すぎて視線が誘導されていない」といった視覚的な問題をChatGPTが直接認識し、具体的な改善案を出力できます。修正ループが少ない往復で収束しやすくなる理由は「問題の定義」をChatGPTが行うため、人間が「何が問題か」を言語化する工程が省略されるからです。
【注意点】: スクリーンショットにクライアント名や未公表情報が映り込んでいないかを確認してから送ってください。画像に含まれる機密情報の管理は人間が担当します。
ハック5: サイト種別テンプレートで初回プロンプトを再利用可能にする
【対象】: 同種のサイト（コーポレート、EC、LP）を繰り返し受注するフリーランス
【手順】: 最初の案件でハック1〜3を使って完成したプロンプトを「コーポレートサイト用プロンプトテンプレート」として保存します（10分）。テンプレートの中で案件固有の情報（業種・ターゲット・訴求ポイント）が入る箇所を「[VARIABLE]」で置換マークを付けてください（5分）。次の同種案件では「[VARIABLE]」部分を新しい案件情報に書き換えてそのまま使います（3分）。Chrome拡張機能を活用してプロンプトテンプレートをブラウザ上で管理すると、さらに呼び出しが速くなります。
【ポイントと理由】: 同種サイトのワイヤーフレームに求められる構成の骨格は多くの部分が共通しています。テンプレートとして再利用することで、案件ごとにプロンプト設計から始める必要がなくなり、初回から高品質な出力を得やすくなります。テンプレートを複数人のチームで共有すると「プロンプトの品質のばらつき」が解消され、担当者が変わっても同水準の構成案が生成されます（ラインドットデザイン）。
【注意点】: テンプレートは定期的な見直しが必要です。クライアントのフィードバックやGPTのバージョンアップによって、以前は有効だったプロンプト構造が最適でなくなる場合があります。一度作ったテンプレートを永続的に使い続けることは避けてください。
CHECK
▶ 今すぐやること: ハック1のプロンプト構造（制約ブロック＋タスクブロック）を使って直近案件の初回プロンプトを今日中に作成し、ChatGPTに送信する（20分）
Q: ハック4のスクリーンショット送信はChatGPTの無料プランでもできますか？
A： 画像認識機能（スクリーンショットの貼り付け）はGPT-4oが対応しており、有料プラン（ChatGPT Plus、月額20ドル）が必要です（2024年時点）。無料プランではこの機能は使えません。修正指示を言語で行う場合は無料プランでも対応可能ですが、修正の精度は下がります。
Q： テンプレートはどこに保存しておくのがよいですか？
A： NotionやGoogle Docs、または専用のプロンプト管理ツール（PromptHero、FlowGPT等）が便利です。チームで共有する場合はNotionのデータベース機能でサイト種別ごとにテンプレートを分類しておくと、必要な時にすぐ参照できます。
ChatGPTワイヤーフレームを使いこなす：制約明示で精度が上がる
ChatGPTをワイヤーフレーム作成に活用する核心は「テキスト出力＋ツール連携」の分業設計と「制約ブロック＋タスクブロック」のプロンプト構造にあります。OOUI手法（オブジェクト抽出→ビュー設計→作成）の3ステップで進めると、初回の構成案が30分以内に完成します。原稿と構成の同時生成・HTMLテンプレートの活用・スクリーンショットによるフィードバックループという3つの手法を組み合わせることで、修正回数を抑えてクライアント承認に至る確率が高まります。
まず1案件だけハック1のプロンプト構造を試し、修正回数が減った実感を得てからハック2〜5を順番に習得してください。
| 状況 | 次の一歩 | 所要時間 |
| 今日初めて試す | ハック1のプロンプトテンプレートを作成してChatGPTに送信 | 20分 |
| 一度使ったが修正が多かった | ハック1の「制約ブロック」部分を書き直して再実行 | 10分 |
| 既に使えているが効率化したい | ハック5でテンプレート化して次の案件から再利用 | 15分 |
| コーダーに仕様を渡したい | ハック3のHTMLテンプレート生成を試す | 15分 |
ChatGPTワイヤーフレームに関するよくある質問
Q: ChatGPTでワイヤーフレームを作るのにFigmaは必ず必要ですか？
A： 必須ではありません。ChatGPTが出力したテキスト構成案はFigmaなしでも提案書（Google SlidesやPowerPoint）に貼り付けて使用できます。ただし視覚的なレイアウト確認やクライアントとのデザインレビューにはFigmaの方が効率的です。Figmaは無料プランでも基本的なワイヤーフレーム作成が可能です。
Q： プロンプトに何文字くらい書けばよいですか？
A： 初回プロンプトの目安は200〜400文字です。業種・ターゲット・ページ目的・主要訴求・制約条件の5点を含めると自然とこの文字数になります。1行の短いプロンプトは汎用的な出力しか返さないため、実務では使いにくい構成案が生成されます。
Q： ChatGPTで生成した構成案をクライアントに見せる際の注意点はありますか？
A： 「AIが生成した初案をベースに構成を設計しました」と説明することを推奨します。AIを使ったことを隠す必要はなく、むしろ「効率的な提案プロセスを持つ制作者」として評価される場合が増えています。内容の正確性については生成後に必ず確認し、業界特有の情報や競合との差異を人間が補正してから提示してください。
【出典・参照元】
ChatGPTで効率的なワイヤーフレーム作成法 – Hakky Handbook
Web制作×AI：ChatGPTでワイヤーフレームと原稿を爆速作成 – スキルハブ
ChatGPTを使用してワイヤーフレームは作れる？ – RDLP
提案書・ワイヤーフレーム説明文の自動化 – ラインドットデザイン