全ページワイヤーフレーム

実務テクニック: ワイヤーフレーム
サイトに必要な全ページを、実装前の画面としてそろえる
見出し、文章、画像、CTAを実際に置く場所へ配置する
PC版とスマホ版を別々に組み立てる
トップページで使った方法を、残りのページにも使う

必要なページ

修正版サイトマップ.mdを開く
FigmaにあるPC版・スマホ版のFrame名と照合する
トップページ以外で、まだFrameがないページを確認する
1ページにつきPC版とスマホ版を1つずつ用意する
サイトマップにないページは足さない

修正版サイトマップ

ページ名

PC版Frame

スマホ版Frame

PC版のFrame

ページごとにPC用のFrameを作る
Frame名を「ページ名_PC」にする
そのページのPC版完成画像を見本にする
完成画像を上から見ながら、使う部品を同じ順番で置く
ヘッダーからフッターまでページ全体を組み立てる

PC完成画像

ページ名_PC

部品を配置

部品とText

配置したテキストあり版を、対応するテキストなし版へ置き換える
置き換える前後で部品の位置と大きさを変えない
見出し、文章、CTAはFigmaのTextで置く
ページごとに、修正版サイトマップ.mdの文言と画像の役割を反映する
テキストあり版は作業中のFrameへ残さない

スマホ版のFrame

ページごとにスマホ用のFrameを作る
Frame名を「ページ名_スマホ」にする
そのページのスマホ版完成画像を見本にする
PC版を縮小せず、スマホ版の順番と幅で組み立てる
改行、画像の表示範囲、CTAの幅、横方向のはみ出しを直す

スマホ完成画像

ページ名_スマホ

縦に配置

はみ出し修正

ページ別サブエージェント比較

AI活用テクニック: ページ別サブエージェント比較
ページごとに担当を分け、完成画像と作成中画面を同時に確認させる
PC版とスマホ版を別々に比較させる
作成中の全ページを「全ページワイヤーフレーム.pdf」へ書き出して読ませる
ページ名、対象要素、差、直す内容だけを返してもらう
新しいページ、文章、画像は作らせない

# 全ページ画面差分チェックプロンプト

## 対象

- 修正版サイトマップ.md
- 全ページのPC版・スマホ版完成画像
- Figmaから書き出した全ページワイヤーフレーム.pdf

## 実行

ページごとにサブエージェントを1つ起動してください。

各サブエージェントは、担当ページの完成画像と作成中画像を、PC版とスマホ版に分けて比較してください。

## 確認すること

- 修正版サイトマップ.mdにあるページが両方にあるか
- 見出し、文章、画像、CTAの順番が一致しているか
- 部品の欠落や重複がないか
- 文字切れ、画像切れ、重なり、横方向のはみ出しがないか
- テキストあり版が作成中画面に残っていないか

## 返す内容

差がある箇所だけを、次の順番で返してください。

### ページ名

- 画面: PC版またはスマホ版
- 対象要素:
- 完成画像との差:
- Figmaで直す内容:

新しいページ、文章、画像、CTAは作らないでください。

全ページの結果をまとめ、差がないページ名も最後に列挙してください。

Figmaで差を直す

AIが示したページを、完成画像とFigmaで見比べる
実際に差がある箇所だけをFigmaで直す
PC版とスマホ版の両方を直す
ページ名、部品の順番、Text、画像、CTAを再確認する
修正版サイトマップにない内容は追加しない

AIの指摘

実画面と照合

Figma修正

全ページワイヤーフレーム

全ページのPC版とスマホ版を同じSectionへ並べる
修正版サイトマップ.mdのページ数とFrame数を照合する
全FrameをPDFへ書き出す
ファイル名を「全ページワイヤーフレーム.pdf」にする

提出: Figmaの閲覧リンク / 全ページワイヤーフレーム.pdf

全ページ

PC / スマホ

Export

PDF

目次

全ページワイヤーフレーム

必要なページ

PC版のFrame

部品とText

スマホ版のFrame

ページ別サブエージェント比較

Figmaで差を直す

全ページワイヤーフレーム