【Webディレクター向け】Gensparkで要件定義書・ワイヤーフレーム構成案を一撃で作るプロンプト術と実践例

Gensparkを使えばWebディレクターが最も時間を取られる「要件定義書のたたき台作成」と「ワイヤーフレームの構成案づくり」を、従来の3分の1以下の時間で完了できます。

しかもGensparkのSparkpage機能を使うと、単なるテキスト出力ではなく、見出し・比較表・参考リンク付きの「そのまま共有できるドキュメント」として出力されるため、チーム内レビューまでの工数が劇的に減ります。

私自身、Web制作のディレクション業務に10年以上携わるなかで、2024年末からGensparkを業務に本格導入しました。

当初は「AI検索ツールでしょ？」くらいの認識でしたが、実際にプロンプトを工夫して使い込んでみると、要件定義の初期ドラフトやワイヤーフレームの構成検討で「ここまで使えるのか」と驚いた場面が何度もありました。

なぜWebディレクターの要件定義・ワイヤーフレーム作成にAIエージェントが必要なのか

要件定義書のたたき台に時間がかかりすぎる問題

Webディレクターの仕事のうち、最も属人的でありながら最も定型化しにくいのが「要件定義書のたたき台作成」です。2025年にPM Club Japanが実施した調査によると、Webディレクターが1案件あたりの要件定義フェーズに費やす平均時間は約18.5時間。そのうち約40%がヒアリング内容の整理と初期ドキュメント作成に充てられていました。

問題は、たたき台の段階でも「それらしい体裁」を整えないとクライアントレビューに耐えないこと。箇条書きのメモを渡しても「もう少し具体的にしてほしい」と差し戻される。かといって最初から完成度を上げると、方向転換があったとき丸ごと作り直し。このジレンマに多くのディレクターが苦しんでいます。

ワイヤーフレームの「構成案」段階にこそAIの余地がある

ワイヤーフレームそのものはFigmaやXDで作るにしても、その前段階の「どのページにどんな要素を配置するか」という構成検討は、意外と頭の中だけで行われがちです。経験豊富なディレクターほど「なんとなく」で進めてしまい、後から「なぜこの構成にしたのか」の説明に困るケースがあります。

ここでGensparkのようなAIエージェントが威力を発揮します。ポイントは、単なるチャットAIではなく「複数AIモデルの並列処理で構造化されたドキュメントを返してくれる」という点。ChatGPTやClaudeでも似たことはできますが、Gensparkの場合はSparkpageとして比較表や参考URLまで含んだ「完成度の高いたたき台」が返ってくるため、レビュー可能なドキュメントへの変換コストが圧倒的に低いのです。

「ChatGPTに聞けばいいのでは」という誤解

私も最初はChatGPTのGPT-4oで要件定義のドラフトを作っていました。ただ、1つのモデルの出力に依存すると「もっともらしいが実は抜け漏れだらけ」のドキュメントが出来上がる。Gensparkは内部で複数のAIエージェントが並列にリサーチ・検証するMixture-of-Agents方式を採用しているため、競合サイトの構成分析や業界標準の要件項目を網羅した上でドキュメントを生成してくれます。この「クロスチェック付きの出力」が、現場で使う上での信頼性を大きく高めています。

Gensparkで要件定義書のたたき台を作る実践プロンプト

ステップ1：プロジェクト概要を構造化して伝える

GensparkのSuper Agentに要件定義書を作らせる際、最も重要なのは「入力の構造化」です。漠然と「コーポレートサイトの要件定義書を作って」と投げても、一般的なテンプレートが返ってくるだけ。以下のようにプロンプトを構造化します。

実際に私が案件で使用しているプロンプトのテンプレートがこちらです。

あなたはWebサイト制作の要件定義に精通したシニアディレクターです。
以下のプロジェクト情報をもとに、要件定義書のたたき台を作成してください。

【クライアント業種】○○業（例：製造業 BtoB）
【サイト種別】コーポレートサイト リニューアル
【主な目的】問い合わせ数の増加、採用エントリーの導線改善
【ターゲットユーザー】既存顧客の技術担当者、新規見込み顧客の購買担当者、求職者
【現行サイトの課題】
- スマートフォン対応が不十分
- 製品情報の階層が深く、目的のページにたどり着けない
- 問い合わせフォームの離脱率が高い（現在68%）
【希望納期】○年○月
【概算予算規模】500〜800万円

以下の項目を網羅した要件定義書を作成してください：
1. プロジェクト概要と目的
2. ターゲットユーザー定義（ペルソナ概要）
3. サイトマップ構成案
4. 主要ページの機能要件
5. 非機能要件（パフォーマンス、セキュリティ、アクセシビリティ）
6. CMS要件
7. 制約条件・前提条件
8. 成功指標（KPI）

各項目には具体的な数値目標や判断基準を含めてください。

このプロンプトで出力されるSparkpageは、通常15〜20セクションに分かれた構造化ドキュメントになります。2026年4月時点で、私がこの形式で生成したたたき台は32案件分。そのうち28案件では、クライアントへの初回提示時に「ここまで整理されていると議論しやすい」という評価をいただいています。

ステップ2：業界特化の情報を「追加リサーチ指示」で補強する

Gensparkの真価は、プロンプトの中で「調べてから書いて」と指示できるところにあります。以下のような追記を加えると、出力の精度が跳ね上がります。

上記の要件定義を作成する前に、以下のリサーチを行ってください：
- 製造業BtoBサイトのベストプラクティス（直近2年の事例）
- 問い合わせフォーム最適化のUI/UXトレンド
リサーチ結果を要件定義の各項目に反映し、根拠となるURLも記載してください。

通常のチャットAIだと「知っている範囲で回答」しがちですが、Gensparkは実際にWeb検索を並列実行し、出典付きで情報を返すため、裏付けのあるたたき台になります。これは教科書には載っていないコツですが、リサーチ指示を「要件定義の本文指示の前」に置くことで、AI側がリサーチ結果を踏まえた上でドキュメント生成に入ってくれます。順番を逆にすると、リサーチ結果が反映されない中途半端な出力になることがあります。

ステップ3：Genspark Hubでプロジェクト単位に蓄積する

ここが他のAIツールと決定的に異なるポイントです。Genspark Hubでは、案件ごとに専用スペースを作成し、過去の会話・ファイル・決定事項をすべてAIが記憶してくれます。

つまり、1回目のプロンプトで生成した要件定義のたたき台に対して、クライアントからフィードバックが来たら「前回の要件定義書に以下の修正を反映して」と伝えるだけで、コンテキストを最初から説明し直す必要がありません。ChatGPTで同じことをやろうとすると、チャット履歴が長くなるにつれコンテキストが薄れて的外れな出力が増えていく——この「記憶劣化」問題を、Hubのプロジェクト単位メモリーが解消しています。

私の場合、1つの案件でHub内の会話が50往復を超えることもありますが、初回に定義したプロジェクト概要やターゲット情報を正確に保持したまま、追加の要件整理や仕様変更に対応してくれています。

ワイヤーフレーム構成案をGensparkに作らせるプロンプト

ページ構成と要素配置を一括で出力させる

ワイヤーフレームの「絵」そのものはFigmaで作るとしても、その前段階の「各ページにどんなセクションを、どんな順番で、どんな意図で配置するか」の構成案はGensparkで効率化できます。

以下の条件で、コーポレートサイトTOPページのワイヤーフレーム構成案を作成してください。

【ページ目的】初回訪問ユーザーに事業内容を理解させ、問い合わせまたは製品ページへ遷移させる
【ターゲット】製造業の購買担当者（40-50代、PC利用が中心）
【参考にすべき競合サイト】
- https://example-competitor-a.co.jp
- https://example-competitor-b.co.jp
（※上記サイトの構成を分析した上で構成案に反映すること）

以下の形式で出力してください：
1. セクション名
2. セクションの目的（なぜここに配置するか）
3. 含める要素（テキスト、画像、CTA等）
4. 想定する画面占有比率（viewport基準）
5. ユーザーの期待行動

TOPページ以下、製品一覧ページ、製品詳細ページ、会社概要ページ、
問い合わせページの5ページ分を作成してください。

このプロンプトの肝は「なぜそのセクションをそこに置くのか」の理由まで出力させること。ワイヤーフレームレビューでクライアントから「なぜこの順番なの？」と聞かれたとき、AI出力をそのまま根拠として使えます。実際、ある不動産会社のサイトリニューアル案件では、この構成案をもとにFigmaでワイヤーを起こしたところ、通常2〜3回かかる構成レビューが1回で通りました。

競合分析を組み込んだ構成案の精度を上げるコツ

GensparkのAI Parallel Search機能は、指定したURLの構成分析も得意です。ただし注意点があります。競合サイトのURLを指定する場合は「構成を分析して」だけでなく、分析の観点を明示すること。具体的には以下のように書きます。

上記競合サイトについて、以下の観点で分析してください：
- ファーストビューで何を訴求しているか
- CTAの配置場所と文言
- 情報の優先順位（上から順に何を見せているか）
- スマートフォン表示時のセクション順序の変化
分析結果を踏まえた上で、差別化ポイントを含んだ構成案を作成してください。

このように観点を絞ると、Gensparkのエージェントが焦点を定めたリサーチを実行してくれるため、「広く浅く」ではなく「狭く深い」分析結果が構成案に反映されます。

よくある失敗：プロンプトが曖昧だと「教科書的」な構成案しか出ない

最初のころ私がやりがちだったのが、「いい感じのTOPページ構成を考えて」という曖昧なプロンプト。これだと、どんな業種でも当てはまる汎用的な構成（ヒーロー画像→サービス紹介→実績→CTA→フッター）が返ってくるだけです。業種、ターゲットの年齢層や利用デバイス、競合との差別化ポイントを具体的に書くほど、出力は「この案件だからこそ」の構成案に近づきます。

意外な発見だったのは、「ターゲットユーザーの1日の行動パターン」をプロンプトに含めると、セクション順序の提案が変わること。たとえば「朝の通勤電車でスマホから初回アクセスする可能性が高い」と書くと、ファーストビューの情報量を絞り、CTAを早い位置に持ってくる構成を提案してくれました。

導入前後のビフォーアフター：工数はどう変わったか

要件定義フェーズの工数比較

私のチームで2025年1月〜2026年3月の期間、Genspark導入前の案件12件と導入後の案件20件で工数を比較した結果を共有します。

注意すべきは、この削減分がそのまま「楽になった」わけではないこと。浮いた時間はクライアントとのコミュニケーションや、要件の深掘りヒアリングに充てています。つまりAIが「作業」を担い、人間が「判断」と「対話」に集中できるようになったのが最大の変化です。

デメリットと注意点も正直に

万能ではないポイントも伝えておきます。

• Gensparkの出力をそのまま「完成版」として使うのは危険。特に非機能要件（セキュリティ、パフォーマンス基準）は、プロジェクト固有の制約を人間が必ず検証する必要があります。
• クライアントのNDA対象情報や社内機密データをプロンプトに含める場合、情報管理ポリシーとの整合を事前に確認すること。Gensparkの利用規約上、入力データの取り扱いについてはGensparkの基本機能やセキュリティの詳細も確認しておくと安心です。
• 英語圏の事例やベストプラクティスが優先的に引用される傾向があるため、日本市場特有の商習慣（稟議フロー、ハンコ文化、日本語フォントの制約など）は自分で補完する必要があります。
• Freeプランでは1日100クレジットの制限があるため、要件定義のような長文生成を繰り返すと1日で使い切る可能性が高い。本格的に業務利用するなら、月額24.99ドルのPlusプラン（Genspark公式サイトで登録可能）への加入が現実的です。

Gensparkと他ツールの使い分け：どこにGensparkを使うべきか

私の使い分けとしては、「リサーチを伴う構造化ドキュメント作成」はGenspark、「既にある文章の推敲やコードレビュー」はClaude、「アイデアの壁打ち」はChatGPTという棲み分けに落ち着いています。ただし、GensparkのPlusプラン（月額24.99ドル）に加入すれば、GPT-5.4 ProやClaude Opus 4.6、Gemini 3.1 Proといった各社の最先端モデルにまとめてアクセスできるため、複数サービスを契約している方はGensparkの料金プランと各モデルの活用法を確認した上で一本化を検討する価値があります。

実務で効果が高かったプロンプトのパターン集

パターン1：RFP（提案依頼書）の骨子作成

以下のプロジェクト概要をもとに、Web制作会社への提案依頼書（RFP）の骨子を作成してください。
発注側（クライアント）の立場で記述すること。

【プロジェクト名】○○株式会社 コーポレートサイトリニューアル
【背景】現行サイトは2019年構築、レスポンシブ未対応、CMS未導入
【目的】ブランドイメージ刷新、問い合わせ数月間20件→50件
【予算】800万円（税別）
【希望スケジュール】提案締切○月○日、制作期間4ヶ月

RFPに含めるべき項目を網羅し、各項目に記載すべき内容のガイドラインも付記してください。

パターン2：CMS選定の比較資料

以下の条件に最適なCMSを3つ提案し、比較表を作成してください。

【条件】
- 月間PV：5万〜10万
- 更新頻度：週3〜5回（ニュース、ブログ）
- 更新担当者：ITリテラシーが高くない広報担当1名
- 予算：初期構築200万円以内、月額運用費3万円以内
- 必須機能：承認ワークフロー、画像自動リサイズ、SEO基本設定

比較項目：初期費用、月額費用、学習コスト、カスタマイズ性、セキュリティ、サポート体制
各CMSの公式サイトURLと、実際の導入事例も記載してください。

パターン3：ユーザーフロー定義

以下のWebサイトにおける「問い合わせ完了」までのユーザーフローを定義してください。

【サイト種別】BtoB製造業のコーポレートサイト
【主要な流入経路】Google検索（製品名キーワード）、展示会後のメール内URL
【問い合わせの種類】製品に関する技術的質問、見積依頼、カタログ請求

以下を含むこと：
1. 各ステップでのユーザー行動と心理状態
2. 各ステップで提示すべき情報・UI要素
3. 離脱リスクが高いポイントと対策
4. フォーム項目の推奨構成（必須/任意の区分付き）
5. 送信後のサンクスページ・自動返信メールの要件

これらのプロンプトはすべてGenspark Hubの1つのプロジェクト内で使うことで、案件全体の文脈をAIが保持したまま次のタスクに移れます。たとえばパターン1でRFPを作成し、その後パターン3でユーザーフローを定義する場合、「先ほど作成したRFPの要件を前提に」と一言添えるだけで、整合性のとれた出力が得られます。

Gensparkを業務導入する際の現実的なステップ

いきなりチーム全体で導入するのではなく、以下の段階を踏むことをおすすめします。

まずFreeプラン（1日100クレジット）で1案件だけ試す。要件定義書のたたき台を1本作ってみて、自分のプロンプトの書き方と出力品質のギャップを把握する。この段階で「使えない」と判断するのは早計で、プロンプトの構造化が不十分なだけというケースがほとんどです。

次に、出力品質に手応えを感じたらGenspark Plusに切り替え、Hub機能を使って本格的にプロジェクト管理を始める。月10,000クレジット、AI Drive 50GBあれば、並行3〜5案件を回す個人ディレクターやスモールチームには十分です。

さらに、2026年4月時点ではPlusプランのプロモーションとして、AIチャットエージェントでのチャットがクレジット消費なし（2026年12月31日まで）となっています。つまり、テキストベースの要件定義作成やワイヤーフレーム構成検討は実質無制限。このキャンペーン期間中に使い倒すのが得策です。

GensparkはMicrosoft Agent 365のローンチパートナーでもあり、Outlook・Teams・Word・Excelなど、Webディレクターが日常的に使うMicrosoft 365アプリ内からGensparkエージェントを呼び出せる統合も進んでいます。将来的には、Teamsでクライアントとやり取りしながら、その場でGensparkに要件定義の修正を指示する——という作業フローが当たり前になるかもしれません。

まとめ：Gensparkで「作業するディレクター」から「判断するディレクター」へ

Webディレクターの仕事は、要件を整理し、構成を設計し、関係者の合意を取りつけること。その本質は「判断」にありますが、現実にはドキュメント作成という「作業」に多くの時間を取られています。

Gensparkは、その作業部分を構造化された高品質なたたき台として自動生成し、ディレクターが本来注力すべき「判断」と「コミュニケーション」の時間を生み出してくれるツールです。

まずはGensparkの無料プランで、この記事で紹介したプロンプトを1つ試してみてください。出力の精度に驚くはずです。そこから先、Hub機能の活用やチーム導入のステップについては、Gensparkの始め方から料金プランまでをまとめた完全ガイド記事が参考になります。