Webサイト制作の流れと進め方完全ナビ！【図解で掴むタスクとプロセス】

Webサイト制作を依頼する際、
『どのように進めればよいのか分からない』『具体的な流れがイメージできない』
と感じる方は多いのではないでしょうか？

このコラムでは、Webサイト制作の全体的な流れやステップを図解でわかりやすく解説し、プロジェクトがスムーズに進むためのポイントをお伝えします。
この記事を通じて、制作プロセスに対する先の見えない不安が解消され、理想のWebサイト実現に向けた第一歩を踏み出すきっかけとなれれば幸いです。

Webサイト制作に必要な事前準備

Webサイト制作を依頼する前に、大まかな概要やタスクを整理しておくことはとても重要です。
事前準備をしっかり行うことで、制作会社とのコミュニケーションが格段にスムーズになり、手戻りや認識齟齬などのリスクを大幅に減らすことができます。

以下は、事前準備における依頼元の3つの代表的なタスクです。

1. Webサイトの目的とターゲットの明確化

目的によってサイトの種別は異なり、制作の考え方も様々です。
例えば以下のように、Webサイトの目的によって、制作するサイトの種類や進め方は大きく異なります。

サイト種別	目的例
コーポレートサイト	企業価値を高め、投資家目線でIR情報を強化したい
採用サイト	理想の人材にアプローチし、採用活動を促進したい
ECサイト	顧客体験を向上し、売り上げを伸ばしたい

Webサイト制作には様々な意図や目的が込められるからこそ、まずは何を重視するのかを整理することが重要です。目的や自社のターゲット、優先事項を明確にすることで、制作会社に具体的な要望を伝えやすくなり、
スムーズなコミュニケーションにつながります。

2. 対象範囲とページボリュームの把握

対象となるぺージやどのような機能が必要かを考えておきましょう。

• 必須のページ（会社概要、製品情報、ニュース、株主・投資家向け情報など）をリストアップする
• 既存サイトがあれば、現状の改善点を洗い出しておく

具体的な希望をしっかり伝えることで、制作会社からより的確で最適な提案を受けることができます。

3. 予算と納期の設定

予算と納期はプロジェクト全体を左右する重要な要素です。
この後述べるWebサイト制作の流れと全ステップにも影響します。

短納期の場合、要員を追加したり、優先順位を明確にして効率的に進める必要があります。
十分な期間が確保できれば、より細部にこだわった制作が可能です。

Webサイト制作の流れ【フロー図】

次に、Webサイト制作の全体像をご説明します。
Webサイト制作は、主に以下の4つのステップで進行します。

制作の流れ

STEP１　課題抽出・要件整理・RFP用意
▼
STEP２　発注候補先の選定、コンペ
▼
STEP３　企画・設計
▼
STEP４　制作・実装
サイトリリース

所要期間の目安

プロジェクトの規模や内容により変動しますが、一例として目安期間をご紹介します。

STEP（工程）	期間目安
STEP 1・2（要件整理・選定）	約2ヶ月ずつ
STEP 3・4（設計・制作）	約4ヶ月

以下では、それぞれのステップについて詳しく説明します。

STEP１　課題抽出・要件整理

Web制作における目的や要求事項の整理といったプロジェクトの基盤となる序盤のステップです。
先のチャプター「事前に準備しておきたい情報」で述べた内容のほか、以下のような様々な準備が必要です。

準備項目	タスク例
課題の抽出	現行サイトに対する不満や改善希望の取りまとめ
システム把握	現行システムの仕様や必要な機能の整理
関係者の合意	プロジェクトに関与する各部署からの意見収集
RFP（提案依頼書）作成	要件を正確に伝えるためのドキュメントの準備

※RFPは、後項でご説明する”依頼先の選定作業”において重要な役割を果たします。

整理すべきポイントは、以下のコラムで詳しくまとめております。
Webサイトリニューアルを成功させる「要件定義」の進め方と内容

STEP２　発注候補先の選定・コンペ開催

制作会社はプロジェクトの成否を左右する存在であるため、委託先の選定はWeb制作の流れにおいて重要なステップです。

まずは複数の制作会社に問い合わせを行い、自社の目的を達成するための技術力や得意分野などを確認します。
提案依頼を行う際には、情報のばらつきを防ぐためにRFP（提案依頼書）を共有し、同じ条件での見積もりや提案を依頼します。
その後、提出された提案内容を納期、費用、クオリティといった観点から比較・検討し、最適なパートナーを選定します。

コンペの進め方や手順については以下のコラムをご参照ください。
Web制作会社選定にコンペは有効？失敗しない進め方と準備の手引

RFP作成に役立つテンプレートと記入例については、以下よりご請求いただけます。
RFP記入サンプルとテンプレート

STEP３　企画・設計

委託先の制作会社が決まった後は、提案内容をもとに、目的達成に向けた詳細な計画を立てます。
この段階はプロジェクト全体の方向性を具体化するステップです。

例えば、以下のような「事前に準備しておきたい情報」の再確認や、より詳細な定義を行います。

• 誰をメインターゲットとするのか
• サイト全体のトンマナ（トーン＆マナー）をどう設定するか
• キーワード選定や、サイト構造などSEO/集客施策の方針はどう定めるか
• ユーザビリティを重視したUX（ユーザー体験）や、誰にでも使いやすいアクセシビリティ対応を進めるのか

これらの内容はSTEP1で大まかに整理されていますが、企画・設計フェーズでは、具体的な方法や精度についてさらに詳しく検討・調整を行います。

プロジェクトを円滑に進めるための3つのドキュメント

この工程で定めた方向性を制作会社が取りまとめ、以下のようなドキュメントを作成することが一般的です。
これらは、プロジェクト全体の進行や判断の基準となる指針として活用されます。

1. サイトマップ

サイトの全体像やページ構造を可視化し、情報の整理を行います。

2. 要件定義書

制作会社と依頼者の間で認識齟齬を無くし、必要な機能や、要件を明確にします。
SEO、UX（ユーザー体験）、アクセシビリティなど、細かな方針もこの段階で確定します。

3. デザインガイドライン（デザイン方針の定義書）

ターゲットや目的に基づき、Webサイトのクリエイティブやトーンを具体化します。

この企画・設計フェーズを丁寧に進めることで、プロジェクトの進行がスムーズになり、期待通りの成果物につながります。

STEP４　制作・実装

いよいよWebサイトの形を作り上げるフェーズです。
基本的に制作会社が構築を実行し、依頼元の企業担当者は内容のチェックや素材の提供を行います。

具体的には以下のように進行します。

各工程で把握すべき点やチェックポイント

①画面設計

ページごとの構成要素（見出し・本文・画像・ボタンなど）やレイアウトの配置、ユーザーの導線の強弱、コンテンツ量のバランスを把握します。

②デザイン作成

ワイヤーフレームをもとに、実際のビジュアルへと落とし込む工程です。フォントや色使い、画像などが、ターゲットにとって魅力的で見やすいデザインになっているかを確認します。また、企業のブランドイメージと整合性が取れているかどうかも、重要なチェックポイントです。

③コーディング

デザインをWeb上で再現する工程です。ページ遷移やホバー時の挙動、スクロールなどのインタラクティブな要素も含めて、仕様通りに正しく実装されているかを確認します。あわせて、テキストや画像に誤りや抜け漏れがないかも、この段階でチェックします。

④システム組み込み

CMSやフォーム、検索機能など、機能面を実装する工程です。定めた要件通りに機能が搭載されているかを検証します。

⑤テスト・リリース

全ページを最終確認し、不具合や表示の崩れがないかをチェックします。必要に応じて社内関係者の確認も得た上で、本番公開（リリース）へと進みます。

▶ 主なチェックポイント
・サイト全体を通して文言・導線に不備がないか
・リンク切れやページの読み込み等の不具合がないか
・フォームや外部連携が正常に機能しているか

各工程で適切にチェックを行うことで、リリース後のトラブルを未然に防ぎます。

Webサイト制作費用

Webサイトの制作を進めるうえで、制作コストは大きな関心事だと思います。
制作コストはサイトの内容や目的によって大きく変動します。

費用を左右する4つの要素

制作費用を左右する主な要素は以下の通りです。

1.ページボリューム

一般的に、ページ数が多いほど制作費用も高くなります。
また、ページの種類（例：コーポレートサイト、ECサイト、採用サイトなど）によっても構成や作業量が異なるため、コストに差が生じます。

2.要件の複雑さ

高度な機能の実装や外部システムとの連携が必要な場合、開発にかかる工数が増えるため、コストも高くなります。

3.デザインとクオリティ

テンプレートを活用する場合と、オリジナルでデザインを起こす場合では、大きくコストが異なります。
企業イメージに合わせてクオリティの高いデザインを求める場合、それに応じた制作コストが必要です。

4.納期

短納期で制作を進める場合、追加の人員体制や対応が必要になるため費用が増える場合があります。

Webサイト制作後の運用が重要

ここまで制作の流れをご紹介しましたが、Webサイトは公開後の運用フェーズが重要です。
新規構築やリニューアルプロジェクトは平均して1年ほどですが、運用は数年単位で実施するため、更新に関する方針も予め立てておくことが理想的です。

Webサイトの運用を成功させるポイント

定期的な更新計画

ニュース、イベント情報、コラム、採用情報などを継続的な更新が必要なコンテンツについて、計画を立てておく。

データ分析と改善

アクセス解析を活用し、ユーザー行動を把握。課題を洗い出して必要な改善を加える。

セキュリティ対策

CMSやプラグインのアップデート等により、常に最新のセキュリティを維持する。

注意点

運用に必要な体制やコストも、制作段階で見越しておきましょう。
運用サポートを提供する制作会社を選ぶと、負担を軽減できます。

運用に関する以下のコラムも合わせてご覧ください。
Webサイト運用とは？目的や費用、内製・外注の違い、業者選定のコツ

よくある失敗とWeb制作会社に依頼する際の注意点

Webサイト制作では、委託する制作パートナーの選定も非常に重要な要素です。
以下に、よくある失敗例とその対策をまとめましたので、パートナー選びや進行時の参考にしてください。

よくある失敗例

・コストで選んだが、デザインやシステムの品質が不安定

解決策：費用だけでなく、ポートフォリオ等で実績や技術力もチェック。

・途中で担当者がいなくなり、プロジェクトが中断

解決策：体制が整備されている制作会社は、プロジェクトが頓挫するリスクが低く、会社全体でプロジェクトを管理しているか確認。

・コミュニケーション不足

解決策：初期段階での対応力やレスポンスの速さを確認し、定期的なミーティングで進捗確認や認識ズレがないか把握。

依頼時に、運用サポートやアフターフォローの有無を確認し、安心して任せることができる制作会社を選びましょう。

制作会社選びで大切な視点や選定のポイントは以下のコラムで解説しています。
後悔しない！Web制作会社の選び方と選定基準

当社のWebサイト制作実績紹介

株式会社ツムラ 様 事例

コーポレートサイト、採用サイト、ブランドサイトを一新

【プロジェクト内容】
サイトの課題分析 / 要件整理やRFPとりまとめ / 企画設計 / 制作・実装

京王電鉄株式会社 様 事例

アクセシビリティに対応し、全ての方が使いやすいサイトへ

【プロジェクト内容】
要件整理やRFPとりまとめ / 企画設計 / 制作・実装

東ソー株式会社 様 事例

コーポレートサイトの機能に加え、スクラッチで資料DLシステムを開発

【プロジェクト内容】
要件整理やRFPとりまとめ / 企画設計 / 制作・実装

まとめ

ここまでお読みいただきありがとうございます！
情報量が多くなりましたが、Webサイト制作の進め方や発注者視点で知っておくべきことなど、理解を深める一助となっていれば幸いです。

当社は、Webサイト制作・デジタル戦略全般におけるサービス提供で約25年の実績と豊富な経験を有するウェブ制作会社です。

デザインクオリティはもちろんのこと、ただ見た目が綺麗なサイトを提供するだけではなく、
目的達成を第一に置いた企画戦略を得意としておりますので、Web戦略・サイト制作の進め方など、お困りごとがあればぜひお気軽にご相談ください！

Webサイト制作等　サービス一覧ページ