Webサイト制作は工程表でスケジュール管理！テンプレートサイトも紹介

Webサイト制作は、チームが長期にわたって協力してこそ実現できるプロジェクトです。工程表を作成してスケジュール管理をしたいと考えている方も多いでしょう。

本ガイドでは、Webサイト制作の工程表を作成する流れやタスクの一覧、おすすめのテンプレートサイトを紹介します。

Webサイト制作の工程表を作成したい方は、ぜひ参考にしてください。

Webサイト制作の工程表を作成する流れ

Webサイト制作の工程表を作成する流れは、以下のとおりです。 

1. 公開までに必要なタスクを洗い出す
2. タスクの順序を決める
3. タスクを誰が担当するか決める
4. タスクにかかる工数を計算する
5. 制作スケジュール表に落とし込む

順を追って詳細を解説します。

公開までに必要なタスクを洗い出す

Webサイト制作といっても、完成までに必要なタスクは多くあります。 まずは、必要なタスクをできる限り細かく洗い出しましょう。

企画、設計、実装などタスクの洗い出しが粗いと、Webサイト制作に必要な工数の把握は困難です。Webサイト制作を進めるうちに漏れていたタスクが見つかり、想定していない工数がかかります。結果、想定していたスケジュールから遅延が生じるでしょう。

特に漏れやすいタスクは、チェックや進捗状況を共有するミーティングです。直接必要なタスクではありませんが、実際にはよく行われています。タスクを細分化することで漏れのない工程表を作成できるので、できる限り細かく洗い出しましょう。

タスクの順序を決める

すべてのタスクを同時並行で進めるわけにはいかないので、順序を設定する必要があります。

実際にはチームを組んでWebサイト制作を進めるにしても、タスクの順序はチーム全体の視点で設定しましょう。

なお、順序を決める段階で、細分化したタスクをグループ分けすることもおすすめです。たとえば、「目的設定」と「ペルソナ設定」は「企画」に区分できます。

タスクを誰が担当するか決める

洗い出した各タスクについて、チームメンバーのうち誰が担当するかを割り当てます。メンバーのスキルや経験、負荷のバランスなどを考慮して割り当てるのがポイントです。

成長を考慮して、未経験者や経験が浅いメンバーに割り当てる場合もあります。この場合は、クオリティやスケジュールを担保できるよう、指導スタッフを付けましょう。

タスクにかかる工数を計算する

続いて、洗い出したタスクを実行するのにどれくらいの工数がかかるのか計算します。実際にやったことがあるタスクなら、過去の実績を参考に工数を計算しましょう。

チームメンバーと十分に話し合い、担当者のスキルや経験を考慮した工数計算が必要です。調整日や予備日を設けると、多少のトラブルがあっても全体スケジュールの遅延を避けられます。

制作スケジュール表に落とし込む

タスクの順序と担当者、工数が決まったら、制作スケジュール表に落とし込みましょう。具体的には、エクセルなどの表計算ソフトで次のような制作スケジュール表を作成します。

また、列を追加して開始日から終了日までの期間についてセルを塗りつぶし、横棒グラフを作成するのがおすすめです。バーチャート工程表と呼ばれています。

表にまとめたら次の事項をチェックし、問題があれば調整しましょう。

• タスクに漏れはないか
• 担当者の負荷に偏りはないか
• 工数設定に無理はないか

Webサイト制作のタスク一覧

Webサイト制作の工程表を作るには、タスクを洗い出す必要があります。主なタスクを一覧にまとめたので、ぜひ工程表を作成するときの参考にしてください。

• 目的・目標設定
• ペルソナ設定
• サイトマップ設計
• ワイヤフレーム設計
• デザイン設計
• コーディング
• サーバー契約
• ドメイン取得
• ファイルアップロード
• 動作検証

以降では、各タスクの詳細を解説します。

目的・目標設定

なぜWebサイトをリリースするのか、何を実現したいかを明らかにするのが目的・目標設定です。明確にしないままWebサイトを制作しても十分な効果は得られません。

たとえば、なんとなく採用につなげたいと考えていたのに、集客効果を狙ったWebサイトを制作してしまうことも。採用と集客ではWebサイトの構成や掲載するコンテンツは大きく変わります。

以下のように、まずは目的・目標を明らかにしましょう。

• Webサイトで集客して売上を向上したい
• 認知を拡大したい
• 採用につなげたい
• ブランドイメージを確立したい

ペルソナ設定

どのような人にWebサイトを見てもらいたいのかを決める作業が、ペルソナ設定です。以下の項目が埋まるよう、詳細に設定します。

• 氏名
• 性別
• 年齢
• 居住地
• 独身/既婚
• 家族構成
• 年収
• 学歴
• 休日の過ごし方
• 好きなこと/得意なこと
• 嫌いなこと/苦手なこと
• 価値観

ペルソナを設定するときは、典型的な架空のユーザー像を設定することがポイントです。可能な限り客観的なデータを収集し、根拠に基づいて設定しましょう。

ペルソナを設定することで、集客や採用の対象となるユーザーの視点に立った施策を展開しやすくなります。Webサイト制作においては、どのようなコンテンツが必要なのかといった案を出すのに役立つでしょう。

サイトマップ設計

続いて、Webサイト全体のページ構成を決めます。コーポレートサイトを例にすると、トップページを1階層目として2階層目に会社情報などを設置します。

以下のように、Webサイト全体のページ構造をツリー状に表したものがサイトマップです。3階層目や4階層目と続くWebサイトもあります。

• トップページ
  • 会社概要
  • 事業内容
  • 採用情報
  • お知らせ
  • サポート
  • ブログ
  • 問い合わせフォーム

Webサイト制作の目的に応じて、必要なページ構成を検討していきましょう。

ワイヤフレーム設計

サイトマップ設計ができたら、ページのレイアウト構成をワイヤフレームで設計します。

ワイヤフレーム（Wire Frame）とは、ページレイアウトを線と図でシンプルに表す設計図です。フォントの大きさや色、使用する画像などは、ワイヤフレーム設計段階では考慮しません。ペルソナにどのような情報や機能を提供するのか、どこに配置するのかを明らかにします。

ワイヤフレーム設計の基本的な流れは、次のとおりです。

• 掲載する情報を洗い出す（ピックアップ）
• 掲載する情報をグループ分けする（グルーピング）
• 掲載する情報に優先順位を付ける（ランキング）
• 掲載する情報をレイアウトする

ワイヤフレームは、Webページのレイアウトを第三者と共有して議論を進めるために有効なツールです。なぜそのページレイアウトにしたのかを説明できるよう、明確な根拠を持って設計を進めましょう。

デザイン設計

デザインコンセプトとは、ブランドやペルソナに合わせてデザインの指針を言語化することです。

たとえば、クリスマスがテーマであれば「赤と緑を中心としたデザインとする」をデザインコンセプトとします。

デザインコンセプトを決めることで、チームメンバー間で共通認識を持ってデザイン制作を進められます。結果的にWebサイトのデザインに一貫性を持たせることが可能です。

デザインコンセプトが決まったら、以下のようにWebサイトの見た目（デザイン）を具体的に決めます。

• 配色
• フォント
• フォントサイズ
• 行間
• グラフィック
• ボタン形状

Webサイトのデザインでは、画面サイズに応じてコンテンツの表示方法を変更するレスポンシブデザインへの対応が求められます。また、視覚障害を持つユーザーに配慮し、アクセシビリティを確保しましょう。

コーディング

デザインが決まったら、そのデザインを実現するためにHTMLやCSSを使ったコーディングを行います。

コーディングが完了すると、Webブラウザ上でページを閲覧できます。

関連記事：コーディング1ページあたりの費用相場はどれくらい？

サーバー契約

コーディングが終わるとページを閲覧できるようになりますが、インターネットで公開するにはサーバーが必要です。一般的にはレンタルサーバーやクラウドサーバーを契約します。

レンタルサーバーにかかる費用は、月額100～5,000円程度とプランによって幅があります。

ドメイン取得

インターネット上の住所にあたるドメインも、Webサイトを運用するうえで必要です。ドメインを取得するには、お名前.comなどのドメイン登録サービスを利用します。

お名前.comでは、「.com」や「.jp」については登録料無料。登録後、1年ごとに更新料が1,408円かかります。取得したいドメインによって費用は異なるので、詳しくはドメイン登録サービスのWebサイトで確認してください。

ドメインを取得したら、契約したサーバーの管理画面でドメインを設定します。

ファイルアップロード

コーディングが完了したファイルなどをサーバーにアップロードすると、インターネット上にWebサイトを公開できます。具体的には、FTP（File Transfer Protocol）ソフトを使って必要なファイルをサーバーに転送します。

なお、WordPressを使うWebサイトは、データベースの作成や設定ファイルの編集も必要です。

動作検証

ここまでの流れでWebサイトの公開準備は整いました。しかし、想定どおりに表示されるか、問題なく動作するかといった動作検証も欠かせません。

次のような項目をチェックしましょう。

• デザインが崩れていないか
• 想定したデバイスで問題なく表示されるか
• 想定したブラウザで問題なく表示されるか
• 画像は見やすく表示されているか
• 文字化けしていないか
• 誤字脱字はないか
• ファビコンは表示されているか
• リンクは正常に機能するか
• 問い合わせフォームは正常に機能するか
• マウスホバーは動作するか
• 表示速度に問題はないか

平均的なWebサイト制作期間

Webサイト制作の工程表を作成する際の参考として、平均的な制作期間を規模別に紹介します。

ランディングページ（1ページ）

リスティング広告のリンク先となるランディングページの制作期間は、約1ヶ月が目安です。ランディングページはリスティング広告の掲載順位に影響が出るので、丁寧に作り込む必要があります。

掲載する情報量は多めでCTAを設置する必要があるため、短期間での制作は困難です。

小規模サイト

最低限の情報を掲載する5ページ程度の小規模サイトだと、制作期間は約2ヶ月が目安です。創業したばかりのコーポレートサイトやキャンペーンサイトが該当します。

小規模といっても、企画段階における打ち合わせに1～2週間かかります。そこからデザイン設計、コーディングと進んでいくので、約2ヶ月必要です。

中規模サイト

15ページ程度の中規模サイトでは、制作期間の目安は約3ヶ月です。一般的なコーポレートサイトや採用サイトが該当します。

小規模サイトと比べてデザイン設計やコーディングの工数が増え、動作検証にも時間がかかります。デザインにこだわらなければ制作期間の短縮を見込めますが、こだわる場合は3ヶ月以上も想定しておきましょう。

大規模サイト

大規模サイトの制作期間は、約6ヶ月が目安です。デザイン設計やコーディングにかかる工数も大きく、動作検証にも時間がかかります。

以下に当てはまる場合は6ヶ月以上かかる可能性もあるので、Webサイト公開までゆとりを持った計画が必要です。

• 多言語対応したい
• 商品・サービスが多い
• 複雑な機能を実装したい

Webサイト制作の工程表テンプレートサイト

各社が提供しているテンプレートを使うと、ゼロから作るよりもスムーズに工程表を作成できます。工程表のテンプレートを提供している3社を紹介するので、ぜひお役立てください。

Microsoft（エクセル）

Microsoft 365 Createでは、Excel形式の工程表テンプレートが準備されています。

「シンプル ガント チャート」では、フェーズごとに分類したタスクについて、担当者と進捗状況、開始日、終了日の管理が可能。値を入力すると、チャート部分も自動的に変更されます。

進捗状況が単に「◯%」と数値で表示されるだけでなく、セル内のバーで視覚的にわかりやすいことが特徴です。

bizocean

bizoceanは、トライベック株式会社が提供するテンプレサイトです。工程表・工程管理表のテンプレートが60件以上あるので、自社に合う工程表を厳選できます。

一部有料もありますが、多くのテンプレートを無料会員登録だけでダウンロードできます。

ビズ研

ビズ研は、仕事で使えるテンプレートを無料・登録不要でダウンロードできるテンプレートサイトです。1日用から10年用まで、さまざまな工程表テンプレートが充実しています。

サイト上では工程表の活用ガイドも掲載されており、親切なサイト設計。35,000回以上もダウンロードされた人気のテンプレートもあります。

まとめ：Webサイト制作は工程表でスケジュール管理しよう

Webサイト制作には、目的の設定からワイヤフレーム設計、動作検証に至るまで多くのタスクがあります。ランディングページでも約1ヶ月、大規模サイトだと6ヶ月以上かかることもある長期的なプロジェクトです。

Webサイト制作のスケジュール管理をする際は、タスクを洗い出して担当者を決め、工数を見積もってスケジュール表に落とし込みましょう。工程表を作成することでプロジェクトの管理がしやすくなり、スケジュールの遅延を避けられます。

ぜひ本ガイドを参考に、工程表を使ったスケジュール管理を実践してください。