補足。
デザインカンプは
「XD、Figma」の使用が指定されている場合も有る。
デザインカンプが完成したら「データ、画像、仕様書」などをコーダーに送る。

以下はAIによる解説の要約。

1. ヒアリング・要件定義

• Webデザイナー × クライアント × ベンダー
• サイトの目的・ターゲット・ページ構成
• 色・トーン・参考サイトの共有
  → 方向性を決める。

2. ワイヤーフレーム作成

• 以下が一般的
  　→ 手書き / Figma / PowerPoint
• クライアントから修正依頼 → 修正
• 構成（レイアウト）OK の GOサイン

※デザインカンプ前にワイヤーで決め切らないと
Photoshop の修正が地獄になるため注意。

3. デザインカンプ作成（Photoshop / Illustrator）

▼ 使用ツールの違い

• Photoshop：写真多めのLP、Webサイト向けの標準。
• Illustrator：アイコン・ロゴ・ベクターを多用するデザイン向け。

▼ カンプ作成時の注意点（最重要）

1. アートボードサイズは 1440px / 1920px が一般的
   → レスポンシブを想定して作る
2. ガイド・グリッドを綺麗に引く
3. フォントサイズ、余白を明確化
4. レイヤー名を必ず整理する
5. 書き出しやすい構造にする（後でコーダーが困る）

▼ 完成したらクライアントに提出（PSD/AIは渡さないことが多い）

• JPG / PNG または PDF に書き出してメール送付
• クライアントから修正依頼 → 修正
• 見た目の最終GOサイン

※PhotoshopやIllustratorは修正コストが高いので、
“構成が決まった後にデザインに入る”のが重要。

4. コーダーにデザインデータを渡す

Photoshop / Illustrator を使う場合、以下が必須：

▼ 渡すもの

• PSD / AI の元データ（レイヤー整理済み）
• 書き出し用画像（PNG/JPG/WebP/SVG）
• 色・フォント・間隔などの仕様書（簡易でOK）
• 書体の情報（Webフォント / 代替フォントの指定）
• スマホ版カンプ（必須）

Figma のように自動で CSS を確認できないため
情報が曖昧だとコーダーが再現できないので、仕様は必須。

Photoshop / Illustrator でカンプを作る場合の追加注意点

① 修正コストが高い → ワイヤー段階で合意必須

• Figmaだとスイスイ直せる
• Photoshopが最も修正が重い
  → レイアウトはワイヤーで固めるのが鉄則

② レイヤー構造は絶対に整理

• コーダーの作業時間が倍以上変わる

• 命名例：
  header
  main_visual
  section_title
  button_primary

③ 画像は書き出して渡す（Figmaのような自動書き出しがない）

• ボタン
• 背景模様
• アイコン
• バナーパーツ

などはデザイナー側で書き出して渡す。

④ Illustrator は文字詰めが強いが Web では再現されにくい

→ コーダー側と事前に擦り合わせが必要。

以下はAIでは無い。

Webデザイン参考書
https://rara.jp/sphinx1335/page5
※どうせなら2～3冊ぐらい買っても良いでしょう。
それは あくまでも基本なので、自分なりのにアレンジが必要(アレンジしすぎて使いにくくなってもダメ)。

「Photoshop、Illustrator、XD」の必要システム構成
https://z.wikiwiki.jp/bremen/topic/10