Webサイト制作 フローチャート

必要なスキルと情報リテラシー — Website Creation Process

Webサイトを作るには、企画・デザイン・実装・運用と多岐にわたるスキルが必要です。このフローチャートでは、制作の全9ステップと各フェーズで求められるスキル・情報リテラシーを整理しています。また、どこを人間が担い、どこをAIに任せられるかも明示しました。これからWeb制作を学ぶ方にも、チームで分担を考えたい方にも参考になれば幸いです。

人間が主導
AIが支援・自動化
人間 × AI 協働
人間が主導
1
企画・要件定義
目的・ターゲット・ゴールを明確にする。何を伝えたいか、誰に届けたいかを決める。
📄 要件定義書 / ブリーフ
🧑
人間 ビジョン設定・ステークホルダーとの合意・最終判断
🤖
AI 競合サイト調査・ペルソナ案の生成・要件書ドラフト
必要なスキル・リテラシー
課題分析力 コミュニケーション ビジネス思考 ターゲット設定 マーケティング基礎
人間 × AI
2
情報設計 (IA)
サイトマップとページ構成を設計する。ユーザーの動線・コンテンツ優先度を整理。
🗂 サイトマップ / ワイヤーフレーム
🧑
人間 UX判断・優先度の決定・ユーザーインタビュー
🤖
AI サイトマップ構成案の生成・コンテンツ整理の補助
必要なスキル・リテラシー
UX思考 情報アーキテクチャ ユーザーリサーチ ペルソナ設計
人間 × AI
3
UIデザイン
ビジュアルデザインとプロトタイプを作成。配色・フォント・レイアウト・コンポーネント設計。
🎨 デザインカンプ / スタイルガイド
🧑
人間 ブランドの方向性・審美的判断・最終承認
🤖
AI デザイン案生成・配色提案・コンポーネント雛形の作成
必要なスキル・リテラシー
UI/UXデザイン アクセシビリティ デザインシステム
🔍 デザインレビュー OK?
← NG: 修正 OK: 次へ →
人間 × AI
4
コンテンツ制作
テキスト・画像・動画などを用意する。SEOを意識したライティングと素材収集。
✍️ 原稿 / 画像素材
🧑
人間 ブランドの声・独自の知見・最終的な文章の責任
🤖
AI 本文ドラフト・SEOキーワード提案・画像生成
必要なスキル・リテラシー
Webライティング 著作権・ライセンス 情報の信頼性評価
AIが支援
5
フロントエンド実装
HTML/CSS/JSでページを構築する。レスポンシブ対応・アニメーション・パフォーマンス最適化。
💻 HTMLファイル / コードベース
🧑
人間 コードレビュー・要件との整合確認・複雑な設計判断
🤖
AI HTML/CSS/JSのコード生成・バグ修正・リファクタリング
必要なスキル・リテラシー
HTML / CSS JavaScript Git / バージョン管理
AIが支援
6
バックエンド実装 (必要な場合)
サーバーサイド処理・DB・CMSの構築。お問い合わせフォーム・会員機能など動的処理。
⚙️ API / DB / CMS
🧑
人間 セキュリティ要件の定義・アーキテクチャ設計の最終判断
🤖
AI APIコード生成・SQL作成・CMS設定の手順提示
必要なスキル・リテラシー
セキュリティ基礎 API設計 個人情報保護法
人間 × AI
7
テスト・デバッグ
ブラウザ・デバイス横断でQAを実施する。表示崩れ・リンク切れ・パフォーマンス検証。
✅ テスト報告書
🧑
人間 実機テスト・ユーザー視点での使用感確認・最終承認
🤖
AI 自動テスト生成・バグ原因の分析・修正案の提示
必要なスキル・リテラシー
デバッグ能力 パフォーマンス計測 論理的思考力
🔍 テスト・品質レビュー OK?
← NG: 修正 OK: 公開 →
人間が主導
8
公開・デプロイ
ドメイン取得・サーバー設定・ファイルのアップロード。SSL証明書・DNS設定を行い本番公開する。
🌐 公開済みWebサイト
🧑
人間 ドメイン契約・公開タイミングの判断・最終確認
🤖
AI デプロイ手順の提示・設定ファイル生成・トラブル診断
必要なスキル・リテラシー
ドメイン / DNS知識 SSL / HTTPS デプロイ手順の理解
AIが支援
9
運用・改善
アクセス解析・SEO改善・コンテンツ更新。セキュリティ監視とフィードバックをもとにPDCA。
📊 分析レポート / 改善計画
🧑
人間 改善施策の意思決定・ブランド方針の維持
🤖
AI データ分析・SEO改善提案・レポート自動生成・監視
必要なスキル・リテラシー
アクセス解析 データ読解力 PDCA思考