ワイヤーフレームレビュー

Figma Prototype

Figma上の画面同士をつなぎ、クリックして移動を試せる機能
CTAを押した時に、予定したページへ進むか確かめられる
実装前に入口から最後の行動までを画面上でたどる

CTAからページをつなぐ

PC版の主導線にある最初のFrameを開く
Prototypeタブを選ぶ
CTAから、主導線メモ.mdにある次のページのFrameへ接続する
主導線の最後の行動まで、ページごとに接続する
CTAの言葉と移動先が一致するようにする

CTAを選択

接続先Frame

Interaction

Previewで主導線をたどる

Presentを開き、入口のFrameから開始する
見出しと画像を見て、CTAの意味が分かるか確認する
CTAを押し、予定した次のページへ進むか確認する
最後の行動まで、ページを順番にたどる
行き止まり、逆戻り、違う移動先があればFigmaで接続を直す

入口

CTA

見出しとCTA

実務テクニック: 認知的ウォークスルー
見出しだけで、そのページで分かることが伝わるか確認する
CTAの言葉だけで、押した後の結果が分かるか確認する
CTAの移動先で、次に必要な情報がすぐ見つかるか確認する
ページを移動するたびに、見る人が次へ進めるかを確かめる

ペルソナ別サブエージェントレビュー

AI活用テクニック: ペルソナ別サブエージェントレビュー
ペルソナごとにサブエージェントを1つ起動する
全員に同じ入口から同じ最後の行動までたどらせる
各ページの見出し、画像、文章、CTAから、次へ進めるか確認させる
進めないページに足りない要素と、Figmaで直す内容を返してもらう

# ペルソナ別ワイヤーフレームレビュープロンプト

## 対象

- 自サイト_コンセプトシート.md
- 主導線メモ.md
- 修正版サイトマップ.md
- 全ページワイヤーフレーム.pdf

## 実行

コンセプトシートのペルソナごとに、サブエージェントを1つ起動してください。

各サブエージェントは担当するペルソナとして、主導線メモ.mdの入口から最後の行動まで、全ページワイヤーフレーム.pdfをページ順に確認してください。

## ページごとに確認すること

- 見出しから、そのページで分かることを理解できるか
- 文章と画像から、次へ進むために必要な情報を得られるか
- CTAの言葉から、押した後の結果を予測できるか
- CTAの移動先が、主導線メモ.mdの次のページと一致するか
- そのページを見た後の心境が、修正版サイトマップ.mdの想定と一致するか
- 次のページへ進む理由があるか

## 返す内容

進めない箇所だけを、次の順番で返してください。

### ペルソナ名

#### ページ名

- このページに来た時の状況:
- このページを見た後の想定と実際の差:
- 足りない見出し、文章、画像、CTA:
- Figmaで直す内容:
- 次に進むページ:

全サブエージェントの結果をページごとにまとめ、複数のペルソナに共通する修正を先に並べてください。

新しいページは作らず、既存ページの具体的な修正だけを返してください。

Figmaで直す

AIが示した箇所を、ペルソナ案、主導線メモ、実際のFrameと照合する
見出し、文章、画像、CTA、接続先のうち、必要な箇所を直す
複数のペルソナに共通する修正から反映する
修正後、Prototypeの接続を更新する
別のレビュー記録は作らず、Figmaへ直接反映する

AIの指摘

材料との照合

画面・接続を修正

Prototypeを更新

PC版とスマホ版

PC版を入口から最後の行動まで、もう一度たどる
スマホ版にも同じ接続を作り、最初から最後までたどる
PC版とスマホ版で、CTAの言葉と移動先を一致させる
文字切れ、画像切れ、横方向のはみ出しを直す
修正した見出し、文章、画像、CTAが両方に反映されているか確認する

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

修正したPC版とスマホ版をPDFへ書き出す
全ページワイヤーフレーム.pdfを更新する
Prototypeの閲覧リンクを開き、移動できることを確認する

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

PC版

スマホ版

Prototype

PDF

目次

Figma Prototype

CTAからページをつなぐ

Previewで主導線をたどる

見出しとCTA

ペルソナ別サブエージェントレビュー

Figmaで直す

PC版とスマホ版

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