💡そもそもWeb制作とは？を全体的に解説した記事はこちら
こんにちは、Webディレクターのリリィです。
初回のMTGでお客様から聞かれることランキング1位の質問に「この情報はいつまでに用意が必要ですか？」という質問があります（弊社調べ）。
やはり、皆様いつまでにどんなものが必要になるのか大体把握しておきたいですよね。そこで今回は制作会社で実施することが多い流れをご紹介します！
もちろん、サイトの種類や規模、担当のディレクターによって異なる前提ですが、おおよそのサイト制作の進め方（要件定義後）といつまでにどんな情報や素材が必要となるのか、参考にしていただければと思います。
要件定義以前の全体の流れについてはこちらの記事を御覧ください！
目次
前提条件
とはいえ、ある程度の前提がないとわかりづらいので今回は以下のスコープでWordPressを使用した一般的なコーポレートサイトを制作するものとしてみます。
- ヒアリング、要件定義
- ワイヤーフレームの作成
- デザインコンセプト、デザイン作成
- サーバー構築
- WordPress機能の設計、構築
- フロントエンド開発
- リリース作業
それでは具体的な工程をみていきます。
Webサイト制作の流れ 要件定義〜リリース後の対応
細かく区切っていくといくらでも区切れてしまうので、ここでは大きな作業グループで挙げてみます。
1.要件定義
要件定義フェーズでは、ざっくりいうと「どんなページが必要か、どんな機能が必要か」という骨組みを決めていきます。そのため、この段階で決まったことを後から変更することは基本的にはできないと考えて判断するのが吉です。
また、要件をきっちり決めてみたら、当初の概算見積費用より費用が増えてしまった！ ということも大いにありえるので注意が必要です。
具体的には、決めることは下記の通りです。
- 制作のゴールをお客様、制作メンバーで共有
- URL、サイトマップの確定
- ワイヤーフレームの作成
- 想定している機能の定義
これらに沿ってデザインや機能をつくっていく前段階まで持っていきます。
- この段階で用意できるといいもの
- プロジェクトのゴールとなるKGIなど数値目標、参考サイト情報、想定している機能の業務要件、など
2.インフラ環境構築
Webでインフラ？？ と一瞬戸惑いますが、簡単にいうとWebサイトを置く場所であるサーバーや、Web上の住所となるドメインに関することを総称してインフラと呼んでいたりします。
利用するサーバーの種類によって、この工程がいつまでに必要か異なるため一概に言えませんが、余裕があれば開発作業の着手と並行して準備を進められるといいでしょう。
- この段階で用意できるといいもの
- ドメイン情報、公開予定となるサーバー仕様（OSの種類とバージョン、DBの種類とバージョンなどなど）、利用予定サーバー（AWSやさくらVPSなどなど）のアカウント、お名前.comなどのドメイン管理のアカウント
3.機能開発
要件定義で作るものが決まったら、お問合せフォームやWordPressの管理画面から編集可能な動的な部分の開発を進めます。
LIGではワイヤーフレームが決まり、どんな機能が必要か明確になった段階でデザイン作成と並行して進むことが多いです。この段階ではあくまでシステムを作成し、Webブラウザ上の「見た目」は再現しないので、デザインが出来上がる前に着手が可能になります。
ちなみにWordPressなどCMSを導入せず、完全な静的サイトであればこの工程は存在しません。
- この段階で用意できるといいもの
- お問合せフォームがある場合は自動送信メール用の文面や宛先、SMTP（メール送信用のサーバー情報）
4.デザイン作成
完成したワイヤーフレームに沿ってデザイン作成を開始します。
まずは、ヒアリングさせていただいた情報に基づいてトンマナのご提案から、トップページ全体のご提案へと進んでいきます。お客様側でもデザインの確認タスクが随時発生してくるので、密にコミュニケーションを取りながら進めます。
特に制作するページ数が多い案件では、機能開発やフロントエンド開発と一部並行することもあります。
- この段階で用意できるといいもの
- ページ内で使用する画像、イラスト素材、原稿情報、Adobeフォントなど使用にライセンスが必要なものがあればそのアカウント
5.フロントエンド開発
ようやく、デザイン通りの見た目をWebブラウザ上で表示するための工程にやってきました。フロントエンド開発まで進んでくると、ここまでに色々と決めてきたことを粛々と作っている段階なのでお客さまへの確認事項はグッと減ってくることが多いです、
ページが多くなる場合は、まとめてテストアップの途中経過で進捗を確認しながら進んでいきます。また、ソースコード上で埋め込みが必要な情報はこの時点ですべていれていきます。
- この段階で用意できるといいもの
- GoogleTagManagerなどの計測タグ、Google Maps API等各種APIキーなど、外部リンク一覧（外部サイト、SNSなど）、メタ情報（インターネット上でページシェアされた時に表示される説明テキストなど）
6.各種テストと修正
すべてのページのフロントエンド開発が完了したら、いよいよWebサイトとして表示確認ができるようになります。
お客様の確認前にLIG社内で、「要件通りの動作をしているか？ デザイン通りに表示されているか？ 閲覧するブラウザによって表示崩れが発生していないか？」などすべての機能及び表示のテストを実施します。
不具合があった場合（というか、基本的に何かしらある）その分の修正までをこの工程で完了させます。
7.お客様検収
長かった開発期間もついにあともう少しです。LIG社内で開発とテストを完了したWebサイトは、今度はお客様社内でのチェックにまわります。
ここで、デザイン、機能要件、クリックした時の遷移先や挙動など、注文した通りのものが出来上がっているかを確認いただきます。大規模サイトであればあるほど確認にも時間を要する大事なフェーズです。
最後の確認期間となるので、間違いなく要件通りのものが出来上がっているかしっかり確認します。ちなみに検収の際に修正が必要な箇所があった場合の修正期間も、考慮に入っているのでご安心を。
8.リリース
お客様の検収も無事終わると、あとは本番環境へのリリースのみです。LIGで実施する場合は、事前にリリース当日の作業スケジュールをお客様とご相談し、万全の体制で臨ませていただいております。
リリース直後には、全ページが反映されたかどうかの確認や、Google Analyticsなど計測タグを埋め込んでいる場合は、正しく計測が動作しているかなどをご確認お願いすることもあります。
9.リリース後
さてWebサイトはリリースして終わりではありません。これでようやくスタートラインに立ちました。サーバー代や、掲載コンテンツの情報更新などランニングコストの想定も必要です。
自社リソースでリリース後の運用を回していくのか、保守作業を外注するのかまで、考えておきたいところです。もちろんLIGでも、リリース後の保守運用まで承っております。
まとめ
今回のケースはあくまで一例なので、これが正解というものでもありませんがかなり理想的に進んだ場合の流れです。
この通りに進まないことももちろんありますし、素材や各種情報が揃わない場合にも柔軟ご支給スケジュールは調整できることが多いのでご安心ください。
どんな工程があり、いつどんな情報が必要となるのかのイメージがつけば幸いです。
弊社LIGではWeb制作・リニューアルはもちろんのこと、完成したサイトの運用保守やメディアのコンサルティングまで一気通貫で対応可能となっております。
2007年創業で年間150サイトリリース、毎年複数のデザインアワードを受賞するデザイン力と提案力で、貴社のビジネスをグッと伝えるお手伝いをさせていただいております。ぜひお気軽にご相談ください！
