Webサイトの制作って、実際にどんな流れで進んでいくんだろう？
Web制作には、お問い合わせから公開後の運用改善まで様々なフローがあります！
Web制作を初めて行うとなった時、そもそもどんな流れでどれくらいの作業があるのかわからないですよね？僕も転職でWebディレクターの仕事を始めたときは、具体的な仕事の流れがぼんやりとしかわからず、苦労しました。制作の工程がわかるとやるべきことも見えてくるので、実際の現場での制作の流れを知りたい方も多いはず。
この記事では、Web制作の現場で働いて5年目の現役Webディレクターが、お問い合わせを受けてから実際にサイトの公開をするまでのWeb制作の流れと、それぞれの工程についてのポイントなどを詳しく解説していきます！
- Web制作はどんな工程でどんな作業が発生するのか
- 各工程での具体的な作業内容やポイント
- 現役WebディレクターのWeb制作の進め方
Webディレクター
さかき
制作会社で働く現役のWebディレクターです。日々の業務で培ったWeb制作・SEO・WordPressの知識を、初心者にもわかりやすく発信しています。実務で役立つ情報はもちろん、仕事術や無料で使えるWeb制作ツールも紹介しています。
目次 閉じる
Web制作のフロー
Web制作では、お問い合わせを受けてから実際にサイトの公開をするまでには様々なフローがあります。大まかな制作の流れについては、以下の通りです。
- お問い合わせ：営業やクライアントからWeb制作の依頼を受ける
- ヒアリング：課題やサイト制作の要望を整理し全体像を明らかにする
- 見積制作：実際の制作ボリュームや仕様を洗い出し概算の見積もりを制作
- ご契約：見積もりやお打ち合わせをし契約を結ぶ
- 企画・設計：Webサイト制作の目的や必要な機能、進め方を明確にする
- サイトマップ制作：ページボリュームや簡単な内容をまとめた全体像を作る
- ワイヤーフレーム制作：デザイン制作前のページの要素や内容を決める
- デザイン：サイトのデザインを作る
- コーディング：実際のブラウザで見れるデモサイトを作る
- デバイスチェック：実際のPC、スマホ、タブレットなどの端末でデモサイトをチェックする
- 公開：サイトのリリース作業を行う
- 運用改善：お客様と並走してサイトの運用や保守を行う
ここから先は、各工程の具体的な内容やポイントについて、詳しく解説していきます！
①お問い合わせ
お問い合わせでは、営業やクライアントからWeb制作の依頼を受けます。
お問い合わせは、多くの制作会社では営業が窓口となって受けて、制作部署に案件の依頼を行います。そこから部署内で各ディレクターのスケジュールや案件の状況を考慮して、担当ディレクターを決定します。
担当ディレクターが決まったら、ヒアリングのための事前の業界分析やお問い合わせ先の企業のサイトなどをチェックしてヒアリングの打ち合わせに臨みます。リニューアル案件であれば、実際のリニューアル前のサイトの中身もチェックすることが重要です。
継続案件でディレクターが直接やりとりをしていたり、制作会社の体制によっては直接ディレクターがお問い合わせを受けることもあります。
②ヒアリング
ヒアリングでは、お客様からの課題やサイト制作の要望を整理し、サイトの内容の全体像を明らかにします。
ヒアリングでは、詳しい制作内容やプロジェクトの狙いなどを聞き、全体像の把握していきます。お客様が求めるものはもちろん、ディレクター目線でお客様が気がついていない課題や制作内容が何かも見つけることが大事です。
ヒアリングでは、具体的な制作内容や準備状況の確認のため、具体的な制作方法やサーバー・ドメインの準備の状況などを確認します。主にヒアリング段階でチェックするべきことは、以下の通りです。
- 制作ボリュームについて（ページ数や大体のページの長さなど）
- 制作内容について（部分的な制作（デザインだけ、コーディングだけ）か、コーディングまで行うか）
- 支給物について（構成やテキスト・画像の支給はあるか、提案ベースでの制作か）
- 制作のスケジュール感について（ティザー公開や一部ページの先行公開が必要か）
- CMS導入の有無（WordpressなどのCMSを実装するか、静的ページか）
- システム開発が必要か
- ドメインやサーバーは用意するか
お問い合わせの内容やディレクターや部署の状況によっては、営業やWebプロデューサーがヒアリングを行う場合もあります。
③見積制作
見積制作では、ヒアリングで得た内容を元に、実際の制作ボリュームや仕様を洗い出し概算の見積もりを制作します。
ヒアリングの内容を元に、ご契約の前に制作ボリュームや仕様を大まかに洗い出して概算の見積もりを制作します。見積制作のタイミングでは、細かい仕様などが定まってないことが多いので詳細の費用を確定する必要はありません。制作ボリュームとおおよその金額感を目線合わせするために見積は活用します。
また見積制作はWebプロデューサーが担当することが多いですが、実際の作業ボリュームと合っているのか、抜け漏れがないかのチェックを行うために、Webディレクターも必ず目を通しておきましょう。
実際に作る場面がなくても、制作ボリュームごとの金額感を把握しておくと、ヒアリングや営業から質問が来た時にもスムーズに対応することが出来ます。
大きな案件やプレゼン案件の場合は、提案書や企画書を制作することがあります。Webサイトの制作が始まる前にサイト制作の目的や狙いなどの軸を定めていく重要な資料になります。
④ご契約
ご契約では、見積もりやお打ち合わせを通して、お客様と契約を結びます。
見積を通して金額感や制作内容の合意がとれたら、契約を結びます。この段階では細かな制作内容が確定していないため、請求書はこれからになります。契約を結んだら、いよいよ実際のWeb制作のスタートです。
⑤企画・設計
企画・設計では、Webサイト制作の目的や必要な機能、進め方を明確にし、スムーズに制作を進められるようにします。
ヒアリングの内容を元に、サイト構成や改善案を考えます。大きな案件であれば提案書や企画書を取りまとめて、お客様とのすり合わせを行います。Webサイトの制作が始まる前にサイト制作の目的や狙いなどの軸を定めていく、今後の制作の根幹にもなってくる、大事な工程になります。主に固めていく内容は以下の通りです。
- 制作内容・目的：ヒアリングを元にサイトを制作する目的やゴール、制作後のポジショニングを設定
- 構成ラフ・仮デザイン：ワイヤーフレーム制作前の構成ラフや提案の場合は仮デザインを掲載
- KV制作イメージや撮影案：最初の印象に関わるKV（キービジュアル）イメージや、撮影の概要など
- 簡易的なサイトマップ：ページ数やフローがわかるもの
- 制作のスケジュール感について：簡単な進行スケジュールを各工程記載
- 体制図：制作に関わるメンバー構成
制作が始まった段階で新しい機能が増えてしまったり、サイトの目的自体が変わってしまうと大幅なスケジュールの遅れや追加の作業の発生などが起こりかねません。そういったリスクを事前に回避するためにも、事前に企画提案の段階で制作内容をすり合わせをすることが大切です。
大きな案件であれば、企画・設計にとどまらず、制作要件やシステム開発の内容を固めていくための要件定義を行うこともあります。ただ、LPや複雑なシステム開発を伴わない場合は企画提案のみ行うことも多いです。僕自身も要件定義を行うことはあまりありません。
⑥サイトマップ制作
サイトマップ制作では、サイトのページボリュームや簡単な内容をまとめた全体像を作ります。
サイトマップは、サイトの全体像を把握するために階層構造を整理したものになります。1ページもののランディングページやキャンペーンサイトについては作りませんが、多くのコーポレートサイトやECサイトなどの複数ページものでは必ず作成するのが、このサイトマップです。
トップページから下層ページまで構造をまとめ、URLやWordpressなどのCMSの実装の有無、制作内容の詳細について軽い説明などをまとめていきます。その後のワイヤーフレームや詳細な見積・請求書の制作にも関わってくる重要な資料です。
ワイヤーフレームの制作の際に要件とのズレや制作するページの内容を間違わないように、サイトマップの時点でページの内容をしっかりまとめておきましょう！
⑦ワイヤーフレーム制作
ワイヤーフレーム制作では、ページ構成を設計する。デザイン制作前のページの要素や内容を決めていきます。
サイトのデザインを作る前の設計書がワイヤーフレームです。デザインやコーディングなどの実制作に移る前に、サイトの構成や画像やテキストなどどんなものが入ってくるのか、どういった機能が必要になるのかなど、実際のWebサイトのイメージに近い形で作っていきます。
ワイヤーフレームはデザインではないので、基本的には白黒などシンプルな色味で「あくまでも設計図」であることが分かりやすい形で制作していきます。最終的には、資料上でページのどこに何が入って、どんな機能があるのかまでわかるようにまとめます。
ワイヤーフレームを制作して実際にお客様にお見せすることで、気づかなかった課題や、足りなかった要素などを発見することがあります。構成の内容が細かい部分までまとめられているほどサイトの完成した際のイメージがしやすいので、Webディレクターはお客様に伝わりやすいワイヤーフレームを制作することが重要です。
⑧デザイン
デザインでは、サイトのデザインを作ります。XD・Figmaなどのデザインツールを使って、PC、スマホでのサイトのデザインを完成させます。
ワイヤーフレームが完成したら、いよいよサイトのデザインを作ります。デザイナーに今までの打ち合わせ等での案件の状況や、Webサイトの制作内容を説明しながら、ワイヤーフレームを元にWebサイトの内容を説明していきます。
デザイナーはワイヤーフレームを元にXD・Figmaなどのデザインツールを使って、PC、スマホでのサイトのデザインを完成させます。テキストや画像などのサイトの要素や完成させ、見た目自体はリリースするサイトとほとんど同じものを完成させるイメージです。Webディレクターは細かいデザインのチェックや文字、画像が合ってるかなども見ていきます。
デザイン制作はもちろん一度でバッチリと完成形が出来るわけではありません。複数ページに及ぶサイトではまずはPCのTOPページを先に制作して、デザインの色味や雰囲気、装飾などのトンマナが合っているのかをすり合わせていきながら、最終的に全てのページのデザインを完成させていきましょう。
⑨コーディング
コーディングでは、実際のブラウザで見れるデモサイトを作っていきます。
デザインが完成したら、Webサイト上で閲覧できる形に構築していくコーディングの作業を進めていきます。このタイミングでコーダーと連携して、本格的なWebの形でのサイト構築を進めていきます。サイトのアニメーションやページの切り替えなどの実際の動きも公開するサイトと同じレベルにしていきます。
実際にWebディレクターがコーディングをすることはありませんが、知識として覚えておくと指示も明確に出せるので一度学習してみるのがオススメです。
⑩デバイスチェック
デバイスチェックでは、実際のPC、スマホ、タブレットなどの端末でデモサイトをチェックして、不備があれば適宜調整します。
コーダーの作業が完了してサイトがデモアップされたら、実際のサイトのユーザーが使うようなPC、スマホ、タブレットなどの端末でのデバイスチェックを行い、表示の崩れや誤作動がないかも細かくチェックしていきます。
デバイスチェックの目的は、ユーザーの多くが使用する端末やブラウザで不具合なくサイトが表示・使用できるかを確認することです。そのため、ユーザー使用率の高い端末やブラウザを使用して、デバイスチェックを行っていきます。フォントの崩れやデザインの崩れ、サイトの機能の不具合などがないかを端末ごとにチェックして未然に不具合を防ぎましょう。
何回もチェックしていると見落としてしまう場面でもあるので、細かな点までチェックすることが大切です。
⑪公開
公開では、サイトのリリース作業を行う。サーバーにサイトをアップされたことを確認し、お客様に公開報告を行います。
デバイスチェックが完了したらいよいよ公開です。実際のサイトのURLに完成したサイトのファイルを上げて、サイトリリースを行います。
サイトの公開については、WordpressなどのCMSを導入している場合はコーダーが公開作業を行います。CMSを導入していない静的サイトの場合は、コーディングのファイル一式をWebサーバーにアップして公開していきます。場合によってはWebディレクターがFTPソフトを利用してWebサーバーにファイルを送信することもあります。
WordPressの管理画面を導入している場合は、お客様が操作できるようにマニュアルを作成して、公開前後のタイミングで渡します。慣れてないお客様の場合は読み合わせを通して一通りをレクチャーしましょう。
基本はコーダーが公開作業を行い、Webディレクターが本番公開されているかをチェックする体制になるので、実際に問題なく公開されているかをしっかりチェックしましょう。
サーバーがお客様の方で契約されている場合、ファイル納品をして公開はお客様側で行う場合もあります。その場合でも、公開日に不備などないかはチェックしましょう。
⑫運用改善
運用改善では、お客様と並走してサイトの運用や保守を行う。場合によってはGoogleアナリティクスなどの計測データを元に改善提案を行います。
Webサイトは公開して終わりではありません。サイト公開後もお客様の課題や気になる点を確認していくことも大事です。サイト運用時に気づいた不具合や改善点をお客様とすり合わせて、必要によってはサイトの改修や新しいページの制作などを行います。サイトを運用していく中でお客様と二人三脚でより良いものへと改善していくことが重要です。
サイト公開後もお客様と密にコミュニケーションを取って、サイトをより良いものへと改善していきましょう。
Webディレクターは基本的に各フローに関わる
上記の通りWeb制作での工程は多岐にわたります。プロジェクトの責任者としてWebディレクターはすべての工程に関わっていますが、全て自分で手を動かすわけではありません。Webディレクターが主に手を動かす工程は、以下の通りです。
- ヒアリング
- 要件定義
- サイトマップ制作
- ワイヤーフレーム制作
- デバイスチェック
- 運用改善
見積制作についてはプロデューサーがメインで行いますが、チェックはディレクターも行います。また、デザインやコーディングについては、実作業はデザイナーやコーダーになりますが、常に制作内容をチェックして進行管理を行うこともディレクターの大事な仕事です！
まとめ
今回は、Web制作の流れや実際の現場でどんな作業がされているのかを、詳しく解説していきました。大きなポイントとしては以下の通りです。
- Webサイトの制作には、お問い合わせ、ヒアリング、見積制作、ご契約、要件定義、サイトマップ制作、ワイヤーフレーム制作、デザイン、コーディング、デバイスチェック、公開、運用改善、など様々な工程がある
- Webディレクター実作業などで手を動かすタイミングは、ヒアリング、要件定義、サイトマップ制作、ワイヤーフレーム制作、デバイスチェック、運用改善、である
- Webディレクターはすべての工程でメイン作業を行う訳ではないが、プロジェクトリーダーとして全体の進行管理を行う必要がある
Web制作には様々なメンバーが関わり、多くの工程を経て実際のWebサイトが完成していきます。Webディレクターは最初から最後までの工程に関わっていくプロジェクトのリーダーとして、各工程ごとに適切な進行管理を行って、お客様はもちろん制作メンバーにも安心して取り組んでもらえる環境づくりを目指していきましょう！
