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

Webデザイン学習ではツールやデザイン理論については学べますが、実際のプロジェクトがどんな流れで進むのかは、なかなか想像しにくいと思います。

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

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

その分、デザイナーは

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

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

「会社でのWeb制作ってこうやって進むんだ」という全体像をつかむきっかけになれば嬉しいです。

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

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

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

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

ここからは、実際の流れを、フェーズごとに丁寧に追っていきましょう。

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

1. クライアントからの依頼（営業・ディレクターが対応）

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

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

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

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

ここで案件の方向性が決まります。

2. 見積・提案資料の作成（営業・ディレクターが対応）

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

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

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

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

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

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

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

Webデザイナーは、まず案件の全体像を掴みます。

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

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

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

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

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

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

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

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

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

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

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

ワイヤーは デザインの前段階の骨格（レイアウト）です。

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

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

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

ワイヤーフレームは、変更できないものではありません。

実務では、クライアントの要望変更やデザインとの相性などで、途中で構成が変わるのはよくあることなので、方向性を合わせるための下書きくらいに考えてOKです。

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

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

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

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

使用するデザインツールは Figma・Photoshop・Illustrator が多いです。

最初から全ページを作ることはありません。まずは上記のようなデザインカンプを作成します。

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

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

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

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

• 色や雰囲気は合っているか
• トップページの構成や見せ方はズレていないか
• ブランドイメージと違っていないか

ここが合っていれば、他のページのデザインを本格的に作り込んでいけます。

方向性が固まった後も、文言変更・画像差し替え・配置の微調整など、細かな修正は日常的に発生します。

修正内容を整理しながら、1つずつ対応していきます。

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

---

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

8. コーディング

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

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

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

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

この場合は、コーダーとデザイナー、時にはディレクターも含めて、コミュニケーションを取りながら調整していきます。

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

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

デザインというより機能周りの話ですが、利用者にとって使いやすい画面にするのはデザイナーが考える役割になります。

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

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

• レイアウト崩れ
• スマホ表示チェック
• リンク切れ
• フォーム送信テスト
• システムの動作テスト
• 誤字脱字

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

---

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

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

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

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

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

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

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

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

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

• 本番サーバーにアップ
• フォームテスト
• アクセス解析ツールなどの計測設定

無事公開後は、デザイナーは達成感を味わいましょう。

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

13. 運用・更新

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

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

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

---

チーム制作のメリット

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

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

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

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

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

集中してできる上に、反復した作業も多いので、より実力が身につきます。

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

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

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

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

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

専門家から直接学べる（成長スピードが段違い）

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

各専門家の知識を日常的に学べるのが最大のメリットです。

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

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

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

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

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

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