3. 迷わない流れを設計する
利用者が入口から目的まで進む順序と、画面の役割を決めます。
AIでサービスをつくる、非エンジニアのための実践ガイド
UI・動きカタログ
Hover lift
選べるカードを、少し浮かせて伝える反応です。
今すぐ使う
まず動きを試し、意図に合うかを見てください。停止しても内容が分かる設計です。
動きを試す
カードがほんの少し上へ動き、影や輪郭がわずかに強くなります。
AIへの依頼文
内容と対象をひと目確認してから使うと安心です。
分かる範囲で2か所だけ
空欄のままでもコピーできます。秘密情報は書かずにお試しください。
目的:
クリックできるカードに、控えめで一貫したホバー反応を加える。
現在の状態:
【ここに、何をしたらどうなったかを書く】
今回依頼すること:
指定したクリック可能なカードにだけ、少し浮いて見える反応を追加してください。キーボードで選んだときも同等に分かる見た目を用意し、タッチ操作だけでも意味が通じるようにしてください。
変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】
変更しない範囲:
クリックできないカード、本文、カードの並び、リンク先は変えない。
完了条件:
- クリックできるカードだけが反応する
- キーボードフォーカスでも選択可能だと分かる
- 反応がなくても操作方法を理解できる
実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する
実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点カードがほんの少し上へ動き、影や輪郭がわずかに強くなります。
確かめる
見た目の気持ちよさより、読みやすさと操作しやすさを優先します。
理解する
AIへ伝えるときに役立つ名前と、実装で確認するポイントです。
カードが浮く・マウスで少し上がる