駆け出しWebディレクターが覚えておきたい、Web制作の工程

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

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

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

リード獲得を増やす“サービスサイト”立ち上げのための4つの手順

新たにサービスサイトを立ち上げたいという方の「何からやればいいか分からない」というお悩みを解消できるよう作成しました。ぜひお気軽にご覧ください。

1.要件定義をする

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

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

作業のスコープを決める

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

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

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

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

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

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

大枠の戦略

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

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

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

各機能の確認

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

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

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

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

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

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

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

ワイヤーフレーム制作

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

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

制作に利用するソフト

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

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

3.デザイン

ワイヤーフレームが固まったら、続いてデザインのフェーズに入ります。サイトの骨組みをもとに、実際の見た目を決めていくフェーズです。

デザイナーとしっかりコミュニケーション

デザインの段階で実際のサイトの見た目（UI）の部分が決まってきます。ワイヤーフレームはあくまで骨組みなので、実際の見た目を決めるデザインの段階では大きく変わってくる可能性があります。

デザイナー側のアイデアで変えたいと思う場合も、ワイヤーの状態を忠実にしてほしい場合もどちらもあり得ます。ディレクターはデザイナーと密にコミュニケーションをとることが大切です。

手戻りに気をつける

Webのプロフェッショナルでもない限り、ワイヤーフレームの段階で全体の完成図を想像しきれる人は中々いません。クライアント側はデザインが完成して初めてイメージが湧きはじめるということも多いので、デザインを出した段階であれこれフィードバックが出てくる可能性が高いです。

ディレクターとしてデザインを提出する前には、一旦お客さん目線に立って、何か言われそうな部分を今一度チェックしてから提出するようにしましょう。

4.実装

デザインができたら、ついにWeb上で動くようにコードを書いていきます。

HTML化

できたデザインを画像の状態ではなく、実際にブラウザで動くHTMLに仕上げる必要があります。出来上がったデザインをHTMLに起こしいく作業になります。その際には、ハウスホバー時のアニメーションや見た目上の演出なども組み込んでいきます。

動的な機能の実装

静的サイトの場合は、出来上がったHTMLをサーバーにアップするだけで問題ありませんが、動的な実装する場合は、さらに色々なシステムの組み込みが必要になります。

その際にもフロントエンド側とバックエンド側での役割分担など、密にコミュニケーションをとっていく必要があります。その仲介役としてディレクターが的確な指示出しをして必要があります。

テスト、検証

実際に動くようになったWebサイトに不具合や間違いがないかを探すテスト、検証も非常に大切です。特に最近はスマホも数多く普及しているため、OSや画面幅の違いによって、表示不具合や機能が動作しないなどの場合もあるため、可能な限り実機で確認していきましょう。

またどのブラウザ、デバイス、どのバージョンまでを保証するかを要件定義で決めておくことも大切です。

コミュニケーションに必要な知識をつけよう

Webディレクターは全ての工程にある程度知識が求められます。コーディングやデザインができる必要はありませんが、円滑なコミュニケーションを取るためある程度の知識を持っておきましょう。

全体を把握し、信頼されるディレクターを目指してください。

BtoBに特化したサイト制作！運用もラクラク｜ferret One

BtoBの特性を踏まえたサイトを制作。見たまま編集でページや更新も自分で完了。さらにマーケティングの伴走サポートつき