ワークフロー全体図（8 ステップ）
赤系カード＝デザイナーが主役の工程／青緑カード＝エンジニア・実装寄りの工程。完全な分業ではなく重なり合う。
legend 要素で明示する予定。
ヒアリング
要件・目的・ターゲットの確認
サイトマップ
ページ構成と導線の設計
ワイヤーフレーム
各ページの骨組み・情報設計
デザインカンプ
見た目の確定（Figma 等）
コーディング
HTML/CSS/JS 実装
コンテンツ入稿
文章・画像を流し込む
テスト
表示確認・リンクチェック
公開 / 運用
サーバーアップ・更新対応
各ステップの詳細
ざっくり理解ベースのため概要のみ。仮テキスト。最終的には 1 ステップ 2〜3 文 + 図で再編集予定。
<details> による純 HTML アコーディオン（JS 不要）。
各ステップに .chip（デザイナー／エンジニア）を付けて役割分担を可視化している。
STEP 01：ヒアリング / 要件定義 デザイナー
クライアントの目的・ターゲット・予算・スケジュール・競合を確認。デザイナーも同席する場合が多い。
ここで得た情報が後工程すべての土台になるため、最も重要な工程。
STEP 02：サイトマップ / 情報設計 デザイナー
どんなページが必要か／導線をどう設計するかを決める。画面遷移図・グローバルナビの整理。
STEP 03：ワイヤーフレーム デザイナー
各ページの骨組みを作る（色を付けない "箱と文字" だけの状態）。まさに本ガイドのような状態。
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・エンジニアに任せる体制でも十分回る。
特に AI 時代は、STEP 05 以降を AI に "指示する側" の役割 が重要になる。本ガイド Page 05 で詳説。