Web制作ノウハウ

Webサイト制作の流れを徹底解説！制作フローの基礎知識｜担当者のタスクリスト付き

更新日：2022-07-01 公開日：2019-11-05

WRITERヒサナガWebマーケーター

「いきなりホームページ制作のプロジェクト担当者に任命された」そんなWeb担当者って実は多いようです。
Web制作の流れも分からない！自分は何をやらないといけないのか？
そんな不安を解消できるように、ジーピーオンラインの元Webディレクターで現広報担当が解説します。
ジーピーオンラインにWebサイト制作の相談をする

Webサイト制作のおおまかな流れ

Webサイト制作の流れ

典型的なホームページ制作の流れとしては、「企画・設計」「制作・実装」「公開・運用」という形でおおまかに分かれていますが、成果を出すための制作フローを紐解くと、PDCAに沿った4つのステージと10のフェーズで構成されています。

4つのステージと10のフェーズ

コンサルティングステージ

　・現状についての会社の状態やビジネスについて把握するヒアリングフェーズ
　・業界市場や競合会社について調査するリサーチフェーズ
　・プロジェクト企画やコンテンツ企画などのプランニングフェーズ
　↓　Plan（計画）

実装ステージ

　・情報設計や外部設計から取材・撮影の段取りまでおこなう要件定義フェーズ
　・ユーザビリティやSEOの実装をおこなうデザイン制作（UI実装）フェーズ
　・システム外部設計に沿った実装をおこなうシステム構築フェーズ
　↓　Do（実行）

運用ステージ

　・運用にあたっての体制や業務フローを策定するプランニングフェーズ
　・更新業務やシステム保守を実施するオペレーションフェーズ
　↓ Check（評価）

評価ステージ

　・アンケートやアクセス解析をおこなうリサーチフェーズ
　・アクセス解析の結果から分析をおこなう分析フェーズ
　↓ Action（改善）

餅は餅屋と言いますが、制作業者と組むことで上記4つのステージの中で、Web担当者が担うことはそれぞれのフェーズごとの確認や承認業務、それに伴う社内段取りのみとなります。
この記事ではWeb担当者目線での基本的な流れをまとめてみました。

制作期間はどれくらいを想定すべき？

制作にあたり、あらかじめ確実にしておきたいのが制作期間の確保です。良いホームページを制作するには、相応の時間が必要です。

参考までに、当社では1ページもののLP（ランディングページ）であれば1ヶ月強、3ページ規模のキャンペーンサイトで2ヶ月強、100ページ規模のコーポレートサイトであれば多くの場合は8～9ヶ月の制作期間を見込みます。

人気の制作会社では直近のスケジュールは埋まっており、急いで制作しようとするとスケジュールに空きのある制作会社の中から選んで発注せざるを得ない状況になってしまいます。実際にかかる期間は、同じ1ページだったとしても内容により変動しますが、おおよその時間を念頭に置いてプロジェクトを進めていくのがおすすめです。
【関連記事】ホームページ制作にかかる期間は依頼から完成までどれくらい？規模別に徹底解説！

Webサイトの目的を明確にする

まずはじめにホームページの目的について社内で決定します。
ホームページをつくるというのは何かしらの目的達成のための手段としてのひとつで、「なぜ、つくるのか？」Web担当者としてはこの点を関係者と共有するためにも明確にします。
【関連記事】コーポレートサイトの目的｜掲載するべき内容やメリットについて紹介

ゴールを決定する

制作するWebサイト	主な目的
コーポレートサイト	企業イメージの向上問い合わせ
サービスサイト	資料請求問い合わせ申し込み
リクルートサイト	自社にマッチした人材の採用

例えば、コーポレートサイトの場合は企業イメージの向上を目的にしたり、サービスサイトの場合は資料請求や問い合わせなどのリード客獲得を目的にしたり、リクルートサイトでは自社にマッチした人材の採用を目的にするなどがあげられます。

ゴールを決定する際に、具体的な数値と進捗を判断する指標（KPI）も一緒に設定しておくと、リニューアル後の振り返りや改善がスムーズになります。
【関連記事】コンバージョン（CV）とは？CV率を上げる5つの方法をご紹介
 【関連記事】KPIとは？意味と設定方法、KGIとの違いを解説

ターゲットやペルソナを決める

法人ペルソナと個人ペルソナの例

誰向けのホームページなのか？どんな人に見てもらいたいのか？
商品訴求サイトでは、商品購買層のターゲットやペルソナと連動する必要がありますし、コーポレートサイトの場合は、広いターゲットになってしまうため、IRコンテンツやサービス紹介コンテンツなどコンテンツごとにターゲットを設定するのもひとつの方法です。
【関連記事】BtoB企業にペルソナ設定は必要？設定方法と注意点【ワークシート付】

業者探し・問い合わせ

社内でホームページの目的を明確にしたあとは、実現に向けてパートナーとなる制作業者を探すのもWeb担当者としての役割になってきます。上長や決裁者に向けて「なぜその業者を選定したのか？」という選定理由も必要なため、3社ほどに問い合わせをしたり、予算規模によってはコンペを開催することになります。

予算が決まっている場合は、その予算で目的を達成するためにどんなことができるかという提案内容で業者を選ぶこともひとつです。

逆に目的しか決まっていない場合は、企画内容に合わせて予算やスケジュールを提案してもらうことになり、総合的に業者を選ぶことができます。安かろう悪かろうという言葉もありますので、提案内容をしっかり比較すること、安心できそうな業者かどうかを判断するのに制作体制やこれまでの実績を把握し、一度直接会う機会をもつことをおすすめします。
【関連記事】ホームページ制作会社の選び方。基本項目と見落としがちなチェックポイント

業者比較の精度を高めたい場合や、コンペ方式にする場合に用意しておきたいものにRFP（提案依頼書）というものがあります。これは発注側となるWeb担当者が用意しておきたい資料のひとつです。
【関連記事】RFPとは？ホームページ制作を成功に導く提案依頼書の書き方とサンプル
 【関連記事】ホームページ制作コンペのメリット・デメリットとは？コンペ成功の秘訣を公開！

企画・設計

プロジェクトの成功がかかっている一番大事なフェーズです。
ビジネスの現場で仕事がうまくいく事を表す「段取り八分、仕事二分」や「段取り八分、仕上二分」という言葉がありますが、「企画・設計」フェーズがまさに「段取り」部分になります。

また、このフェーズから制作業者を入れていくことで、スムーズな進行になります。
【関連記事】失敗しない！Webサイト制作におけるキックオフミーティングの目的と進め方

プロジェクト計画書の作成

制作業者とのこれまでの打ち合わせをもとに、プロジェクトの全貌が固まった計画書を作成して関係者で共通認識をもつことにつなげます。プロジェクト計画書は「要件定義書」と言われる資料で提出されることが多く、具体的に記載されている項目としては次のとおりです。

プロジェクト概要（目的、ターゲット、マイルストーン）
制作要件（動作環境、大枠のサイト構成、技術要件、その他要件）
システム要件（サーバー仕様、開発仕様）
課題・リスク
体制
大枠スケジュール

計画書に記載されたこれらについて差異がないかを確認して、社内での承認をとるまでがWeb担当者の役割となります。
【関連記事】RFP（提案依頼書）と要件定義書の違いは何？記載内容も詳しく解説

Webサイト構成を決定する

サイトマップの例

どのコンテンツをどうやって配置するか、伝えたいことを伝えるにはどのような構成が最適か、さまざまな観点から制作業者が主体となり練り上げます。そして、Webサイト構成をまとめた「サイトマップ」資料が完成されます。
サイトマップは本や雑誌でいう「もくじ」のようなもので、サイトマップに表示されているものがWebページとして作成されていきます。

サイト構成が決定した段階くらいで、大枠のスケジュールから詳細スケジュールへと移行していきます。Web担当者の役割としては、詳細スケジュールをもとにいつまでに何をしないといけないのかを把握して自身や関係者の業務スケジュールを調整します。
【関連記事】サイトマップとは？作り方からツール紹介までプロが解説します！

画面設計を決定する

Webサイト構成で全体像が決まると、次は個別ページの設計段階に入ります。
画面設計の段階ではレイアウトなどは気にせず、そのページに必要な要素や情報に注力する必要があります。
制作会社が用意した画面設計をもとに、それぞれのページにどんな要素を掲載するかをすり合わせます。要素が決まれば、Web担当者は必要な情報を社内から集めたり、その情報について社内の詳しい人に取材をしてもらったりと原稿内容の準備を進めていきます。

Web担当者としては、一番動き回る必要があるフェーズで、このフェーズでの段取りや準備がホームページ自体の成功に大きく影響してきます。逆にWeb担当者が受け身になっていると、原稿や素材をなかなか用意してもらえなかったり、公開前に社長や上長からこれまでの流れがひっくり返るようなやり直しを指示されたりと制作スケジュールの大幅な遅延につながります。

利用する資料例

画面設計書（ワイヤーフレームと呼ばれることもあります）
素材管理表
取材・原稿について
表記統一ルール表

システム仕様について決める

全体像と個別ページの設計まで進むと、つぎはシステムに関する仕様について話し合いが必要になります。
システムと聞くと難しそうに感じますが、Web担当者として気にするポイントは２つだけです。
①ホームページのどのコンテンツが頻繁に更新をしていく必要があるか
②更新をする頻度やスピード感が必要なのはどの情報箇所か

上記２つのポイントをしっかり伝えることでシステムはどういう仕様が良いか、CMS（自分たちでホームページを更新できるシステム）の導入はどうしておくのがベストかなどを制作業者が吟味してくれます。一般的にCMSはWordpressやMovable Typeが有名ですが、当社では独自のCMS「WOW」を開発しており、お客さまのご要望に応じてご提案させていただいています。
ここで注意する点としては、「複雑なシステムにしないこと」がいえます。
念のためあれもこれもと機能を追加したくなるものですが、高機能にするほど使い手のWebリテラシーが求められます。
自分は大丈夫でも他の人に任せるときに使いにくいものになっていては本末転倒です。
年に1回使うか使わないか分からない機能をいれるより、誰でも簡単に操作できそうなシンプルな機能になるよう配慮することも、Web担当者の役割になります。
ここまで読んで、もっと自分でもCMSについて知りたい！と思った方はこちらの記事をお読みください。
【関連記事】企業のホームページにCMSは必須？導入のメリット・デメリットと選ぶときのコツ

利用する資料例

システム機能一覧
システム仕様書
課題管理表

サーバー環境についてすり合わせる

Web担当者としてはサーバーなどに対してチンプンカンプンだと不安になりそうですが、社内で詳しい人（情報システム部やホームページ制作に関わったことがある前担当者など）に相談できる体制をつくっておくとスムーズです。

そんな人がいない！という時でも、当社のようなシステムやサーバーに明るい制作業者であれば、問題ありませんのでご安心ください。
【関連記事】Webサイト運用サーバーの選び方、特徴をふまえて解説！

利用する資料例

サーバー仕様書
テスト環境
ドメイン・SSL

制作・実装

デザイン制作

トーン＆マナー検討資料でホームページを見た時にどういう印象を持ってほしいかなど、見た目についての部分を決めていきます。その後、画面設計書をもとにトップページや下層ページのベースとなるデザインを作成してホームページのデザインの方向性を決定します。
方向性が固まったところで各ページに必要なスタイルガイドを定義して、下層ページデザインのルールを決定していきます。

利用する資料例

トーン＆マナー検討資料
デザイン趣意書
デザインスタイルガイド

HTMLコーディング制作

デザインが決定した後はそのデザインをもとにWebで表示されるようにするためのHTMLコーディングという制作がはじまります。
本や雑誌の作成の場合はデザイン＝印刷物と同じ見た目になりますが、Webでは見る人の環境によって適切な表示になるように配慮されています。
（例）ノートパソコンで見る人、スマートフォンで見る人、タブレット端末で見る人等

このHTMLコーディングの品質によって、SEO（検索エンジン最適化）や表示速度、運用更新がしやすいつくりかどうかが決まります。
【関連記事】小さなことからコツコツと。Webサイトの評価を向上させるために実施しているSEO内部施策について紹介【関連記事】画像表示が重い？Core Web Vitals改善につながる画像の最適化を徹底解説

利用する資料例

ディレクトリマップ
コーディングガイドライン

ブラウザチェック

ブラウザチェックシート

HTMLコーディングが完了するとWeb上で確認ができるようになります。
テストアップされたホームページを見て、意図していた通りになっているかを確認します。

当社の場合以下のブラウザチェックが標準で対応しているブラウザです。
チェック時は一斉におこなえるように都度チームで全ブラウザの表示についてチェックしています。

Google Chrome（国内シェア、世界シェアともにNo１）
Mozilla Firefox
Microsoft Edge
Safari×MacOS

※要件に応じて追加することもあります。
※その他スマートフォンの機種別、OS別環境でのブラウザチェックもおこなわれます。

システム開発

ブラウザチェックまで済んだところで、最後にシステム開発がおこなわれます。
事前に決定したシステム仕様書に沿ってシステム構築がなされます。

Web担当者としてはシステム開発後に操作をする段階まで特に役割はありません。
テスト仕様書に沿ったテストを制作業者がしてくれるので、実際に使う時を想定した「ユーザーテスト」と呼ばれるテストがWeb担当者の役割になります。

利用する資料例

テスト仕様書

テスト環境で校正含め最終確認をする

最終の確認段階となります。原稿内容と照合して文言をチェックしていきます。
その際、表記ルールなどに基づき各文字内容の表記ゆれも統一していきます。
制作業者では各ページのリンクについては、リンク切れ箇所がないか、正常にリンク先ページへ遷移しているかも確認していきます。

Web担当者としては校正部分に注力して、公開して問題ないかどうかを判断します。
事前に決定した「画面設計書」「表記統一ルール表」を見ながら、特に制作期間中に社内で変更となった表記はないかなど、制作業者では分からないような点をチェックします。

公開・運用

公開しなければチェックができない部分が一部あります。
代表的なチェック項目でいうと、SNSでシェアをした時に画像が表示されるか、アクセス解析の数値が正常にカウントされているかなどがあげられます。「公開後チェックシート」を用いて、公開後に制作業者と手分けして確認していきます。

本番公開って具体的に何してるの？というのは下記の記事で詳しく解説しています！
気になる方はぜひチェックしてみてくださいね。
【関連記事】Webサイト制作における本番公開とは

検索エンジンに公開を知らせる

検索エンジンに公開を知らせるとはどういうことかというと、日々Googleなどの検索エンジンはクローラーという巡回ロボットが色々なホームページを見回っているのですが、街の警察官のパトロールと一緒で、頻繁に見回りにくるわけでもないので、こちらから「見回り来てください～」とアプローチする必要があります。
Web担当者の役割になるタスクのひとつで、サーチコンソールを用いてその連絡をおこないます。なんのこっちゃと思われた方は制作業者に相談したら教えてもらえますのでご安心ください。
【関連記事】サーチコンソールの登録方法｜Googleアナリティクスとの連携や基本的な使い方

社内外へWebサイト公開の連絡

問題なく公開されたことを確認したら、社内へ向けてホームページ公開の連絡と社外へ向けたリリースやSNS配信などをおこない、広く周知して見てもらえるように段取りをするのがWeb担当者の役割となります。
色々な人の目にさらされることで、色々な意見をもらうことになります。ひとつひとつメモをとっておき、有益な情報は今後の改善に活かせるように準備をしておくことが大事です。

定期的な更新・運用

ホームページは公開するのがゴールではなく、公開してからがスタートです。
制作に関わった業者をそのまま運用体制に組み込むことが一般的ですが、社内でもホームページ運用チームを設けておくことがスムーズな更新・運用につながります。

利用する資料例

CMSマニュアル
Webサイト更新管理シート

アクセス解析・分析

アクセス解析レポートのサンプル

公開してしばらくたつと、どう変化したのか？狙いどおり見てもらえているのか？というのが気になるところですが、TV番組の視聴率のようにホームページにも何人訪れたか、何回ページを見られたかなどさまざまな解析が可能です。

一般的には月に1回アクセス解析を実施したり、四半期に1回分析も含めアクセス解析を実施するのが多いかと思います。初めに掲げたホームページの目的やゴールに近づいているかを分析して、よくないところがあれば、改善しホームページを育てていかないといけません。

当社の場合、社内でもアクセス解析や分析ができるので、社内スタッフにやってもらっていますが、年に1度やリニューアル前後などの大きなターニングポイントの時だけ、第3者目線からの分析という狙いで、グループ会社のデジタルマーケティングを専門におこなう会社（つながる科学研究所）にアクセス解析と分析を依頼することがあります。
そうやって、スポットで制作業者や解析が得意なプロの業者に依頼することも手段のひとつです。