【AI×Web制作 爆速ワークフロー①】AI時代の要件定義で「なんかカッコよくして」に詰まらない

今だけ無料でAIチューター（先生）付きレッスンを提供しています。
AI先生があなたの学習をやさしくサポートします。今までは有料ユーザーにのみ開放していましたが、今なら無料でWeb/AI制作7講座が受講できます。 この機会にAIつきの学習を体験してみてください。
（無料、限定100名、2月8日まで）

» 今すぐ無料講座をチェックする

クライアントからの要望が「カッコいい感じでお願いします」。
この一言に、手が止まったことはありませんか。Web制作を学んで案件デビューを始めたころの方にとって、クライアントからの漠然とした要求は恐ろしく、どう対処して良いか悩むところですよね。

ですが、AIが当たり前になった今、この状況は大きく変えられます。 AIと一緒に考えることで、クライアントの漠然とした要望から納品までを効率よく進めていくことができます。

• 【AI×Web制作 爆速ワークフロー】について
• AI×Web制作 爆速ワークフロー第1回｜要件定義編
• 今回の案件のストーリー
• 制作前の打ち合わせ、ストレスに感じる原因は？
• 今回のミッション｜要件定義とは何か
• ポイント｜AIに聞く前に、人間が“考える材料”をそろえる
• AIを活用する｜ChatGPTを“クライアント役”にする
• まとめ
• AI時代の要件定義に必要なこと
• 次回予告

【AI×Web制作 爆速ワークフロー】について

この連載では、AIを使ってWeb制作を“爆速化”するリアルな制作フローを、ひとつの架空案件を通して紹介していきます。
テーマはAIを使って、1ヶ月分の仕事を3日で終わらせる。

なお、この連載は「AIに丸投げして作っちゃおう」という話ではありません。
これは、実際のWeb制作ではクライアントの要望を理解し、Webサイト（ページ）に落とし込んでいく必要があるためです。

我々Skillhubがお伝えしたいのは、Web制作の仕事を請け負う中でのAI活用術です。

• 実際の制作フローの中で、AIをどのように活用するか？
• 失敗を防ぎ、AIを効果的に使うには？
• AIが優秀な今、人間（Web制作者）側に必要なスキルは何か？

第1回目は、Web制作で多くの初心者がつまずくヒアリングからの要件定義から始めます。

AI×Web制作 爆速ワークフロー
第1回｜要件定義編

今回の案件のストーリー

今回のクライアントは、AIを活用した教育を行う企業です。
代表から最初に届いたメッセージは、こんな感じでした。

「AI教育の会社らしく、最先端なイメージのかっこいいサイトにリニューアルしてほしいです！」

……正直、困りますよね。
「かっこいい」って何？
「最先端」ってどこ基準？

Web制作を学び始めたばかりの人ほど、この時点で頭が真っ白になります。

結果、ヒアリングの場では頷くだけ。
制作に入ってから「やっぱり違う」 「思っていたのと違う」と修正が増えていく…そんな経験をした人も多いはずです。そうならないように、まずはAIに手伝ってもらいながら、クライアントのヒアリングから要件定義までをしっかりと行っていきましょう。

制作前の打ち合わせ、ストレスに感じる原因は？

Web制作初心者の方も、Webデザイナーとして活動している方も、苦手意識のある方が多いのが最初に行うクライアントとの打ち合わせ。

• クライアントからのヒアリング
• ヒアリングした情報を元に要件定義・提案書作成

上記のような、何を制作したいかを聞き出し、具体化していく工程です。
こうした作業に苦手意識を持つ理由は、だいたいこの3つです。

• 何を聞けばいいかわからない
• クライアントの要望が漠然としている（正解が見えない）
• 変な質問をしたらどうしよう、変な提案をしてしまったらどうしよう、という不安

特に初心者のうちは、「自分が何もわかっていない」ことが一番のストレスになります。
ここで重要なのが、一人で考え込まないことです。
今までフリーランスとしてお仕事を受ける場合、相談できる相手がいないというのも辛いポイントでした。

しかし、AI時代の今は、AIが先輩役としてアドバイスをくれます。
AIと一緒に考えることで、精神的なストレス、一人で考え込む時間、どちらも大幅に減少しますよ！

今回のミッション｜要件定義とは何か

今回のミッションは、クライアントの「なんかカッコいい感じで」という要望を、制作できる形に落とし込むことです。

最初からデザイン（見た目）を軸にしてしまい、デザインの話から入って迷走するのは制作あるある。
本当に必要なのは、「かっこいい感じ」の追求ではなく、どんなユーザーに対して「何をどう伝えたいか」です。 デザインは伝えるための技術、技法のひとつですから、デザインの話をするための前提条件が要るわけです。

Web制作では、この前提条件を洗い出すしてまとめる工程を「要件定義」と呼びます。
要件定義が曖昧なまま進むと、以下のような状況に陥りがちです。

• デザインの方向性がブレる
• ページ構成がぐちゃぐちゃになる
• 修正が無限に増える
• 最終的に「思ってたのと違う」と言われる

こんな状態にならないために、ヒアリングシートというものを使います。
AIに相談するときにも、ヒアリングシートを使って集めた情報はとても役立ちます。

ポイント｜AIに聞く前に、人間が“考える材料”をそろえる

いきなりAIに「なんかかっこいい感じにして、と言われたから助けて」と聞きたくなりますが、、その前に、人間が最低限整理すべきことがあります。
実は、実際の制作では、いきなりデザインや色の話はしません。
まずは、ヒアリングシートを使って情報を整理します。
これは、必要な情報をしっかりと聞き出すための、チェックリストもしくは設計図のようなものです。

• 会社は何をしているのか
• どんな人に向けたサービスなのか
• サイトの目的は何か
• 競合と比べたときの強みはどこか

この時点では、答えが曖昧でも問題ありません。
重要なのは、要件を整理すること、その場の会話で終わらせず書面として残すことです。
これによって、以下の3つのメリットが生まれます。

• 「言った・言わない」の水掛け論を防げる
• 制作途中で判断に迷ったときの基準になる
• AIに渡す“材料”が整理される

■ そもそもヒアリングシートはどうする？

どんな案件でもヒアリングシートの内容、クライアントに最初に聞いておいたほうが良いこと、というのは大体決まっています。ですので、ヒアリングシートというものも、ある程度はテンプレート（ひな型）化されています。最初はこうしたテンプレートを活用し、慣れてきたら独自のものを作ると良いでしょう。

Skillhubのブログでもヒアリングで聞くべき内容について解説しています。
ヒアリングシートのテンプレートも配布していますので、ご活用ください。

Skillhubブログ

ヒアリングシートの書き方（Web制作案件テンプレート付き）

また、ヒアリングシートの項目をAIと一緒に考えていくこともあります。
例えば、上記記事で配布しているテンプレートはフルタイプ、開発に近いレベルの政策に対応できるよう項目がめちゃくちゃ多いです。もう少し項目を削ってライトにしたい、などの場合は相談してみても良いでしょう。

AIを活用する｜ChatGPTを“クライアント役”にする

ヒアリングシートに書き出した内容をもとに、ChatGPTなどのAIに質問・相談をします。

最低限必要なページと、それぞれに掲載する内容を簡単にまとめてください。

これが、ChatGPTにしてほしいことの指示です。
ただし、ヒアリングシートの情報なしで、クライアントの要望だけをChatGPTに丸投げすると「それっぽいけれど薄い答え」になりがちです。 「一般的にはこうですね」という汎用的な知識を中心に答えるので、時には的外れな回答もあるでしょう。

だからこそ、AIが「考える材料」をしっかりと与えることで、より材料に見合ったピンポイントな回答をくれるのです。

「この内容を前提に、あなたがこの会社のCEOならどんな企業サイト構成が必要だと思いますか？」

これが、もう一つのポイント。ChatGPTの立場を明確に設定することです。
こうすることで、ChatGPTはクライアント視点で考え始めます。

そして、整理された情報を前提にした答えを返してくれます。

■ AIが出してきたサイト構成案

実際に、ChatGPTにプロンプトと、ヒアリングシートを添付して考えてもらいました。

以下はChatGPTから返ってきた答えです。
かなり整理されており、それぞれのページに掲載すべき内容などしっかりまとまっています。

## 最低限必要なページ構成と掲載内容

### 1. トップページ
**役割**
初見ユーザーに「何の会社で、何が強いのか」を3分で理解させる

**掲載内容（要点）**
* ファーストビュー
  * 教育×テクノロジーに特化した会社であること
  * 「単なるeラーニングではない」一言コピー
* 課題提起
  * 教育事業者が抱えがちな悩み（ITが難しい、既存ツールが合わない 等）
* 主力サービスの概要導線
  * Edbase / Qeditor へのリンク
* 強みの要約
  * 教育特化・自社運営・現場視点
* CTA
  * 「まずは相談する」「資料を見る」

---

### 2. 事業・サービス紹介（一覧）
**役割**
「何をやっている会社か」を俯瞰で理解させる

**掲載内容**
* 事業領域の整理
  * 教育プラットフォーム開発
  * 教育向けプロダクト提供
* 各サービスへの導線（詳細ページへ）

---

### 3. サービス詳細ページ
#### 3-1. Edbase（主力）
**役割**
メイン商材の理解を深める

**掲載内容**
* サービス概要（誰の、どんな課題を解決するか）
* できること（スクール運営の全体像）
* 他社eラーニングとの違い
* 想定利用シーン（個人 / 企業）
* 導入までの流れ
* CTA（問い合わせ・資料請求）

---

#### 3-2. Qeditor
**役割**
サブ商材だが、技術力・幅を示す

**掲載内容**
* テスト作成・分析に特化した理由
* 教育現場での使われ方
* Edbaseとの関係性

---

### 4. なぜエドベースなのか（強み・思想）
**役割**
知名度不足を「思想」と「設計力」で補う最重要ページ

**掲載内容**
* 教育事業に特化している理由
* なぜ自社でも教育プロダクトを運営しているのか
* 現場視点で設計している具体例
* CEO / 開発チームの考え方（簡易メッセージ）

※ ここは営業資料代わりになるページ

---

### 5. 活用事例・想定ケース
**役割**
導入後のイメージを具体化する

**掲載内容**
* 個人事業者向けケース
* 企業研修向けケース
* 「こういう人に向いている / 向いていない」

※ 実績が少なくても「想定ケース」でOK

---

### 6. よくある質問（FAQ）
**役割**
問い合わせ前の心理的ハードルを下げる

**掲載内容**
* ITに詳しくなくても使えるか
* 初期費用・期間感
* カスタマイズの可否
* サポート体制

---

### 7. 会社情報（会社概要）
**役割**
信頼の担保

**掲載内容**
* 会社概要
* 事業内容
* 代表メッセージ（短くても必須）
* 「教育×IT」に取り組む姿勢

---

### 8. お問い合わせ / 資料請求
**役割**
最終アクション

**掲載内容**
* 問い合わせフォーム
* 「どんな相談が多いか」の例示
* 無理に売らない姿勢の明記（心理的安心）

---

### 9. 法定・補助ページ（最低限）
* プライバシーポリシー
* 特定商取引法に基づく表記（将来の有料化を見据えて）
* サイトマップ

---

## 補足：この構成で「やらないこと」

* いきなり価格表を出さない
* 機能一覧を最初から細かく並べない
* 「安い・簡単」だけで売らない

→ これはCEOとしての**ブランド設計**の判断です。

---

もし次のステップとして、

* サイトマップ（階層構造）を図にしたい
* トップページのストーリー設計をもっと細かく詰めたい
* 「問い合わせに繋がる文章トーン」を一緒に決めたい

などがあれば、そこも一緒に詰めていきましょう。

ゼロから考えると数日悩む内容が、ほんの数分で「叩き台」として手に入ります。
ここで重要なのは、これを“正解”だと思わないことです。
この出力された結果は、あくまで「会話のスタート地点」です。

最後にChatGPTも言っている通り、サイトマップの図を作ったり、各ページの流れ（ストーリー設計）を詰めたりして、クライアントに提案できる形に落とし込んでいきます。
そして、提案書・企画書が出来たらクライアントに見せて話し合い、必要事項をすり合わせていきます。

■ AIを使うメリット｜悩む時間が激減した

この時点で感じたAIを使うメリットは、以下の３つでした。

• 「何を作るか」で悩む時間が減った
• 「どこに何の情報を入れるか」で行ったり来たりをすることが激減した
• 提案書の骨組みが一気に固まった

ヒアリング・要件定義が怖い原因は、必要な情報がわからない・情報を集めすぎると持て余すことだったと気づきます。
AIは、その材料集めから情報整理を一気に加速してくれます。

■ AI活用の注意点｜AIの答えをそのまま使うのは危険

ただし、注意点もあります。 AIが出した構成を、そのままクライアントに出すのは危険です。
なぜなら、サイト全体の構造をクライアントに提示した際に「なぜこのページが必要なんですか？」や 「この構成の意図は？」と聞かれたときに、答えられなくなるからです。

説明できない提案は、信用されません。

ここで必要になるのが、HTMLやデザイン以前の「Web制作の基礎的な考え方」です。
AIに「この構成にした根拠は？」と聞いても良い進めることもできますが、基礎知識があったほうがAIとのやり取りもスムーズですし、クライアントの予期せぬ質問にも答えることができます。

まとめ

AI時代の要件定義に必要なこと

AI時代の要件定義は、AIに丸投げすることではなくAIと一緒に考えることです。

AIは思考を高速化してくれますが、方向を決めるのは人間です。
基礎を知っている人ほど、AIの出力を「使える形」に変換できます。

次回予告

次回は、作成したサイト構成に則ってワイヤーフレームと原稿を、ほぼ同時に用意する方法を紹介します。

「文章が書けない」 「どこに何を置けばいいかわからない」

という悩みを、ChatGPTに“優秀なディレクター役”をやらせて解決しちゃいましょう。

Skillhubのご案内

Skillhubでは、以下のようなことを、初心者向けに体系的に学べるカリキュラムを提供しています。

• Webサイトの構造の考え方
• なぜその構成・デザインになるのか
• AIが出したコードや提案を“理解して直せる力”

基礎知識を学べる無料講座もご用意しています。
この機に、AIを活用するために必要な基礎力を身につけちゃいましょう！