WEB制作の流れを徹底解説！発注する際のポイントもご紹介！！
クライアントに満足していただけるWEBサイトを作るには、正しいWEB制作の流れを押さえることが重要です。
また、WEB制作会社に依頼する場合でも、流れを知っておくことでトラブルを未然に防ぐこともできるでしょう。
ここでは、WEB制作の流れに沿ってその過程を具体的に紹介していきます。
最後には、WEB制作会社に発注する際のポイントも紹介しているので、これから発注を考えている方はぜひ参考にしてください。
目次
WEB制作の流れは５ステップ
WEB制作は大きく分けて以下の5ステップで完成します。
ステップ１：企画
ステップ２：WEBサイト設計
ステップ３：デザイン制作
ステップ４：システム開発
ステップ５：リリース
ここでは、それぞれのステップをひとつずつ詳しく紹介していきます。
ステップ１：企画
目的・目標を決める
なぜWEB制作をするのか、まず「目的」を明確にしましょう。
例えば、「見込み客の情報を集める」「資料請求を増やす」などが目的にあたります。 目的を基に次のステップのWEBサイト設計を行うので、特に注意して擦り合わせると良いでしょう。
WEB制作のヒアリングシートについては『初心者でもわかるWEB制作ヒアリングシートの基本【テンプレート付き】』で詳しく解説しています。
目的が決まったら、達成度を測るための目標を設定しましょう。 具体的な数値で目標が設定されていれば、リリース後の改善施策が検討しやすくなります。
調査・分析を行う
目的・目標を達成するために、どのような施策を行うべきか調査・分析を行います。
例えば、以下のような情報を収集していきます。
- 業界の動向やトレンド
- 競合他社の施策（WEBサイトへの流入方法 など）
- ユーザーの年齢や職業
可能な限りさまざまな切り口で情報収集すると良いでしょう。
ターゲットを明確化する
誰に向けたWEBサイトなのか？ターゲットを明確に決めましょう。
ここで決めた内容は「デザイン制作」のステップに影響するので、可能な限り具体的に決めると良いです。以下のように、人物像が分かる程度の明確さが必要です。
- 山田太郎
- 27歳男性
- IT企業の営業職で毎日残業
- 独身、一人暮らし
- 映画鑑賞が趣味 など
調査・分析の結果を基に決めることで、クライアントの目的に合致したターゲットを設定しましょう。
ステップ２：WEBサイト設計
企画が定まったら、次にWEBサイトの設計を考えていきます。
要件定義
まずはWEBサイトが満たす必要がある要件を定義します。
要件定義をしておくことによって、システム開発時に品質評価がしやすくなります。
最低限、以下のような要件を定義しておくと良いでしょう。
- 制作要件
- ・動作環境（サーバー情報、アップロード先のディレクトリ、CMSの種類と要件 など）
・技術要件（利用するプログラミング言語・フレームワーク、導入するプラグイン・テンプレート など）
・大枠のサイト構成
・その他必要な要件
- システム要件
- ・機能要件（システムの機能に関する要件）
・非機能要件（可用性、性能、拡張性、運用・保守性、セキュリティなど機能以外の要件）
サイトマップの作成
サイトマップとは、サイト全体のページ構造をリスト形式で記述したものです。
例えるとすると、建物を建築するにあたり図面を作成する工程です。
サイトマップでは以下の情報を網羅しておくと良いでしょう。
- 各ページの階層構造
- URL
- ページタイトル
- ページをnoindex（非公開）にするか
ワイヤーフレームの作成
サイトマップを基に、ワイヤーフレームと呼ばれる各画面の設計図を作成します。
ワイヤーフレームでは「サイトの目的・目標に合った設計にすること」「各画面の仕様を確定させること」が大切になります。 これをしないと、後のステップで余計な修正が必要になることがあるので、クライアントとしっかり合意することをおすすめします。
ステップ３：デザイン制作
ここからは実際の制作に入っていきます。まず制作するのはデザインです。
トーン＆マナーの決定
トーン＆マナー（トンマナとも言われます）とは、デザインの統一性を保つためのルールのことです。
トーン&マナーの例としては以下のようなものがあります。
- 配色のルール
- フォントのルール
- 画像素材などの方向性のルール
- レイアウトのルール
- 共通するパーツのルール
トーン&マナーを決定することで、より一貫したデザインを作成することができます。
素材の準備
デザインで使用する画像やテキスト、イラストなどを準備します。
クライアントから素材を提供してもらう場合は、事前に貰っておくと作業を進めやすいです。
デザインの作成
トーン＆マナーと素材の準備が整ったら、各ページのデザインを作成していきます。
以下の点には注意してください。
- デザインツール（Adobe XD、Figma など）の指定があるかを事前に確認しておくこと。
- 実現不可能なデザイン表現をしないこと。
特に、実現不可能なデザイン表現についてはよくトラブルになります。そのようなデザインでクライアントと合意することの無いよう、実際の開発をイメージして実現可能性を事前に判断しておくことが大切です。
ステップ４：システム開発（テスト環境）
WEBサイト設計とデザインを基に、システムを開発していきます。
フロントエンド開発
制作したデザインをインターネット上で実際に見られるようにする工程です。
普段閲覧するサイトと同じ状態なので、イメージしやすいと思います。
フロントエンド開発では、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サイトが作れるようになると思うので、ぜひ取り入れてみてください。
株式会社Abentryでは、上場企業から中小企業まで様々な業種のサイト制作で得たノウハウをもとにWEB制作を行なっています。
WEB制作でお困りの方は、以下のリンクよりぜひ問い合わせをお願いします。
