グラフィックデザイナーとの違い
「紙の世界」と「Webの世界」は、成果物もワークフローも前提が異なります。仮テキストで主要ポイントだけ並べます。
📌 【比較表 実装注釈】
要確認・仮テキスト。行数は最終 5〜6 行で想定。狭幅時は
.compare-table を横スクロール化（display:block; overflow-x:auto）。
確定コピー前に、デザイン・納品・修正のサイクルに関する違いを1行ずつ追加予定。
| 観点 | グラフィックデザイナー | Webデザイナー |
|---|---|---|
| 成果物 | 印刷物（紙・看板など） | Webサイト・Webサービス |
| サイズ | 固定（A4・B2 等） | 可変（PC／タブレット／スマホ） |
| 納品形式 | 入稿データ（AI / PDF） | デザインデータ → HTML/CSS 実装 |
| 修正 | 印刷前までが勝負（刷り直し不可） | 公開後も更新し続ける前提 |
| 関わる人 | 印刷会社・クライアント | ディレクター・エンジニア・クライアント |
Webデザイナーに必要なスキルセット
大きく 3 領域＋α。コードを自分で書けるかどうかは必須ではありません。
📌 【スキルカード 実装注釈】
要確認・仮テキスト。カードは 4 枚で
auto-fit, minmax(220px, 1fr) により PC 2〜4 列／スマホ 1 列。
Skill 04 は目立つ書き方に調整したい（「コードを自分で書く必要はない」という強調ポイント）。
SKILL 01
デザインスキル
UI・レイアウト・タイポグラフィ・色の扱い。グラフィック出身者の強みが直接効く領域。
SKILL 02
ディレクションスキル
クライアント要件の整理・進行管理・社内外コミュニケーション。意外と比重が大きい。
SKILL 03
最低限の Web 知識
HTML / CSS を読めるレベル。エンジニアとの会話で困らない程度があれば OK。
SKILL 04 / 重要
コードは "自分で書く必要はない"
書く人はエンジニア・AI。デザイナーは「設計して渡す／指示する」側でOK。ここが誤解されがち。
Webデザイナーの働き方
大きく 3 パターン。最初の一歩としては「副業 or フリーランス（小規模案件）」が始めやすい。
📌 【働き方カード 実装注釈】
要確認・仮テキスト。3 カラム（スマホで 1 列）。
最終的に
page07_start.html（始め方）と内容が重複しすぎないようにコピー調整予定。ここでは「概要のみ」で OK。
インハウス
企業のデザイン部・マーケ部などに所属。自社サービスを長期で育てる働き方。
副業
本業を持ちながら週末・夜間に案件受注。初心者の入口として現実的。
フリーランス
独立して複数クライアントを並行受注。営業・見積もり・契約まで自分で。
このガイドの立ち位置
本ガイドは「デザインはできるが Web が未知」という方向け。Page 06 でクライアントワーク、Page 07 で始め方を詳しく扱います。