現場ノウハウをチームで使える形に。ヒアリング品質と生産性を高める概算チェックツール 使い方ガイド
お問い合わせ ツールへ戻る β版
💡ヒアリングした内容を、確認・共有・Excel出力・AI活用までつなげるためのガイドです。
HOW TO USE

Excel出力から、
AI利活用まで。

WEBディレクターヘルパーは、Web制作・改修相談の確認漏れを減らし、ヒアリング内容を社内共有・クライアント確認・Excel保存・AI活用までつなげるための補助ツールです。このページでは、使用方法と出力したExcelをAI生成のたたき台づくりに活用するためのプロンプト例などをまとめています。

BASIC FLOW

基本の使い方

まずは相談内容を選び、表示された確認事項をもとにヒアリングします。

1

相談内容を選ぶ

新規制作、リニューアル、部分改修、LP制作など、今回の相談に近いものを選びます。

2

確認事項を聞く

選択内容に応じて、必要な確認事項が表示されます。聞けたものはチェックしていきます。

3

メモを残す

補足や懸念点、決まっていないことはメモ欄へ。あとで社内共有やAI活用に効いてきます。

4

共有文面をコピー

社内共有メモやクライアント確認文面をコピーして、確認漏れを減らします。

5

Excelで出力

確認済み・未確認・メモをExcelで保存できます。あとから見返す時にも便利です。

6

AIにも渡してみる

出力したExcelとプロンプト例を使って、提案書台割や構成案のたたき台を作れます。

EXCEL EXPORT

Excel出力の使い方

Excelは、ヒアリング結果の保存だけでなく、AIに渡すための材料としても使えます。

チェック状況を残せます

確認済みの項目、未確認の項目、メモ欄をまとめて出力できます。ブラウザ内保存だけに頼らず、必要な内容はファイルとして残しておくのがおすすめです。

社内共有しやすくなります

相談内容や確認事項がセクションごとに整理されるため、営業・ディレクター・デザイナー・コーダー間の共有にも使いやすくなります。

AIに渡す材料になります

Excelとプロンプト例を一緒にAIへ渡すことで、提案書台割・ページ構成案・ワイヤーフレーム案などのたたき台を作りやすくなります。

不足情報も見えやすくなります

未確認項目が残っていれば、AIにも「足りない情報」として扱わせることができます。決め打ちではなく、要確認として整理するのがポイントです。

AI PROMPT

出力したExcelを、AIに渡してみよう

ヒアリングチェックシートを添付し、目的に合ったプロンプトを一緒に投げると、次のアウトプットのたたき台を作れます。

※ヒアリングチェックシート以外にも、手持ちのメモや与件書、RFP、議事録などを添付し、プロンプトと一緒に利用できます。

ヘルパー君
Excelとセットで使うのがおすすめです。
メモ欄に補足が入っているほど、AIにお願いしたときの精度が上がりやすくなります。

提案書台割を作る

初回ヒアリング後に、提案書の章立てやストーリーのたたき台を作りたい時に。

あなたは、Webサイト制作・デジタル施策の提案設計に精通したプロのWebプランナーです。 添付したヒアリングチェックシートの内容をもとに、新規Webサイト制作またはWeb改修提案書の台割案を作成してください。 以下の点を整理してください。 1. 提案の前提 2. 相談背景・現状課題 3. サイト制作・改修の目的 4. 想定ターゲット 5. サイト構成方針 6. 主要ページ構成案 7. 制作範囲 8. スケジュール 9. 見積もり前に確認すべきこと 10. 今後の進め方 不足している情報がある場合は、最後に「追加で確認したいこと」としてまとめてください。

サイトマップ/ページ構成案を作る

新規制作やリニューアルの構成を、まずたたき台として整理したい時に。

あなたは、Webサイトの情報設計・導線設計に精通したプロのWeb構成設計者です。 添付したヒアリングチェックシートの内容をもとに、Webサイトのサイトマップ案とページ構成案を作成してください。 以下の点を考慮してください。 ・サイトの目的 ・想定ターゲット ・必要なページ ・問い合わせや資料請求などの導線 ・初回公開で必要な範囲 ・メモ欄に記載された補足事項 出力は、第一階層・第二階層がわかる形で整理してください。 あわせて、各ページの役割と優先度も簡単に記載してください。 不足情報がある場合は「要確認」として扱ってください。

ワイヤーフレーム構成案を作るときの注意

ワイヤーフレームは、見る人によって必要な情報が変わります。クライアントに全体像を共有したい場合、UIUXの意図まで説明したい場合、制作チームへ具体的に渡したい場合で、プロンプトを使い分けてください。

クライアント確認用

ざっくり構成共有ワイヤー

ページ全体の流れ・各セクションの役割・CTA位置を、細かすぎず共有したい時に使います。
このプロンプトで作れるもの:ページ構成(セクション/役割/掲載内容/CTA)
あなたは、Webサイトの情報設計・UI/UX設計に精通したプロのWeb構成設計者です。 添付したヒアリングチェックシートの内容をもとに、クライアントに共有しやすいワイヤーフレーム構成案を作成してください。 専門用語は控えめにし、ページ全体の流れがわかるように整理してください。 以下の形式で出力してください。 ・ページ名 ・ページの目的 ・想定ターゲット ・セクションごとのページ構成 ページ構成には、以下の項目を含めてください。 1. セクション名 2. そのセクションの役割 3. 掲載する内容 4. CTA・導線 5. 補足メモ まだ決まっていない内容は、無理に補完せず「要確認」としてください。 最後に、クライアントに確認したいことを箇条書きでまとめてください。 PC版・スマートフォン版の両方を作成し、それぞれの表示順・レイアウト・情報の見せ方の違いが分かるようにしてください。
出力方法を選択
選択した出力方法の指示も、上のプロンプトと一緒にコピーします。
「その他」の出力方法を入力してください。
クライアント説明用

UIUX意図説明つきワイヤー

なぜこの順番・配置なのか、ユーザー心理や導線意図まで説明したい時に使います。
このプロンプトで作れるもの:構成+配置理由(ユーザー心理/導線意図つき)
あなたは、Webサイトの情報設計・UI/UX設計に精通したプロのWeb構成設計者です。 添付したヒアリングチェックシートの内容をもとに、クライアントに説明しやすい「UIUXの理由つきワイヤーフレーム構成案」を作成してください。 単にセクションを並べるだけでなく、なぜその順番・配置にするのかを説明してください。 以下の形式で出力してください。 ・ページ名 ・ページの目的 ・想定ターゲット ・この構成で重視する考え方 ・セクションごとのページ構成 ページ構成には、以下の項目を含めてください。 1. セクション名 2. 掲載する内容 3. 配置理由 4. 想定されるユーザー心理 5. CTA・導線の意図 6. 補足メモ 専門用語は必要最小限にし、クライアントが納得しやすい説明にしてください。 不足情報がある場合は「要確認」として整理してください。 PC版・スマートフォン版の両方を作成し、それぞれの表示順・レイアウト・情報の見せ方の違いが分かるようにしてください。
出力方法を選択
選択した出力方法の指示も、上のプロンプトと一緒にコピーします。
「その他」の出力方法を入力してください。
制作チーム共有用

コーディング設計用ワイヤー

h1/h2、セクションID、SP表示順、画像比率、実装メモまで整理したい時に使います。
このプロンプトで作れるもの:設計構成+HTML構造メモ(h1/h2/meta/画像比率つき)
あなたは、Webサイトの情報設計・UI/UX設計に精通したプロのWeb構成設計者です。 添付したヒアリングチェックシートの内容をもとに、コーダーさんに共有しやすいワイヤーフレーム設計版を作成してください。 実装に必要な情報がわかるよう、できるだけ具体的に整理してください。 ただし、不明点は推測で確定せず「要確認」としてください。 以下を含めてください。 1. ページ名 2. ページ目的 3. title案 4. meta description案 5. h1案 6. h2構成 7. セクションID案 8. PC/SPの表示順 9. CTA種別 10. 画像・動画の有無と推奨比率 11. コンポーネント化できそうな要素 12. 実装メモ 13. 確認が必要な点 ページ構成には、以下の項目を含めてください。 ・block名 ・セクション名 ・見出し階層 ・掲載内容 ・PC/SP表示 ・CTA ・画像仕様 ・実装メモ 最後に、コーディング前に確認すべきことを箇条書きでまとめてください。 PC版・スマートフォン版の両方を作成し、それぞれの表示順・レイアウト・情報の見せ方の違いが分かるようにしてください。
出力方法を選択
選択した出力方法の指示も、上のプロンプトと一緒にコピーします。
「その他」の出力方法を入力してください。

ゴールまでの段取り案を作る

現時点で、どこまで何を進めればよいか整理したい時に。

あなたは、Web制作案件の要件整理・進行設計・リスク管理に精通した、経験豊富なプロジェクトマネージャーです。 添付したヒアリングチェックシートの内容をもとに、現時点で想定できる「ゴールまでの段取り案」を作成してください。 以下の点を整理してください。 1. 現時点で想定されるゴール 2. ゴールまでに必要な主な作業 3. 作業の大まかな順番 4. 先に決めるべきこと 5. クライアントに追加確認が必要なこと 6. 社内・制作チーム側で確認すべきこと 7. スケジュール上の注意点 8. 見積もり前に確認しておきたいリスク まだ決まっていない内容は、無理に補完せず「要確認」として整理してください。 最後に、次回打ち合わせまでに確認すべきことを箇条書きでまとめてください。

不足している確認事項を洗い出す

このまま見積もりや提案に進んでよいか、不足情報を確認したい時に。

あなたは、Web制作案件の要件整理・進行設計・リスク管理に精通した、経験豊富なプロジェクトマネージャーです。 添付したヒアリングチェックシートの内容をもとに、現時点で不足している確認事項を洗い出してください。 以下の観点で整理してください。 ・見積もり前に確認すべきこと ・制作範囲を決めるために必要なこと ・スケジュール上のリスク ・デザイン・原稿・素材に関する不足情報 ・機能・CMS・サーバー・計測に関する不足情報 ・クライアントに確認すべきこと ・社内で確認すべきこと 出力は、優先度「高・中・低」に分けて整理してください。 確認が不足している部分は、推測で補完せず「要確認」としてください。

制作チーム向け共有メモを作る

デザイナー・コーダー・PMに共有するための整理メモを作りたい時に。

あなたは、Web制作案件の要件整理・進行設計に精通したプロのWebディレクターです。 添付したヒアリングチェックシートの内容をもとに、制作チーム向けの共有メモを作成してください。 以下の項目で整理してください。 1. 案件概要 2. 目的・ゴール 3. 対象範囲 4. 決まっていること 5. まだ決まっていないこと 6. デザイン・原稿・素材に関する注意点 7. 機能・CMS・計測・公開に関する注意点 8. スケジュール上の注意点 9. 追加で確認したいこと 関係者が読んで次の作業に入りやすいよう、箇条書き中心で簡潔に整理してください。
AIの出力は、たたき台として使ってください。
AIが作った内容は、そのまま確定ではありません。クライアント事情、社内ルール、予算、スケジュール、技術条件などは、必ず担当者が確認・調整してください。このツールは、WEBディレクターの判断を置き換えるものではなく、確認漏れを減らし、次の作業に進みやすくするための補助ツールです。
USE CASE

こんな時に使えます

初回相談の前後

相談内容をざっくり把握し、聞くべきことを整理したい時に。聞けたこと・まだ聞けていないことを見える化できます。

見積もり前の確認

制作範囲、原稿・素材、機能、CMS、公開作業など、見積もりに影響する項目の確認漏れを減らせます。

社内共有・引き継ぎ

ヒアリング内容をそのまま共有しやすくなります。担当者間の「聞いてない」「言った言わない」を減らす補助になります。

提案書・構成案のたたき台作成

Excel出力とAIプロンプトを使って、提案書台割・サイト構成・ワイヤー構成・段取り案づくりにつなげられます。

まずは相談内容を選んでみましょう。

全部完璧に埋めなくても大丈夫。わかるところから進めて、あとから見直せます。

WEBディレクターヘルパーを使う