Webディレクターをこころざしている人、もしくはWeb担当者になり新たにWebサイトを作るとなった際、実際にどのようにして制作が進むのか不安になることも多いでしょう。

Web制作における工程は、そのプロジェクトによりけりな部分もありますが、大枠を覚えてしまえば難しいことはありません。

今回は、Web制作に携わる方なら押さえておきたい、Web制作の工程を詳細に説明していきます。

1.要件定義をする

Web制作のフェーズに入る上で、まず取り掛かるのが要件定義です。要件定義では、プロジェクトで実現したいことを定義し、必要な機能やサイト制作全体の方向性を決定します。なぜプロジェクトが立ち上がり、ゴールをどこにするのかといった筋道を、改めて定義するフェーズでもあります。

今後の工程に関わるあらゆる前提条件を要件定義にて漏れのないように決定し、手戻りのないようにしていくことが重要です。

作業のスコープを決める

制作に取り掛かるに当たって作業のスコープを決めていく必要があります。発注側、制作側それぞれにおいて、誰が何をどこまで担当するかを細かく決めておきましょう。

定例ミーティングのスケジューリングから、何を持って納品とするかなど、後々揉めそうな事柄は全てこのフェーズで細かく決めておきましょう。

ドメイン、サーバー周りの環境を確認する

Web制作、開発を行う上で非常に重要な前提条件が、サーバー周りの環境です。最終的に制作するサイトを設置する環境は、確実に事前に確認しておきましょう。

場合によってはサーバーのバージョンが古過ぎるため、開発したものが本番環境で動かないといったトラブルも発生します。

また、ドメインはどこにおくのか、新たに取得する場合はどちらが取得するのか、などを決めておくことも非常に重要です。

大枠の戦略

大きな枠組みでは、サイトで実現するゴール、サイトのターゲット層・ペルソナなどの全体に関わる戦略などを定義していきます。

「サイトのターゲット層は40代男性」と定義していれば、その後のデザインのフェーズでピンクの可愛らしいデザインになることはありません。サイト全体のトンマナを決めていく上でも非常に重要な工程です。

また集客戦略を話し合う上でWebならではのSEO対策について、必要な対策を定義する場合もあります。SEOに対してどこの範囲まで対応するのか、メタタグの設定、パンくずメニューの設置など、実施する細かな対策を決めていきます。

各機能の確認

サイト内において必要な機能がある場合は、要件定義でしっかりと決めておきましょう。動的に動く画面については特に開発のフェーズに影響が大きくなる場合が多いので、必要な機能、必要でない機能を細かに定義していく必要があります。

この部分はプロジェクトによって毎回違うことが多いため、漏れがないかはその都度しっかり確認しておきましょう。

2.構成・ワイヤーフレーム

サイトの全体的な要件が決まったら、今度はサイトの設計図を書いていきます。これらのサイトの骨組みは構成図、ワイヤーフレームと呼ばれます。

詳細なディレクトリマップの作成

ディレクトリマップとは、サイトのディレクトリと各ページのつながりを示したサイトマップのようなものです。

要件定義の際に大まかに決めている場合もありますが、サイト制作において、実際なんのページを何ページ制作するのか、どのように遷移していくのかなどを示すマップを制作します。

ワイヤーフレーム制作

ワイヤーフレームでは、具体的なサイトの骨組みを決めていきます。ワイヤーフレームでは、具体的に各ページがどのようなレイアウトで、どのような要素が配置されるかなどを決めていきます。

この時点でページ全体のテキストなども決めてしまう場合もありますが、テキストを配置する場所だけ決めてダミーの文言を入れておくケースもあります。

制作に利用するソフト

ワイヤーフレームを作成するのに一般的なソフトはパワーポイントが利用されます。その他Excelを利用する場合もあれば、Adobe XDといったソフトもワイヤーフレームを制作するのに非常に便利な機能が揃っています。

以降の工程担当者の作業しやすさやファイルの互換性なども考慮し、選択してください。