Webサイトの構築方法とポイント、工程ごとの注意点を徹底解説

Webサイトの構築は、基本的に次の手順で進めます。

1. 企画
2. 設計
3. 制作
4. リリース・運用

この記事では、各プロセスでやるべきことや進め方のポイント・注意点をわかりやすく解説しています。Webサイト構築にかかる費用の相場とあわせて見ていきましょう。

第一に取り組むべきことは、Webサイトの企画立案です。これから構築するWebサイトの方向性や目的を定め、共有認識の形成を図ります。企画趣旨を元に計画書や要件定義書を作成しましょう。
 

ポイント：Webサイトの目的と求める成果を明確にする

企画段階で意識しておきたいポイントとして、Webサイトの目的と成果を明確にすることが挙げられます。Webサイトにはさまざまな種類があり、それぞれ用途や目的が異なるからです。自社の課題や事業目的に合ったタイプのWebサイトはどれか、具体的に何を達成するためにWebサイトを構築するのかを見定めておかなくてはなりません。

【主なWebサイトの種類】

• コーポレートサイト
• メディアサイト
• LP（ランディングページ）
• サービスサイト
• ECサイト
• ブランドサイト
• リクルートサイト
• ポータルサイト
• 会員サイト
• インフラサイト

Webサイトそのものの目的が明確化することで、ターゲットの特定やキーワード選定を進めやすくなります。「何となくWebサイトがあったほうがよさそうだ」といった曖昧な状態でスタートしないよう注意してください。

企画を進める際の注意点

企画立案を進める際には、手段と目的を取り違えないようにすることが重要です。Webサイト構築は、あくまでも自社の課題解決や事業目的の達成を実現するための手段にすぎません。Webサイト構築そのものが目的化することのないよう、担当者間で認識をすり合わせておく必要があります。

よくある失敗例として、「おしゃれなWebサイトを作りたい」「他社と同じような雰囲気のWebサイトを構築しよう」といった動機でWebサイトを企画してしまうパターンが挙げられます。いずれも「おしゃれなWebサイト」や「他社と似たWebサイト」を構築することで、具体的に何を実現・達成したいのかが定まっていません。

このように、Webサイト構築そのものが目的化した状態で企画立案に着手しないよう注意が必要です。
 

次に、計画書や要件定義書に沿ってWebサイトを設計していきます。サイト全体の構造をツリー形式で示した「サイトマップ」、Webサイトの設計図に相当する「ワイヤーフレーム」、Webサイトの完成イメージを示す「デザインカンプ」の順に作成していくのが一般的な手順です。
 

ポイント：Webサイトの外枠から順に決めていく

設計時に意識しておきたい点として、Webサイトの外枠から順に決めていくことが挙げられます。ページごとの詳細なデザインから検討し始めてしまうと、後になってWebサイト全体の構成やページレイアウトを大幅に変更する必要に迫られる可能性があるからです。

サイトマップは、住宅にたとえると建物全体の間取り図に相当します。まずは「何部屋あるのか」「どのような部屋を作るのか」を決めた上で、部屋ごとの内装へと移ります。ワイヤーフレームはデザインの「ラフ」や「下書き」にあたるものです。ページ内のどの位置にどういった要素を配置するのかを大まかに決める役割を果たします。

デザインカンプは、住宅であれば「内装イメージ図」に相当します。このように、まずは外枠を決め、ついで各ページのデザインを詰めていくのが基本的な進め方です。
 

設計を進める際の注意点

Webサイトを設計する際には、可能な限りシンプルな構成にするよう意識しましょう。シンプルな構成のWebサイトとは、ページの階層構造（親子関係）が複雑ではないサイトのことです。

階層構造が深すぎるWebサイトの場合、ユーザーはトップページ→下層ページ1→下層ページ1-1→下層ページ1-2…と、何度もリンクをクリックして目的とする情報を探さなくてはなりません。ユーザビリティが低下し、ユーザーの離脱を招く結果をもたらしがちです。

また、階層構造が複雑なWebサイトには検索エンジンのクローラーがサイト構造を把握しにくいというデメリットもあります。このように、ユーザーにとってわかりやすいサイト構造にすることは、検索エンジンによる評価を高めるため意味でも重要です。

Webサイトの設計が決定したら、いよいよ制作へと移ります。Webサイトの制作方法は、大きく分けて次の3つです。

1. HTML/CMSを直接コーディングする
2. CMS（Contents Management System）を活用する
3. ホームページ作成サービスを利用する

上記のうち1がもっとも自由度が高く、自由にカスタマイズが可能な制作方法ですが、Web制作に関する知識やスキルが欠かせません。一方、3がもっとも手軽にWebサイトを作成できる方法ですが、カスタマイズ性や拡張性の点では劣ります。工数を抑えつつカスタマイズ性も担保したい場合には、2のCMSを活用した制作方法がおすすめです。
 

ポイント：リリース後の運用も見据えて制作する

Webサイトの制作方法を検討する際には、制作時の工数だけでなく、運用開始後に更新作業がしやすいかどうかも考慮しなくてはなりません。Webサイトは制作を完了させることがゴールではなく、コンテンツを継続的に更新することでSEO効果が高まっていくからです。

たとえば、Webサイトを構成するすべてのページをHTML/CSSで記述した場合を考えてみましょう。各ページに共通するヘッダーやフッター、メニューなどの変更が必要になった際には、全ページのHTMLを書き換えなくてはなりません。

一方、CMSであればテーマ（テンプレート）を使用することにより、各ページに共通する要素は1回の変更のみで全ページに適用できます。運用に要する工数で比較した場合、後者のほうが適した制作方法といえるでしょう。
 

制作を進める際の注意点

Webサイトを制作する際には、必ずモバイル対応を念頭に置いて進めることが大切です。モバイル対応とは、PCだけでなくスマートフォンやタブレットで閲覧することも想定しておくことを指します。

令和4年版 情報通信白書によれば、情報通信機器の世帯保有率のうち、モバイル端末が占める割合は97.3％に達しています。これはパソコンの世帯保有率69.8％を大きく上回る結果です。ユーザーはスマートフォンやタブレットでWebサイトを閲覧するケースが多いと考えられることから、モバイル端末の画面サイズでも見やすいページデザイン・レイアウトにすることが求められています。

モバイル対応は検索エンジンの評価にも関わる要素の1つとなるため、必ず対策を講じておきましょう。

不具合がないかテストを実施し、問題なければWebサイトをリリースします。テストを実施する際には、複数のデバイスやブラウザで表示崩れなどが発生していないか入念にチェックしましょう。

Webサイトのリリースはゴールではなく、むしろリリースがスタート地点といえます。Google Analyticsなどの分析ツールを用いて効果測定を実施し、改善やコンテンツの追加・更新を続けていくことが大切です。
 

ポイント：こまめに課題を抽出・分析してPDCAを回す

Webサイトは、制作してリリースさえすれば期待どおりの成果を得られるものではありません。こまめに課題を抽出・分析して改善を繰り返すPDCAを回していくことが重要です。

Webサイトの分析は、定量分析と定性分析に分けられます。それぞれ指標の例は下記のとおりです。

【定量分析の指標例】

• 月間の訪問者数
• ページビュー（PV）
• CTAボタンのクリック率（CTR）
• 離脱率
• サイト滞在時間

【定性分析の指標例】

• Webサイトのファーストビューがユーザーの興味を引くものになっているか
• ユーザーの検索ニーズを満たすコンテンツになっているか
• ブランドコンセプトとのずれや温度差がないか
• サイト内の導線がわかりやすく構築されているか
   

リリース・運用時の注意点

Webサイトを分析する際には、運用フェーズに応じて適切なKPIを設定することが重要です。たとえば、Webサイトをリリースした直後はアクセスが少ないことが想定されるため、制作するコンテンツの件数や更新頻度といった行動ベースのKPIが適しています。ある程度アクセスが集まるようになったら、前掲の定量・定性分析の指標へと徐々に移行していくとよいでしょう。

なお、複数のKPIを同時に追いかけたり、設定したKPIが未達成の段階で新たなKPIを追加したりすると、どのKPIも中途半端な状態になりがちです。KPIは1つ達成できたら次の目標値を設定することをおすすめします。

Webサイトの構築にかかる費用は、構築するサイトの種類や規模、発注先などによって異なります。サイトの種類別・発注先別の費用の目安は下記のとおりです。

【サイトの種類ごとの相場】

【発注先別の相場】

なお、発注先を選定する際には費用面だけでなく、希望するWebサイトを制作するノウハウがあるか、過去の制作実績は十分か、リリース後の運用やメンテナンスもサポートしてもらえるか、といった点を重視しましょう。

Webサイトを構築する際には、工程全体の流れと各プロセスでのポイントを押さえておくことが重要です。今回紹介した構築の手順およびプロセスごとのポイント・注意点を参考に、ぜひ自社の課題を解決するWebサイトを構築してください。

なお、Webサイトは長年にわたって運用していくことが前提となるケースがほとんどです。将来的なWebサイトの活用を見据えて、マーケティングツールや営業ツールとの連携が可能な制作方法を選択することが重要です。

当社HubSpotが提供しているCMS「Content Hub」は、CRMやMAといったツールとスムーズに連携できる点に特徴があります。将来を見据えてWebサイトを構築したい事業者様は、ぜひ「Content Hub」をご活用ください。