Webサイト制作の流れ8ステップ｜各工程のポイントも解説｜Webサイト制作 / CMS・MAツール｜LeadGrid（リードグリッド）

自社のWebサイト制作を外注するとき、「Web制作の流れや完成までのスケジュールを把握しておきたい」というWeb担当者も多いのではないでしょうか。

また、「より良いサイトにするために、自分が関われるところを知りたい」とお考えかもしれません。

依頼者側がWebサイト制作の内容を把握すると、制作会社との認識のズレを防ぐことができたり、制作費用の削減やスケジュールの短縮ができたりするケースもあります。

そこで今回はWebサイト制作の流れを、発注フェーズと制作フェーズに分けて、全8ステップで解説します。Webサイト制作会社を選ぶときの3つのポイントも解説するため、ぜひ最後まで読んでください。

【工程図】Web制作設計・企画〜公開までの8ステップ

Webサイト制作は、設計・企画フェーズと制作フェーズの2つのフェーズに分かれます。

それぞれのフェーズについて、ステップは以下の通りです。

設計・企画フェーズ

1. 目的設定
2. ペルソナ設定
3. RFPの作成
4. Webサイト制作会社の選定

制作フェーズ

1. 企画
2. 設計
3. デザイン
4. 実装
5. 公開

設計・企画フェーズは、Webサイト制作において最も重要な工程です。制作会社に発注する場合は依頼会社のみで行います。必要とされる期間はおよそ2~3週間が一般的です。

その後の制作フェーズでは、依頼会社と制作会社が協力していく工程となります。Webサイト制作に必要な時間は、サイトの規模やサイトの種類によっても異なりますが、2~3ヶ月が一般的です。

ここからは具体的に各フェーズで依頼会社が把握すべきことについて、各ステップごとに解説をします。

設計・企画フェーズ5ステップ

Webサイト制作会社に依頼するまでの発注フェーズでは、以下の5ステップで進めましょう。

1. 目的設定
2. ペルソナ設計
3. RFPの作成
4. 運用体制の確立
5. Webサイト制作会社の選定

順番にポイントを解説します。

1. 目的設定

Webサイトの目的には、下記のようなものがあります。

• ブランドイメージを刷新したい
• 集客を強化して、売上を伸ばしたい
• 人材を確保したい
• リード獲得をして、認知度拡大をしたい

Webサイトは目的が定まっていないと、発信する内容がブレが生じ、狙ったユーザーに情報が届きにくくなってしまいます。

目的設定は、Webサイト公開後の運用に直結するため、しっかりと定めましょう。

目的設定について詳しく知りたい場合は、下記記事がおすすめです。

関連記事：ホームページを作る目的5つ！｜役割別の活用事例や作成ポイントを解説

2. ペルソナ設計

ペルソナ設計とは、Webサイトに訪れるユーザー像のことをいいます。Webサイトに訪れてほしい理想のユーザー像を設定し、属性から価値観・嗜好までを詳細に設定することがポイントです。

ペルソナ設計の際に、よく使われる項目は以下の通りです。

• 名前
• 性別
• 年齢
• 家族構成
• 学歴
• 平日・休日の過ごしかた
• 好きなこと・嫌いなこと
• 得意なこと・苦手なこと

イメージしやすいペルソナを設計しておくことで、Webサイトで発信する情報も明確になってきます。

なお、ペルソナ設計入門ガイドではペルソナを設計するためのワークショップの方法を解説しております。ぜひお役立てください。

ペルソナ設計入門ガイド|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

3. RFPの作成

RFPとは、依頼会社側が作成する提案依頼書のことで、Webサイト制作の根幹になる重要な資料です。RFPはWebサイト制作を依頼する際も、Webサイト公開後の運用にも役立ちます。

下記のような項目が、RFPに活用されます。

RFPの要素

• Webサイト制作の目的（ゴール）
• ペルソナ
• 現状の問題や課題
• 予算
• 自社の強み
• 競合の強み
• Webサイト制作スケジュール

Webサイト制作を依頼する際も、RFPがあれば制作側もやるべきことが理解しやすくなり、制作期間の短縮やコストダウンにつながります。

「BtoB企業向けRFPの書き方とは」の資料では、具体的なRFPの書き方を解説しております。相見積もりや外注先への依頼を検討する方はぜひ参考にしてください。

BtoB企業向け RFPの書き方とは|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

4. 運用体制の確立

Webサイト制作に移る前に、社内外におけるWebサイトの企画・制作にかかわるメンバーを構築し、運用体制を確立しましょう。

たとえば、Web制作担当者や、サイト運用担当者、マーケターなど、社内のリソースで対応できる人材をアサインします。

規模の大きいWebサイトを制作する場合は、自社で対応する作業範囲が少なく、Web制作会社に依頼して制作・運用を外注するケースも多いです。

まずは、自社で賄う業務と外注する業務範囲を明確にしたうえで、人的リソースや予算などを見積もり、運用体制を整えるようにしましょう。

5. Webサイト制作会社の選定

Webサイト制作会社の選定は、完成したRFPを元に複数の会社と打ち合わせをすることが一般的です。

制作会社が出した見積書が自社の予算内に収まっているか、提案内容でWebサイト制作の目的を達成できるかを確認しましょう。

Webサイト制作会社とは制作フェーズで連携をしていくため、選定が重要になります。疑問点などは、依頼前に解消することがオススメです。

Webサイト制作会社選定のポイントは、後述します。

制作フェーズ4ステップ

制作フェーズは、Webサイト制作会社と協力する工程です。Webサイトの制作フェーズは、以下の4ステップで進めましょう。

1. 設計
2. デザイン
3. 実装
4. 動作検証・公開

1. 設計

Webサイト設計は、制作フェーズのなかで最も重要な作業です。基本的には制作会社側の業務領域となりますが、内容を把握しておくと、Webサイト制作が円滑に進められます。

Webサイト設計は、以下の作業があります。

• サイトマップ作成
• ワイヤーフレーム制作
• システム設計

ホームページ全体の構成作成

ホームページは一番上の階層がトップページ、その中の大カテゴリー＜中カテゴリー＜小カテゴリーといったように階層構造になっています。

Web制作の現場では階層構造を整理する際に、サイトマップやディレクトリマップを用いて整理します。

サイトマップとはWebサイト全体のページ構成をツリー状にまとめた図のことで、ディレクトリマップとはWebサイト全体のページが網羅された一覧表のことです。

サイトマップやディレクトリマップを作成することで、サイト全体の構成がひと目で把握できるため、コンテンツの漏れや重複などを防げるようになります。

ワイヤーフレーム制作

ワイヤーフレームはWebサイトのレイアウトを決める設計図に該当します。ワイヤーフレーム制作は、RFPに沿って、構成が異なるページごとに適切なレイアウト設定を行う工程です。

たとえばもっともアピールしたい情報は、ユーザーの視界に入りやすい画面左上に配置するなど、 根拠に基づいて設計します。

ワイヤーフレームはWebサイトの構成やデザインの方向性を決める上で重要な役割を担っているため、手書きのイラストやデザインデータなどを用いて、クライアントと制作会社で綿密なすり合わせを行います。

システム設計

RFPやサイト構造を踏まえ、システムの設計を行います。

CMSを使うのか、CMSを使わずにFTPなどの仕組みを取り入れるのか。CMSを使う場合、どのCMSにするのかなど、 さまざまな条件を考慮してシステムを検討します。

システムを決めるポイントは主に5つです。

• 必要な要件を満たせるか
• 予算や納品期日に問題は生じないか
• セキュリティの脆弱性に不安はないか
• メンテナンス性や拡張性に優れているか
• 更新作業などの操作は簡単にできるか

これらを念頭において最適なシステムを決定します。制作したいサイトや搭載したい機能などの条件でCMSの比較検討を行いたい方は「BtoB企業向けCMS比較一覧表」が便利です。

BtoB企業向けCMS比較一覧表|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

2. デザイン

デザインは作り手のセンスや個性を押し出すのではなく、 Webサイトの目的を重視して設計します。

依頼者側はページ内で使用する画像やイラストなどの素材、希望のフォントなどがあれば事前に制作会社へ相談や共有を行いましょう。

デザインでは、下記3つの工程があります。

• デザインコンセプト設計
• 素材の準備
• デザインコンプ制作

デザインコンセプト設計

デザインに一貫性をもたせるために、デザインコンセプトの設定は必須です。

RFPやWebサイト設計をもとに、プロダクトのコンセプトやターゲットに合わせて言語化します。

デザインコンセプト設計で決めることは主に次の4つです。

• デザインのコンセプトの言語化
• サイトのメインカラーやサブカラー
• 画像やイラストのルール
• レイアウトやパーツについて

これらを設定することで統一感がでるため、 デザインの精度が高まります。

素材の準備

デザインコンセプトに基づいて、画像やイラスト、フォントなどの素材を用意します。

なお素材は依頼者側と制作会社のどちらが調達するのかについては、予めはっきりさせておく必要があります。

素材は無料で使用できるものや、費用が発生するものまでさまざま。

必要に応じてプロのフォトグラファーに撮影を依頼するケースもあります。

素材の使用は無料・有料を問わず、 著作権や出典ルールをしっかり確認しましょう。使用方法によってはトラブルのおそれがあります。

デザインカンプ制作

素材が揃ったらページごとにデザインを制作し、デザインカンプへ仕上げていきます。

デザインカンプとは、出来上がったデザインの完成見本のことです。完成品のイメージという意味から、モックアップ（試作品）と呼ばれることもあります。

デザインカンプは、プロジェクトに関わるメンバーとデザインを共有するために欠かせません。

具体的なデザインの見本を見ることで、 プロジェクト内で完成のイメージが共有可能になり、円滑にデザインの詳細を決める作業へ進めます。

3. 実装

Webサイトとして機能するようにシステムの実装をします。システムの実装には、プログラミング言語が必要です。

実装には、下記3つの工程があります。

• フロントエンドの実装
• バックエンドの実装
• サーバー・ドメインの契約

フロントエンドの実装

Webサイトのフロントエンドとは、ユーザーが実際に目にする部分です。フロントエンドの実装では、デザインカンプに沿ってWebサイトをコーディングします。このコーディング作業によって、実際にWeb上で閲覧できる形になります。

現在では、CMSを利用してコーディング作業なしでWebサイト制作を行うケースも多くなっています。CMSを活用すると、更新作業も自社で簡単に対応できるため、運用コストの抑制におすすめです。

バックエンドの実装

Webサイトのバックエンドとは、ユーザーが目にすることがない裏側の処理システムのことです。バックエンドの実装では、サーバーやデータベースなどの実装作業を行います。

バックエンドの実装では、CMSの導入によって必要に応じてカスタマイズする方法や、PHPやPython、Rubyなどのプログラミング言語を使用してコーディングする方法が一般的です。

サーバー・ドメインの契約

Webサイトの公開には、データを保管するサーバーと、インターネットの住所となるドメインの契約が必要です。

ドメイン名は、公開後に変更することができません。Webサイト訪問者が理解しやすいような、Webサイトのコンセプトにあったドメイン名を設定するようにしましょう。

関連記事：ドメインの選び方とは？決められない方向けにドメイン名のポイントも紹介

4. 動作検証・公開

最後は、Webサイトの動作検証をして、公開する作業となります。

動作検証

ユーザーがどのような環境でWebサイトを見るのかを想定して、 どの環境であっても仕様通りにシステムが動いているかを検証します。

たとえばPCでは仕様通り動作していても、スマートフォンやタブレットでは表示が崩れるなど、エラーが発生する場合もあります。

同時に依頼者側も、デザインや機能要件などが発注した通りに動作するかを確認し、要望と異なる場合は修正を要請しましょう。

なお、動作検証段階でミスや不具合を漏れなくチェックできるよう、「Webサイト公開前チェックシート」をご用意しました。どんなポイントに注意して公開前のチェックを進めればいいか理解できる資料になっているため、ぜひご活用ください。

公開後のトラブルを防ぐために！Webサイト公開前チェックシート|Webサイト制作・CMS開発｜LeadGrid

goleadgrid.com

リリース

動作検証を繰り返し、 依頼者の修正依頼がクリアできればリリース作業に入ります。

リリース当日は予想外のトラブルが起こるおそれもあるため、プロジェクトに関わるデザイナーやエンジニアはすぐに対応できるような手配が必要です。

リリース後もしばらくの間はエラーが起きやすいので、テストを繰り返し行うなど、用心を怠らないよう注意します。

Webサイトは公開後の運用が重要

Webサイトで集客したいなら、公開後の運用が非常に重要なポイントです。

• 保守・運用

• 集客施策

ここからは、それぞれのポイントについて解説します。

保守・運用

Webサイトを運営するには、正常な保守管理やメンテナンスが必要不可欠です。

定期的なメンテナンス・更新も必要なので、Web環境のアップデートや情報の更新、サイト分析・改善を定期的に行えるような環境に整えましょう。

たとえば、「サイトのセキュリティ対策は万全か」「運用する上でトラブルは生じていないか」といった点を監視する必要があります。

また、WordPressやプラグインのアップデートへの対応も必須です。

保守運用は社内のリソースで賄えるのか、引き続き制作会社にサポートしてもらうのかについても事前に検討することをおすすめします。

集客施策

Webサイト単体で集客を行うことは難しいため、Web広告やSEO対策、SNS運用などのデジタルマーケティングを通じて、集客を強化することも大切です。

たとえば、短期施策として挙げられる代表的な施策に「リスティング広告」があります。リスティング広告とは、Googleなどの検索結果に表示させてサイトに誘導する広告のことです。

設定した当日から広告を掲載できるため、短期的な施策に向いています。

長期的な施策としては、コンテンツマーケティングが挙げられます。ユーザーにとって有益なコンテンツを作成し、発信することです。

どのような施策を組み合わせるべきかは、企業の目的や課題によって異なります。適切な施策を選定するためには、制作会社に相談して客観的な視点でアドバイスをもらうこともおすすめです。

Webサイト制作費用の相場

Webサイトの制作費用は、サイトの構築方法や種類、制作会社などによって大きく異なります。サイトの種類や規模ごとの料金相場は以下のとおりです。

また、外注費用は、コンテンツ量やデザインのクオリティ、ページ数などによっても変動するので、複数社から相見積もりを取るといいでしょう。

Webサイトは自社で制作できる？

Webサイトは自社で制作することが可能です。HTMLやCSSのようなプログラミングの知識やスキルで作ることもできますし、Web上でホームページ制作を行えるサービスもいくつかあります。

ドメイン、サーバー、コンテンツの3つを最低限用意すれば、誰でもWebサイトを立ち上げることができます。

しかし、成果を上げるWebサイトを構築するには、Webサイト制作・運用に関する知識やノウハウが必要不可欠です。

そのため、自社にWebサイト運用のノウハウや人的リソースがない場合は、Web制作会社に依頼することをおすすめします。

Webサイトは公開後の運用が重要

Webサイトの制作プロジェクトは、Webへの公開がゴールではなくスタートです。RFPに落とし込んだWebサイト制作の目的は、公開後の運用で達成できるかどうか決まります。

制作フェーズが終わったあとの運用フェーズでは、下記のことを行う必要があります。

• 公開したWebサイトが正常に動作しているかのチェック
• アクセス解析や分析
• コンテンツの作成や更新（リライト）

これらを中心にさまざまな作業を行い、Webサイトを育てることで設定したゴールへと近づけていきます。失敗しないWebサイトの運用については、下記記事を参照してください。

関連記事：Webサイト運用でやるべきこと｜管理代行のメリット・デメリットについても

Webサイト制作会社選定のポイント3つ

発注フェーズにおけるWebサイト制作会社の選定は、希望のWebサイトができるかどうかを決める重要な工程です。

Webサイト制作会社選定の際は、下記3つのポイントを意識しましょう。

• 同業他社で実績があるか確認する
• 製作費の内訳を確認する
• Webサイト公開後のフォローがあるか確認する

1. 同業他社で実績があるか確認する

Webサイト制作を依頼する際に、同業他社で制作経験があると、業界のルールやターゲットを細かく説明する必要がなく、スムーズに制作を行えます。

たとえば化粧品のWebサイトを制作する場合は、薬機法について理解をする必要があります。同業他社ですでに制作実績があれば、法律に違反することなく安全な制作をしてもらうこともできます。さらに場合によっては差別化できる案を提案してくれることもあるため、同業他社の実績は確認しておきましょう。

2. 製作費の内訳を確認する

Webサイト制作にかかる費用の内訳を理解しておくことは、制作費用を安くするうえで重要になります。たとえば希望のWebサイト制作会社の見積が自社の予算に合わない場合も、内訳を理解し自社でできる部分を提案すれば、費用削減も可能です。

Webサイト制作では、主に下記の費用が発生します。

• ディレクション費用
• デザイン費用
• コーディング費用
• システム開発費用
• ライティング費用
• 撮影費用
• 保守・運用・更新費用

どの工程にどれくらいの費用がかかるかを確認し、予算の範囲で最適なWebサイトが制作できるようにしましょう。

Webサイト制作費用の内訳については、下記記事で詳しく解説をしています。

関連記事：Webサイト制作の見積もりで気をつけるべき点は？費用の内訳項目も

3. Webサイト公開後のフォローがあるか確認する

Webサイトは制作がゴールではなく、制作してからがスタートです。

Webサイトの公開後は、コンテンツの追加やページの更新を定期的に行う必要があります。効率的な運用をするには、Webマーケティングやセキュリティの知識が必須です。制作会社とは別の会社に運用を依頼することもできますが、状況を最初から説明しなくてはならないのは二度手間です。

公開後にどのようなフォローが必要になるかを洗い出し、どこまで対応してもらえるかを確認しておきましょう。

Webサイト制作会社は会社ごとに得意分野が異なります。より詳しく知りたい人は、おすすめのWebサイト制作会社を20個ピックアップしたため、詳しくは下記記事を確認してみてください。

関連記事：おすすめのWeb制作会社20選｜選び方や依頼前の確認事項も

LeadGridはWeb制作をサポート！

自社の目的を達成するためのWebサイトを制作することは、とても重要です。制作フェーズでは、サイト設計やデザインなどを通して、自社の目的が達成できそうか確認を忘れないようにしましょう。

またWebサイト制作について、「コーディングの知識はないけど、売上につながるWebサイトを作りたい」という方には、LeadGridがおすすめです。

LeagGridはコーポレートサイトや採用サイト、ランディングページまで、さまざまなWebサイト制作に対応できるCMSです。コーディングの知識は必要なく、直感的な操作で、おしゃれで見やすいWebサイトを制作できます。

Webサイト制作で結果を出したい場合は、ぜひLeadGridをご検討ください！

LeadGridサイト制作事例集はこちら

サービス資料はこちら