生成AIを使ったWeb制作の進め方

この記事では、生成AI（ChatGPTやGemini, Claude）などを使ったWeb制作の進め方を紹介します（あくまで個人的メモの要素が強いのであしからず）。

「要件定義とかスケジュールを毎回作成するの大変だな…」と思ったので、生成AIでずばっと作成できるようにまとめます。

要件定義

以下の項目が要件定義の内容です（プロンプトではありませんが、こちらも必要に応じて生成AIにコピペすれば機能すると思います）。

1. サイトの基本情報
   • サイト名、サイトの目的や役割
   • ターゲットユーザー（ペルソナ）
2. プラットフォーム選定
   • 使用するツールや技術（WordPress、STUDIO、Webflowなどノーコードツール）
3. 機能・仕様の定義
   • 必要な機能（お問い合わせフォーム、ブログ機能、EC機能、予約システムなど）
   • ページ構成とその内容（トップページ、会社概要ページ、サービス紹介ページ等）
4. デザイン要件
   • 基本的なデザイン方向性（参考サイト、カラー、フォント、ブランドガイドライン）
   • レスポンシブ対応の有無（スマホ対応必須かどうか）
5. コンテンツ要件
   • 掲載するコンテンツの種類（テキスト、写真、動画など）
   • コンテンツ制作の役割分担（クライアント提供または制作チームで作成）
6. SEO対策要件
   • 重要なキーワード
   • 検索エンジンでの表示要件（タイトルやディスクリプションの方針）
7. 技術要件
   • ドメインとホスティングの選定
   • セキュリティ・SSL設定
8. 運用要件
   • 公開後の更新頻度や運用体制
   • アクセス解析ツールの設定（Googleアナリティクス等）
9. 予算・スケジュール要件
   • 全体の予算と各フェーズの予算配分
   • 納期や中間報告のスケジュール設定

ロードマップ

Web制作において、完成・納品までのロードマップは以下の通りです。

1. 目的・要件の確認（ヒアリング）
2. スケジュールの共有・確認
3. コンテンツ計画
4. ワイヤーフレーム作成
5. デザイン作成・確認
6. コンテンツ実装
7. 最終調整と動作確認
8. 公開・納品

1. 目的・要件の確認（ヒアリング）

• サイト目的の確認
• ターゲット明確化
• 納期・予算確認
• プラットフォーム選定（WordPress/ノーコード）
• 機能要件の整理
• ページ数の確認

2. スケジュールの共有・確認

• 制作スケジュール作成
• マイルストーン設定
• クライアント承認

3. コンテンツ計画

• コンテンツ洗い出し
• サイトマップ作成
• 素材準備依頼

4. ワイヤーフレーム作成

• ページ構成の簡易作成
• クライアント提示・フィードバック・修正

5. デザイン作成・確認

• デザイン構築（カラー、フォント、イメージ決定）
• クライアント確認・修正

6. コンテンツ実装

• コンテンツ実装（テキスト、画像等）

7. 最終調整と動作確認

• 動作・表示チェック
• モバイル対応確認
• クライアント最終確認

8. 公開・納品

• クライアントへの運用説明（必要に応じて）
• 公開設定

組織図

プロンプトv1

以下のプロンプトをコピーして、生成AIにそのまま入力して利用ください。納品日を入力するだけでスケジュールを作成することができます。