はじめに：なぜ「ワイヤーフレーム」をAIと作るのか？
「LP（ランディングページ）のワイヤーフレームをAIで作りたい」
そう考えたとき、まず何を開くでしょうか。もしかして、画像生成AIを開いて「かっこいいLPのデザイン」と入力しようとしていませんか。
もしそうなら、少し立ち止まって考えてみましょう。
非デザイナーのマーケターが最初にやるべきは「絵作り」ではなく「情報設計」です。ここを飛ばしてAIに綺麗な画像を出力させても、それは「見た目が良いだけの、コンバージョンに繋がらないページ」にしかなりません。
LP制作において最も頭を悩ませ、時間がかかるのは「何を、どの順番で、どう伝えるか」という構成案作りです。実はこここそが、ChatGPTやClaudeといったテキスト生成AIの独壇場となります。
デザインの前に「情報の構造」を決める重要性
ワイヤーフレームの本質は、ビジュアルデザインの下書きではありません。「ユーザーを説得するための論理構造図」です。
人間がいきなりPowerPointやFigmaを開くと、どうしても「色はどうしよう」「配置はどうしよう」と、デザインの細部に意識が向かいがちです。しかし、AI（特にLLM：大規模言語モデル）をパートナーにすれば、強制的に「テキスト情報」だけで構造を考えることになります。
これが逆に、論理的で体系的な情報設計を促す良い制約となるのです。
AIは「お絵描き」ではなく「論理構成」のパートナー
推奨されるのは、AIを「デザイナー」としてではなく、優秀な「構成作家」として活用するアプローチです。最新のAIモデルは推論能力や文脈理解力が飛躍的に向上しており、複雑なロジックの組み立てにおいても頼れるパートナーとなります。
- 客観性: 思い入れたっぷりに詰め込みたい情報も、AIなら「ユーザー視点ではノイズです」と整理してくれます。
- 網羅性: 競合他社が必ず入れている要素（お客様の声、FAQなど）の抜け漏れを防げます。
- 速度: ゼロから悩む時間を、AIとの「壁打ち」によるブラッシュアップの時間に変えられます。
この記事では、デザインツールが苦手な方でも実践できる、「言葉で指示して、言葉で設計図を作る」ための具体的なプロンプト術を解説していきます。ツールはChatGPTやClaudeの最新モデルがあれば十分です。思考の整理を始めましょう。
Q1-Q3：AI×ワイヤーフレーム作成の基礎知識
ここでは、「AIでワイヤーフレームを作る」という言葉の定義を合わせます。多くの人が誤解しているポイントをQ&A形式で解きほぐします。
Q1: AIでワイヤーフレームを作るとは、具体的に何が出力されるのですか？
A: 基本は「Markdown形式のテキスト」や「表形式の構成案」です。
「ワイヤーフレーム」と聞くと、四角い枠線が引かれた図面をイメージするかもしれません。もちろん、最近はFigmaのAIプラグインなどで直接図面を生成できるツールも増えています。しかし、中身の文章（コピーライティング）やロジックが伴っていない図面は、ただの「箱」に過ぎません。
実務の現場で効果的なのは、まずテキスト生成AIで以下のような構造を出力させることです。
- セクション名（例：ファーストビュー、悩み共感、解決策）
- 配置する要素（例：キャッチコピー、CTAボタン、画像イメージの指示）
- そのセクションの目的（なぜその要素が必要か）
これをテキストで確定させてから、初めて図面化（あるいはデザイナーへの依頼）に進むのが、最も手戻りが少なく、ROI（投資対効果）を高めるフローです。
Q2: 画像生成AIとテキスト生成AI、どちらを使うべきですか？
A: 構成検討段階では「テキスト生成AI」一択です。
画像生成AIは、雰囲気をつかむためのムードボード作りには役立ちますが、文字情報を含んだ正確なレイアウト指示には向きません（文字が崩れたり、意味不明な配置になりがちです）。
まずはChatGPTやClaudeで「論理の骨組み」を作りましょう。骨組みさえしっかりしていれば、ビジュアル化はデザイナー（あるいはデザイン特化のAIツール）に任せられます。AIはあくまで手段であり、目的は論理的な構成を作ることです。
Q3: 専門的なデザイン知識がなくても指示できますか？
A: はい。「誰に何を伝えたいか」さえ言語化できれば問題ありません。
「マージンを何ピクセル空けて」「フォントサイズは...」といった指示は不要です。むしろAIにはマーケティング的な指示を出してください。
- × デザイン的な指示：「背景を青にして、ボタンを大きく」
- ○ マーケティング的な指示：「信頼感を重視したいので落ち着いたトーンで。CTAボタンは迷わせないように目立たせる配置で」
これで十分伝わります。AIは膨大なWebデザインの知識を持っているので、目的さえ伝えれば、最適な構成パターンを提案してくれます。
ミニプロンプト例：
「B2B向けのSaaS製品のLPを作ろうとしています。一般的な構成要素（セクション）を上から順にリストアップしてください。」
Q4-Q6：失敗しない「構成案生成」プロンプトの型
ここからが実践編です。AIに「良い構成案」を出させるには、プロンプト（指示文）に型があります。漠然と「LP作って」と投げても、ありきたりな回答しか返ってきません。
Q4: 最初にどのような情報をAIに与えれば良いですか？
A: 必須3要素は「ターゲットペルソナ」「訴求商材」「コンバージョンゴール」です。
AIは文脈を読み取る能力に長けていますが、前提条件がないと推測で埋めてしまいます。以下の要素は必ず定義してください。
- ターゲット: 誰の悩みを解決するのか（例：エクセル管理に限界を感じている人事担当者）
- 商材: 何を提供するのか（例：クラウド型タレントマネジメントシステム）
- ゴール: 読者にどうしてほしいか（例：無料デモの申し込み）
これらを「前提条件」として入力するだけで、出力の精度は段違いになります。
Q5: 「売れる構成」にするためのプロンプトのコツは？
A: 「PASONA」や「AIDA」などのフレームワークを指定して構成させましょう。
AIに自由に書かせると、論理が飛躍することがあります。そこで、マーケティングの定石であるフレームワークを指定します。
- PASONAの法則: Problem（問題）→ Affinity（親近感）→ Solution（解決策）→ Offer（提案）→ Narrowing down（絞り込み）→ Action（行動）
- BEAFの法則: Benefit（メリット）→ Evidence（証拠）→ Advantage（優位性）→ Feature（特徴）
B2Bなら信頼重視のBEAF、悩み解決型ならPASONAなど、商材に合わせて使い分けると効果的です。
ミニプロンプト例：
「あなたは熟練のWebマーケターです。以下の前提条件に基づき、PASONAの法則を用いてLPのセクション構成案を作成してください。表形式で出力し、『セクション名』『主な内容』『ユーザー心理』の3列を作ってください。
[前提条件]...」
Q6: セクションごとの具体的なコピーも書いてもらえますか？
A: はい。ただし、いきなり全体を書かせず、FV（ファーストビュー）から順に深掘りするのがコツです。
一度に「全部の文章を書いて」と頼むと、後半に行くほど内容が薄くなりがちです。まずは全体の骨子（セクション構成）を決め、その後にセクションごとの詳細を生成させる「対話形式」がおすすめです。
特にファーストビュー（FV）はLPの命です。「FVだけで3パターン提案して」と指示し、キャッチコピーやメインビジュアルのアイデアを比較検討しましょう。
Q7-Q8：出力結果が「ありきたり」な時の修正術
AIが出してきた構成案を見て「間違ってはいないが、一般的すぎる」と感じることがあるでしょう。それはAIの学習データが「一般的な正解」に基づいているからです。ここからがプロジェクトマネージャーとしての腕の見せ所です。
Q7: 一般論ばかりで自社の強みが反映されていない時は？
A: 「自社独自のUSP（Unique Selling Proposition）」を追加情報として注入してください。
AIは企業の内部事情を知りません。「競合他社は〇〇だが、自社は××ができる」という具体的な差別化ポイントを明示する必要があります。
例えば、「業界最安値」なのか「サポートの手厚さ」なのか。この情報を追加した上で、「この強みが最も伝わるように、解決策セクションを書き直して」と指示します。
Q8: 構成の流れに違和感がある場合の修正指示は？
A: ユーザーの「心理変容プロセス」をAIに確認させましょう。
構成に違和感がある場合、論理の階段が抜けていることが多いです。そんな時は、AIに今の構成を自己評価させてみてください。
ミニプロンプト例：
「作成した構成案について、ユーザーが『不安』から『納得』、そして『欲求』へと心理変化する流れになっているか評価してください。論理の飛躍がある場合は指摘し、修正案を提示してください。」
これを実行すると、AIは「確かに、解決策の提示の前に『信頼性の担保（実績）』が抜けていました」といった具合に、自ら修正してくれます。
Q9-Q10：デザイナーへの引き継ぎと次のステップ
素晴らしいテキスト構成案ができたら、いよいよ形にするフェーズです。ここでもAI活用が活きてきます。
Q9: AIが出したテキスト構成をどうやってデザイナーに渡すべきですか？
A: 構成案だけでなく、「意図」と「優先順位」を注釈として加えて渡します。
AIが出力した表形式の構成案は、そのまま立派な指示書になります。さらに、Mermaid記法を使ってフロー図として出力させるのも一つの手です。
しかし最も重要なのは、なぜその構成にしたかという「意図」です。「ここはユーザーの不安を取り除く場所だから、文字よりも安心感のある写真を目立たせてほしい」といった注釈を加えることで、デザイナーは迷いなくビジュアル制作に入れます。
Q10: AI活用で削減できた時間は何に使うべきですか？
A: 「ユーザーリサーチ」や「クリエイティブの検証」に充ててください。
AIを使えば、構成案作成の時間は大幅に短縮されます。その浮いた時間で、実際の顧客の声を聞いたり、競合のLPを分析したり、公開後のABテストの計画を立てたりすることが重要です。
AIは「作る」ことは得意ですが、「事実を集める」ことや「最終的な決断」は人間にしかできません。これこそが、AI駆動PMとしての正しい時間の使い方であり、プロジェクトのROIを最大化する鍵となります。
まとめ：AIは「思考の整理」にこそ使うべき
LPのワイヤーフレーム作りにおいて、AIは単なる自動化ツールではありません。マーケティング思考を整理し、ユーザー視点の論理構造を構築するための強力なパートナーです。
本記事のポイント:
- まずはテキストで設計: ビジュアルの前に「言葉」で情報を構造化する。
- 前提条件の定義: ターゲット、商材、ゴールを明確に伝える。
- フレームワークの活用: PASONAなどを指定して論理構成を作る。
- 独自性の注入: AIの一般論に自社のUSPを加えてブラッシュアップする。
こうして作られたワイヤーフレームは、デザイナーにとっても「意図が明確でデザインしやすい指示書」となります。結果として、修正ラリーが減り、プロジェクト全体のROIが向上します。
コメント