こんにちは。webディレクターのmeiです。
web制作（ホームページ制作）についてどんなフローで制作していくのか、実はあまり知られていないかもしれません。
webディレクターとして異業種から転職して約1年。転職するまではどのようなフローで制作するのかよく知りませんでした。
そこで今回は、実際にどのようなフローでwebサイトを制作していくのか、現役webディレクターがご紹介します！
\ こんな人にオススメ /
- web制作の仕事に興味がある人
- webディレクターになりたての人
- web制作の流れをざっくり知りたい人
Contents
web制作のフロー① ヒアリング〜契約
web制作のフローとしては、大きく分けると
①ヒアリング〜契約
②制作
③メンテナンス・改善
の3フェーズあります。
順番にご紹介していきいます。
ファーストコンタクト
まず、クライアントとのファーストコンタクト。
直接、クライアントからメールや電話で問い合わせが来る場合や、営業担当が営業してくる場合、第3者からの紹介などさまざまかと思います。
まずは大まかな要望をヒアリングして、制作できそうかどうか検討します。
自社では対応できないもの、予算やスケジュールが全く合わないものは、この段階で断ることもあります。
成約率が低いと業務の負担になるので、いかに確度の高い問い合わせを増やすかということも重要です。
商談（ヒアリング）
ファーストコンタクトから話が進むと、具体的にどのようなサイトを作りたいか詳しくヒアリングする必要があります。
メールでのやりとりだと限界があるので、実際に会って商談したり、webミーティングを行うなど要望をヒアリングします。
私の場合は、以下の項目をヒアリングすることが多いです。見積を作る際に必要な情報をヒアリングするイメージです。
- 現状の課題
- サイトを作る（リニューアルする）目的
- ターゲット（顧客）層
- サイトを作ることによってどんな効果を得たいか（具体的なゴール）
- サイトに設けたい機能
- 現状の実績（問い合わせ数、売上、PV数など）
- 競合サイト
- 参考にしたい（イメージに近い）サイト
- サーバーやドメインの有無
- ロゴの有無
- スケジュール感
- 予算上限
提案・見積作成
商談した内容をもとに提案書と見積の作成を行います。
提案は、企画書を作成する場合や、コンペでプレゼンする場合などさまざま。
あまり大掛かりなものでなければ、メールベースで提案することもあります。
クライアントが相見積もりをとることもあるので、いかに良い提案、発注したいと思ってもらえる提案ができるかが重要です。
企画書と併せて見積も作成します。
制作費はほぼ人件費。そのため、制作にどのくらい時間がかかるかという視点で見積を作るケースが多いです。
契約
提案した内容や金額がOKとなったら、契約手続きに入ります。
私の会社の場合は、業務委託契約書、秘密保持契約書を締結しています。
あとあとトラブルにならないよう契約書は重要・・
そして、発注書をもらっていよいよ制作のスタートです！
web制作のフロー② 制作
発注書をもらったら、実際にサイトを作る制作のフェーズに入ります。
要件定義とスケジュール
ヒアリングした内容を整理して、要件定義書とスケジュールを作成します。
お互い認識のズレがないかクライアントとしっかり確認した上で制作を進めることが大切。
また、社内への共有にも繋がります。
要件定義は例えば以下のような内容をまとめます。
- 現状の課題
- サイトを作る（リニューアルする）目的
- ターゲット（顧客）層
- サイト制作における目標
- サイトのコンテンツや機能
- 制作範囲・納品物
- 対応言語
- サーバー要件
サイト公開までどんなスケジュールで進めるのかもしっかり共有しておく必要があります。
いくら制作会社が早く制作したとしても、クライアントの確認にかなりの時間を要する場合、スケジュール通りに進まなくなってしまいます。
お互いの協力が不可欠なので、事前に確認をとっておきます。
ワイヤーフレーム
要件定義の内容をもとに、サイトのワイヤーフレーム（設計図のようなもの）を制作していきます。
ディレクターがワイヤーフレームを作る所が多いようですが、私の会社ではデザイナーが制作します。
ツールとしては、Adobe XDやIllustratorなどで作るケースが多いと思います。
この段階では、色などのデザインは入れずにページの構成のみ。
どのページにどんな内容（コンテンツ）をどのくらいの大きさで入れたいかなど大枠の構成を考えます。
一発OKのケースは少ないので、クライアントの要望を聞きながら何度か修正して、最終案を作ります。
デザインカンプ
ワイヤーフレームの内容が確定するとデザインに入ります。
背景、文字、ボタンなどにをつけたり、
アイコンやイラストを作ったり、写真を入れたりと、実際のサイトとほぼ同じ状態を作ります。
これはデザイナーの仕事です。
ここでもクライアントに何度か確認してもらい要望を反映していきます。
実装
ここからはコーダーやエンジニアの仕事になります。
デザーナーが制作したデザインカンプをもとに、HTMLやCSSのコードを書いて実際に動くサイトを制作します。
きちんとデザインカンプ通りに正確に作ることが大切です。
また、サイト画面上には見えていない裏側でデータを連携されたり、自動でデータを処理したり・・クライアントの要望によっては、システム開発が必要になる場合もあります。
実装テスト
実装したものがちゃんと動くか、デザインカンプ通りに実装されているかテストします。
地味な業務ですが、納品前のとても重要な業務。
デザインカンプ通りに実装されていなかったり、リンクがついていなかったりミスが多いと信頼を失ってしまうので、しっかり確認する必要があります！
実装した担当のセルフチェックが終わっていることが前提ですが、制作した本人だと気がつかないことも多いので、デザイナーやディレクターなど第三者の目でも必ず確認します。
PCだと問題ないのにモバイルだとうまく動かない！ということもあるので必ずモバイルでも確認を・・
社内確認が終わったら、クライアントに確認してもらいます。
私の場合は、クライアントからの確認事項や、修正依頼はグーグルスプレッドシートに入力してもらって1つずつの項目に対応しています。
公開
クライアント確認が終わったらいよいよサイトを公開します。
公開後も、きちんと動いているかなど、再度確認します。
これでサイト制作は完成〜！！
メンテナンス・改善
サイト制作は完了しましたが、作って終わりではなく、ここからが実際のスタート。
サイト公開後は、グーグルアナリティクスでアクセスを分析したり、ユーザーの反応を見ながら、
サイトの内容を見直したりコンテンツを増やしたり定期的にメンテナンス・改善していくことが大切です。
さいごに
以上、web制作のフローをご紹介しました！
web制作のフローをより詳しく知りたい方は、こちらの本もおすすめです〜！
