WebディレクターのAI活用　要件定義・サイトマップ・ワイヤーフレームのプロンプト例・注意点

この記事で扱うツール

値は TRAIL のファクトパック（2026年11月6日時点）と、各ツールの使い方の記事による。

料金の通貨は、ChatGPT が円、ほかの3つは米ドルだ。v0 の個人向けの Premium（月$20）は新しくは契約できない。Perplexity の料金ページには月払いの額の記載がない。

この記事はサイトの制作と運用を進めるディレクションの場面に絞る。画像やデザインの制作はデザインのAI活用、コードを書く作業はエンジニアのAI活用で扱う。製品の要件づくりはプロダクトマネージャーのAI活用、集客や広告はマーケティングのAI活用にある。

場面ごとの使い方

ここでのプロンプトは各ツールにこう頼めるという例だ。[ ] の中を自分の内容に差し替えて使う。TRAIL は出力を確かめていないので、できたものは必ず自分で確かめる。

ヒアリングのメモから要件を整理する

クライアントへのヒアリングを終え、メモと受け取った資料から要件をまとめたいときだ。Claude のプロジェクトでは資料をナレッジに入れ、プロジェクトの中だけで効く指示も書いておける（Anthropic ヘルプセンター）。claude.ai/projects で「+ 新規プロジェクト」をクリックし、案件ごとにプロジェクトを作る。ヒアリングのメモや RFP（提案の依頼書）をナレッジに入れ、「プロジェクト指示を設定」に次のように書く。

あなたは[クライアント名]の[サイト名]のリニューアルで、要件の整理を手伝う担当です。
要件はナレッジの[ヒアリングのメモ]と[RFP]にある内容だけから整理してください。
次の見出しで書いてください：目的、対象の利用者、必要なページと機能、更新の体制、公開の時期、制約。
資料にないことは推測で埋めず、「要確認」として最後に一覧にしてください。

そのうえで、会話で「要件の一覧を作ってください」と頼む。プロジェクトに入れた資料はキャッシュされ、同じ資料を毎回アップロードするより、上限に数えられる量が少なくなる。Free で作れるプロジェクトは5つまでだ。手順は Claude の使い方にある。

要件の抜けとクライアントへの確認事項を洗い出す

整理した要件に抜けがないかを、次の打ち合わせの前に確かめたいときだ。Claude は PDF、Word、CSV、Excel などのファイルを読み込み、内容への質問や要約を頼める（Anthropic ヘルプセンター）。同じプロジェクトの会話で、次のように頼む。

ここまでに整理した要件を、[RFP]と[ヒアリングのメモ]に照らしてください。
1. RFP にあるのに、要件で触れていない項目
2. ヒアリングのメモと RFP で食い違う点
3. サイトの制作でふつう決めておく項目のうち、資料から決まっていないもの（例：対応ブラウザ、更新する人、原稿を用意する人、公開後の運用）
それぞれに、資料のどこの記述かを添え、クライアントに聞く質問の形にしてください。

ヘルプは複雑な依頼を小さな段階に分けるよう勧めている。照らし合わせと質問の文づくりを分けて頼んでもよい。質問の一覧は送る前に自分で読み、クライアントとの合意の内容に合うかを確かめる。

サイトマップとページ構成の案を出す

要件をもとに、サイトマップとページごとの構成の案を作りたいときだ。Claude は動作する数式を含むスプレッドシートを作れる。Excel のファイルを扱わせるには、「設定」→「機能」でコードの実行とファイルの作成をオンにしておく（Claude の使い方）。同じプロジェクトで、次のように頼む。

整理した要件をもとに、[サイト名]のサイトマップの案を Excel のファイルで作ってください。
列は、階層、ページ名、URL の案、ページの目的、主な内容、原稿を用意する人、にしてください。
ページ数の合計も入れてください。
要件から決められないページは、行を分けて「要確認」としてください。

できた案は、ページの数と分け方をクライアントと決めるたたき台として使う。

ワイヤーフレームのたたき台を動く画面にする

ページ構成を、クライアントが触れる画面にして見せたいときだ。v0 は作りたいものを文章で伝えると動く Web アプリを作り、ワイヤーフレームやデザイン案から画面を作ることもできる（v0 の公式ドキュメント）。文章でアプリを作るこのやり方はバイブコーディングと呼ばれる。公式の解説（v0 の Text Prompting）は、複数の機能があるアプリは計画から始めるよう勧めている。入力欄の「+」から「Instructions」の「Plan Mode」を選ぶと、v0 はコードを変える前に計画を作り、承認を求める。手描きのワイヤーの画像を添付して、次のように頼む。

添付したワイヤーフレームをもとに、[サイト名]の[トップページ]のたたき台を作って。
打ち合わせで見せるためのもので、本番には使いません。
色は白と灰色だけにし、画像の場所は灰色の枠で示して。文章は架空のサンプルにして。
スマホの幅でも崩れないようにして。

v0 のよくある質問は、出力が不完全だったり、バグを含んだりすることがあるとしている。たたき台は打ち合わせで見せるためのものとし、本番の実装は制作チームが別に判断する。v0 は画面の写真からページを写し取ることもできるが、ほかの会社のサイトの画面を渡して、そのデザインをまねさせない。手順は v0 の使い方にある。

競合サイトの公開情報を出典つきで調べる

提案の前に、クライアントの競合のサイトがどんな情報を載せているかを調べたいときだ。Perplexity は質問を受けるとウェブを検索して要約し、回答のどの部分がどの出典から来たかを示す（Perplexity のヘルプセンター）。AI検索のサービスだ。Research は数十回の検索をして数百の出典を読み、レポートにまとめる。検索モードを「Deep Research」にして、次のように頼む。

[業種]で[地域]に向けてサービスを提供している、次の会社の公式サイトを調べてください。
[会社名1]、[会社名2]、[会社名3]
各サイトに載っている主な情報の種類（料金、事例、よくある質問、問い合わせの方法など）を表で比べてください。
文章の引き写しはせず、何が載っているかだけを書き、各行に出典の URL を付けてください。
確かめられない点は「不明」と書いてください。

回答に付いた出典のリンクを開き、今のサイトの内容と合うかを確かめる。競合の文章や見た目を提案や原稿にそのまま使わない。無料のプランの Research はヘルプの比較表で月1回までだ。手順は Perplexity の使い方にある。

見積もりの項目を洗い出す

サイトマップが固まり、見積もりに入れる作業の項目を漏れなく並べたいときだ。ChatGPT は Excel や CSV のファイルを読み込んで集計し、表にできる（OpenAI のヘルプセンター）。サイトマップのファイルと、自社の見積もりの項目の一覧を添付して、次のように頼む。

添付した[サイトマップのファイル名]と、自社の見積もりの項目の一覧[ファイル名]を使ってください。
サイトマップのページごとに、一覧のどの項目が必要かを表にしてください。
一覧にない作業が要りそうなページは、その理由と一緒に別の表にしてください。
金額と工数は書かないでください。

金額と工数の判断は人が行い、AI には項目の洗い出しまでを頼む。ヘルプは1行目に分かりやすい列見出しを置き、1件を1行にした表のほうが分析しやすいとしている。無料版のファイルのアップロードは1日3ファイルまでだ。

原稿と画像の代替テキストの下書きを作る

クライアントから届いた資料と写真をもとに、ページの原稿と、画像の代替テキスト（alt）の下書きを作りたいときだ。Claude は PDF や Word の文書と、JPEG、PNG、GIF、WebP の画像を読み込める（Claude の使い方）。資料と写真を添付して、次のように頼む。

添付した[会社案内の PDF]をもとに、[会社概要]のページの原稿の下書きを書いてください。
見出しはサイトマップの[ページ名]の行の「主な内容」に合わせてください。
数字、日付、固有名詞は資料から引用し、資料にないことは書かずに「要確認」と書いてください。
添付した写真ごとに、画像の代替テキストの案を1文で書いてください。写っていないことは書かないでください。

原稿の事実と写真の内容は、公開の前にクライアントに確かめる。代替テキストの書き方は案件で決めたアクセシビリティの基準に照らして直す。文章の書き直しや推敲の頼み方は文章・ブログ執筆のAI活用にある。

公開前のチェックリストを作る

公開の前に、ページごとに確かめる項目をそろえたいときだ。ChatGPT のプロジェクトは関連するチャット、ファイル、指示をまとめ、プロジェクトの指示はそのプロジェクトの中だけで使われる（OpenAI のヘルプセンター）。サイドバーの「新しいプロジェクト」で案件ごとに作り、要件の一覧、サイトマップ、自社の公開前の確認の決まりをファイルとして入れる。指示に次のように書く。

あなたは[サイト名]の公開前の確認を手伝う担当です。
入れたファイルの要件とサイトマップと、自社の確認の決まりから、ページごとのチェックリストを作ってください。
項目は、リンク、フォーム、表示の崩れ、画像の代替テキスト、ページのタイトルと説明文、計測のタグ、のように分けてください。
ファイルにない項目を足すときは、「追加の提案」と書いて区別してください。

チェックリストを作るのは AI だが、実際のサイトで1つずつ確かめるのは人だ。プロジェクトに入れられるファイルは、Free が5個、Go と Plus が25個、Pro、Business、Enterprise、Edu が40個までだ。

定例の打ち合わせの議事録を作る

クライアントとの定例の打ち合わせを録音し、決まったことと宿題をまとめたいときだ。ChatGPT は録音した音声ファイルを読み込み、文字起こしと要約ができる（OpenAI のヘルプセンター）。音声ファイルのアップロードは有料プランで使え、無料版では使えない。こうした仕組みは AI議事録と呼ばれる。録音ファイルを添付して、次のように頼む。

添付した[案件名]の定例の録音を文字起こしし、次の形でまとめてください。
1. 決まったこと
2. クライアントの宿題と、制作側の宿題（担当者と期限が分かるものは添える）
3. 次回までに確かめること
4. スケジュールや費用に関わる発言
最後に、参加者に送る確認のメールの下書きも作ってください。

ヘルプによると、文字起こしには誤りが含まれることがあり、話者の識別も正確でない場合がある。録音することは、打ち合わせの初めに参加者に伝える。スケジュールや費用に関わる発言は、元の録音と照らしてから送る。

社内の情報を入れる前に

クライアントの未公開の情報、サイトのアクセスデータ、問い合わせに含まれる個人情報は、入れる前に秘密保持の契約と会社向けプランを確かめる。契約で外部のサービスへの入力が禁じられていないか、使うプランで入力が学習に使われないかを見る。各ツールの公式の説明は次のとおりだ。

Claude

Free、Pro、Max などでは、会話をモデルの学習に使うかを利用者が設定で選ぶ（Anthropic のプライバシーセンター）。止めるときは「設定」→「プライバシー」を開き、「AIモデルの改善を支援する」をオフにする。安全のための分類器がフラグを付けた会話は、オフにしても安全の研究などに使われることがある。Team、Enterprise、API などの商用の製品では、初期設定で入力と出力を学習に使わない。

ChatGPT

無料版、Plus、Pro の個人用ワークスペースでは、初期設定で会話がモデルの改善に使われる。止めるときは「設定」→「データコントロール」で「すべての人のためにモデルを改善する」をオフにする。オフにしても、回答に「いいね」や「よくないね」を付けると、その会話全体が学習に使われることがある。Business、Enterprise、Edu のワークスペースの内容は、初期設定では学習に使われない（OpenAI のヘルプセンター）。

v0

v0 は利用者の指示や作った内容を、製品の改善のために外部の提供元のモデルに使うことがある。学習に使わせない設定は Business と Enterprise だけにあり、Free と Plus にはない。Business では初期設定で学習から外れる（v0 のよくある質問）。たたき台にはクライアントの実際のデータを入れず、架空のサンプルを使う。

Perplexity

個人のプランでは、検索の内容とフィードバックが Perplexity の AI モデルの改善に使われる。止めるときは、プロフィールから設定を開き、「AI Data Usage」をオフにする。Enterprise Pro と Enterprise Max では、顧客のデータを AI モデルの学習に使わない（Perplexity のヘルプセンター）。Perplexity の個人向けの利用規約は、サービスの利用を個人の非営利の目的に限って許している。Enterprise には別の規約が適用されるので、仕事で使うなら Enterprise を選ぶ方法がある。

気をつけること

回答が間違っていることがある

AI が事実と違う内容をもっともらしく答えることをハルシネーションという。OpenAI のヘルプは、ChatGPT が誤った情報や、存在しない引用や出典を出すことがあると説明し、回答を初稿として使うよう勧めている。Anthropic の利用規約も、出力は正確とは限らないとしている。Perplexity の利用規約は、出力が不正確、偏った、または不完全な情報を含む可能性があるとしている。原稿の事実、競合のサイトの内容、議事録の決定事項は、元の資料や録音で確かめてから使う。

個人情報や顧客の情報の扱い

サイトの問い合わせの記録やアクセスデータには、利用者の名前、連絡先、行動の記録が含まれることがある。集計や下書きに使う表は、個人を特定できる列を消してから添付する。議事録の録音にも、参加者の名前や発言がそのまま残る。この記事は法的な助言ではない。個人情報の扱いと録音の保存の期間は、社内の担当とクライアントと決める。

社内ルールの確認

会社が許可していない AI を仕事に使うことをシャドーAIという。会社のアカウントで使うときの条件は、ツールごとに違う。Claude の Team と Enterprise では、組織のオーナーが使える機能を決める。ChatGPT の Business と Enterprise では、管理者がメンバーの使えるモデルを決められる。v0 の Enterprise では公開前の承認の流れを使える。クライアントとの契約で、制作物に AI を使ってよいかが決まっている場合もあるので、案件の初めに確かめる。

よくある質問

次に読む

• Claude の使い方
• ChatGPT の使い方
• v0 の使い方
• Perplexity の使い方
• Claude と ChatGPT の違い
• バイブコーディングとは