ワークフロー全体図（8 ステップ）
赤系カードはデザイナーが主役の工程、青緑カードはエンジニア・実装寄りの工程。完全な分業ではなく、ヒアリング〜公開まで重なり合いながら進んでいきます。
Web 制作は「作る前」と「作った後」が肝。全工程を俯瞰して、各段階で何を決め、何を確認するかがわかると、 デザイナーとしての立ち位置（設計側・ディレクション側）も一気に見えやすくなります。
ヒアリング
要件・目的・ターゲットの確認
サイトマップ
ページ構成と導線の設計
ワイヤーフレーム
各ページの骨組み・情報設計
デザインカンプ
見た目の確定（Figma 等）
コーディング
HTML/CSS/JS 実装
コンテンツ入稿
文章・画像を流し込む
テスト
表示確認・リンクチェック
公開 / 運用
サーバーアップ・更新対応
赤系のSTEP 01〜04が、デザイナーが主に関わる"設計" のフェーズです。ここがしっかりしていれば、後半の実装フェーズもスムーズに進みます。
各ステップの詳細
各ステップを開いて、何をする工程なのか・誰が担うのかを確認してください。STEP 01 のヒアリングは特に重要で、ここでの情報精度が以降すべての工程に効いてきます。
STEP 01：ヒアリング / 要件定義 デザイナー
クライアントの目的・ターゲット・予算・スケジュール・競合を確認します。デザイナーも同席することが多いです。
- 聞くこと: 目的 / ターゲット / 予算 / 納期 / 競合
- ツール例: ヒアリングシート / Notion / Google Docs
ここで得た情報が後工程すべての土台になります。
STEP 02：サイトマップ / 情報設計 デザイナー
どんなページが必要か／導線をどう設計するかを決める。画面遷移図・グローバルナビの整理。
STEP 03：ワイヤーフレーム デザイナー
各ページの骨組みを作る（色を付けない "箱と文字" だけの状態）。まさにこのガイドの骨組みのようなイメージです。
実例で見る：このサイト自体のワイヤーフレーム
いま読んでいる "How to Webデザイナー" の各ページは、実際にワイヤーフレーム（骨組み）から段階的に作り上げられました。
制作プロセスをそのまま追体験できるメイキングページを公開しています。
STEP 04：デザインカンプ デザイナー
Figma / Adobe XD でビジュアルを確定。ブレイクポイントごとに PC／SP のデザインを作る。
STEP 05：コーディング エンジニア / AI
HTML / CSS / JavaScript で実装。最近は AI（Cursor / Claude Code）を使うことで、非エンジニアでも対応できるケースも増えています。
STEP 06：コンテンツ入稿 エンジニア / ディレクター
本番の文章・画像を流し込む。CMS（WordPress / STUDIO 等）であればクライアントが後から更新することもできます。
STEP 07：テスト / デバッグ エンジニア
ブラウザごとの表示確認／リンク切れ／問い合わせフォーム動作確認など。
STEP 08：公開 / 運用 エンジニア / ディレクター
サーバーへアップロードして公開。公開後の更新・改修も "運用フェーズ" として続く。
コラム：ディレクター寄りの関わり方
「自分でコードを書かないデザイナー」が職業として成立するのは、Web 制作が"設計" と "実装" の分業で回るからです。AIが実装を肩代わりしてくれる今だからこそ、設計者の価値はむしろ上がっています。
デザイナー = ディレクター + 設計者、と考える
Web 制作では「設計できる人」と「実装できる人」は分かれていることが多い。デザイナーは前者に軸足を置き、実装は AI・エンジニアに任せる体制でも十分回ります。
特に AI 時代は、STEP 05 以降を AI に "指示する側" の役割 が重要になる。本ガイド Page 05 で詳しくお伝えします。
"指示する側" になれることが、最大の武器です。コードが書けなくても、「何を作りたいか」「どう動いてほしいか」を的確に伝えられれば、AIやエンジニアと協力して高品質なサイトを作れます。