はじめに
目的
この文書は、Webサイト制作の流れを企画から公開・運用まで順を追って分かりやすく解説します。各ステップで必要な作業項目や所要期間の目安を示し、制作を外注する場合や自社で進める場合の理解を深めることを目的としています。
本書で扱う範囲
本書は一般的な制作プロセスを想定し、以下のような工程を扱います。
– 企画・目的設定
– 設計・情報設計
– デザイン制作
– 実装・開発
– テスト・動作確認
– 公開・運用
各章で作業内容、成果物、注意点、所要期間の目安を丁寧に説明します。
想定する読者
- Web制作を依頼しようとする事業主や担当者
- 社内で制作を進めるプロジェクトリーダー
- 初めて制作に関わる方
専門用語は最小限にし、具体例で補足しますので安心してお読みください。
使い方
まず全体を読み、全体像をつかんでください。必要な章だけを参照し、発注時や社内調整のチェックリストとして活用できます。進行中は成果物やスケジュールと照らし合わせて確認してください。
2. Webサイト制作の全体フロー：5～8ステップの標準プロセス
概要
Webサイト制作は企画から公開・運用まで複数の段階を順に進めます。情報源によって呼び方や細分化が異なりますが、標準的には5～8のフェーズに分けられます。ここでは代表的な流れと各段階で行う主な作業をわかりやすく説明します。
ステップ一覧（代表例）
- 企画・目的設定
- 設計・情報設計（IA）
- デザイン制作
- 実装・開発
- テスト・公開
- 運用・保守（必要に応じて）
- 改善・分析（必要に応じて）
各ステップの説明
1) 企画・目的設定：誰に何を届けたいかを決めます。目標（例：問い合わせを月20件に増やす）やターゲット、予算、納期を明確にします。
2) 設計・情報設計：ページ構成や導線を作ります。サイトマップやワイヤーフレームで、重要な導線（例：トップ→サービス→問い合わせ）を設計します。
3) デザイン制作：色やレイアウト、写真を決めます。ブランドに沿った見た目と、スマホでの見え方も同時に考えます。
4) 実装・開発：デザインをもとにHTML/CSS/必要なシステムを組みます。CMS導入やフォーム実装、表示速度の調整を行います。
5) テスト・公開：リンクや表示崩れ、フォーム送信を確認して公開します。公開後はアクセス解析を導入します。
6) 運用・保守：コンテンツ更新やセキュリティ対応を継続します。
7) 改善・分析：アクセスデータをもとに改善を重ね、目的達成を目指します。
3. STEP1：企画・目的設定フェーズ
概要
プロジェクトの方向性を決める最初の段階です。目的決定からターゲット設定、競合調査、コンセプト確定まで行います。所要期間は通常2週間〜2ヶ月です。
目的決定
なぜサイトを作るのかを明確にします。売上向上、問い合わせ増加、ブランド認知など具体的に書き出してください。目的は後の判断基準になります。
ゴール設定（KPI）
到達すべき数値目標を決めます。例：月間問い合わせ数、コンバージョン率、ページ滞在時間など。達成基準を簡潔に定めると評価がしやすくなります。
ターゲット決定
想定するユーザー層を具体化します。年齢、性別、職業、利用シーンなどを想像し、代表的なペルソナを1〜3つ作ると設計が進みます。
市場調査・競合分析
競合サイトの強み弱みを洗い出します。機能、価格、デザイン、導線を比較し、自社の差別化ポイントを見つけます。
コンセプト決定
サイトの核となるメッセージやトーンを決めます。短いキャッチと3つ程度の特徴を書き出すと伝わりやすいです。
課題抽出・要件整理
現状の不満点や改善希望を関係者から集め、優先順位を付けます。必須要件と希望要件を分けて整理してください。
関係者合意形成
関係者間で目的・ゴール・要件に合意を取ります。合意があると後の手戻りを減らせます。
発注先選定・コンペ
外注する場合は候補を選び、見積りや提案を比較します。コンペを行う場合は評価基準を事前に明確にしてください。
期間の目安
小規模は2週間、標準は1〜2ヶ月が目安です。規模や調整量で前後します。
4. STEP2：設計・情報設計フェーズ
概要
企画が固まった後、実際に作るための詳細設計を行う段階です。UX（使いやすさ）を中心に、コンテンツ設計、サイト構造（サイトマップ）、ワイヤーフレーム、システム設計、要件定義書を作成します。所要期間は目安で1～2ヶ月です。
目的と主な成果物
- 目的：利用者が目的を達成しやすい構造を決め、実装に必要な条件を明確にすること
- 成果物：サイトマップ、ワイヤーフレーム、コンテンツ一覧、要件定義書、システム仕様書、SEO/UX/アクセシビリティ方針
主な作業と具体例
- UX設計
- ペルソナ・ユーザージャーニーを作り、重要な導線を決めます。例：初めての訪問者が商品購入までたどり着く流れを図にします。
- コンテンツ企画
- 各ページの目的と中身を決めます。例：トップは訴求、FAQは疑問解消、事例ページは信頼構築。
- サイト構造設計（サイトマップ）
- ページの階層とURL設計をまとめます。検索やナビゲーションの観点で整理します。
- ワイヤーフレーム制作
- 各ページのレイアウトを作成します。ボタン配置や優先表示項目を明示します。
- システム設計・要件定義
- 必要な機能（ログイン、決済、CMS連携等）と非機能要件（表示速度、対応ブラウザ）を記載します。
SEO・UX・アクセシビリティ方針
- SEO：主要キーワードとページごとの狙いを定めます。例：商品ページは「商品名 + 購入」などを意識します。
- UX：重要な導線を最優先に設計します。フォームの項目は最小にします。
- アクセシビリティ：見出し構造や代替テキスト、色のコントラストをルール化します。
スケジュール感と関係者
- 期間目安：1〜2ヶ月。規模で前後します。
- 関係者：企画担当、デザイナー、開発者、ライター、SEO担当を早めに巻き込みます。
注意点
- 仕様は後戻りが発生すると工数が増えます。早めに関係者で合意を取り、要件定義書に落とし込みます。
- ワイヤーは実装視点でも検討し、デザインと実装がずれないようにします。
5. STEP3：デザイン制作フェーズ
デザインコンセプト設計
情報設計が整ったら、サイトの見た目と雰囲気を決めます。ターゲットと目的に合わせて配色、タイポグラフィ、トーン（親しみやすい／信頼感ある等）を定めます。具体例：コーポレートは落ち着いたブルー系、飲食はあたたかいオレンジ系など。
素材準備
写真、アイコン、ロゴ、テキストの最終版を揃えます。写真は高解像度で利用許諾を確認します。社内で用意できない場合は有料素材や撮影を手配します。ボタンやフォームの状態（通常・ホバー・押下）もここで決めます。
デザインカンプ制作
トップページと主要下層のデザインカンプ（静的な見本）を作ります。レスポンシブ対応のため、スマホとPCの両方を用意します。カンプは画面イメージをそのまま示すため、実装チームとの認識合わせに有効です。
デザイン修正と承認
クライアントや関係者とレビューを重ね、指示は箇条書きで受け取ります。修正は回数と範囲を事前に合意しておくと効率的です。最終承認後にデザイン仕様書（色・フォント・余白・コンポーネントのルール）を作成します。
期間の目安
通常は2〜4週間程度です。規模や修正回数で前後します。デザイン段階を丁寧に進めると、実装フェーズでの手戻りを減らせます。
6. STEP4：実装・開発フェーズ
概要
確定したデザインを実際のWebサイトとして組み立てる工程です。コーディング、フロントエンド・バックエンド開発、システム接続などを行います。制作会社が主導し、依頼側は素材提供や動作確認を行います。所要期間は目安で4〜8週間です。
主な作業項目
- 開発環境構築（サーバー・リポジトリの準備）
- HTML/CSS/JavaScriptによるマークアップと動的化
- CMS導入やバックエンドAPIの実装
- データベース設計・接続
- 外部サービス（決済・SNS連携など）の組み込み
- バージョン管理とコードレビュー
- ステージング環境での動作確認
進め方のポイント
- 小さな単位で実装し、都度動作確認を行います。例えばトップページ→下層ページの順で進めます。
- コンポーネント化して再利用性を高めます。ボタンやフォームを共通化すると修正が楽になります。
- パフォーマンスやSEO、アクセシビリティにも配慮します。画像は最適化し、見出し構造を整えます。
依頼側の役割
- ロゴや画像、文章などの最終素材を期限内に提供してください。
- 動作確認やフィードバックは早めに行ってください。要望は優先順位を付けると進行がスムーズです。
注意点
データ移行や外部連携はトラブルが起きやすいので余裕を持ったスケジュールを見てください。テストは次章のテスト工程と並行して早めに始めると安心です。
7. STEP5：テスト・動作確認フェーズ
概要
実装が終わったら、公開前に必ず動作確認します。各ページの表示、リンク、フォーム、表示速度、セキュリティなどを実際の環境でチェックします。小さなミスがユーザー体験を損なうため、丁寧に行います。
チェックリスト（例）
- ページ表示：PC・スマホ・タブレットで崩れないか確認
- リンク・ボタン：すべて遷移先が正しいか検証
- 入力フォーム：必須チェックやエラーメッセージの確認
- 表示速度：画像最適化や遅いスクリプトを確認
- セキュリティ：HTTPS有効化、公開情報の漏洩確認
- ブラウザ互換性：Chrome、Firefox、Safari、Edgeで確認
実際の手順（おすすめ順）
- 開発環境で自動テスト（ある場合）を実行
- 各ページを人の目で確認（見出し、画像、余白）
- リンクとフォームを網羅的に操作
- スマホ・タブレットで表示確認と操作性チェック
- 読み込み速度を測定し遅い箇所を改善
- セキュリティ設定を確認して公開準備
テストの優先順位
- ユーザーが必ず通る導線（TOP→申込フォームなど）を最優先
- 支払い・ログインなど重大な機能は重点的にチェック
よくある不具合と対処例
- 画像が崩れる：サイズ指定やレスポンシブ設定を修正
- リンク切れ：URLのタイプミスを修正
- フォーム送信エラー：入力バリデーションを見直す
- 遅い読み込み：画像圧縮や不要スクリプトの削除を行う
テスト完了後の流れ
問題がなければステージングから本番環境へ公開します。公開後も短期間はログやエラーを監視し、ユーザー報告に速やかに対応します。
