Webサイトの制作工程。オリエンから公開までの流れ。【ワークフロー】

2021年06月26日 2022年01月07日

東京のWeb制作会社でプロデューサーをしています。
これまで数々のWebサイトの制作に携わってきました。
今回はWebサイト制作会社の現場の責任者である私が、Webサイトの制作ってこんな感じに進みますよ、ということを現場からの声ということで紹介しようと思います。ではいきましょう！

Webサイトの制作工程には戦略策定工程が必須。

ちなみに、Web制作の進め方に関する記事はそれなりに数出ていると思います。

そこでよく見るものは、
「オリエン、企画、デザイン、開発、テスト、公開」といったステップです。

ただ、これ、「戦略策定」「設計」「コンテンツ作成」という概念が抜け落ちてます。
そういったことを踏まえて整理してみましたのでお付き合いください。

当記事は関連する記事の目次も兼ねたものにしようと思っていますので、不定期で更新をしていこうと思っています。

0. 提案・概算見積

まず発注してもらうための活動が必要。

これは・・・工程の中に入れようか迷いましたが、新規プロジェクトの場合、必ず入る工程なので入れておきます。見込みのクライアントからいただく連絡は「コンペの参加依頼」「概算見積依頼」「とりあえず話聞いて」など様々です。

これらを踏まえて、Web制作会社は提供できる範囲のものを準備します。
受注のためにどこまで労力を掛けるかは都度営業判断がされます。
コンペなどは特に対応が難しいです。提案書、デザインなどきちんと作ると3週間とか1ヶ月とか普通に日数を要しますからね。（コンペとなる場合は、ぶっちゃけ以下の「戦略策定」「デザイン」までのことをかいつまんでやれる範囲でやります。（もちろん全部はできませんが。）

概算見積を作る場合、実際制作スタートしたら思っていたものと違ったということが無いように、最低想定のコンテンツマップは作成します。

提案・概算見積の関連業務内容

オリエンテーション
ヒアリング
企画提案書
概算見積

1. 調査・分析

クライアントを知らずにWebサイトは作れない。

プロジェクト受注後は、まず、クライアント理解に努めます。
具体的には・・・

リニューアル対象のWebサイトの課題
クライアントの課題
クライアントが提供するサービス内容
ターゲットユーザーの課題とクライアントが解決できること

といったことを整理します。

調査・分析の関連業務内容

クライアントからのヒアリング
クライアントの営業資料理解
現状サイトコンテンツリスト作成
ネット記事調査
サービスを実際に体験
アクセスログ調査

2. 戦略策定

何のためのリニューアル？そのために何を変えるのか？

調査・分析が済んだら、それをどのようにWebサイトという形に落とし込むかを整理します。画面単位ではなく、必要なコンテンツや機能を整理して、それをユーザーニーズとどうつなぎ合わせるかを整理するイメージです。

「これ必要」「これ不要」「ここにランディングしたユーザーは次はここ見てもらう」そんなことを考えながらユーザーの回遊導線をイメージしつつWebサイトの全体像を定義します。
それを実現するためのプロジェクト計画もここに含みます。

戦略策定の関連業務内容

ターゲットユーザー設定（ペルソナ策定）
カスタマージャーニーマップ定義
既存コンテンツ精査
必要コンテンツ洗い出し
コンテンツマップ定義
ハイレベルサイトマップ定義
導線設計
要件定義（機能要件、非機能要件）
連携サービス選定
サイト基本仕様策定

戦略策定の関連記事

3. プロジェクト準備・環境準備

リソースを準備し、段取る。

実際制作を進めるとなると、人、モノ、カネ、時間など様々なものが必要になります。前フェーズで立てた戦略を元にそれらを準備します。必要なものが手配・準備できたら、Webサイトの公開までに誰がいつまでに何をするのかを計画します。サーバ環境は後回しになりがちですが、公開前に慌てて準備するとクリティカルな問題を引き起こしかねないので、早めに準備することをお勧めします。
見積書作成がここにあることに違和感を覚える方がいるかもしれませんが、戦略策定が完了したら改めて確定見積を準備すべきです。当初の概算見積から色々条件変わっていることもあるでしょうから。

プロジェクト準備・環境準備の関連業務内容

サーバ準備（開発環境、ステージング環境、本番環境、サーバ証明書設定含む）
ドメイン取得、設定
継続サービスの引き継ぎ
連携サービス契約、設定
プロジェクト計画
タスクの洗い出し（WBS策定）
見積書作成

プロジェクト準備・環境準備の関連記事

4. 設計

機能、表示要素、UI、必要なコンテンツを定義する。

私がWebサイトの制作において最も重要と思っている工程です。
ここで、戦略策定で定義したものを元に、具体的にページ単位で機能を落とし込みます。
とはいえ、BtoBのコーポレートサイトなどはある程度決まった「型」のようなものがあります。コンテンツも概ね、会社情報、強み、サービス、イベント・セミナー、事例、採用情報、このあたりに落ち着くことが多いですから。なので、毎回全くゼロからスタートというわけではなく、そういった型を使ってスタートすることがほとんどです。手を抜いてるんじゃなくて検討のスタート地点を先にしている感じです。

設計の関連業務内容

画面設計・UI設計
CMS機能設計
システム機能設計
サイトマップ整理
コンポーネント定義
コンテンツ設計（キーワード、集客ポイント）
リダイレクトリスト作成

設計の関連記事

5. ベースデザイン・ベースコーディング

主導線のUIとページの型を定義する。

コーポレートサイトのページ数ですが多いものだと、数千ページに及ぶものもあります。しかし、その全ページについて、デザイン、コーディングするわけではありません。ほとんどの場合、まずベースとなるものを作り、それを元に横展開します。ここで質の高いものを作れると、後での修正があっても少ない労力で対応できます。

ベースデザイン・ベースコーディングの関連業務内容

トップページデザイン
下層主要ページデザイン
デザインルール定義
コンポーネントデザイン定義、整理
ベースコーディング

ベースデザイン・ベースコーディングの関連記事

6. コンテンツ準備

具体的な掲載内容を準備作成します。
ここは制作側で完結するわけではありません。
クライアントから提供してもらうものもありますし、取材を通して書き起こすものもあります。ただ、どのくらいのテキストボリュームが必要か、ユーザーニーズ踏まえたターゲットキーワードをどのように含めるか、等、制作側からのリーディング・サポートが必要になるところでもあります。

コンテンツ準備の関連業務内容

取材・撮影・原稿作成
編集
翻訳
画像パーツ制作
イラスト書き起こし

コンテンツ準備の関連記事

7. 開発

主にサーバサイドで処理したり、外部サービスと連携するなど、バックエンドのプログラマーが開発を行う部分です。設計フェーズで定義した機能設計を元に行います。

開発の関連業務内容

CMSテンプレート開発
システム開発
サービス連携

8. テスト

テストは公開前にやるという記事を見ますが、実際はもっと前です。CMSの開発などが入る場合、データ投入前にテストは完了している必要がありますからね。

テストの関連業務内容

実装テスト（計画・実施・結果反映）
受け入れテスト

9. コンテンツ移行・公開準備

コンテンツ移行・公開準備のステップでは、実際の公開後の運用を見据えた、データ投入作業などを行います。先ほど申しましたように、規模の大きなコーポレートサイトだと数千ページを超えることがあります。ベースとなるページは50ページくらい、残りのページは全部CMSで投入ということもあるわけです。なので、このコンテンツ移行のステップにはそれなりの時間が必要です。
Web制作会社が全て行うわけではなく、クライアントにCMSの利用法を説明し、クライアント側でデータ入力してもらう、ということもあるでしょう。あと、制作中に公開前に移行対象と想定されていたコンテンツに更新が入っていることがあります。制作着手時のデータ、サイト公開前の既存サイトのデータの差分を取り、その差分情報を、最終的なページデータに反映させましょう。

コンテンツ移行・公開準備の関連業務内容

CMSデータ投入
コーディング展開
CMS操作手順レクチャー
公開計画
TTL短縮設定
差分抽出・反映

10. 公開

公開作業の方法も複数あります。
ほとんどの場合は、新サーバにDNSを切り替える形が多いです。
ただ、公開作業そのものはデリケートな作業です。
一歩間違うと「事故」になりかねませんから。
認証はいつ誰が外すのか、公開後の表示確認かいつから始めていつ終わる予定なのか、新システムとの疎通テストはどうするのか、等、多くのチェックポイントがあります。

公開の関連業務内容

DNS切り替え
公開後表示確認、動作確認
公開通知・アナウンス

公開の関連記事

Webサイトの制作工程。「戦略策定」「設計」「コンテンツ準備」は大事ですよ。

世の中にはWebサイトの制作手順のような記事がそれなりにアップされていますが、個人的には結構いい加減だと思っています。デタラメと言ってもいいかもしれない。
もちろん受注の仕方、サイト規模とかにもよるとは思いますが、大きな違和感を感じるポイントは「戦略策定」「設計」「コンテンツ準備」
という工程が抜けがちだということです。
内容を変更しないデザインリニューアルであればそういうこともあるかもしれません。しかし、ほとんどの場合、導線、機能、コンテンツ、そういったものを見直して、現状のWebサイトよりも成果の出るWebサイトにするためのリニューアルであるはずです。そうなると、そこの検討フェーズが必ず入るのです。あと、Webサイト制作は制作会社だけで完結するわけではありません。

「どういう情報を掲載するか」「どのように情報を追加するか」「どのようにチューニングするか」は多くのユーザーが検索を介してWebサイトに訪問している現状においてとても重要です。

そこはクライアント側にも時間を取って協力してもらう必要があるので、工程として押さえておくべきです。

Web制作の進め方もWebサイト制作の業界が成熟していくにつれて変わっていると思います。連携する会社やサービスも多くなっています。
私たちはそういう変化に応じ、柔軟に対応しながら、最終的なクライアントのビジネス課題を解決するWebサイトにできるように尽力しないといけないと思います。