Web制作プロセス

Web制作においては、誰もが従うべき標準プロセスは存在しませんし、フェーズやタスクなどの名称も統一されているわけではありません。Web制作を請け負う会社あるいは個人で、「こんな感じ」とそれぞれ定義し従っています。

実際のところ、制作するサイトの特徴や状況によって異なるプロセスになるのは当然ですし、制作する人間も自分がやりやすいプロセスというのはそれぞれ違います。

大切なのは、Webサイトが完成するためのタスクを漏れなく定義していること。そしてそれらのタスクが効率的な順番であることです。

ここで示すプロセスも実際の案件では99%その通りにはなりません。ケースバイケースで追加・省略・順番入れ替えを行い変更しています。
変更の観点は先ほど示したように、「漏れなく」「効率的」です。

また自分のサイトを制作するならともかく、クライアントから案件を獲得するには制作に入る前にセールス活動が必要ですし、それに伴うタスクも発生します。
公開後もたいていのサイトでは保守・運用が必要で、複雑な運用を行うなら制作中から考慮すべき点も多くなります。

とはいってもベースとなる「平均的なプロセス」を持つのは重要ですので、それを今回示します。ただし営業的なタスクは省いていますし、チームメンバーや外注をコントロールするプロジェクト管理的なディレクションタスクも省いています。それら関係者とのコミュニケーションに関するタスクは別途定める必要があります。

プロセス概要

下図は Web制作プロセスを図示したものです。

制作プロセス自体は、「調査・企画フェーズ」から始まり、「クロージングフェーズ」で終了します。
そして制作を開始する前には案件獲得のための「セールスフェーズ」があり、クロージングした後には「保守・運用フェーズ」があります。保守・運用フェーズではサイトリニューアルのために役立つ情報を収集し、次のセールスへとつなげていきます。

また最近は、CMSや各種フレームワークを利用して制作する頻度が多いため、「CMS構築フェーズ」を設け、そこでは WordPress で制作する手順を説明します。

Web制作プロセス図

このプロセスで注意する点は以下です。

  • 図にも示していますが、それぞれのフェーズでのアウトプットを明確にします。ドキュメントやコードなどがアウトプットになりますが、それらを以降のフェーズで活用しますので、アウトプットの完成がフェーズ終了条件となります。
  • コンテンツ制作(文章・写真・動画などの準備)は今回対象としていません。Web制作では、実は入れ物ではなく内容、つまり「コンテンツ」を準備することが最も重要です。
    実際の案件では、コンテンツ制作はクライントタスクとする場合も多いのですが、その場合でもきっちりと計画し適切なタイミングで提供してもらう必要があります。
  • サイトによっては、大規模なプログラム開発が発生することもあります。それに伴うフェーズは含めていません。大規模プログラム開発は別途計画する必要があります。
  • Webサイトを公開するにはサーバーが必須です。またデータベースを利用するサイトが最近では増えています。それらの構築もプロジェクトに含まれる場合がありますが、今回は対象外です。サーバーやデータベースはあらかじめ用意されているものとします。

各フェーズの概略説明

調査・企画

制作プロセスの最初のフェーズです。制作するサイトに関する必要な調査を行い、プロジェクトの企画を行います。
このフェーズでは、何を制作するか(What)と、制作条件(Terms and Conditions)をクライアント要求を基に明らかにします。そして、デザインや仕様の具体化(How)を以降のフェーズで行います。

サイト設計

サイト全体に関わる設計を行います。サイト全体の階層とページ構成、掲載するコンテンツの詳細、使用するサーバー情報を決定します。
ビジュアルデザインは次のフェーズから行ないますが、ここではそれを進めるにあたっての条件を決めます。またコンテンツを準備する具体的な計画もこの段階で決める必要があります。

画面設計

各UIパーツ・エリアの寸法を規定し、レイアウトを決定します。
レイアウトを示すものとして、ワイヤーフレームを作成します。

デザインラフ

ビジュアルデザインの詳細フェーズです。各UIパーツのカラーや装飾をデザインし、1枚のデザインカンプとして表現します。
なお、デザイニング・イン・ザ・ブラウザ(Designing in the Browser)という手法を使う場合は、デザインカンプを作成せず、最低限の画像だけ用意してブラウザ上で直接デザインします。

実装設計

コーディングを行う前段階として、仕様を整理し準備するフェーズです。コンテンツのみならず、titleタグなど HTMLコードに必要な情報をページ毎に決定し、骨格となる HTMLファイルと CSSファイルを作成します。
また、動的要素がある場合は JavaScript などのプログラムが必要となりますので、その仕様を作成します。

コーディング

開発環境を構築し、実際のコーディングを行います。
CMSを利用する場合でも、まずは通常の HTMLで記述し表示や動作を確認します。ただしその場合、コンテンツは仮置きでよく、トップページと代表的なサブページのレイアウトが Fixするところまでコーディングします。

CMS構築

CMSを利用する環境を整え、HTMLコードを CMSを利用するコードに置き換えていきます。
コンテンツは CMSの管理画面から入力するとデータベースに格納されますので、それを引き出すコードを記述していきます。
利用する CMSによって構築方法は異なりますので、それぞれの手順に従います。今回は WordPress による手順を紹介します。

テスト

ある程度のテストはコーディング・デバッグと並行して行いますが、一旦サイトが完成した後に確認のためまとめてテストを行います。
テストはコーディング担当者以外の者の協力を得て行う場合もあります。

サイト公開

実際の公開を行う本番環境にサイトのセッティングを行います。
開発環境をどう構築するかで、このフェーズでの作業は異なります。本番環境上で開発している場合は、簡単な公開設定だけすれば良い場合もありますし、ローカルに全く別の開発環境を構築している場合はそれなりの手順が必要です。

クロージング

ひととおりの確認が終わり、OKとなったところでプロジェクトをクロージングします。
Webサイトは問題なく制作し公開できれば良いというものではありません。次につなげるためにも「まとめ」をしっかりと行います。

保守・運用

本来は制作プロセスから外れますが、Webサイトは作るよりも運用し改善するほうがより重要だと私は思っていますので、1つのフェーズとして載せました。

Web制作プロセス

調査・企画

サイト設計

画面設計

デザインラフ

実装設計

コーディング

CMS構築

テスト

サイト公開

クロージング

保守・運用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ