はじめに
本記事の目的
本記事は、Web制作の企画から公開・運用までの一連の流れをわかりやすく解説します。各工程の要点やよくある注意点、所要期間の目安を示し、初心者や発注者がスムーズに進められるようにします。
対象読者
・これからWebサイトを制作する個人や企業
・制作を外注する予定の担当者
・制作の流れを整理したい初心者
具体例として、自社のサービス紹介サイトを制作する場面を想定しています。
この記事で得られること
・各工程の役割と進め方が分かります
・制作スケジュールの組み方が分かります
・発注時の確認ポイントが分かります
読み方のアドバイス
章ごとにSTEPで説明します。まずは全体像を把握し、必要に応じて各章を詳しく読み進めてください。実務で使えるチェックリストも用意していますので、発注前の確認に役立ててください。
Web制作の全体フローを理解しよう
全体の流れ
Web制作は大きく5つの工程に分かれます。企画・設計、デザイン、実装・開発、テスト・修正、公開（納品）です。制作会社に依頼する場合も自分で作る場合も、この順番で進めるのが基本です。
各工程の役割と成果物（具体例付き）
- 企画・設計：目的や対象を決め、サイトの構成を作ります。成果物はサイトマップや要件書。例：トップ・会社案内・お問い合わせの構成。
- デザイン：見た目を作ります。成果物はデザインカンプや画像素材。例：カラーやロゴの配置。
- 実装・開発：デザインを動くページにします。成果物はHTML・CSS・プログラム。例：スマホ対応・お問い合わせフォームの動作。
- テスト・修正：表示や動作を確認し、修正します。成果物は修正リストと最終ファイル。例：リンク切れや表示崩れの修正。
- 公開（納品）：サーバーにアップし、正式に公開します。成果物は公開済みサイトと納品資料。
スムーズに進めるためのポイント
- 最初に目的と優先順位を明確にする（例：売上向上＝問い合わせ導線を優先）。
- 画像や文章などの素材は早めに準備する。
- 小さな確認をこまめに行い、修正を溜めない。
- 進行表や連絡窓口を決め、情報共有を習慣にする。
各工程の意味を理解すると、納品までの見通しが立ちやすくなります。
STEP1：目的の明確化・要件定義
1. まずは目的をはっきりさせる
Webサイトで何を達成したいかを最初に決めます。代表的な目的には、集客（問い合わせや来店増加）、ブランディング（企業イメージ向上）、採用（応募者増加）、商品販売（EC）、情報提供（お知らせ・マニュアル）があります。目的がぶれると設計やデザインが迷走するため、必ず一つ以上の明確な目的を示してください。
2. ターゲットとペルソナを具体化する
年齢、性別、職業、居住地のような基本情報に加え、課題・行動パターン・利用シーンを想定します。例えば「30代・子育て中の女性がスマホで夜に商品を探す」など、具体的に描くと機能や導線が決めやすくなります。ターゲットごとに優先度を付けることも重要です。
3. 現状の課題を洗い出す
既存サイトがある場合は、アクセス解析や問い合わせ内容、離脱箇所を確認します。競合サイトの良い点・悪い点も調べます。問題点を箇条書きにし、優先度を付けると対応が明確になります。
4. 必要な機能とコンテンツを整理する
問い合わせフォーム、会員機能、決済、ブログ、FAQ、ダウンロード資料など、必要な機能をリスト化します。各機能の目的と必須度（必須・あれば良い・将来検討）を付けると開発範囲をコントロールできます。
5. 要件定義書（RFP）にまとめるポイント
要件定義書には次を含めます：目的・KPI（例：月間問い合わせ数）、ターゲット・ペルソナ、必須機能、非機能要件（表示速度・対応ブラウザ・スマホ対応）、スケジュール、予算、担当者、納品物の形式、保守範囲。具体的な画面や事例を添付すると認識齟齬を防げます。
6. 進め方の注意点
関係者の合意を早めに取る、要件変更は管理して記録する、重要な要件は優先順位を決めることを心がけてください。アクセシビリティやセキュリティの基本要件も初期段階で検討すると後戻りが減ります。
STEP2：サイト構成・設計
目的の再確認
まず第1章で決めた目的を改めて確認します。誰に何を伝えたいかを明確にすると、必要なページや優先順位が見えます。例：商品を知ってもらうのか、問い合わせを増やすのか。
サイトマップ作成
必要なページを洗い出して階層構造で整理します。トップページ、サービス紹介、料金、よくある質問、会社情報、問い合わせなどを並べ、ユーザーの導線を意識して配置します。紙やツールで全体像を可視化すると話が早く進みます。
ワイヤーフレーム制作
各ページの大まかなレイアウトを決めます。見出し、本文、画像、CTA（行動を促すボタン）の位置を決める工程です。ワイヤーは詳細デザイン前の設計図になります。スマホ表示の優先順位もここで決めます。
ナビゲーション設計
グローバルナビやフッター、パンくずリストなどでユーザーが迷わない導線を作ります。重要なページへはアクセスしやすく、階層は深くしすぎないのがポイントです。
システム要件の決定
CMS導入の有無、サーバーやドメインの準備、フォームの仕様や外部サービス連携（決済や予約など）を決めます。運用のしやすさも考慮して選定します。
合意と検証
関係者とサイトマップとワイヤーを共有し、修正点を洗い出します。ここで合意を得ることで後工程の手戻りを減らせます。
進め方のポイント
- 小さなステップで確認を重ねる
- ユーザー目線でページの優先度を決める
- 技術的制約は早めに確認する
この段階で設計をしっかり固めると、デザイン・実装がスムーズに進みます。
STEP3：デザイン制作
目的と流れ
サイト全体の見た目を決める工程です。ブランドイメージやターゲットに合わせた配色・雰囲気を決め、トップページと代表的な下層ページの“デザインカンプ”（完成イメージ）を作成します。
デザインコンセプトの決定
ターゲット像、企業の強み、参考サイトをもとにコンセプトを固めます。たとえば「信頼感のある医療系」「若年層向けのカジュアル通販」など具体例を挙げて共有します。
ワイヤーフレームとデザインカンプ
まずワイヤーフレームで構成を確認し、その後カンプで色・タイポグラフィ・写真の使い方を決めます。トップと下層の代表ページを重点的に作ると効率的です。
画像・ロゴ・素材準備
ロゴやバナー、写真は解像度や著作権を確認して用意します。必要なら代替案（複数サイズや色違い）も作ります。
クライアント確認と修正
クライアントと複数回確認し、フィードバックを反映します。修正回数や基準は事前に合意しておくとスムーズです。
実務上の注意点
レスポンシブ対応や読みやすさを常に意識します。見た目だけでなく、実装時の挙動も想定してデザインすると手戻りが減ります。
STEP4：実装・コーディング
コーディングの全体像
確定したデザインを基に、画面を動かすためのHTML/CSS/JavaScriptを作成します。デザイン通りに見せるだけでなく、動作や表示速度も意識して実装します。
HTML/CSS（マークアップとスタイル）
- HTML：見出しや本文、ボタンなど意味のあるタグを使って構造を作ります（例：header、nav、main、footer）。
- CSS：色・余白・フォントを整えます。コンポーネント単位でクラスを分けると管理しやすくなります。
- Tips：レスポンシブは最初から考慮します。メディアクエリやフレックス・グリッドを使って、スマホでも読みやすくします。
JavaScript（動きの実装）
- DOM操作：メニュー開閉やスライダーなど、ユーザー操作に応じた処理を実装します。
- パフォーマンス：不要な再描画を避け、イベントのデバウンスなどで負荷を下げます。
- 例：フォーム送信時に入力チェックを行い、エラーを分かりやすく表示します。
サーバーサイド／CMS対応
- CMS導入が必要な場合はテンプレート組み込みを行います。WordPressやヘッドレスCMSなど、要件に合わせて選びます。
- APIやDBが必要なら、バックエンドと連携してデータのやり取りを実装します。
SEO・アクセシビリティ
- titleやmeta、見出しの構造を整え、画像にはaltを入れます。
- キーボード操作やスクリーンリーダーを意識した実装で、より多くの人に使いやすくします。
開発の効率化と品質管理
- バージョン管理（Git）で履歴を残します。
- コンポーネント化や再利用を進め、保守性を高めます。
- 開発環境と本番環境を分け、ローカルで確認してからデプロイします。
以上が実装・コーディングの主な作業です。設計で決めた要件を満たしつつ、使いやすさと保守性を大切に進めます。
STEP5：テスト・修正
概要
全ページの表示や動作を実際に確認し、不具合や表示崩れを見つけて修正します。クライアントの最終確認を受け、要望があれば対応します。
テストの範囲（具体例）
- 表示・レイアウト確認：PC・スマホで崩れがないか。画像や装飾がずれていないかを確かめます。
- リンクチェック：内部リンク・外部リンク・画像リンクの切れを確認します。
- フォーム動作：入力、送信、エラーメッセージ、メール受信を実際に試します。例：資料請求フォームで確認。
- レスポンシブ & ブラウザ確認：主要ブラウザ（Chrome、Safari、Edgeなど）と各画面幅での見え方をチェックします。
- パフォーマンス：ページの読み込み速度や画像の最適化を確認します。
- セキュリティの初歩点検：公開用フォームのスパム対策や管理画面のアクセス制限など。
バグ管理と修正手順
- 問題を再現して記録（スクリーンショット、操作手順）。
- 優先度を決める（致命的・高・中・低）。
- 修正を行い、該当箇所を再テスト。必要なら回帰（他箇所の影響）も確認します。
- 修正履歴を残し、クライアントに報告します。
クライアント確認の進め方
ステージング環境のURLやチェックリストを渡して確認してもらいます。指摘は具体的に書いてもらうと対応が早くなります。小さな文言変更は対応し、大幅な仕様変更は別途見積りを提案します。
テスト完了後の準備
- 修正完了リストとテスト報告を作成します。
- 本番公開前に最終バックアップを取り、公開手順を確認します。
- 引き渡し時は操作マニュアルや注意点を共有します。
STEP6：公開（納品）
概要
テストと修正が完了したら、サイトをサーバーにアップロードしドメインを設定して公開します。これが納品段階です。必要に応じて操作マニュアルや更新方法のレクチャーを行い、運用フェーズへ移ります。
公開前の最終チェックリスト
- 表示確認：主要ブラウザ・スマホで見た目と動作を確認
- リンク・フォーム：全リンクや送信フォームが正常に動作するか確認
- SEO・メタ情報：タイトル・説明文が設定されているか
- セキュリティ：SSL（https）を有効化し、基本的な設定を確認
サーバー・ドメイン設定の基本
- ドメインはDNSでサーバーに向けます。設定反映に数時間から72時間かかることがあります。
- サーバー側で公開フォルダ（例：public_html）にファイルを配置します。
デプロイ方法（具体例）
- FTP/SFTP：手動アップロード。小規模サイトや単発更新に向きます。
- 自動デプロイ（Git連携）：開発から本番へ自動で反映。更新が頻繁な場合に便利です。
納品物と引き渡し方法
- 納品物：最終ファイル、画像、ソースコード、設定情報、ドメイン・サーバー情報
- 引き渡し：メールやクラウド共有、管理画面のアカウント移譲で行います。
操作マニュアルと引き継ぎ
- 更新手順やログイン方法を分かりやすく文書化します。画面キャプチャを使うと理解が早まります。
- オンラインで15〜60分のレクチャーを行うと安心です。
公開後の注意点
- 公開直後はアクセス増で負荷がかかる場合があります。ログを監視し問題があれば対応します。
- バックアップのスケジュールと運用ルールを決めておくと安心です。
STEP7：運用・改善（オプション）
概要
納品後もサイトを育てる運用は重要です。アクセス解析やSEO対策、コンテンツ追加で成果を上げます。制作会社は運用保守プランを用意することが多く、必要な範囲だけ外注できます。
何をするか（主な作業）
- アクセス解析：どのページが見られているか、流入経路を確認します。例：Googleアナリティクスで訪問数や滞在時間を把握します。
- SEO改善：検索キーワードやメタ情報を見直し、検索順位を上げます。内部施策（文章の見直し、タイトルの最適化）から始めます。
- コンテンツ追加・更新：新しい情報や事例、ブログ記事を継続的に追加します。ユーザーの疑問に答える内容が効果的です。
- 保守・セキュリティ：ソフトウェアの更新やバックアップ、脆弱性対応を行います。
KPIと改善サイクル
目標（お問い合わせ数、閲覧数、コンバージョン率）を決め、月次で数値を確認します。問題点を特定して改善案を実行し、効果を測定するPDCAを回します。
外注のポイント
予算や頻度、報告の形式を明確にしてください。短期的な改善はスポットで依頼し、長期的な運用は保守プラン契約が安心です。
納品までの所要期間とポイント
所要期間の目安
一般的なコーポレートサイトでは、全工程でおおむね1.5カ月～3カ月が目安です。規模やページ数、コンテンツ準備の状況により前後します。急ぎの場合は短縮できますが、品質を保つためには無理のないスケジュールが大切です。
各工程のおおよその目安
- 要件定義：3～7日
- サイト設計（情報設計）：1週間前後
- デザイン制作：1～3週間
- 実装・コーディング：2～4週間
- テスト・修正：数日～1週間
- 公開準備：数日
合計で1.5カ月（短期）～3カ月（余裕あり）を想定してください。
納期遅延になりやすい原因と対策
- クライアント側の確認・承認の遅れ：確認期限を明確にしてリマインドを行ってください。
- コンテンツ未準備：テキストや画像は早めに集め、テンプレートで仮配置すると進行がスムーズです。
- 仕様変更や追加依頼が多い：要件定義で優先度を決め、追加は別フェーズに回すルールを設けましょう。
スムーズに進めるための実践ポイント
- 連絡窓口を一本化して意思決定を速めます。
- レビューは期限付きで行い、フィードバックはひとつのドキュメントにまとめます。
- 優先度（必須／任意）を最初に決め、必須から着手します。
- バッファ期間を見込む：予期せぬ修正や承認遅延に備えて余裕を入れておきます。
- フェーズ分割で納品：まず基本公開し、後で機能追加や改善を行う方法も有効です。
これらを守ると、スムーズに納品まで進められます。クライアントの協力と最初の要件定義が特に重要です。
まとめ：Web制作納品までの流れを理解してスムーズな進行を
全体の振り返り
Web制作は「目的の明確化→設計→デザイン→実装→テスト→公開」の順で進みます。各工程で必要な資料や確認項目を揃え、関係者が共通認識を持つことで作業がスムーズになります。
各工程のチェックポイント
- 目的・要件：ターゲット、ゴール、優先機能を明確にします。
- 設計：ページ構成や導線を図にして合意します。
- デザイン：色・フォント・写真の指針を決め、デザイン案で確認します。
- 実装：コーディング基準や納品物（ソース、画像、マニュアル）を揃えます。
- テスト：表示確認、リンク、動作、フォームの入力チェックを行います。
- 公開：バックアップ、SSL、サーバ設定を確認して公開します。
制作会社に依頼する場合と自作する場合
制作会社に依頼する時は成果物とスケジュール、保守範囲を契約で明確にしてください。自作の時は無理のない範囲で段階的に進め、テストは第三者にも見てもらうと安心です。
トラブル回避のコツ
- 納品物リストを事前に共有する。
- 小さな確認をこまめに行う（サンプル承認）。
- 期限と余裕日を設定する。
- 変更は記録して合意を得る。
最後に、全体の流れを把握しておくと、余裕を持って対応できます。準備とコミュニケーションを重視すれば、トラブルを減らして納品を成功させられます。
