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

認知的ウォークスルー

実務テクニック: 認知的ウォークスルー
主導線メモ.mdの記載順に、画面を1ページずつ確認する
ページ定義書.mdと修正版サイトマップ.mdで決めた内容が、画面に表れているか確かめる
一致しない箇所では、直す見出し、文章、画像、主CTAを特定する
今回は全ページのPC版・スマホ版PNGを使う

一番伝える
こと

見出し・文章
画像

主CTA

次の
ページ

ワイヤーフレームの見方

ページ定義書.mdの「ページで一番伝えること」が、最初の見出しで伝わるか
修正版サイトマップ.mdの見出し、文章、画像が、画面に表れているか
主CTAを見つけられるか
主CTAの言葉が、主導線メモ.mdの次のページでできることを表しているか
ページ定義書.mdの「このページで変わる心境」を起こす情報があるか

ペルソナ別レビュー

AI活用テクニック:
プロンプト作成プロンプト
前提、外せない条件、目的だけをCodexへ伝える
ペルソナ別レビューを実行する詳しいプロンプトはCodex自身に作ってもらう
作ったプロンプトはペルソナ別レビュープロンプト.mdへ保存してもらう
保存したプロンプトを実行し、作成したページの修正が必要な箇所、理由、修正内容を返してもらう

# ペルソナ別レビュープロンプト作成

## 前提

- 自サイト_コンセプトシート.md、
  ページ定義書.md、主導線メモ.md、
  修正版サイトマップ.mdがある
- 全ページのPC版・スマホ版PNGがある
- 作成するプロンプトはCodexで実行する

## 条件

- ペルソナごとに1つのサブエージェントを使う
- 主導線の順に全ページのPC版・スマホ版を確認する
- ページ定義書.md、修正版サイトマップ.md、
  主導線メモ.mdと画面を照合する
- 最初の見出し、必要な文章と画像、主CTA、
  次のページ、心境の変化を確認する
- ペルソナ名、ページ名、PC版・スマホ版の別、
  一致しない元ファイルの項目、
  作成したページで修正が必要な箇所、
  理由、修正内容を返す
- ペルソナ別の結果を残し、
  共通する修正は後からページごとにまとめる
- 新しいページや一般的な感想を加えない
- 作成したプロンプトを
  ペルソナ別レビュープロンプト.mdへ保存する

## 目的

全ペルソナのワイヤーフレームを確認する
実行用プロンプトを作成してください。

Figmaで直す

AIが示したページを、ページ定義書、主導線メモ、
修正版サイトマップと照合する
指摘された見出し、文章、画像、主CTAを、該当するFigmaのFrameで直す
内容の修正はPC版とスマホ版の両方へ反映する
画面幅だけの問題は、該当するPC版またはスマホ版で直す
8日目_ランブック.mdに、修正したページ、変更前、変更後、理由を残す

AIの指摘

元ファイルと
照合

PC版を
修正

スマホ版を
修正

PNGへの書き出し

修正した各ページのPC版Frameとスマホ版FrameをPNGへ書き出す
PC版はページ名_PC.pngにする
スマホ版はページ名_スマホ.pngにする
修正前と同じファイル名で保存し、レビューに使ったPNGを更新する
修正版サイトマップ.mdにある全ページのPNGをそろえる

修正済み
Frame

ページ名
_PC.png

ページ名
_スマホ.png

全ページ
更新

提出するもの

修正後のFigmaから書き出した全ページのページ名_PC.png
修正後のFigmaから書き出した全ページのページ名_スマホ.png
8日目_ランブック.md

PC版PNG

スマホ版PNG

ランブック

目次

認知的ウォークスルー

ワイヤーフレームの見方

ペルソナ別レビュー

Figmaで直す

PNGへの書き出し

提出するもの