WEBサイト制作の4つの流れとは？期間・ToDo・注意点つきで徹底解説【2023年最新】

2021年4月13日 2023年7月3日

yuika

WEBサイト制作では、工程を4つの流れに分類します。各段階のポイントを理解することで、内容が整理され、やるべきことが明確化します。今回は、WEBサイト制作の4つの流れを徹底解説。ステップ別の注意点とやることリストなども紹介します。ぜひ参考にしてください。

1 WEBサイト制作の4つのステップと期間
2 ステップ別、注意点とやることリスト
3 まとめ

WEBサイト制作の4つのステップと期間

では、早速、WEBサイト制作の4つのステップと制作期間を見ていきましょう。

step1: 企画（WEBサイト制作/リニューアルの目的の整理)

ステップ1は企画です。企画にかかる期間は、早くて1週間程度、長くて1か月程度かかることもあります。

目的の整理

まず、WEBサイト制作やWEBサイトリニューアルの目的を整理しましょう。目的とは、「WEBサイト制作で達成したいこと」であり、制作のゴールになるものです。

コンセプトの決定

次に、WEBサイトのコンセプトを決めます。WEBサイトのコンセプトは目的に沿ったものがよいでしょう。デザインに凝ったサイトやシンプルで見やすいサイトなどそれぞれのWEBサイトによってコンセプトは大きく異なります。WEBサイトで高いコンバージョンを獲得するには、希望するイメージをできるだけ具体化していくことが大切です。

予算を決める

予算は、希望するWEBサイトの内容と釣り合う金額にするのが好ましいです。予算が低いのに、クオリティの高いWEBサイトを制作したいなどといった場合には、予算とWEBサイトの内容が釣り合わないものになってしまいます。業者に依頼する際は、過去のWEBサイト制作の事例や料金表などをしっかりと確認し、見積りを出してもらいます。数社を比較検討しながら、適切な価格設定が提示されているような納得のいく業者を選んでいきましょう。

step2: サイト設計

step2のサイト設計にかかる期間は、1か月程度です。サイト設計では、WEBサイトに掲載する項目を決めていきます。WEBサイトに掲載する項目はサイトマップと呼ばれるものです。サイトマップは、本でいうところ目次にあたる部分になります。WEBサイトの種類によって、掲載する内容も大きく異なります。 ECサイトのサイトマップを例に挙げると

TOPページ
商品紹介ページ
商品購入ページ
購入者の声
企業概要
お問い合わせフォーム

などの項目が必要になります。サイトマップは、step1で設定した目的やコンセプトと照らし合わせながら詳細な内容を決めます。各項目の順番にもこだわり、見やすく分かりやすい設計を心がけましょう。ページ数が多いと、その分予算は高額になります。あれもこれもと詰め込む必要はなく、ユーザーにとって必要な項目を想定し、見極めることが大切です。尚、こちらの記事では、制作会社に依頼する際の注意点をまとめています。こちらも併せてご覧ください。費用と納期に関わる！WEBサイト制作の依頼前に知っておきたい7つの注意点と相場【2021年4月最新】

step3: 制作(デザイン・開発）

step3では、いよいよWEBサイト制作に入ります。WEBサイト制作完成までの期間は、ページ数によって異なります。1ぺージからなるLPの場合は1ヶ月程度、15ページ～20ページの場合は3ヶ月～3か月半程度、30ページ以上の場合は4か月程度、50ページ以上のページ数の場合には半年から1年程度かかることもあります。デザインやシステム開発は、WEBサイト制作会社が担う工程です。依頼者は、納得のいくまでWEBサイト制作会社の担当者と提出した仕様書や資料をもとにヒアリングを繰り返します。具体的には、デザイン案やワイヤーフレーム、原稿、サーバー、ドメイン、システムの仕様などの確認を行い、質問や不安点、修正点、希望点があれば都度確認します。 WEBサイトの内容に関する打ち合わせが終わると、開発の工程です。開発に入ってからデザインの大幅な内容を修正するのは、WEBサイト制作会社の規約よっては難しいケースもあります。希望点や修正点は、できるだけ開発に着手する前に相談することを心がけましょう。早めに相談することで、WEBサイト制作会社からよりよい提案がされることもあります。尚、開発の工程でも、会社情報や商品、サービスなど基本情報に関する確認が電話などで入ることもあります。基本情報は、自社の大切な内容になりますので、できるだけメールなどの文書に記載し、口頭による連絡は避けたいところです。

step4: テスト・公開・運用

開発が終ると、テストを行います。WEBサイトの動作環境や機能、デザイン、テキストなどWEBサイトを隅々まで確認しましょう。WEBサイト制作会社のほうで一旦確認を行っていますので、ここでは、担当者立ち合いのもと、依頼者による最終チェックになります。問題がなければ、納品、公開の流れです。 WEBサイトは、公開したら終わりではなく、運用を行っていきます。WEBサイト制作会社の中には、制作から保守、運用までを請け負う業者もあります。WEBサイト制作に関する知識のあるスタッフがいる場合には、自社で保守、運用を行うのもよいでしょう。WEBサイト制作会社は、費用がかかる分、アクセス数やページの滞在時間、SEOなど運用に関する手厚いサポートを行ってくれます。集客に向けてどちらがよい結果になるのかを見据え、運用の準備を進めていくとよいでしょう。以下は、SEO対策についての解説の関連記事一覧です。こちらもぜひ参考にしてください。 SEOの記事一覧

ステップ別、注意点とやることリスト

WEBサイト制作の各ステップには、知っておきたい注意点があります。こちらでは、各ステップにおける注意点ややることリストを紹介します。

1-1.目的を明確にする

ステップ1の企画では、最初にWEBサイトを制作する目的を明確にしなければなりません。目的が定まっていないWEBサイトでは、集客を上げることは難しくなります。サイトを訪れたユーザーが、何を目的としているWEBサイトなのか、一目見て理解できるような分かりやすいWEBサイトが望ましいでしょう。目的は、WEBサイトの種類によっても異なります。例えば、採用サイトの目的は企業とマッチする優秀な人材からの応募、コーポレートサイトでは企業を広く認知させるため、ECサイトではアクセス数を増加させ、商品やサービスの購入数アップへとつなげる、サービスサイトでは商品やサービスを知ってもらい、リード顧客を獲得するなどといったような目的があります。目的が明確になると、何をどの順番で掲載し、どのようなデザインにするかといったWEBサイトの設計や制作内容、かかる費用なども自ずと見えてきます。WEBサイト制作をスムーズに進めるためにも、最初にWEBサイトの目的を明確にしておきましょう。

1-2.掲載内容を整理する

WEBサイトに掲載する内容を整理することも大切です。例えば、商品を紹介するページにあれもこれもと内容を詰め込むことで、結果的に何を伝えたいのか、何を売りにした商品であるのかが、分からなくなってしまうケースもあります。多くの文章や画像で埋め尽くしたまとまりのないページよりも、シンプルで分かりやすいページのほうが、かえって集客に繋がる場合もあるのです。具体的には、掲載したい内容を箇条書きにします。項目が多い場合には、どうしても必要な内容とできれば載せたい内容に分けましょう。必要な内容に絞り込むことで、掲載内容が整理されます。

2-1.ワイヤーフレーム作成（WEBサイトの構成を決める）

STEP2の制作フローでは、ワイヤーフレームを作成します。ワイヤーフレームは、WEBサイトの構成を決める枠組みであり、画像やテキストの配置場所や順番を決めるものです。サイトマップを土台にしながらテキストや写真などを選定します。ワイヤーフレームは、WEBサイト制作の会議などにも活用されています。会議では、ワイヤーフレームをもとに更にアイデアを練り、キャッチコピーを変更するなど、よりよいWEBサイト作りに向けてビジネスの場で話し合いが進むのです。

2-2.ディレクトリマップ作成（各ページの構成を決める）

ディレクトリマップは、タイトルやコンテンツ、URLなどWEBサイトにある全ての情報を一覧にした表のことを指しています。基本的には、Excelを用いて作成します。ディレクトリマップがあることで、WEBサイト制作会社やWebサイトの管理者など制作に関わる全ての人が簡単に情報共有できます。また、内容の更新などの共有もスムーズに進みます。作成したディレクトリマップは、WEBサイト設計、デザイン、開発、公開、運用、サイトのリニューアルまで全ての工程で活用されるものです。ディレクトリマップでは、主に以下のような内容が分かります。

WEBサイトの総合ページ数
コンテンツ内容とコンテンツのページ数
重複コンテンツや不足するコンテンツ
メタディスクリプションなどSEO関連の漏れを確認
制作の進捗状況の確認
WEBサイトの全体像の把握

ディレクトリマップは、削除すべきコンテンツやキーワード設定、競合サイトの分析など、WEBサイトの修正点を見つけ出し、SEO対策にも有効に働きます。また、各フローでの費用の見積りを出す際に役立つものです。

3-1デザイン作成

サイトマップやワイヤーフレームに沿ってデザインを作成するのが、STEP3の工程です。デザイナーが、いくつかのデザイン案を用意し、WEBサイトの方向性を把握しながら依頼者が選定します。サイトのテーマや目的、イメージに合うような素材を用い、テキストやテイストに統一感があるものがよいでしょう。また、カラー配色のバランスや画像の大きさ、フォントサイズなどにも気を配っていきます。提出されたデザインに関するデザイナーの説明を聞き、ターゲットに合ったものを選んでいきましょう。デザインは、Photoshopやillustratorなどを用いて作成することが多く、トップページから下層ページへと制作を進めます。近年のWEBサイトは、パソコン端末とモバイル端末に画面が自動的に切り替わるレスポンシブウェブデザイン対応のものが多くなっています。WEBサイトの制作者は、どちらか一方の端末ではなく、両方の端末に対応するデザインを作ることが求められているのです。

3-2コーディング

デザインの作成が終わったら、コーディングの作業に移ります。コーディングは、作成したデザインにプログラミング言語やマークアップ言語を記述し、プログラミングを行う作業です。コーディングによってデザインがWEBサイトに表示され、リンク先のページへ飛ぶなどWEBサイトが「Google Chrome」や「Internet Exprorer」などのブラウザ上で動作するようになります。尚、コーディングの後は、WEBサイトが正常に機能しているかどうかの確認をするデバッグを必ず行います。

4-1独自ドメインを取得、サーバーをレンタル

WEBサイトを公開するには、ドメインの取得とサーバーのレンタルが必要になります。ドメインは、「https://～」や「http://～」の～にあたる「～jp」「～.com」などの部分を指したものです。無料のWEBサイト作成サービスで取得できるようなサブドメインでは、全てのコンテンツで上位表示狙うのは難しいといえます。.SEO対策を考えるなら、独自ドメインの取得が好ましいでしょう。サーバーは、WEBサイトのクライアントであるユーザーが求める情報を提供するものです。WEBサイトをアップロードして表示させるには、サーバーの利用が必須です。ドメインの取得は、ドメイン販売会社かサーバーレンタル会社で取得できます。サーバーレンタル会社は、ドメイン販売会社よりも割高になることも多いですが、サーバーレンタルと同時にドメインの取得ができるため、余計な手間を省けて便利です。

4-2ファイルをアップロード・WEBサイトの確認

次の工程では、ファイルをサーバーにアップロードします。ファイルをアップロードする際は、「SFTP」や「FTP」のソフトを利用します。多くは、サーバーの管理画面にあるFTPソフトの利用でアップロードが可能です。しかし、複数のファイルを一括送信する場合などは、FTPソフトを利用しなければなりません。ファイルをアップロードしたら、WEBサイトが正常に機能しているかを確認しましょう。確認方法は、ブラウザにWEBサイトのドメインを入力し、正しく表示されているかを閲覧の状況を見ます。正しく表示されない場合には、ファイルの不具合を修正し、再度アップロードしましょう。

4-3アクセス解析

WEBサイト公開後は、アクセス解析を行います。アクセス解析では、ページ毎のユーザー数や行動パターン、属性などを分析し、コンバージョンの達成率や達成できなかった要因などを探り、改善に努めるものです。アクセス解析には、無料と有料のツールがあります。より高度な情報収集による観点から分析したい場合には、有料ツールがおすすめです。無料のツールには、Google社が提供するGoogle AnalyticsやGoogle Search Console、本社をイギリスに置くSimilarWeb株式会社のSimilar Webなどがあります。最近では、CMSツールを導入する企業も増えています。ツールの選び方で失敗しないためにもインターネットの検索エンジンなどでさまざまなツールを見て特徴をおさえ、どのツールが自社に合っているかを検討するのもおすすめです。

まとめ

WEBサイト制作は、企画、サイト設計、デザイン・開発、テスト・公開・運用の4つのフェーズに分けられます。WEBサイト制作をスムーズに進めるには、サイトマップやワイヤーフレーム、ディレクトリマップなどの活用が必要不可欠です。 WEBサイトやWordPressに関する専門的知識を持つ人が社内にいない場合などは、WEBサイト制作会社に作成を依頼するのがよいでしょう。各ステップのポイントを押さえ、WEBサイトから公開、保守、運用までを滞りなく行っていきたいものです。弊社は、WEBサイト制作から保守、運用まで幅広い内容の契約を請け負っています。これまでに多様な種類のWEBサイトを制作し、実績も豊富です。WEBサイト制作でお困りの方は、まずはお気軽に弊社へご相談ください。

弊社は、東京都墨田区にあるWEBサイト制作会社です。「制作」「マーケティング」「プロダクト」の3つを強みに、これまでに培った「成功するノウハウ」を活かしたWEBサイト制作を得意としています。

以下から弊社のサービス資料・お役立ち資料をダウンロードできますので、皆様のWEBサイト運用に活用していただけますと幸いです。