【プロが教える】WEB制作の流れとは？公開までの5ステップを徹底解説！
WEBサイトにはそれぞれの目的が必ず存在します。
そして、目的が達成できるWEBサイトを作るには、正しい流れを押さえて制作することが必要です。
この記事では、WEB制作の流れを5つのステップに分けて徹底解説していきます。
失敗しないためのポイントも紹介しているので、制作者・発注者問わず参考にしていただけると幸いです。
目次
WEB制作の流れについて
なぜWEB制作の流れが大切なのか
WEB制作の流れが大切な理由は、目的に対して一貫したWEBサイトを作れるからです。
WEBサイトにはそれぞれ立ち上げる目的が必ず存在します。
目的は「見込み客の情報を集める」「資料請求を増やす」など、それぞれの会社の状況によって異なりますが、これを達成できなければただの形だけのWEBサイトになってしまいます。
WEB制作の流れでは、目的をもとに段々とWEBサイトの設計に落とし込み、制作者・発注者の双方で合意しながらWEBサイトのリリースまで行います。
目的から制作に徐々に落とし込んでいくため、目的に対して一貫したWEBサイトができるわけです。
これによって、成果につながるWEBサイトができるため、WEB制作の流れに沿って進めていくことは非常に大切です。
WEB制作の流れの5ステップ
WEB制作の流れは、大きく分けて以下の5ステップです。
ここからは、それぞれのステップをひとつずつ詳しく紹介していきます。
ステップ１：企画
WEBサイトには必ずそれぞれの目的が存在します。
企画の段階では、その目的をより具体的にしていきます。
目的を決める
なぜWEB制作をするのか、まず「目的」を明確にしましょう。
WEB制作の主な目的は以下の通りです。
WEB制作の主な目的
【リード獲得】
資料請求や問い合わせを通して見込み客の獲得を目的とします。
【売上の増加】
商品やサービスの販売を通して、売上の増加を目的とします。
【人材採用】
自社にマッチした優秀な人材を採用することを目的とします。
【認知度向上】
自社もしくは商品・サービスの認知度向上を目的とします。
【ブランディング】
自社もしくは商品・サービスのブランド価値向上を目的とします。
【顧客対応】
カスタマーサクセスやカスタマーサポートを通して、顧客生涯価値（LTV）の向上を目的とします。
目的はWEBサイトの土台となる重要なポイントです。
目的が定まっていなければ、的を得た設計やデザインもできません。
ヒアリングシートなどを準備して、特に注意して擦り合わせていきましょう。
WEB制作のヒアリングシートについては『初心者でもわかるWEB制作ヒアリングシートの基本【テンプレート付き】』で詳しく解説しています。
目標を決める
目的が決まったら、達成度を測るための目標を設定しましょう。
具体的な数値で目標が設定されていれば、リリース後の改善施策が検討しやすくなります。
良く使われる数値は以下の通りなので、目的に合わせてこれらの数値目標を設定すると良いでしょう。
- セッション数
- ユーザーがWEBサイトにアクセスした回数のことです。
WEBサイトにアクセスしてから離脱するまでを「1セッション」とし、複数のページを閲覧してからサイトを離脱しても「1セッション」とカウントします。
なお、30分以上操作されない場合は、セッションが切れて新しくカウントされます。
- PV数（ページビュー数）
- 文字通りWEBサイトのページの閲覧数のことです。
サイトを1ページ閲覧すると「1PV」となり、4ページ見た場合は「4PV」となります。
ブラウザの戻るボタンやページ更新についても、それぞれ「1PV」が追加されます。
- CV数（コンバージョン数）
- CV（コンバージョン）とは、ユーザーがホームページの目標としているアクションを起こしてくれた状態のことで、CV数とはその件数を表します。
CV数は利益に直結する重要な指標なので、目標の指標としてよく使われます。 - また、セッション数に対してのコンバージョン数の比率を表すCVR（コンバージョン率）も、成果を上げる効率を見るために良く使われます。
調査・分析を行う
目的・目標を達成するために、どのような施策を行うべきか調査・分析を行います。
例えば、以下のような情報を収集していきます。
- 業界の動向やトレンド
- 競合他社の施策（WEBサイトへの流入方法 など）
- ユーザーの年齢や職業
可能な限りさまざまな切り口で情報収集すると良いでしょう。
ターゲットを明確化する
誰に向けたWEBサイトなのか？ターゲットを明確に決めましょう。
ここで決めた内容は「デザイン制作」のステップに影響するので、可能な限り具体的に決めると良いです。以下のように、人物像が分かる程度の明確さが必要です。
ターゲット決定例
・山田太郎
・27歳男性
・IT企業の営業職で毎日残業
・独身、一人暮らし
・映画鑑賞が趣味 など
調査・分析の結果をもとに、目的・目標を達成できるターゲットを設定しましょう。
ステップ２：WEBサイト設計
企画が定まったら、次にWEBサイトの設計を考えていきます。
要件定義
まずはWEBサイトが満たす必要がある要件を定義します。
要件定義をしておくことによって、システム開発時に品質評価がしやすくなります。
以下の要件を定義しておくと良いでしょう。
- 制作要件
- ・動作環境（サーバー情報、アップロード先のディレクトリ、CMSの種類と要件 など）
・技術要件（利用するプログラミング言語・フレームワーク、導入するプラグイン・テンプレート など）
・大枠のサイト構成
・その他必要な要件
- システム要件
- ・機能要件（システムの機能に関する要件）
・非機能要件（可用性、性能、拡張性、運用・保守性、セキュリティなど機能以外の要件）
サイトマップの作成
サイトマップとは、サイト全体のページ構造をリスト形式で記述したものです。
例えるとすると、建物を建築するにあたり図面を作成する工程です。
サイトマップでは以下の情報を網羅しておくと良いでしょう。
- 各ページの階層構造
- URL
- ページタイトル
- ページをnoindex（非公開）にするか
ワイヤーフレームの作成
サイトマップをもとに、ワイヤーフレームと呼ばれる各画面の設計図を作成します。
ワイヤーフレームでは「サイトの目的・目標に合った設計にすること」「各画面の仕様を確定させること」が大切になります。 これをしないと、後のステップで余計な修正が必要になることがあるので、クライアントとしっかり合意することをおすすめします。
ワイヤーフレームの作り方の詳細に知りたい方は『ワイヤーフレームの作り方完全ガイド【2023年最新・実例付き】』を参考にしてください。
ステップ３：デザイン制作
ここからは実際の制作に入っていきます。
まずはデザインを制作していきます。
トーン＆マナーの決定
トーン＆マナー（トンマナとも言われます）とは、デザインの統一性を保つためのルールのことです。
トーン&マナーとしては以下のようなものがあります。
- 配色のルール
- フォントのルール
- 画像素材などの方向性のルール
- レイアウトのルール
- 共通するパーツのルール
トーン&マナーを決定することで、より一貫したデザインを作成することができます。
素材の準備
デザインで使用する画像やテキスト、イラストなどを準備します。
画像やイラストは、Apple製品に搭載されているRetinaディスプレイに対応するために、実際に使う大きさの縦横それぞれ2倍のものを準備しておきましょう。
また、素材提供が必要なものは事前に受け渡しておくと、作業がスムーズに進みやすいです。
デザインの作成
トーン＆マナーと素材の準備が整ったら、各ページのデザインを作成していきます。
以下の点には注意してください。
注意するポイント
・デザインツール（Adobe XD、Figma など）の指定があるかを事前に確認しておくこと。
・実現不可能なデザイン表現をしないこと。
特に、実現不可能なデザイン表現についてはよくトラブルになります。そのようなデザインでクライアントと合意することの無いよう、実際の開発をイメージして実現可能性を事前に判断しておくことが大切です。
ステップ４：システム開発（テスト環境）
WEBサイト設計とデザインをもとに、システムを開発していきます。
システム開発は、インターネット上では見ることができても一般には公開されていないテスト環境で行っていきます。
システム開発の方法は、完全にオリジナルなシステムを作るフルスクラッチ開発や、既存のCMSを使うパターンなどさまざまです。
詳細を知りたい方は『WEBサイトの作り方のパターンを徹底紹介！！【2023年最新版】』を参考にしてください。
フロントエンド開発
制作したデザインをインターネット上で実際に見られるようにする工程です。
普段閲覧するサイトと同じ状態なので、イメージしやすいと思います。
フロントエンド開発では、HTML, CSS による見た目の調整と、JavaScriptによる動作の調整を行います。
バックエンド開発
サーバーで動くプログラムを開発する工程です。
管理画面やデータベースを作るイメージをすると分かりやすいと思います。
WEB制作のバックエンド開発で多いのは、WordPressなどのCMSやEC-CUBEなどのパッケージシステムを使った開発です。
（もちろん、独自システムを構成する場合もあります。）
また、サーバーやドメイン設定などのインフラ準備もバックエンド開発の役割です。
テスト
開発が完了したら動作のテストを行います。
ユーザーがWEBサイトを見るさまざまな環境を想定し、以下の確認ことを確認しましょう。
テストで確認するポイント
・どのブラウザ（Google Chrome、Safari、Firefox、Microsoft Edge など）でもデザイン通り表示されるか
・どのデバイス（PC、タブレット、スマートフォン）でもデザイン通り表示されるか
・仕様通りにシステムが動作するか
特に、「スマートフォンでの表示ずれ」「SafariとInternet Explorerでの表示ずれ」が起こりやすいので、確認は丁寧に行うようにしてください。
（Internet Explorerは2022年6月16日にサポートが終了しており、現在は対応の必要性がほとんどありません。）
ステップ５：リリース（本番環境への移行）
テスト環境でのシステム開発で問題がなければ、リリース作業を行います。
バックアップを取った上で、担当者が揃った万全の状態で行うのがベストです。
また、リリース作業の日程は必ずクライアントに伝えておきましょう。クライアントにとって大切な時にサイトでトラブルが発生すると大変です。テスト環境で起きなかった想定外のバグが発生することもあるので、必ずリリース後のWEBサイトでもテストを行いましょう。
なお、WEBサイトはリリース後の運用・保守やリニューアルが大切です。
リリースして終わりにするのではなく、以下の内容を参考に改善し続けて、より良いWEBサイトにしていきましょう。
WEB制作の流れに関するポイント
『企画』と『WEBサイト設計』で曖昧さを残さないこと
『企画』と『WEBサイト設計』で、WEBサイトの土台が決まります。
この土台に従ってデザインやシステムを構築していくことになるので、企画とWEBサイト設計に曖昧さがあると、「自分たちの思っていたWEBサイトと違う」ということが起こりかねません。
WEB制作会社とのコミュニケーションを密に取り、曖昧さを残さないようにしましょう。
『企画』と『WEBサイト設計』を決めたら覆さないこと
ここまで見てきたように、WEB制作では発注者から見えにくい作業がいくつも存在します。
『企画』と『WEBサイト設計』が覆ると追加開発が必要になることが多く、その場合は追加予算が必要になります。
「見積と実際の請求金額が全然違う」ということにならないよう、企画とWEBサイト設計を決めたらできる限り覆さないようにしましょう。
WEB制作の相場を詳細に知りたい方は『【目的別】ホームページ制作の費用相場を徹底解説！』を参考にしてください。
納品されたWEBサイトの確認を怠らないこと
WEB制作では修正やバグが発生しないことの方が稀です。
WEB制作会社ですべてのレイアウトとシステムを確認していますが、それでも見落としがある場合があります。
納品されたWEBサイトはすべての実装内容を確認するようにしましょう。
まとめ
この記事では、WEB制作の流れを5つのステップに分けて解説してきました。
ステップ１：企画
ステップ２：WEBサイト設計
ステップ３：デザイン制作
ステップ４：システム開発
ステップ５：リリース
この流れを押さえていれば、目的が達成できるWEBサイトが作れると思います。
これからWEB制作を控えている方は、この記事を参考にしながらワンランク上のWEBサイトを仕上げていただけると、筆者として大変嬉しく思います。
