web-design-guidelines

Web インターフェースのガイドライン

Web インターフェースのガイドラインに準拠しているか、ファイルを確認します。

動作の仕組み

1. #[[file:references/guideline.md]] からガイドラインを読み込みます
2. 指定されたファイルを読み込みます（またはユーザーにファイル／パターンの指定を求めます）
3. ガイドラインのすべてのルールに照らして確認します
4. 簡潔な file:line 形式で指摘事項を出力します

ガイドラインの参照先

すべてのルールと出力形式の指示は、以下に記載されています。

#[[file:references/guideline.md]]

ガイドラインの対象は次のとおりです。

• アクセシビリティ（ARIA、セマンティック HTML、キーボード操作）
• フォーカス状態とキーボード操作
• フォーム（オートコンプリート、検証、ラベル）
• アニメーション（動きの軽減、パフォーマンス）
• タイポグラフィ（適切な文字、数値の書式）
• コンテンツの扱い（オーバーフロー、空の状態）
• 画像（寸法、遅延読み込み）
• パフォーマンス（仮想化、DOM の読み取り）
• ナビゲーションと状態（URL 同期、ディープリンク）
• タッチ操作とインタラクション（タップ遅延、安全領域）
• ダークモードとテーマ
• ロケールと国際化
• ハイドレーションの安全性
• 指摘対象となる一般的なアンチパターン

使い方

ユーザーがファイルまたはパターンを指定した場合：

1. references/guideline.md からガイドラインを読み込みます
2. 指定されたファイルを読み込みます
3. ガイドラインのすべてのルールを適用します
4. ガイドラインで指定された形式で指摘事項を出力します

ファイルが指定されていない場合は、確認するファイルをユーザーに尋ねます。

出力形式

ガイドラインの形式に従います。

• ファイルごとに指摘事項をまとめます
• file:line 形式を使用します（VS Code でクリック可能）
• 簡潔にし、重要度の高い情報に絞ります
• 問題と場所を示します
• 修正方法が自明でない場合を除き、説明は省略します