Webサイト制作の流れとは？企画設計から開発までの手順・制作期間を解説

はじめてWebサイト制作に取り組むとき、何をどのような手順で進めるべきか迷う人もいるかもしれません。ここでは、Webサイト制作を検討している企業の担当者に向け、Webサイト制作の流れから外注先を選ぶポイントまで解説します。Webサイト制作について体系的に情報を収集し、ユーザーからのアクセスを集めるために、ぜひ参考にしてください。

1.Webサイト制作の流れ

Webサイト制作の流れを、5つのフェーズに区切って解説します。時系列でやるべきことを把握して、スムーズに進めましょう。

1-1.企画フェーズ

まずは企画フェーズについて、Webサイト制作の目的の明確化から、外注先を交えた要件定義まで解説します。

1-1-1.Webサイト制作の目的を明確化

最初にWebサイト制作の目的を明確化しましょう。問合せの獲得やサービス・商品の契約など、Webサイトにより目的は異なります。Webサイトを制作し、随時内容を変更していくためには、まずはWebサイトの目的を固める必要があります。
また、Webマーケティングを重視するかも早い段階で決めましょう。Webマーケティングの戦略に長けた外注先を選ぶと、ユーザーのWebサイトへのアクセスが見込めます。

1-1-2.競合調査・分析

Webマーケティングで競合となる企業のWebサイトをピックアップし、調査・分析を実施しましょう。基本的なWebマーケティング施策を実施したうえで、競合のWebサイトで実施されている施策も反映させると、自社のWebサイトへのアクセスアップを期待できます。また、競合のWebサイトのデザインは、デザインのベンチマークを決める際の参考になります。

 

1-1-3.要件定義

要件定義とは、本格的にWebサイトの制作に着手する前に、関係者で共有する仕様書です。要件定義には、Webサイト制作の目的やゴール・納期・コンテンツ（内容）・ユーザーのニーズ・運用管理など、Webサイト制作で必要な情報をまとめます。
 
要件定義書があれば、関係者間の認識が統一され、目的にかなったWebサイトをスムーズに制作できます。

1-2.Webサイトの全体設計フェーズ

要件定義を終えたら、Webサイト全体を設計します。まずは全体の設計を決め、徐々に細分化して詳細を決めましょう。

1-2-1.サイトマップの作成

サイトマップとは、Webサイトの全体図をツリー形式などで可視化したものです。SEOの視点から、Googleなどの検索エンジンにインデックスされやすいWebサイトとなるか確認しましょう。
 
インデックスとは、検索エンジンに記録されたWebサイトの情報を意味します。インデックスされると検索エンジンの検索結果に自社のWebサイトが表示されるため、ユーザーのアクセス数増加が期待できます。
 
また、自社と外注先、双方の視点から作成するページ数に過不足がないか確認したうえで、サイトマップを完成させてください。

1-2-2.ワイヤーフレームの作成

ワイヤーフレームとは、ページごとの設計図です。ワイヤーフレームの目的は、ページごとの完成イメージの可視化です。
 
コンテンツをどのように配置するか、強調する部分はどこか、ユーザーをどのような流れでゴールまで誘導するかなどのイメージを、ワイヤーフレームにより関係者間で共有しましょう。必要に応じ、「最重要」などの注意書きを添えると、より関係者間の意思疎通が深まります。

1-2-3.SEO対策への考慮

SEOに注力する場合は、Webサイトの目的に合ったブログ機能の搭載を検討しましょう。ブログと各ページ間の内部リンクも考え、Webサイトの設計を進めます。なお、Webサイトの下層に自社で保有するオウンドメディアなどを立ち上げる場合も、設計段階でイメージを固めておきましょう。

1-2-4.コンテンツマーケティング設計

SEO対策に加え、コンテンツの内容も検討します。コンテンツには、インタビュー記事や、ユーザーに役立つ情報を提供する記事、商品やサービスの導入事例集などが一般的です。SEO対策とコンテンツマーケティングの双方を意識することで、Webサイトへの集客が見込めます。

1-3.デザイン作成フェーズ

デザイン作成フェーズについて、コンセプトの設計から写真・動画素材の用意、デザインカンプの作成まで、流れに沿って紹介します。

1-3-1.デザインコンセプトの設計

デザインコンセプトは、Webサイトのブランド感を際立たせるために役立ちます。カラーコードやフォント、用意する写真や動画イメージなどの方向性を決めましょう。関係者間の「理想的なWebサイトのデザイン」が一致すると、以降のデザイン設計が順調に進みます。

1-3-2.写真・動画素材の用意

手軽にWebサイトに掲載する写真を用意したい場合は、フリー素材を使用するか、有料写真を購入します。写真にこだわりたいときは、カメラマンを手配して写真撮影から計画しましょう。なお、くれぐれも素材の著作権には注意してください。
 
ユーザーにとってより役立つ情報を提供するために、写真に加え、動画の埋め込みも検討しましょう。

1-3-3.デザインカンプ作成

デザインカンプとは、実際にWebサイトを構築する際の設計書です。エンジニアは、デザインカンプに合わせてコーディングし、Webサイトのデザインや仕組みを作ります。コーディングとは、プログラミング言語で記述された、ソースコードと呼ばれるテキストを作成する作業のことです。
 
デザインカンプの完成イメージは、自社と外注先ですり合わせ、最終調整として双方が微修正を提案しましょう。実現できないデザインが盛り込まれていないか、この段階で確認しておきます。

1-4.開発フェーズ

開発フェーズの詳細な流れを解説します。デザインに従いサイトを構築し、テストリリース、デバッグの流れで進めます。

1-4-1.フロントエンド開発

フロントエンド開発とは、直接ユーザーが目にする部分にかかわる開発です。フロント開発にかかわるエンジニアは、各種プログラミング言語を使い、装飾に使う素材を指定していきます。なお、フロントエンド開発で使用されがちな言語は、HTMLやCSS、JavaScriptなどです。

1-4-2.バックエンド開発

バックエンド開発とは、サーバーやシステムサイドなど、ユーザーから見えない部分にかかわる開発です。たとえば、登録フォームの情報をデータベースに送信する機能や、予約システムにユーザー情報を送信する機能などは、バックエンド開発の管轄です。
 
なお、バックエンド開発には、JavaやJavaScript、PHP、Python、Rubyなどの言語が使われます。

1-4-3.テストリリース

Webサイトの構築が終わったら、テストリリースを実施します。テストリリースでは、サイトが正常に動作するか確認します。速やかにテストリリースを実施するためには、あらかじめ、テスト設計を作っておきましょう。テスト設計とは、各機能をどのような環境でテストするかを決めたものです。

1-4-4.デバッグ

デバッグでは、テストリリースよりも細かい条件で、ユーザーがデザインどおりのWebサイトを見られるか確認します。デバッグの担当者は、Webサイトの動作にバグがないかを確認し、バグが見つかれば原因を特定し、修正します。
 
また、バグの解消により、ほかの機能に不具合が起きていないかも確認しなければいけません。デバッグは、システムが仕様通りに動くまで続けられます。

1-5.リリースフェーズ

テストリリースとデバッグを終え、Webサイトの制作が完成しだい、本格的なリリースを実施します。準備万端と感じたとしても、リリースでは予想外のエラーが発生する場合があります。トラブルに直ちに対応できるように、リリース当日は、デザイナーとエンジニアに待機してもらいましょう。

2.Webサイト制作を外注するメリット

Webサイト制作を外注すると、自社の手間を抑えつつも品質の高いWebサイトを制作できます。Webサイト制作を外注するメリットを解説します。

2-1.Webマーケティングを意識したサイト制作が可能

Webサイト制作を外注すると、運用や集客も見据えたサイト制作が可能です。SEOの情報は日々更新されていくため、一から勉強してもWebサイト制作にはすぐに活かせないかもしれません。
 
最初からSEOに詳しい企業にサイト制作を委託したほうが、蓄積された知識やノウハウと、最新のSEOの情報をWebサイトに盛り込んでもらえます。SEOを重視したコーディングと並行し、SEOコンテンツにも対応してもらいましょう。

2-2.保守管理で手厚くサポート

Webサイトは制作して終わりではなく、保守管理が必要です。ただし、保守管理でシステムの微修正や画像の更新などに取り組もうとしても、本業を抱えている状態では手が回らないかもしれません。
Webサイト制作を外注すると、手厚く保守管理を実施してもらえるため安心です。また、サーバー管理も一任すると、自社でメンテナンスをする手間を削減できます。

2-3.社内リソースの削減が可能

Webサイトを作るためには、多くのフェーズが必要です。すべて社内で取り組もうとすると、大がかりなリソースの投資が必要です。一方、Webサイト制作を外注すると、社内リソースを削減でき、実績ある企業に依頼するためWebサイトの品質も担保できます。

3.Webサイト制作の平均所要期間

Webサイト制作の所要時間は、Webサイトのボリュームにより変わります。10ページ前後のWebサイトであれば、2カ月～2カ月半程度が目安です。30ページ前後のWebサイトであれば、4カ月程度を想定しましょう。また、WordPressなどのシステムを搭載したWebサイトの場合は、制作に半年から1年程度かかります。

4. まとめ

Webサイト制作には時間がかかります。Webサイト制作の経験やWebマーケティングの知識がなければ、自社でのWebサイト制作は難しい可能性があります。ただし、Webサイト制作を外注しなくても、CMSを使えば社内でWebサイトを制作することも可能です。
 
CMSはコンテンツ・マネジメント・システムの略語で、Webサイトを管理・更新するシステムを指します。
 
BiNDupは国産のCMSで、Webサイト制作の内製化に向けて必要な機能が揃っています。カスタマイズ性に富み、イメージに合うWebサイトを制作できます。また、有料で専用サポートも可能です。
 
BiNDupについては、新規申込をご検討ください。