ss-audit

このワークフローの前に、セッションごとに一度だけ実行する更新前の確認を行ってください。

UX 監査

レジストリ優先の成果物境界

.styleseed/project.json と .styleseed/artifacts/index.json が存在する場合は、まず要求された成果物 ID を解決してから、.styleseed/bundles/<artifact-id>.md と .styleseed/manifests/<artifact-id>.json のみを読み込んでください。レジストリを使用するプロジェクトでは、グローバルな旧形式のバンドルにフォールバックしないでください。旧形式のプロジェクトでは、レジストリが存在しない場合に限り .styleseed/effective-rules.md を使用できます。

使用しないケース

• アクセシビリティのみの問題 → /ss-a11y を使用
• デザインシステムのトークン／ゴールデンルールへの準拠 → /ss-review を使用
• コピー／マイクロコピーの品質 → /ss-copy を使用
• まだ存在しないまったく新しい画面 → /ss-page または /ss-flow で先にデザイン

対象：$ARGUMENTS

監査フレームワーク

ニールセンのユーザビリティ10原則

1. システムの状態を可視化する

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

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

• ラベルには技術用語ではなく、ユーザーの言葉を使う
• アイコンは広く認識されている（Lucide 標準セット）
• 数値形式がユーザーの期待に合っている（桁区切り、通貨記号）
• 日付形式がロケールに適している

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

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

4. 一貫性と標準に従う

• 同じ操作は、どこでも同じ見た目になっている
• 色の意味が一貫している（緑＝成功、赤＝エラー、ブランドカラー＝アクティブ）
• テキストの階層が5段階のグレースケールシステムに従っている
• サーフェスの処理が、解決済みの文法とブランドレシピに従っている
• 余白が、解決済みのトークンスケールとアダプターの制約に従っている

5. エラーを防止する

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

6. 記憶するよりも認識できるようにする

• アイコン操作にアクセシブルなラベルが付いている。ナビゲーションラベルは選択したアダプターに従っている
• 記憶しなくても現在の状態がわかる（アクティブなタブが強調表示される）
• 最近使った項目／よく使う項目にすばやくアクセスできる
• プレースホルダーテキストに期待される形式が示されている

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

• 主要な操作に、製品に適した経路からアクセスできる
• 更新動作がプラットフォームアダプターと製品のデータの意味に従っている
• タッチ領域が 44x44px 以上である。ポインター優先の操作部品は解決済みの仕様に従っている（承認済みの 36–40px の操作部品はタッチ対応の不備ではありません）
• よく使う操作が、解決済みのナビゲーションアダプターに沿って配置されている

8. 美しく、最小限のデザインにする

• 各画面が主要なタスクを1つに絞っている
• 目的に役立たない装飾要素がない
• 情報の階層が守られている（最重要の情報が最も大きい）
• カードとコレクションの密度が、解決済みの文法とタスクの複雑さに従っている
• 競合する視覚要素がない（1ページにつき主要な指標は1つ）

9. ユーザーがエラーから回復できるようにする

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

10. ヘルプとドキュメント

• 空の状態では、ユーザーが次の操作を行えるよう案内します
• 初めて使う機能のオンボーディング（該当する場合）
• 複雑な指標のツールチップ（該当する場合）

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

タッチとジェスチャー

• タッチ操作面では、タップ領域を最小 44x44px にします。すべての入力方式で、該当するアクセシビリティの最低基準を維持します
• 隣接するタッチターゲット間に最低 8px の間隔を設けます
• ホバーに依存する操作はありません（モバイルではホバーできません）
• スワイプジェスチャーには、視覚的な手がかり（カルーセルのインジケーター）を設けます

パフォーマンスの体感

• スケルトン画面が 300ms 以内に表示されます
• ユーザー操作に対して楽観的な更新を行います
• ファーストビューのコンテンツを最初に読み込みます
• コンテンツの読み込み後にレイアウトシフトが発生しません

セーフエリア

• コンテンツがノッチ／Dynamic Island の背後に隠れません
• 画面下部のコンテンツがホームインジケーターの背後に隠れません
• 適用される場合、ナビゲーション領域がプラットフォームのセーフエリア仕様に従います

ダークパターンの防止

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

出力形式

1. 評価：内訳付きの A+ から F までの評価
2. 重大な問題：必ず修正（ユーザビリティを妨げます）
3. 主要な問題：修正を推奨（ユーザー体験を損ないます）
4. 軽微な問題：修正するとよい点（仕上げ）
5. 推奨事項：各問題に対する具体的なコード変更