「Webサイト制作の流れを把握しておきたい…」と考える方もいるのではないでしょうか？Webサイト制作をスムーズに進めるには、全体の流れを把握することが重要です。

そこで本記事では、Webサイト制作の流れ8ステップとリリース後の施策を解説します。Webサイト制作の流れを把握すると、制作会社との意思疎通をスムーズに行えます。

ぜひ最後までお読みください。

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

Webサイト制作のフロー図・工程表は以下の通りです。

まずは、顧客からのお問い合わせ後、契約を行います。その後、企画の構成や市場・競合他社を調査します。サイト設計・Webサイト制作を行い、テストで問題がなければリリースします。

Webサイトの流れを事前に把握すると、制作会社と意思疎通を取りやすくなり、スムーズなリリースにつながります。

Webサイト制作の流れ7ステップ

Webサイトができるまでの流れは、以下の7ステップにわけられます。

1. お問い合わせ・契約
2. 企画構成
3. 市場調査・競合調査
4. サイト設計
5. 制作
6. テスト
7. 納品・リリース

それぞれの工程においてどのような作業が行われるのかを、順番に紹介します。

1. お問い合わせ・契約

お問い合わせから契約の手続きは「Web制作会社の選定」「ヒアリング・企画提案」「お見積もり・契約」の流れで行います。

各フェーズのポイントを解説していきます。

1-1. Web制作会社の選定

Webサイトを制作するには、Web制作会社を選定する必要があります。はじめから1社に絞るのではなく、3社ほどに相見積もりをするとよいでしょう。

その上で「実績」のあるWeb制作会社を選ぶことが大切です。実績を確認して、理想のWebサイトを制作してくれる会社を選びましょう。

1-2. ヒアリング・企画提案

お客様に対して予算や希望納期、Webサイトのイメージなどをヒアリングします。Webサイトの制作過程では、お客様とのコミュニケーションを頻繁に取ります。

コミュニケーションが気持ちよく取れる企業を選定することが重要です。その後、ヒアリング内容に応じて、サイトのコンセプトや構造、実装する機能、目的などを提案します。

Web制作会社の企画内容に問題がないか確認しましょう。

1-3. お見積もり・契約

企画書の内容に問題がなければ、見積書を発行します。見積書の各項目をチェックして、気になる箇所があればWeb制作会社に確認しましょう。

企画内容や見積金額を確認し、予算内でイメージ通りのWebサイトを作れそうと判断した場合、制作を依頼してください。

最後に契約を締結し、本格的なWebサイト制作がスタートします。

2. 企画構成

企画構成のフェーズでは「ゴールの設定」「ターゲットの設定」「サイトコンセプトの決定」を行います。

「お問い合わせ・契約」の段階で、企画提案をした内容を深掘りします。

2-1. ゴールの設定

Webサイトを制作するときは、ゴールを定量的に設定します。KPIやKGIを定めると、Webサイトからの成約数を明確に把握できます。

たとえば、Webサイト経由のお問い合わせを3ヶ月後までに1ヶ月あたり20%増やすという目的を設定しましょう。

目的を明確化すると、Webサイト制作における双方の認識の齟齬を防ぐことや、効果測定で適切な改善案を出すことにつながります。

2-2. ターゲットの設定

Webサイトの目標を達成するためには、ターゲットを設定する必要があります。ターゲットを設定すると、目的を達成するための適切なデザインやキャッチコピー、コンテンツを決められるためです。

たとえば、Webサイトで販売したい商品が「20代向けの化粧品」ならば、以下のようにターゲットのペルソナを定めましょう。

具体的なペルソナ（人物像）を設定すると、ターゲットがどのような悩みを持っているのかを把握でき、より的確な訴求ができるようになります。

2-3. サイトコンセプトの決定

サイトコンセプトとは「そのWebサイトが誰に向けて価値を提供するのか」を明確化したものです。サイトコンセプトは、Webサイト制作の「軸」になります。

Webサイトの制作者間の認識のズレをなくすことにつながるため、非常に重要です。

サイトコンセプトは、Webサイトの目的やターゲットなどを基準にして、20文字程度のキャッチコピーで決めるのがおすすめです。

関連記事：ホームページの開設に目的の明確化が重要な理由とWebサイトの種類を紹介

3. 市場調査・競合調査

ターゲットの行動や悩みを意識しながら、市場や競合の調査を実施します。

市場における依頼主の立ち位置や、競合他社と比べたときの自社の強み・弱みを把握すると、企業の魅力を活かしたWebサイトを制作可能です。

市場・競合分析には「3C分析」や「SWOT分析」などの、マーケティングのフレームワークを活用します。

4. サイト設計

市場・競合分析が完了すると、サイト設計を実施します。サイト設計の流れは「要件定義」「UI/UXの設計」「サイトマップの作成」「コンテンツの設計」です。

4-1. 要件定義

要件定義とは、Webサイトの課題や必要な機能、性能などを資料にまとめる作業です。

主に以下のような項目をまとめます。

• Webサイトの目的やターゲット、コンセプト
• 実装するシステムと必要な技術、サーバー仕様
• Webサイトの課題とリスク
• 制作スケジュール

要件定義でまとめた内容を基に、具体的にどのように進めるのかを決めます。

4-2. UI/UXの設計

サイト設計を行う上で重要になるのが、UI/UXを意識して導線を作ることです。UI/UXの説明は以下の通りです。

• UI：Webサイトの視認性や操作性、使いやすさのこと
• UX：ユーザーがWebサイトを通じて得られる体験のこと

UI/UXの設計を行うと、Webサイトの使いやすさが向上し、ユーザーが商品・サービスに好印象を抱く可能性があります。

4-3. サイトマップの作成

サイトマップを作成し、Webサイトの構造を可視化させます。Webサイトの下層ページの構造を、一目で把握できるようにするためです。

Googleの検索エンジンやユーザーに、Webサイトのページやコンテンツを伝えるのにサイトマップは重要です。Excelやマインドマップなどを用いてサイトマップを作成します。

4-4. コンテンツの設計

コンテンツの設計では、各ページの役割を決定します。コンテンツを設計すると、ターゲットにとって「必要なページ」と「不要なページ」が明確化されるためです。

ターゲットに合わせて、無駄のないWebサイトを完成させることが可能です。また、コンテンツの設計では、SEOにも配慮します。

ユーザーの検索意図を満たすコンテンツを作成し、検索結果の上位表示を狙います。

5. 制作

Webサイトの制作段階では、以下の工程を行います。

1. ワイヤーフレームの設計
2. 写真やロゴの作成
3. デザインの作成
4. コーディング・システム開発・実装

順番に紹介します。

5-1. ワイヤーフレームの設計

サイトマップやコンテンツの内容を基に、ワイヤーフレームを設計します。ワイヤーフレームとは、Webページのレイアウト図のことです。

ワイヤーフレームを設計すると、ページのボタンや画像、文章の位置を全員が把握できます。複数のスタッフがWebページを作成しても、共通の認識を持てるため、クオリティに差が生じません。

5-2. 写真やロゴの作成

Webサイトに使用する写真やロゴを、依頼主の要望を基に作成します。社内の風景や商品・サービスの写真をWebサイトに掲載する場合は、写真撮影を行うことも可能です。

ロゴやイラストをメインに使用する場合は、FigmaやCanvaなどを用いて作成します。なお、すでに素材がある場合は、それらを使用することも可能です。

5-3. デザインの作成

ワイヤーフレームを確認しながら、Webサイトのデザインを作成します。

Webサイトのコンセプトやターゲットを考慮しながら、トンマナやデザインを決めて、各ページに一貫性を持たせます。

また、視線の動きや文章の読みやすさなどを意識すると、商品・サービスの成約率を向上させることが可能です。

5-4. コーディング・システム開発・実装

Webサイトのデザインが完成したら、コーディングやシステム開発を行います。

コーディングは、HTMLやCSS、JavaScriptなどの言語を使用してソースコードを作成し、Webページをブラウザ上に表示させる作業です。

システム開発には「フロントエンド」と「バックエンド」があります。フロントエンドは、HTMLやCSSなどを使って、ユーザーの目に見える部分を整える業務です。

バックエンドは、ユーザーの目に見えないシステムを構築する作業です。コーディングやシステム開発を行い、必要なデザインや機能を実装して、Webサイトを作ります。

6. テスト

Webサイトの納品前にテストを実施します。デザインが適切に表示されているか、複数のデバイスでもシステムが作動しているかなどをチェックするためです。

テストでは、以下のようなことを確認します。

• PCやスマートフォン、タブレットでの表示に問題がないか
• お問い合わせフォームは適切に作動しているか
• デザインが適切に表示されているか

テストで問題が発生すると修正を行い、Webサイトを完成させます。

7. 納品・リリース

テストでWebサイトに問題が発生しなければ、納品・リリースです。納品時には、サーチコンソールでGoogleの検索エンジンに、Webサイトのリリースを報告します。

この作業を行うと、GoogleのクローラーがWebサイトを巡回できるようになります。

また、Webサイトのリリースを、プレスリリースやSNSで社外に告知すると、アクセスを集めることが可能です。

Webサイト制作後の2つの施策

Webサイト制作後には「保守管理」と「Webマーケティング施策」を実施し、適切な運用をする必要があります。

本章では、上記の施策が必要な理由を解説します。

1. 保守管理の実施

Webサイトのリリース後には、保守管理を行う必要があります。保守管理とは、Webサイトのメンテナンスのことです。

Webサイトのシステム改修やアップデート、ウイルス感染の有無などをチェックします。保守管理は自社でもできますが、Web制作会社に委託することも可能です。

2. Webマーケティング施策の実施

Webサイトのリリース後は、適切なマーケティング施策を講じる必要があります。Webマーケティング施策を講じると、アクセス数や成約率をアップさせられるためです。

たとえば、SEOを意識したブログを運用すると、記事からアクセスを集められ、お問い合わせにつながる可能性があります。

この他、Web広告やSNSなどを駆使して、集客力や販促力を強化させることが重要です。

関連記事：Webマーケティングとは。施策一覧や始め方6ステップを紹介

Webサイト制作の流れに関するよくある質問

Webサイト制作の流れに関するよくある質問3つに回答します。

1. Webサイト制作にどれくらい時間がかかりますか？
2. Webサイト制作の費用の相場はいくらですか？
3. Webサイトは自分で作れますか？

よくある質問を把握すると、Web制作の依頼時の疑問点がなくなるでしょう。

1. Webサイト制作にどれくらい時間がかかりますか？

Webサイトの制作期間は、平均して1〜3ヶ月ほどです。ただし、制作期間はWebサイトの種類やページ数、導入するシステムによって大きく異なります。

たとえば、10ページほどの小規模なコーポレートサイトならば2〜3ヶ月で完成しますが、50ページ以上のWebサイトならば、半年以上かかるでしょう。

お問い合わせ時に制作期間を把握することが重要です。

2. Webサイト制作の費用の相場はいくらですか？

Webサイトの制作費用の相場は、以下の通りです。

なお、制作費用は依頼先によって異なります。一般的に「CMS▷フリーランス▷Web制作会社▷広告代理店」の順番で高額です。なお、おすすめはWeb制作会社です。

Webサイト制作のプロフェッショナルのため、一定のクオリティが担保されているケースが多くあります。

関連記事：ホームページ制作費用の相場と失敗しない3つのポイントを解説

3. Webサイトは自分で作れますか？

Webサイトを自分で作ることは可能です。ノーコードツールを使用すると、HTMLやCSSなどの知識がなくてもWebサイトを作れます。

ただし、制作に時間がかかることや、必要なシステムを実装できない恐れがあるため、Web制作会社に依頼するのがよいでしょう。

まとめ

Webサイトの制作の流れを紹介しました。作業工程や期間を把握した状態でWeb制作会社に依頼すると、計画的にWebサイトをリリースできます。

また、Web制作会社にリリース後のマーケティング施策を依頼すると、集客力を向上させられますよ。

Webサイトのことについて、もっとよく知っておきたいと考えている方は、ぜひ以下の記事もご覧ください。

関連記事：Webサイト制作の超基本！流れやリリース後の運用方法、相場を解説