- 更新日 : 2024年12月12日
Web制作の工程表テンプレート！スケジュールと進捗率を一覧で確認
Web制作において、スケジュール管理やタスクの割り当てに工程表が欠かせません。工程表には、ガントチャート工程表やバーチャート工程表などの種類があります。
Web制作の工程表作成で悩んでいる場合は、テンプレートを活用しましょう。本記事では、Web制作の工程表に記載する主な項目や、すぐに活用できるテンプレートを紹介します。
目次
Web制作の工程表とは？
Web制作の工程表とは、Web制作にあたって作業の内容や流れ、期日などの項目を表にまとめたものです。ガントチャート工程表やバーチャート工程表などの種類があります。
工程表は、全体像を把握することでプロジェクトをスムーズに遂行するために必要です。たとえば、Web制作の工程表を随時確認することで進捗管理を徹底すれば、納期の遅れを防げるでしょう。
また、工程表を使って都度進捗を管理していれば、トラブルが生じる前に対策も講じやすいです。さらに、誰がどの役割を担うかをはっきりさせられるため、作業の効率化にもつながります。
Web制作の工程表は、作業開始前にプロジェクトマネージャー（PM）などが作成することが一般的です。プロジェクトマネージャーとは、プロジェクトのスケジュール管理や予実管理などを担う職種のことを指します。
Web制作の工程表の作業手順、進め方
工程表を作成するにあたって、まずWeb制作のゴールや目的をプロジェクトのメンバーで共有しておかなければなりません。人材募集・商品のPR・手続きの受付といった目的をはっきりさせておきましょう。
続いて、目的を達成するために必要な作業を洗い出します。具体例は、サイトマップの作成・UX設計・デザイン作成などです。
洗い出した作業をさらに細かく分解し、それぞれに担当者を割り当てます。タスクを割り当てた担当者に作業に必要な期間を確認することで、おおよそのスケジュールを把握することも必要です。
また、都度進捗を確認するためにミーティングの日も設定しましょう。「毎週月曜日」のように曜日を固定しておけば、メンバーも覚えやすいです。
最後に、まとめた情報をツールに入力し、Web制作の工程表を完成させます。
Web制作の工程表 テンプレート-無料ダウンロード
Web制作にあたって作成する工程表のテンプレート・ひな形は、以下ページより無料でダウンロードできます。
1から作成するよりも楽に作成できるので、ぜひお気軽にご活用ください。
また、Web制作で提案書・企画書やWBSを作成する際は、以下のテンプレート・ひな形も役に立ちます。
Web制作の工程表の記載項目・作り方
Web制作の工程表に、案件名・顧客名・開始月・終了月や、作業名・詳細・担当者・期日を入力していきましょう。Web制作における主な作業は、以下のとおりです。
- 要件定義
- 目標設定
- 初期リソースの割り当て
- サイトマップ作成
- ワイヤーフレーム作成
- デザインコンセプト策定
- UX設計
- コンテンツ戦略策定
- SEO戦略策定
- デザイン作成
- モックアップ作成
- フィードバック/修正
- 最終デザインFIX
- 開発環境の構築
- 技術要件の確認
- 技術スタックの決定
- データベース設計
- HTML/CSSコーディング
- JavaScript開発
- レスポンシブデザイン実装
- クロスブラウザテスト
各作業の概要や、詳細への記入例を簡単に紹介します。
要件定義
要件定義とは、実現したいWebサイトの仕様を決定することです。要件定義に必要とされる主な項目として、背景・目的・費用・プロジェクトの概要・システム要件・技術要件・インフラ要件・セキュリティ要件などが挙げられます。
工程表の詳細部分には、「プロジェクトの目的・必要な機能・納期・予算などを明確にする」などと入力するとよいでしょう。
目標設定
目標設定の詳細には、「KPIを設定する・KGIを設定する」などと記載するとよいでしょう。
KGIはKey Goal Indicatorを略した言葉で、売り上げや利益などを指す「重要目標達成指標」のことです。それに対してKey Performance Indicatorを略したKPIは、KGIを達成するために必要な「重要業績評価指標」を指します。
初期リソースの割り当て
初期リソースの割り当ての詳細には、「プロジェクトに必要な人員・予算・ツールを検討する」のように記載します。
Web制作に携わる職種は企画管理系（営業やWebディレクターなど）、デザイン系（UXデザイナーやWebデザイナーなど）、開発系（フロントエンドエンジニアやバックエンドエンジニアなど）とさまざまです。初期リソースを割り当てる人は、各職種の仕事内容をある程度理解しておかなければなりません。
サイトマップ作成
サイトマップとは、Webサイトの各ページがどのようになっていて、それぞれどこに配置されているか示したものです。サイトマップを決める際には、ページ数や内容に加え、構成図を使って各ページの関係性も決めます。
Web制作の工程表における「サイトマップ作成」の詳細には、「全体のページ構成を決める」などと記載するとよいでしょう。
ワイヤーフレーム作成
ワイヤーフレームとは、制作するWebサイトのコンテンツの見せ方やレイアウトのことです。サイトマップ作成がサイトの全体像を作り上げるのに対し、ワイヤーフレームの作成では各ページの構成を考えます。
工程表における「ワイヤーフレーム作成」の詳細の記載例は、「基本的なレイアウトを図にして、コンテンツの配置やユーザーインターフェースの構成を決める」などです。
デザインコンセプト策定
デザインコンセプト策定は、デザイナー間で共有することはもちろん、フロントエンドエンジニアやクライアントなどさまざまな関係者にデザインの概要を説明するために必要な作業です。あらかじめ定めたキーワードからテーマを考え、デザインコンセプトを練っていきます。
Web制作の工程表における、デザインコンセプト策定の詳細部分には、「デザインの方向性や、色使い・フォントを決める」などと記載するとよいでしょう。
UX設計
UXとはUser eXperienceを略した言葉で、サービスを利用することでユーザーが得られる体験のことです。UX設計は、制作したWebサービスに触れてもらう中で、ターゲットに対してどのような体験をしてもらうのかを設計する工程を指します。
工程表で「UX設計」の詳細の記載例は、「ユーザーインターフェースの設計やユーザビリティのテストを実施する」などです。
コンテンツ戦略策定
Web制作の工程表における「コンテンツ戦略策定」の詳細には、「サイトに盛り込むコンテンツや、更新頻度などを決める」などと記載するとよいでしょう。この工程では、キーワードのリサーチなどを通じてコンテンツ戦略を策定していきます。
なお、Webサイト以外でコンテンツをどのように配信していくかを決めることも、コンテンツ戦略のひとつです。
SEO戦略策定
SEOとはSearch Engine Optimizationの略で、検索エンジン最適化を指します。「SEO戦略策定」の詳細の記載例は、「検索エンジンのランキングを向上させる施策を考える」などです。
なお、SEO施策にはツールが必要なこともあります。必要に応じて、SEOツールの導入の是非も考えなければなりません。
デザイン作成
Web制作における工程表のデザイン作成で、詳細の記載例は「デザインコンセプトに基づいて、ページデザインを作成する」などです。
デザイン作成には、IllustratorやPhotoshopに加えてFigmaやSketchなどさまざまなツールが存在します。そのため、どのツールを使ってデザインを作成するのかもあらかじめ考えておかなければなりません。
モックアップ作成
モックアップとは、表面をイメージした静的なものです。あくまで「模型」のため、プロトタイプ（試作品）のようにWebサイト上に動きや機能はついていません。
モックアップを作成する主な理由は、完成イメージを共有して課題を洗い出すことです。工程表の詳細には、「製品の初期設計を具現化する」などと記載するとよいでしょう。
フィードバック/修正
Web制作の工程表における「フィードバック/修正」の詳細の記載例は、「クライアントやユーザーからの意見に基づきデザインなどを修正する」などです。
モックアップをクライアントなどに確認してもらったうえで、そのフィードバックに対応することで、よりよいサービスを提供できます。ただし、クライアントのイメージと離れている場合は、すり合わせや修正の対応をしなければなりません。
最終デザインFIX
Web制作の工程表で、「最終デザインFIX」の詳細には「デザインを確定する」などと記載します。
なお、デザインの確定には、クライアントの承認が必要です。デザインについて、クライアントからの修正指示がいくつもある場合でも、放置せずコミュニケーションツールやメールを活用して丁寧に対応しなければなりません。
開発環境の構築
開発環境とは、パソコンを使って実際にシステム開発を進めるための環境を指します。担当者がストレスなくスムーズに作業を進めるためには、開発環境の構築が大切な作業です。
どのようなパソコン・ソフトウェアを使うのかなどを考えます。Web制作の工程表における「開発環境の構築」の詳細の記載例は、「必要な開発ツールやフレームワークを用意する」などです。
技術要件の確認
技術要件とは、開発するために必要なプログラミング言語や通信プロトコル、フレームワーク、バージョン管理などのことです。ゴールとして定めたWebサイトを完成させるためには、どのような技術要件が求められるのかを確認します。
Web制作の工程表の記載例は、「確定したデザイン・機能を実装できるか確認する」などです。
技術スタックの決定
技術スタックとは、LAMP（Linux、Apache、MySQL、PHP）のように、ソフトウェアを構築するための組み合わせのことです。工程表には、「プロジェクトに必要なプログラミング言語やフレームワークなどを決定する」などと記載します。
なお、技術スタックを決めるにあたっては、より効率的に作業を進められるものを選ぶことが重要です。
データベース設計
データベースとは、あとで特定の条件にあてはまるデータを取り出せるようにまとめ、収納したもののことです。Webサイトで大量のデータを扱うためには、データベースが欠かせません。
Webサイトの業務効率化にもかかわるため、どのようにデータベースを設計するかは重要なポイントです。工程表の「データベース設計」の詳細には、「テーブルを作成して余計なデータを取り除き、データ型を決定する」などを記載します。
HTML/CSSコーディング
Web制作の工程表における「HTML/CSSコーディング」の詳細の記載例は、「デザインに基づき、HTML/CSSを使ってコーディングする」などです。
Web制作ではWordPressのようにCMSと呼ばれるWEBサイト作成ツールを活用することもあります。CMSを活用すれば、効率よくWebサイトを開発できるでしょう。その代わり、担当者にHTMLやCSS以外のスキルが求められます。
JavaScript開発
JavaScriptは、Webページに動きを加えられるプログラミング言語です。工程表の「JavaScript開発」の詳細には、「JavaScriptで動的ページを作成する」などと記載するとよいでしょう。
HTML/CSSに加えてJavaScriptを用いることで、ユーザーがより使いやすいWebサイトを制作できます。 ただし、HTML/CSSを扱えてもJavaScriptが苦手な担当者もいるため、割り当てには注意が必要です。
レスポンシブデザイン実装
レスポンシブデザインとは、デバイスのサイズに依存しないデザインのことです。レスポンシブデザインを実装することによって、パソコンでもスマホでも見やすく表示できます。
工程表の「レスポンシブデザイン実装」の詳細の記載例は、「各種デバイスで最適な表示をできるようにする」などです。カラムレイアウトを考える、可変・固定を決めるなどの作業を進めます。
クロスブラウザテスト
クロスブラウザテストとは、制作したWebサイト・アプリケーションがどのブラウザでも正しく表示されるか確認することです。工程表には「異なるブラウザでも正常に表示されるか検証する」などと記載するとよいでしょう。
とくに、自社と異なるブラウザで表示した際に不自然にならないことの確認が必要です。うまく表示されない場合は、代替機能を作成する作業が求められます。
Web制作の工程表を作る上での注意点
Web制作の工程表を作るにあたって、必ず各工程に期日を設けましょう。期日がないと、一部のメンバーが作業に必要以上に時間をかけてしまうことがあります。結果的に、完成物のクライアントへの提出が遅れることにもつながりかねません。
また、期日にある程度余裕を持たせて、無理のない実現可能なスケジュールを立てることも大切です。そのために工程表の作成者は、各工程が全体に占める割合を把握しておかなくてはなりません。
さらに、一度工程表を作成すればそれで終わりではない点にも注意しましょう。メンバーのフィードバックに応じて、各工程の期日を調整したり、見やすく使いやすい工程表に修正したりすることで、より進捗管理がしやすくなります。
Web制作をスムーズに進めるため工程表が必要
Web制作の工程表とは、Web制作にあたって作業の内容や流れ、期日などの項目を表にまとめたものです。作業前に工程表を作ることにより、プロジェクトのメンバーが全体像を把握してWeb制作をスムーズに進められます。
工程表に盛り込む項目は、要件定義からクロスブラウザテストまでさまざまです。作成する際は、各工程の内容を理解したうえで無理のないスケジュールを設定しましょう。
※ 掲載している情報は記事更新時点のものです。
※本サイトは、法律的またはその他のアドバイスの提供を目的としたものではありません。当社は本サイトの記載内容（テンプレートを含む）の正確性、妥当性の確保に努めておりますが、ご利用にあたっては、個別の事情を適宜専門家にご相談いただくなど、ご自身の判断でご利用ください。
関連記事
アンケート依頼文の書き方とは？回答率向上のポイントやテンプレを解説
アンケート依頼文は、単なる依頼ではなく、効果的に回答を引き出すための重要な要素です。特に、オンラインアンケートにおいては、依頼文の書き方で回答率が大きく左右されます。アンケートの目的や個人情報の取り扱い方法を明記することで、信頼性が高まり、…
詳しくみるテレビ番組の企画書とは？項目と書き方・無料のテンプレートも紹介！
テレビ番組の企画書は、番組の方向性や内容を明確にし、制作スタッフや関係者が共通認識を持って番組作りを進めるための資料です。番組のコンセプトやターゲット、構成、予算、スケジュールなど、番組を形にするための情報が詰め込まれています。当記事では、…
詳しくみる家賃振込先変更のお知らせをしたい！適切な挨拶文と無料テンプレ
家賃振込先変更のお知らせを作成する際は、適切な挨拶文とともに、新しい振込先などの必要な情報を明確に伝えることが重要です。銀行口座が切り替わる約2か月前には、入居者にその旨を告知しましょう。無料のテンプレートを活用すれば、手間を省きつつ適切な…
詳しくみる町内会のゴミ当番表の作り方は？無料テンプレートやポイントを解説
町内会のゴミ当番表は、住民によるゴミ捨てがしやすいよう、ゴミ置き場（ごみ集積所）の準備や清掃を分担するための表です。ゴミ当番表のエクセルでの作り方や無料テンプレート、例文を紹介します。 ▼町内会のゴミ当番表のひな形・テンプレートはこちら 町…
詳しくみる研修提案書とは？記載すべき内容と便利な無料テンプレートを紹介
研修提案書は、研修の目的や効果を示し、意思決定者やクライアントを納得させるために欠かせない資料です。組織の人材育成に力を入れる企業が増えた今、研修提案書の重要性も高まっています。 この記事では、研修提案書とは何か、必要な理由や記載すべき各項…
詳しくみる飲食店の接客マニュアルを作成するには？必要項目7つや作成ツールを解説
飲食店ではスタッフ全員が一定のスキルでお客様に接することができるよう、接客マニュアルを準備することが欠かせません。接客マニュアルがあることで、接客のばらつきが減り、お客様に一貫したサービスを提供できるようになります。本記事では、飲食店の接客…
詳しくみる