依頼時に知っておきたいWebサイト制作の基本的な流れと注意点

現代のビジネス環境では、Webサイトは企業の信頼性や競争力を象徴する重要な要素となっています。

クラウド技術の進化やモバイルデバイスの普及に伴い、常に最新のデザインや機能のアップデートが求められます。

しかし、初めて自社サイトのリニューアルに関わる方だと

「何から始めるべきか」、「Webサイトはどういう流れで作られるのか」

といった疑問が生じることも少なくありません。

そこで今回はWebサイトのリニューアルをはじめて担当する方のために、発注者の目線でWebサイト制作の基本的な流れをわかりやすく解説していきます。

この記事をお読みいただくことで、計画からデザイン、開発、公開に至るまで、Webサイト制作の全体の流れを俯瞰で理解でき、実際のリニューアルプロジェクトを円滑に進められるようになります。

ぜひ、最後までご覧ください。

Webサイト制作の基本的な流れ

まず、Webサイト制作の流れを大まかにお伝えすると以下のようになります。

1. 要件定義
2. サイトマップ作成
3. ワイヤーフレーム作成
4. デザイン
5. 開発
6. テスト
7. 公開

それぞれのステップはプロジェクトによって異なる場合がありますが、この流れを基本として、Webサイトの制作を進めていきます。

プロジェクトの規模や要件にもよりますが、Webサイト制作にかかる期間は一般的に10ページほどのサイトであれば3〜4ヶ月程度。30ページほどのサイトであれば4〜6ヶ月程度かかります。

要件定義とコンテンツ作成

要件定義は、Webサイト制作の目的やプロジェクトが達成すべき目標や、コンセプト、必要な機能などを明確に定義するフェーズを指します。

目的と目標の設定

まず最初にやることは、目的と希望要件のとりまとめです。

Webサイトを制作する目的を明確にし、達成したい目標を設定します。

Web担当者になったら、関係者を集めてWebサイトを作る目的を全員ですり合わせること、そしてWebサイトに盛り込みたい要素を決めます。

具体的には以下のような項目をエクセルやスプレッドシートなどにまとめて、要素を洗い出した上で関係者全員で共有できる状態にしておくと認識の齟齬が生まれにくくなり効果的です。

1. 目的を明確化する

まず、「何のためにWebサイトを制作・リニューアルするのか」といった目的を明確にし、可視化しておきます。

• 誰に対して訴求するのか
• 対象者に何をしてもらうことが目的なのか

目的を明確にしておくことによって、チーム間のコミュニケーションが円滑になり、プロジェクトを効率的に進行できます。

2. ターゲット像を定義する　

次に、Webサイトのターゲットを明確に定義することで、ターゲットへの訴求力が高いWebサイトを制作することができます。

具体的には、「年齢」や「性別」、「職業」などの基本情報だけでなく、「趣味・志向」や「悩み・ニーズ」などのインサイトまで詳細に設定します。

制作会社に依頼する場合、目的や目標はヒアリング時に質問されることが多いので、事前に整理しておくことでプロジェクトをスムーズに進行できます。

リサーチと計画

目標の設定ができたら、ターゲットのニーズや想定される行動動線、競合サイトなどのリサーチを行います。

競合サイトを調査する際は、「Webサイト上で謳っている製品やサービスの強み」や「コンテンツの内容や機能」、「Webサイトの使いやすさ」、「SEO戦略」といったポイントを基に分析します。

こういったポイントを意識することで、自社サイトの強化や差別化のための戦略を立てることができます。

その後、リサーチ結果を基にして具体的な計画を立てます。計画には、「いつまでにWebサイトを完成させたいのか」だけではなく「プロジェクトに関わるメンバーの構築」や「予算」も入れておくと、制作会社も業務を進行しやすくなります。

※市場分析や競合分析に役立つ分析手法を別の記事で詳しく解説しているので、ぜひ合わせてご覧ください。

>>  3C分析とは？ 目的や具体的なやり方をわかりやすく解説

>>  PEST分析とは？事業に影響する外部要因を評価する具体的なやり方

>>  SWOT分析とは？メリットや実践方法をわかりやすく解説

デザインコンセプトや機能要件を決める

ターゲット定義や、競合サイトのリサーチ結果を踏まえて、打ち出していくメッセージや、Webサイトに持たせる機能、デザインコンセプトなどを決めていきます。

まずは発注側と制作会社双方でデザインコンセプトをすり合わせていきます。ユーザーの趣向や行動パターンを考慮し、サイト全体におけるデザインのトーン＆マナーを決定します。

具体的には、大まかなデザインの雰囲気やテーマカラーなどを決めていきます。

目指すデザインに近い雰囲気を持つWebサイトや、ベンチマークしているWebサイトなどをいくつかピックアップし、それらを参考にしながら議論を進めることで互いの理解や認識のズレを小さくすることができます。

次に、ユーザーが求める機能をリストアップし、機能要件の洗い出しを行います。

例えば、会員登録機能やサイト内検索機能、ブログ更新機能。ECサイトであれば、ショッピングカートや商品登録、在庫管理の仕様なども検討が必要になります。

上記の要素をドキュメントなどにまとめ、デザインの方向性や機能要件をあらかじめ関係者と共有しておくことで、この後に作成するページと画像の構成設計がスムーズに進みます。

 要件定義の所要期間：約2~3週間ほど

コンテンツ作成

要件とスケジュールが決まったら、それらの情報を元に訴求力を最大化できるコンテンツを制作会社とともに練り上げていきます。

ページ構成設計(サイトマップ)

ページ構成設計（サイトマップの作成）は、Webサイト全体の構造を視覚化するプロセスです。基本的には制作会社がページ構成をわかりやすく可視化し、原案を元に発注側と制作会社で詳細を詰めていくケースが多いです。

これによりWebサイト全体の構造を把握し、サイト訪問者の大まかな動線設計ができるようになります。

「階層構造」や「ナビゲーションの流れ」、「どのページがどのページにリンクされるか」などの全体構造を作成することによって、ユーザーにとって使いやすいWebサイトを実現します。

画面構成（ワイヤーフレーム）の設計

画面構成図（ワイヤーフレーム）は、「具体的にどの要素をどう配置するか」を決定します。

ページのレイアウトやコンテンツの配置を視覚化するための設計図です。

これにより、各ページのデザイン要素がどのように配置されるかを事前に確認でき、デザインの方向性を共有するのに役立ちます。

ワイヤーフレームの作成時に注意すべきなのが、画面構成とデザインを混同しないこと。

例えば、「具体的な色やフォント」、「写真やアイコンの選定」などはデザインフェーズで行うので、ワイヤーフレームでは「構造」や「機能」を重点において制作を行います。

それぞれの役割を適切に区別することが重要です。

 サイトマップ・画面構成設計の所要期間：約2~3週間ほど

デザインと開発

目的を定め構成設計を行った後は、デザイン作成と開発業務に入ります。

デザイン

デザインフェーズでは、ブランドの個性を反映し、ユーザーが使いやすいと感じるデザインを作ります。

この段階で初めて実際のWebサイトの見た目を決めていきます。

これには、要件定義段階で決めたトーン＆マナーに沿って色の組み合わせや文字フォント、画像などを選定し、全体のデザインを作成する作業が含まれます。

一般的な流れでは、まず最初にトップページのデザインを作成し、発注者に確認してもらいます。この段階で細かいレイアウトのルールをすり合わせていきます。

トップページのデザインが固まったら、続いて下層ページのデザインページのデザインに進みます。

この流れをとることで、デザインの方向性が早い段階で確定し、作業が手戻りなくスムーズに進みます。

デザイン工程での注意点

1. 発注側の社内でもデザインのイメージを設定しておく

デザインのゴールを持たずに制作会社に任せると、望まない方向性のデザイン案を受ける可能性がありますし、ゴールが決まっていないので「なんとなく違う」という曖昧な理由で何度も修正依頼をするリスクも生まれます。

最終的には時間とコストの無駄に繋がることがあるので、競合サイトを見たり、いろいろなWebサイトを確認したりして、完成イメージに近い参考サイトを用意しておくと円滑に進行できます。

2. プログラム開発に着手する前にデザインを確定させる

デザインが完成したら、次はデザインに沿ってプログラム開発を行います。

ここで、発注側が注意すべきなのは、変更や追加が生じた場合のスケジュールや予算への影響です。デザインが確定しないうちに開発を進行すると、変更が生じた際に進行が遅れたりコストが増加する可能性があります。

デザインの詳細なレビューを行い、ビジュアルと機能がデザイン通りに実装されているかを確認することが重要です。

デザイン制作の所要期間：約4〜6週間ほど

フロントエンドコーディング

フロントエンドコーディングは、レイアウトやアニメーションなどユーザーが直接見たり、操作をしたりする部分の開発工程です。具体的には、HTMLやCSS、JavaScriptといったプログラミング言語を用いてデザインをブラウザ上で表示できるようにし、動きのある要素を追加します。

Webサイトを見ている人の端末で動くプログラムのため、クライアントサイドプログラムとも呼ばれます。

バックエンドコーディング

バックエンドコーディングは、会員情報や購買情報などを管理するデータベースの開発や、それらの情報を呼び出して計算処理するプログラム開発のことをいいます。具体的には、PHPやJavaScript、Python、SQLなどの言語を使用します。

Webサイトが設置されているサーバーの中で動くプログラムのため、サーバーサイドプログラムとも呼ばれます。

フロントエンドとバックエンドは、フロントエンド開発がある程度進んでから、バックエンド開発に着手するケースと、同時に着手するケースがあります。

開発工程では、制作会社が最も効率的に進行できる段取りを組んでくれますが、発注者側も流れを理解しておくことで、プロジェクトの進行状況を把握しやすくなります。

インフラの準備

インフラの準備では、サーバーの選定と設定やドメインの取得と設定などを行います。

サーバーは「Webサイトのデータを保存して表示させるためのコンピューター」

ドメインは「インターネット上におけるWebサイトの住所」にあたります。

その際、注意が必要なのが「サーバーやドメインの取得は制作会社が行うのか」、「発注側が担当するのか」など業務スコープを事前に決めておくこと。これらの準備は要件定義のフェーズで取り掛かることをオススメします。

また、サーバーの種類やスペックはWebサイトの規模や必要な機能、セキュリティ要件に応じて異なるため、Webサイトの規模や必要な機能に合わせて、最適なサーバー設定を早めに整える必要があります。

コーディング・インフラ整備にかかる所要期間：約4〜6週間ほど

テストと公開

インフラの準備まで終了したら、完成したWebサイトをテスト用のサーバーにアップロードしてテストを行い、必要に応じて修正を加えリリースとなります。

テストと品質保証

テスト段階では「画面に崩れがないか」や「リンク切れがないか」、「Webサイトが正しく動作しているか」などの検証を行います。通常、制作会社がテスト用のサーバーに仮リリースをして、確認します。

テストは大きく「見た目のテスト」と「機能のテスト」の2つに分かれます。

表示チェック

表示チェックは、パソコンやスマートフォン、タブレットなど異なるデバイスで表示した際に、表示崩れや動作不良が起こっていないかを確認する作業です。

スマートフォンやタブレットの実機での確認に加え、PCでブラウザの幅を縮めたり、広げたりしてレイアウトの崩れを確認します。

また、PCであればWindowsOSとMacOSでそれぞれ確認し、ChromeやSafari、Edge、Firefoxなど、スマートフォンであればiPhoneとAndroid端末など様々な画面で確認をします。

表示チェックは制作会社だけではなく、発注側でも様々な端末で確認を行うことで、より多くの問題点を発見し、修正することができます。

機能チェック

機能チェックは、実装システムが設計通りに動いているかを確認する作業です。

例えば、「リンクやナビゲーションメニューが正常に動作するか」や「お問合せフォームが正しく送信されるか」、「ボタンやメニューが正しく機能するか」を確認します。

表示チェック同様、発注者側でもチェックし、制作会社が気づいていない不具合はフィードバックした方が最終的に質の高いWebサイトに仕上がります。

Webサイトの公開

テストが完了したら、Webサイトを公開用サーバーにアップロードし、ドメイン設定を行います。

公開後も定期的にメンテナンスやアップデートを行い、サイトを最新の状態に保つことが重要です。「セキュリティの更新」や、「コンテンツの追加」、「古い情報の削除」などを行います。

また、ユーザーのフィードバックを受け入れ、必要に応じて改善を続けることで、より良いユーザー体験を提供し続けることができます。

テストと公開作業にかかる所要期間：約3週間ほど

まとめ

この記事を通じて、Webサイト制作の基本的な流れについて解説してきましたが、いかがだったでしょうか。

Webサイト制作は多くのステップと細かい作業が必要ですが、各ステップをしっかりと理解し、計画的に進めることで効果的にリニューアルを進めることが可能です。

計画段階からメンテナンスまで、一つ一つのステップを丁寧に行うことで、よりよいユーザー体験を提供し、企業の信頼性やブランド力が伝わるWebサイトに仕上がります。

「Webサイト制作の流れをもっと詳しく知りたい」

「具体的な要件定義の方法がわからないので専門家にリードして欲しい」

「Webサイトリニューアルの費用対効果を最大化したい」

そうお考えの企業様は、ぜひ一度アライブへご相談ください。

豊富な実績と経験を持つ弊社Web制作チームが貴社の現状を詳しくお伺いして、適切なアドバイスの元、お客様の真の成果につながるWebサイトリニューアルを実現いたします。

最後まで、お読みいただきありがとうございました。

>> アライブにWebサイト制作の相談をする

>> アライブが提供するサービスを見る