Webサイト制作の流れ(練習問題)

WEBディレクションの修練場では、Web制作の現場で起こるさまざまな課題をこなしながらWebディレクションスキルを磨いていただきます。

今回はWebサイト制作の流れ。

見積もり時にスケジュール表を作ったり、クライアントと素材提供やチェックバックのタイミングについて認識合わせをしたり、プロジェクトの現状把握をするためなど、Webディレクションをする上での基礎知識になります。

演習を通してしっかり把握しておきましょう。

お題

クライアント:「新規のWebサイト制作をお願いしたいんだけど、全体の流れとスケジュール感を教えて欲しい」

【今回のお題】
Webサイト制作の流れとスケジュールを伝える。

ヒント

Webサイト制作の基本の流れを伝えましょう。
スケジュールについては、クライアントとページ数など具体的な打合せはできていない状況なので、10ページから30ページくらいのWebサイトを作ると仮定して各フェーズの大まかな所要期間を伝えます。

回答例

10〜30ページくらいで構成されるWebサイトのスケジュールを作っていきましょう。
Webサイト制作は基本的に次の順に進みます。

0.見積もり
1.企画
2.設計
3.デザイン
4.構築
5.公開

順番に説明します。

0. 見積もり

見積もりフェーズでは、クライアントからWebサイト制作の依頼を受けたら、予算や納期、サイトの規模、システム要件などの要望を具体的にヒアリングして、概算見積もりとスケジュールを提示します。

  • 予算・納期・ページ数・システム要件などをヒアリング
  • 概算見積もりの提出
  • 概算スケジュールの提出

予算感、スケジュール感などの条件でクライアントOKが出れば、受注となります。

(所要期間:1週間程度)

クライアントの社内稟議を通す時間がかかったり、相見積もりしていることも多く、見積もり提出から返事が来るまでに1か月以上待つこともあります。

受注したら、いよいよ本格的に企画からスタートです!

1. Webサイト企画

Webサイト企画フェーズでは、目的の確認、ゴール設定、ターゲット・ペルソナ設計、調査、コンセプト決定、開発の有無などを行います。

  • 目的の確認、ゴール設定
  • ターゲット・ペルソナ設計
  • 市場調査
  • サイトコンセプトの決定
  • CMS導入や開発の有無などの要件定義

このフェーズでは、今回のWeb制作の目的を明確にして、入念なリサーチからのターゲットにハマるサイトコンセプトを作ることが大事です。
お問い合わせフォーム、予約フォーム、購入カゴ、決済方法、会員登録・ログイン機能など、システム開発が必要な箇所についても改めて確認します。

(所要期間:1~2週間程度)

クライアントと企画内容のすり合わせが取れたら、Webサイト設計フェーズに移ります。

2. Webサイト設計

Webサイト設計フェーズでは、サイト構造、ページ構造、システム設計、サーバー環境の確認、UI/UXや導線の設計などを行います。

  • サイト構造:サイトマップの作成
  • ページ構造:ワイヤーフレームの作成
  • システム設計:システム仕様書の作成
  • サーバー環境の確認:ドメイン、サーバーの情報確認

この設計フェーズはかなり大事です。
特にサイトマップはサイト全体のページ数が決まりますし、ワイヤーフレームは次のデザインフェーズに繋がるため、クライアントとしっかり認識合わせをすることが大事です。

(所要期間:1~2週間程度)

ワイヤーフレームが固まったらデザインフェーズに移ります。

3. Webデザイン

Webデザインフェーズでは、作成したワイヤーフレームを元に、サイトコンセプトに合うデザインを作成します。

ページに使うフォント、装飾、配色、写真やイラストなどの素材のテイストなど、ページのトンマナを意識してデザイン案を作ります。

デザイン案は、まずは2~3パターン作って、クライアントと世界観や雰囲気、方向性の確認をしながら仕上げていきます。

デザインがFixすれば(デザインカンプができれば)このフェーズは完了です。

(所要期間:1週間~1か月程度)

デザインカンプの完成をもって、続いて構築フェーズに入ります。

4. 構築

構築フェーズでは、まずはテスト環境でWebサイトを作っていきます。

Webサイトを構成している、WebページのベースとなるHTMLファイル、デザインファイルCSS、動作を付けるJavaScriptファイル、システムを作るPHPファイルなど、言語ごと、機能ごとにコーディングします。

ユーザーの操作画面など目に見える部分の構築をフロントエンド開発、ユーザーが見えないシステムの構築をバックエンド開発といいます。

フロントエンド開発、バックエンド開発は並行して行われ、フロントエンドが得意なA社、バックエンドが得意なB社という具合に会社を分けて制作するパターンもあります。

テスト環境での構築が終わったら、デザインの表示確認、動作テストをして、問題がなければクライアントに提出してチェックしてもらいます。

制作者側とクライアント側の双方の確認が取れて問題なければテスト環境での構築は完了です。
公開に向けて納品ファイル一式を準備します。

(所要期間:1週間~1か月程度)

5. 公開(リリース)

クライアントとスケジュールを決めてWebサイトを公開します。
公開後は制作サイドとクライアントサイドで問題ないか、すぐに確認を行います。

万が一不備があった場合は、その場で修正対応できるようにして公開作業に臨みます。

僕の経験上、公開直前にメインビジュアルに修正原稿が入った、公開直後にテキストの不備が見つかりすぐに直して欲しい、ブラウザでのデザインが崩れている(特にIEで多い)などの対応はつきものです。
デザイナー、エンジニアの予定の確保は確実にしておきましょう。

(所要時間:1日程度)

まとめ

今回は10〜30ページくらいのWebサイトを想定してスケジュールを考えました。

0.見積もり(所要期間:1週間程度)
1.企画(所要期間:1~2週間程度)
2.設計(所要期間:1~2週間程度)
3.デザイン(所要期間:1週間~1か月程度)
4.構築(所要期間:1週間~1か月程度)
5.公開(所要時間:1日程度)

Webサイト制作の流れ

※全工程を盛り込んだ、概算スケジュールが完成しました

これをたたき台としてクライアントに提出して、細かい内容を詰めていきましょう。

おつかれさまでした。

Webサイト制作の流れについての補足

Webサイト制作の基本の流れは今回紹介した通りですが、公開日までの時間がないなどの理由でこの通り進まないこともあります。

企画・設計だけ担当するパターン、デザイン作成からのパターンや、デザインまでできてるので構築だけお願いされる、というパターンもあります。
今回は新規サイトの作成でしたが運用案件だと、企画・設計がなくてデザイン・コーディング作成のみ、ということもあります。

また、当たり前ですが、どれだけこだわるかによって各工程にかかる所要期間は大きく変わります。
企画にこだわって3か月かかった、デザインにこだわって2か月かかった、会員登録システムの構築が複雑で半年かかった…など。
現場ではよくある話です。

状況によってケースバイケースということです。

臨機応変さが何よりも大事です。

【無料】WEBディレクションの修練場(練習問題でスキルを磨く)
WEBディレクションの修練場は実戦形式でWebディレクションスキルを磨いていただくためのコンテンツです。全て無料、回答付きです。