02

設計

ペルソナがCTAに迷わず着く道筋を、サイトマップとワイヤーフレームに落とす

01ペルソナと最終CTAを受け取る
02導線を描くAI
03サイトマップを決めるAI
04ワイヤーフレームに落とすAI
052案並べて選んでもらう

AIとの分担

  • ペルソナと最終CTAの確認
  • 情報の並び順と優先度の決定
  • 決めたことと理由を書面に残す
AI
  • 導線・サイトマップ・ワイヤーフレームの下書き

意識していること

  • 要件定義で決めたペルソナと最終CTAを、設計の起点にします。誰に何をしてほしいかが決まっていないと、ページの構成は決められないからです。

  • 構成は2案並べて、選んで判断できる形で出します。1案だけ出すと「やるか、やらないか」の判断になってしまうためです。

  • 同じことは1か所にだけ書き、そこから全ページに反映される作りにします。あとで増えても直す場所が1つで済みます。

できること

  • ペルソナがどこから来て、どこでCTAを押すかを導線として描く
  • 導線に要るページだけを残したサイトマップにする
  • 構成を2案並べて、選んで判断できる形で出す
  • いまの構成と作り直したあとの構成を並べ、変える理由を1ページずつ書く

使用ツール:ワイヤーフレームは Figma で作っています。

前職での経験

担当機能の設計を任される立場から始め、のちにクラウド基盤上でのシステム設計方針の決定を担当しました。