チームで行うWeb制作の役割と全体像｜会社で働くWebデザイナーの実務フローまとめ

未経験の人にとって、実際のWeb制作のプロジェクトがどんな流れで進むのかは、あまり想像しにくいと思います。

この記事では、主に会社勤めのデザイナーが関わる「チームでのWebサイト制作フロー」を、整理しました。

会社でのWeb制作は、ディレクター・デザイナー・フロントエンド・エンジニアなど、いろんな専門職がチームとなって進めます。

その分、デザイナーは

• デザイン業務にしっかり集中できる
• 他職種から実務のコツをたくさん吸収できる
• 個人ではできない規模のサイト制作を経験できる

といったメリットがあります。

チームでのWeb制作の流れがなんとなくでも掴めれば、嬉しいです。

チームで進めるWeb制作の役割

まずは全体像をつかむために、ざっと役割を理解してみましょう。

規模にもよりますが、基本的に以下のような体制が多いです。

さらに大きいプロジェクトの場合は、プロデューサーやPM（プロジェクトマネージャー）がいる場合もあります。

【フェーズ1】案件スタートとプロジェクトの土台作り

1. クライアントからの依頼

企業サイトやキャンペーンページなど、案件の種類はさまざまですが、最初の依頼に対応するのは、営業やWebディレクターになります。

Webデザイナーは、基本的に関わりません。

営業・ディレクターは主に以下を行います。

• クライアントの要望まとめ
• 予算や納期のすり合わせ
• 必要な機能やサイト規模の確認
• 目的（問い合わせUP、採用強化など）の整理

2. 見積・提案資料の作成

ディレクターがヒアリング内容をもとに、ざっくりとした構成案・スケジュール・見積を作成します。

これらが通ると、正式にプロジェクトがスタートします。

【フェーズ2】サイトの設計とデザインの準備

3. キックオフミーティング：チーム全体で情報を共有

正式に受注すると、チーム全員でキックオフMTGを行います。

ここで共有されるポイントは、基本的に以下の内容です。

• 案件の目的（ゴール）
• ターゲット設定
• サイトの方向性
• スケジュール
• 分担する作業範囲

4.クライアントとの打ち合わせ（要件定義）

クライアントとの打ち合わせはディレクターのみの場合もあれば、デザイナーが同席することも多いです。

より良いデザインを作るため、主に以下の内容を整理します。

• サイトの目的（集客？資料請求？ブランディング？）
• ターゲット
• 必要なページ数・構成
• 競合サイト
• デザインの方向性（色、雰囲気、参考サイト）
• スケジュール感

このように、クライアントの細かい要望をまとめたものを「要件定義」と言います。

5. 情報設計：サイトマップの作成

企画が固まったら、まず最初に作るのは、ページの一覧表（サイトマップ）です。

サイトマップ：サイト全体のページ構成をまとめた地図のようなもの。

基本はWeb制作チームの長であるディレクターが作成しますが、ディレクターが営業寄りであれば、サイトマップはデザイナーが担当するケースもあります。

サイトマップは、この後の全工程に影響する設計の土台なので、チーム全体でしっかりとまとめる必要があります。

6. ワイヤーフレームの作成

ワイヤーフレームというのは、デザインの前段階の骨格（レイアウト）です。

• 一番目立たせたい内容をどこに置くか
• どこに写真を載せるか
• お問い合わせボタンはどこに設置するか

といった、要素の配置を、色や写真が入る前のラフな下書きでレイアウトしていきます。

これもディレクターが作るか、デザイナーが作るかは制作会社によって違います。

ユーザーが使いやすい動線、目立たせたい内容などをしっかり吟味してつくる、サイトの大事な骨組みです。

ただ、実務では、途中で構成が変わるのもまたよくあることなので、方向性を合わせるための下書きくらいに考えてOKです。

【フェーズ3】デザイン制作（デザイナーのメイン業務）

7. デザインカンプ作成＆社内レビュー

いよいよデザイナーの出番です。

ワイヤーフレームをもとに、画面をデザインしていきます。

最初から全ページを作ることはありません。

まずは以下のようなデザインイメージを作成します。

• トップページのデザイン
• 下層ページ（主要1〜2ページ）
• スマホ版のデザイン
• ボタン・パーツなど

クライアントに提出する前に必ず社内レビューが入ります。

クライアントへの提出・修正対応

デザインカンプができたら、ディレクターを通してクライアントに提出します。
（会社によってはデザイナーが直接やり取りすることもあります）

最初の提出で大事なのは、細かい完成度より「全体の方向性が合っているか」 を確認すること。

方向性が固まった後も、細かな修正は日常的に発生します。

スケジュール的に厳しくなった時は、都度ディレクターに相談して、必要があれば調整してもらいます。

---

【フェーズ4】サイトの構築と社内品質チェック

8. コーディング

デザインが確定したら、コーダー（フロントエンドエンジニア）にバトンが渡ります。

静止画のデザインカンプをHTML/CSS/JavaScriptといったコードに起こして、実際にブラウザで動く Webページ を作っていきます。

基本はデザイナーの出番はありませんが、実際に作り込んでいくと際限が難しい場面も出てきます。

• 文字数が増えると崩れるデザイン
• スマホで縦長になりすぎる配置
• アニメーションが複雑すぎる など…

この場合は、コーダーとデザイナー、時にはディレクターも含めて、相談しながら調整していきます。

9.システム導入（必要があれば）

複雑なシステムが必要なサイトの場合は、内容に応じて エンジニアやバックエンド担当 が参加し、サイトに機能を組み込んでいきます。

10. テストサイトで動作確認

サイトがある程度完成すると、テスト用URLで動作確認します。

クライアント前の最終チェックですので、チーム全体で参加。また、社内の空いている人に声をかけてチェックをします。

---

【フェーズ5】公開(納品)とリリース後のアフターフォロー

11. クライアント確認（検収）

テストサイトにて、クライアントが最終チェックを行います。

クライアントによってはここで大量の修正を出してくることもありますが、基本的には大きなデザイン変更はNG。

あくまで微調整中心です。

ディレクターが窓口となり、すべて管理します。

12. 本番環境へ反映して公開

修正を全て潰して、問題がなければ、いよいよ公開です。

公開作業は、エンジニアがやることが多いです。

無事公開後は、達成感を味わいましょう。

【フェーズ6】公開後のフォロー

13. 運用・更新

公開して終わりのプロジェクトもありますが、公開後も運用や更新が続くことも多いです。

• バナーの更新
• 文章や写真の差し替え
• 新規ページの追加

運用担当が引き継ぐことが多いですが、バナー作成など、デザイン業務部分は引き続き担当デザイナーに回ってくることが多いです。

---

チーム制作におけるデザイナーのメリット

デザインだけに集中できる

フリーランスは全部自分でやる必要がありますが、会社なら

• 見積
• 契約
• サーバー準備
• コーディング
• システム準備
• クライアント交渉
• スケジュール管理

などの多くをディレクターや他職種が担当します。

Webデザイナーは、「デザインに集中できる環境」が整っているため、圧倒的にスキルの伸びが早いです。

実務レビューで爆速に成長できる

最も成長するのは レビューの瞬間です。

• 先輩デザイナーの指摘
• ディレクターからの要望
• コーダーの観点（実装しづらいUI）
• クライアントの目線

1つのデザインに対して、多方向からフィードバックが飛んできます。

最初はしんどいですが、ここがプロとしての筋力を一番伸ばしてくれる時間です。

専門家から直接学べる

チーム制作では、ディレクター・デザイナー・フロント・エンジニア・運用担当など、各分野のプロが揃っています。

各専門家の知識を日常的に学べるのは大きいです。

例えば、ディレクターの「伝え方」、コーダーの「実装しやすいUIの考え方」、エンジニアの「サイトに役立つ機能」など。

デザインは他職種と連携してこそ伸びる仕事なので、プロが周りにいる環境はそれだけで大きな財産です。

大規模サイトの制作フローが丸ごと学べる

制作会社では以下のような大型案件が回ってくることも多いです。

• 100ページ以上の企業サイト
• システム連携が必要なサイト
• 運用込みの中長期プロジェクト
• リブランディング案件
• 広告施策とセットのLP制作

こうした大規模案件は、チーム制作があってこそです。

まとめ

新人デザイナーであれば、最初は、先輩デザイナーのアシスタントとして入る場合が多いです。

チーム制作は自分一人の仕事ではないので、ペースが大変なこともありますが、その分やりがいがあるし、成長も早く実感できますよ。

チームでのWeb制作の流れがなんとなくでも掴めれば、嬉しいです。