Webサイト構築の手順とポイントを完全解説！マーケティング～要件定義、リリースまでの全工程を公開！

本記事では、Webサイト構築の手順やポイントに加え、マーケティング視点での「要件定義」から「リリース」まで、全工程を詳しく解説します。

1. 構築ステップの全体像：Webサイト構築に必要な工程と重要ポイントを体系的に解説
2. 費用・期間の目安：無理のない予算計画やスケジュール作りに役立つ情報を提供
3. 公開後の運用・成果向上：SEO対策や具体的アクションで、サイト公開後に確実に成果を出せるポイント

費用や期間の相場を把握し現実的な予算計画が立てられるだけでなく、リリース後のSEOや運用改善など成果を出すための具体策まで明確になります。

要件定義

Webサイト構築の最初のステップは要件定義です。事前に以下のポイントを整理しておくことで、プロジェクトの迷走を防ぐことができます。

①目的を定めて企画する

Webサイトを構築して何を実現したいのか、目的をはっきりとさせておきましょう。
構築自体は手段に過ぎません。成功の定義を明確にすることで、プロジェクト全体の意思決定がスムーズになります。

②ターゲットを選定する

要件定義において最も大切なことはターゲットの設定です。
具体的なペルソナ像だけでなく、ターゲットが市場にどれくらいの数、割合いるのか、競合他社がどれくらいのシェアをとっているのか、ありとあらゆるデータを検討しましょう。

③Webでの検索キーワードの内容、検索回数を調査・分析する

Googleキーワードプランナー等で、どのような単語がどれくらい検索されているかを調査します。指名系ワードから悩み解決系まで幅広く分析することで、ユーザーが求めるコンテンツを特定できます。

たとえば、

• 売り出そうとしている商品、サービスの商品名による検索回数（指名系）
• 用途や使用方法
• 商品、サービスを使用することで解決される悩み

これらの検索回数、さらに、Facebook、Twitter、Instagramでどのような話題がどれくらい拡散されているのかなどの数値を合わせたものが、Web上での購買、お問い合わせの数の参考数値となります。

検索回数、SNS上での数値が少ない場合は、そもそもWeb上で訴求するのは向いていない商品・サービスかもしれません。

④成果のシミュレーションを行う

費用（広告費・人件費）と利益を算出し、損益分岐点を超えるタイミングを数値化します。3か月・半年・年間といったスパンでシミュレーションを行い、現実的な目標を立てましょう。指標としては、最低でも以下の項目をシミュレーションし、損益分岐点を超えるタイミングや、利益がどのように伸びていくのかを確認しましょう。

＜費用＞
Webサイト構築にかける予算
広告費
人件費（かかわる人数）など

＜売上・利益＞
成果によってあがる売上、利益など

⑤Webサイトのコンセプトを決定する

関係者の意思統一のため、6W2H（When/Where/Whom/What/Why/How/How much）を用いて具体的なアウトプットを明確にします。サイトのキャッチコピー、名称、カラー、公開日などを言語化し、共通認識を持ちます。

ここでは、Ｗebサイト構築に必要な具体的なアウトプットを明確にしておきましょう。

コツとしては、よくある5W1Hではなく、6W2HのほうがWebサイトの構築プロジェクトでは向いているでしょう。

・Webサイトのキャッチコピー

・Webサイトの名前

・Webサイトのベースとなるカラー

・ページの公開日

・6W2Hでまとめる

　-When（いつ）：どのタイミングで

　-Where（どこで）：サイトを利用するシーン

　-Ｗhom（だれに）：ターゲット

　-What（何を）：どの商品・サービス、何を訴求するのか？

　-Why（なぜ）：意義、Webサイトをターゲットが利用することで何を実現するのか？

　-How（どうやって）　：

　-How much（いくらで）：実現する予算

以上をコンセプトとして、決めておきましょう。

予算の決定

成果シミュレーションとコンセプトを元に、構築予算を確定させます。
ここでの決定事項が次工程のRFP作成の根拠となります。

RFPの作成

シミュレーションが出来たらRFP（提案依頼書）を作成しましょう。RFPを制作会社に送れば、プロの視点からより具体的なサイト構築の提案を行ってくれます。
「どのように書けばわからない」という方は当サイトの該当記事を参考に、ぜひ作成してみてください！
▶0から分かる！RFP（提案依頼書）の書き方解説

Webサイト構築の手順

①サイト構造の設計

どのようなコンテンツをどこに表示させるかを設計し、サイトマップとしてまとめます。Web上でのキーワードの検索回数（1-②の工程）などを参考にしながら、サイトコンセプトに沿って設計しましょう。

サイト設計の主なアウトプットとしては、サイトマップ（サイト構成図）があります。
サイトマップとは、各ページのタイトル、URL、サイトの構造をエクセルなどでまとめた図です。
※検索エンジン用のXMLサイトマップとは別物ですので注意してください。

②ワイヤーフレームを作成する

サイトマップを作成したら、ワイヤーフレームを作成します。
ワイヤーフレームとは、各Webページごとに、見出し、テキスト、図を配置するかを決めていく作業です。Webサイトを訪れるユーザーの動き、何を見て、どのようなアクションをしてほしいのかを想定して作成しましょう。

ワイヤーフレームを作る際には、以下のツールを使用すると便利です。
・Adobe XD
Adobe社が提供するUX/UIの共同作業ツールです。
（商品ページ：https://www.adobe.com/jp/products/xd.html）

枠を作る、テキストを配置するといったワイヤーフレームを作る際の作業をカンタンな操作でできます。ツールを使いこなせる人は、デザインやリンク構造まで作りこむことで、モック（試作サイト）まで作ることができます。

・Power Point
言わずと知れたマイクロソフト社が提供するプレゼンテーション資料作成ツール。
（商品ページ：https://www.microsoft.com/ja-jp/microsoft-365/powerpoint）

パワー・ポイントでもワイヤーフレームを作成することができます。
最新版はカンタンに枠、テキストなど配置することができるので、Adobeなどのツールを使用したことがない人は、パワー・ポイントでワイヤーフレームを作成するのもよいでしょう。

③デザイン作成

ワイヤーフレームを元に、コンセプトに沿った配色やトーンを決定します。

デザイナーに依頼する場合などには、ベースカラーのほか、メインカラー、アクセントカラーなどの配色を決めておくと、デザインのイメージも伝わりやすくなります。
また、デザインの参考になるサイトをピックアップし、事前に関係者に共有をしておくものよいでしょう。

デザインでよく使われるツールがAdobe Photoshop、Adobe Illustratorといったツールになります。

④サーバーの契約、ドメインの取得・設定、SSLの取得・設定

インフラ環境の準備です。サーバーの契約と同時に、サイトの住所となるドメイン取得、およびセキュリティに必須なSSL設定を完了させます。

自前でサーバーを立てる人もいるかと思いますが、ほとんどの企業、個人はレンタルサーバーを契約するでしょう。さくらインターネットや、Amazonウェブサービスなどが有名です。そして、同時にドメインの取得・設定、SSLの取得・設定を行いましょう。

⑤コーディング

HTML/CSS/JavaScript等のプログラミング言語を使って、デザインをブラウザに表示させます。コーディングとはプログラミング言語を使って、デザインした通りにWebページをブラウザに表示させるための作業です。

HTMLなどの言語を使って、ソースコードを書いていきます。また、Webデザインの装飾をしているのは、CSSという言語になります。サイト上に動きをつける場合にはJava Scriptなどを使います。

⑥システム開発

決済機能などの複雑な機能が必要な場合、並行してシステム開発を行います。コーディングと同時に平行していくのが、システム開発です。いわゆるプログラミングという作業になります。

Webサイトに顧客管理システムや、ショッピングカート、決済機能などが必要な場合など、HTMLとCSSだけでは実現できない機能が必要な場合には、システム開発の工程が必要となります。

⑦テストをおこなう

表示崩れや動作のバグがないか検証します。全体のスケジュールを決める際には、修正作業の時間を想定し、余裕をもって決めましょう。

⑧リリース（サイト公開）

全ての確認が完了したらリリースです。契約したサーバーに、各ファイルをすべてアップロードして完了です。リリース時にはシステムの作業が入る場合もありますので、その時間も考慮して時間を決めておきましょう。
また、リリースした後も、思わぬ不具合が発生することもありますので、リリース日は休日の前日などはやめておきましょう。

リリース後の運用支援、seo対策など

Webサイトはリリースしてからが本番です。Webサイトを構築した本来の目的は、リードの獲得や、PRなどです。きちんと目的が達成されているか、効果がでているか、効果計測をしながら更新業務をしていく必要があります。

Webサイトの運用業務は、主に以下のような業務です。

• ドメイン、サーバーの管理
• コンテンツの更新、編集
• Webサイトの分析、改善
• お問い合わせの管理

Webサイトの種類、目的によって内容は変わりますが、おおむね上記のような業務となります。

特に重要なのは、分析です。
Webサイトはサイト単体では大きな成果を得ることはできません。
分析をおこない、広告の運用、メルマガ、SNSの施策と連動して、目的を達成していきましょう。
▶Web担当者は必見！ Webサイト運用って何をするの？

Webサイト構築に必要な期間

LP(ランディングページ)のような数ページのサイトであれば数日で構築ができますが、小規模のコーポレートサイトであればおよそ3か月、100ページ以上ある大規模なコーポレートサイトやショッピング機能、決済機能などのシステムを搭載するとなると、半年以上必要な場合があります。

サイトの規模	構築に必要な時間
LP	数日から数週間
小規模（10～30P）	1～3か月程
大規模・システム搭載	半年以上

Webサイト構築に必要な費用

①Webサイト構築に必要な費用の内訳

●サイト制作費(、ディレクションやデザイン、コーディング費も含む)
●サーバーレンタル費用
●ドメイン取得費用
●SSL費用
●Webサイトの更新、メンテナンス、監視などの保守費用

※Webサイト構築に必要な業務をすべて自社の社員で行う場合は、制作費用や保守費用は発生しません。

運用費に関しては下記の記事で詳しく解説しております。
▶Webサイトの運用費用はいくらかかる？

②Webサイト構築に必要な費用の相場

Webサイト構築に必要な費用は、サイトのページ数や規模、デザインや作成方法などによって大きく異なるため、参考程度にご確認ください。

また、費用だけでサイト構築の発注先を決めてしまうのはNGです。安い費用で済ませようと思い発注してしまうと、予定通りのサイトができなかったり、追加で膨大な費用が発生する場合があります。

発注する前は必ず複数社の見積もりと内訳項目等を確認して決定するようにしましょう。

LP(ランディングページ)	10万円～30万円前後
コーポレートサイト(個人事業主、小規模)	30万円～100万円前後
コーポレートサイト(中規模)	50万円～200万円前後
コーポレートサイト(大規模)	150万円～500万円前後
ECサイト	100万円～300万円前後
ポータルサイト	100万円～500万円前後

Webサイトを構築する際の注意点

①目的やターゲットを曖昧にしない

Webサイト構築の失敗例として、目的やターゲットが曖昧なままとりあえず構築するというパターンがあります。

目的やターゲットが曖昧な場合、一貫性のあるWebサイトを構築しづらくなってしまい、構築したとしても利用してもらえない可能性が高いです。まずは、目的やターゲットを明確にしてから手順を進めるようにしましょう。

②具体的な数値目標を設定する

目標を設定する際は、具体的な数値を設定することが大切です。

例えば、PV数やCV数など具体的な数値を設定することで、それに対して達成できたのか、達成できなかったのかを判断し、数字の分析や評価をすることができます。不明確な数値目標を立てた場合、適正な分析や評価ができないため、具体的な数値を設定するようにしましょう。

③イメージにあったデザインにする

Webサイトをデザインするにあたり、企業のブランドイメージに合ったトーンや配色に設定し、統一感を出すようにしましょう。

ブランドイメージから大きく異なるデザインにすると、サイトに訪れた顧客が不信感を抱いてしまうこともあります。そうならないためにも、Webサイト全体のイメージにあったデザインに統一させることが非常に大切です。

④スマートフォン（レスポンシブ）に対応する

忘れてはいけない事として、Webサイトは様々なデバイスを通して閲覧されるものであるという事です。

したがって、スマートフォンに対応したWebサイトでなければ、ユーザーは見にくさを感じ、離脱に繋がってしまいます。

⑤著作権を確認する

サイト内で使用する素材はすべて利用規約をチェックしておきましょう。

「商用利用OK」と書いてあっても、クレジット表記が条件であったり、利用してよい数に上限がある場合があります。もし、無断で使用した事が発覚した場合、10年以下の懲役または1000万円以下の罰金が科せられる可能性があるため、注意が必要です。

⑥SSL対応をする

SSLとはインターネット上でデータを暗号化して送受信する仕組みの事です。

個人情報などの重要な情報を暗号化し、サーバーとPCの間で安全な通信を行えるため、多くのウェブサイトで採用されています。未対応の場合、多くのセキュリティリスクが発生する可能性があります。

⑦地道に改善する

再度になりますが、Webサイトはリリースした後が本番です。

日々更新してコンテンツの追加を行ったり、SEOやセキュリティ対策を万全にしてwebサイトの信頼性を高めましょう。何もしなければユーザーはどんどん離れていきます。

いまさら聞けないWebサイト制作の基礎知識

①Webサイトとは？ホームページとの違い

Webサイトとは、インターネット上でアクセスできる複数のウェブページが集まったオンライン上の場所を指します。通常、特定のドメイン（ウェブアドレス）下に配置され、情報やコンテンツ、サービスを提供するために利用されます。

一方、ホームページはWebサイト内で最初に表示される主要なページです。ユーザーがWebサイトにアクセスした際、最初に目にすることが多く、サイトの概要やナビゲーションへのリンクを提供します。ホームページはWebサイトの入り口として、他のページへの案内役を果たします。

要するに、Webサイトは複数のウェブページで構成され、ホームページはそのWebサイトの最初のページです。アクセスしたユーザーは通常、ホームページから他のページへ移動します。

②Webサイト制作の種類

Webサイトの種類は、目的やターゲットによって以下のような性質の違いがあります。

• コーポレートサイト
  企業の顔として信頼性を構築し、会社概要や製品、連絡先などの基本情報を網羅します。
• ブランドサイト
  製品の価値観やストーリーを強調し、ファン作りやブランド価値の向上に特化します。
• プロモーションサイト
  特定のキャンペーンや新商品の宣伝を目的に、期間限定で売上を最大化させます。
• サービスサイト
  自社が取り扱う製品・サービスにフォーカスし、詳細な機能やメリットを深く伝えます。
• ECサイト
  オンラインショップとして、商品の閲覧から決済・購入までをサイト内で完結させます。
• LP（ランディングページ）
  1ページに情報を凝縮し、資料請求や購入などの成約（コンバージョン）を強力に促します。
• マッチングサイト
  個人や企業を繋ぎ、スキルシェアやモノの取引など、需要と供給の結びつきを提供します。

Webサイト制作の手段

①自作する

自分自身、または自社で制作する場合、コンテンツやデザインを迅速に追加でき、比較的コストを抑えることができます。

しかしツールを使用するにしても、運用業務ではHTMLやCSSなどの知識がある程度必要であり、サイト設計におけるサーバーやセキュリティなどの知識も欠かせません。

そのため、何も知らない初心者がコーポレートサイトなどを制作するのは非常に高難易度です。それでも挑戦したい方に向けて、以下の記事でおすすめのサイト構築ツールを紹介しています。

▶サイト構築ツールのメリットとデメリット！自分に合ったツールを選ぶために知っておくべきこと

②制作会社に依頼する

Webサイト制作会社はプロのデザイナーや開発者から成るチームで構成されており、webデザイン、プログラミング、UIの最新のトレンドやベストプラクティスに詳しいです。そのため、高品質で機能的なwebサイトを制作できます！

もちろん費用はかかってしまいますが、リリース後の保守や、運営サポートも含めた伴走を行ってくれる制作会社であれば、その費用に見合う長期的な成功を確保できるでしょう。

まとめ

Webサイト構築の基本的な手順と成功のポイントを解説しました。規模が大きくなっても、この基本ステップを丁寧に踏むことが、最終的な成果に繋がります。Webサイト構築の経験がある方も、今回の記事を読んで再度工程を見直すことで、新しい気づきがあれば幸いです。