ux-audit

UX 監査

使用するタイミング

Nielsen のヒューリスティクスと最新のモバイル UX のベストプラクティスを使って、画面の UX 上の問題を監査する必要がある場合にこのスキルを使います。

使用しないタイミング

• アクセシビリティのみの問題の場合 → /ss-a11y を使用します
• デザインシステムのトークンやゴールデンルールへの準拠を確認する場合 → /ss-review を使用します
• コピーやマイクロコピーの品質を確認する場合 → /ss-copy を使用します
• まだ存在しない新しい画面の場合 — まず /ss-page または /ss-flow を使ってデザインします

対象：$ARGUMENTS

これらは、普遍的なルールや WCAG 認証基準ではなく、実際の対象ユーザーとタスクに照らして検証するためのヒューリスティクスとして使用します。6px グリッド、カードの最大 4 項目、3 タップ以内という目標、300ms のスケルトン、アイコンファミリーの選択は、上流のデザイン上の好みです。実際に確認したフローのみを評価し、未テストの状態にはその旨を明記します。失敗しても、支払い、破壊的な操作、保存状態についてユーザーに誤解を与えずに整合性を回復できる場合に限り、楽観的な更新を使用します。

監査フレームワーク

Nielsen のユーザビリティヒューリスティクス 10 項目

1. システムの状態を視認できるようにする

• ローディング状態が表示される（スピナーではなくスケルトン画面）
• 操作後に成功またはエラーのフィードバックが表示される（トースト通知）
• 複数ステップのフローに進行状況インジケーターがある
• ナビゲーション項目のアクティブ状態が明確に表示される
• リアルタイムデータに、鮮度を示すタイムスタンプがある

2. システムと現実世界を一致させる

• ラベルには技術用語ではなく、ユーザーの言葉を使う
• アイコンにわかりやすいラベルがある、または意味がテスト済みである。アイコンライブラリを使っていても、意味が普遍的になるわけではない
• 数値形式がユーザーの期待に合っている（桁区切り、通貨記号）
• 日付形式が地域に適している

3. ユーザーに操作の主導権と自由を与える

• ルート以外のすべての画面で戻るナビゲーションを利用できる
• 破壊的な操作に確認ダイアログがある
• 元に戻せる操作には取り消し手段がある（取り消しボタン付きトースト）
• ボトムシートやモーダルを閉じられる（背景のタップ、下スワイプ、X ボタン）
• ダークパターンがない（操作を強制せず、常に閉じる方法がある）

4. 一貫性と標準に従う

• 同じ操作は、どこでも同じ見た目になっている
• 色の意味が一貫している（緑＝成功、赤＝エラー、ブランドカラー＝アクティブ）
• テキストの階層が 5 段階のグレースケールシステムに従っている
• すべてのカードで、シャドウ、角丸、パディングが統一されている
• 余白が 6px グリッドシステムに従っている

5. エラーを防ぐ

• 破壊的なボタンが視覚的に区別されている（破壊的なバリエーション）
• フォームのバリデーションが入力中ではなく、フォーカスを外したときに行われる
• 危険な操作には明示的な確認が必要である
• エラーが発生する前に入力制約がわかる（文字数制限、形式のヒント）

6. 記憶ではなく、認識でわかるようにする

• すべてのアイコンにラベルがある（特に BottomNav）
• 記憶に頼らずに現在の状態がわかる（アクティブなタブが強調表示される）
• 最近使った項目やよく使う項目が、すぐにアクセスできるよう表示される
• プレースホルダーテキストに、期待される形式が示されている

7. 柔軟性と効率性を高める

• ホームから 3 タップ以内で主要な操作に到達できる
• データ画面でプル・トゥ・リフレッシュができる
• 十分な大きさのタッチターゲットを優先する。ユーザビリティ上の好みと規範的なアクセシビリティ違反を区別する
• よく使う操作が、手の届きやすい画面下部にある

8. 美しさと簡潔さを追求する

• 各画面が 1 つの主要なタスクに焦点を当てている
• 目的のない装飾要素がない
• 情報のピラミッド構造が守られている（最も重要なものを最も大きく表示）
• カードの密度が最大 4 項目のルールに従っている
• 視覚要素が競合していない（1 ページにつき主要な指標は 1 つ）

9. エラーからの復旧を支援する

• エラーメッセージで、何が起きたかをわかりやすく説明している
• エラーメッセージで、問題の解決方法を提案している
• 一部の失敗でページ全体が使えなくならない（カード 1 つの読み込みが失敗しても、他は読み込まれる）
• ネットワークエラーに再試行ボタンがある
• フォームエラーで該当するフィールドが強調表示される

10. ヘルプとドキュメントを用意する

• 空の状態で、ユーザーが次に行う操作を案内している
• 初回利用時の機能にオンボーディングがある（該当する場合）
• 複雑な指標にツールチップがある（該当する場合）

モバイル固有の UX チェック

タッチとジェスチャー

• 使いやすさの目安として44x44pxを推奨します。適用されるプラットフォーム／アクセシビリティ要件と例外を評価してください
• 隣接するタッチターゲット間に最低8pxの間隔を確保してください
• ホバーに依存するインタラクションは使用しないでください（モバイルではホバーできません）
• スワイプジェスチャーには視覚的な手がかりを付けてください（カルーセルインジケーター）

パフォーマンスの体感

• スケルトンスクリーンを300ms以内に表示してください
• ユーザー操作には楽観的な更新を使用してください
• ファーストビューのコンテンツを最初に読み込んでください
• コンテンツの読み込み後にレイアウトシフトが発生しないようにしてください

セーフエリア

• コンテンツがノッチ／Dynamic Islandの背後に隠れないようにしてください
• 画面下部のコンテンツがホームインジケーターの背後に隠れないようにしてください
• BottomNavにpb-safeのパディングを設定してください

ダークパターンの防止

• 起動時にボトムシートを強制表示しないでください
• 離脱を妨げるダイアログを表示しないでください
• すべての画面から戻る／閉じる方法を用意してください
• CTAラベルで操作内容を明確に説明してください
• 操作を誘導するグラフィック（懇願、緊急性の強調）を使用しないでください

出力形式

1. スコア：A+からFまでの評価と内訳
2. 重大な問題：必ず修正（ユーザビリティを損なう問題）
3. 主な問題：修正を推奨（エクスペリエンスを低下させる問題）
4. 軽微な問題：修正すると望ましい点（仕上げ）
5. 推奨事項：各問題に対する具体的なコード変更

例

ユーザーのリクエスト：

Nielsenのヒューリスティックと最新のモバイルUXのベストプラクティスに基づいて、画面のUX上の問題を監査してください。

制限事項

• タスクが上流のソースおよびローカルプロジェクトのコンテキストに明確に合致する場合に限り、このスキルを使用してください。
• コマンド、生成コード、依存関係、認証情報、外部サービスの動作を変更に適用する前に確認してください。
• 例を、環境固有のテスト、セキュリティレビュー、または破壊的もしくは高コストな操作に対するユーザーの承認の代わりにしないでください。