specsfy-specialist-ui-design

インターフェースデザイン

使用する場面

• インターフェースの階層、グリッド、シェル、密度、トークン、視覚状態、テーブル、フォーム、ナビゲーションを定義または見直すときに使用します。
• 画面は機能していても、構成のためにスキャン、比較、優先順位付け、エラーからの復帰が難しいときに使用します。
• フローがユーザーのニーズを満たしているかを調べる場合は使用しません。調査、ジャーニー、タスクテストには $specsfy-specialist-ux-design を使用します。
• React 実装でコピー可能な TSX リファレンスを利用できる場合は、$specsfy-specialist-react-ui-components と組み合わせます。

フロー

1. $specsfy-specialist-design-system を読み込み、構成を始める前に DESIGNSYSTEM.MD を読みます。ジャーニーと情報フローがユーザーと定義済みであることを確認します。新しい画面やフォームの場合は、主要タスク、画面、フィールド、バリデーション、選択した起動パターンを記録します。ビジュアルの方向性が決まっていない場合は、ドキュメントのデフォルトを適用し、動作やタスクについて回答が必要な場合にのみ UX に戻ります。
2. 新しいビジュアル言語を提案する前に、確認できる技術スタック、トークン、コンポーネント、ブレークポイント、現在のスクリーンショットを調べます。 既存のシステムがある場合は、構成を変更する前に、影響を受ける画面やフロー、そのナビゲーション、コンテンツ、権限、状態も確認します。 フレームワーク、プリミティブ、スタイル、ローカルの規約を維持します。新しいライブラリは、ユーザーが変更を確認した場合、または技術スタックに識別可能な基盤がない場合にのみ提案します。
3. ユーザー、主要タスク、頻度、デバイス、密度、エラーの影響を特定し、その優先順位に従ってコンテンツとアクションを並べます。
4. CRUD では、マクロマトリクスを適用します。リストには PageHeader と DataGrid、詳細には PageHeader と DetailLists、作成と編集には PageHeader とレスポンシブな2カラムのフォームセクションを使用します。各セクションにはコンテキスト列とフィールドパネルを設けます。例外を明示的に設ける場合にのみ、その理由を記録します。
5. レイアウトの前に、データ、単位、権限、nominal、loading、empty、partial、error、offline、permission denied の各状態を整理します。
6. 情報アーキテクチャと整合するシェル、ナビゲーション、グリッドを選択します。references/standards.md のマトリクスを使用します。
7. グルーピング、コントラスト、スケール、余白によって階層を定め、各選択をセマンティックトークンに対応付けます。
8. 既存のものと同等のバリアントを作らず、すべてのブレークポイントでコンポーネントとエッジケースを実装または仕様化します。
9. 開発中は、ユーザーから依頼がなくても、システムの境界線、間隔、マージン、パディング、タイポグラフィを確認します。関連する状態とビューポートで、レンダリング、DOM の検査、または同等の方法を比較します。
10. 視覚面と動作面の根拠を示しながら、実際のコンテンツ、読みやすさ、レスポンシブ対応、アクセシビリティ、一貫性を検証します。結果をタスクの VISUAL 項目に記録します。

実装で React を使用する場合は、構成を定義した後に $specsfy-specialist-react-ui-components を読み込み、ビジュアルの選択をサンプルカタログに委ねずに TSX リファレンスを選びます。

パターン

• ダッシュボードは質問に答えるものであり、装飾的なカードの寄せ集めではありません。
• 詳細より先に概要を配置し、対象オブジェクトのそばにアクションを置きます。
• 密度の高い比較にはテーブル、読みやすさを重視する場合はリスト、異なるエンティティにはカードを使います。
• リストと詳細の間を移動するときは、位置、フィルター、コンテキストを保持します。
• データには単位、期間、出典、更新日時、空の状態を表示します。
• 破壊的なアクションは区別して説明し、可能な場合は元に戻せるようにします。
• セマンティックトークンと、限定されたスペーシング／タイポグラフィのスケールを定義します。
• 汎用的なカードの積み重ねではなく、データ、言葉遣い、トークン、リズム、状態によって個性を表現します。
• フィールドの上にラベルを表示し、フィールドのエラーをフィールドの下に赤色で表示します。
• 関連するフィールドは幅の広いブレークポイントでは2列、モバイルでは1列にします。長いフィールド、ヘルプ、アップロード、エラーは全幅にします。
• DataGrid の行全体を詳細へのナビゲーションにします。行内のボタン、チェックボックス、メニューは行リンクより前面に配置します。
• すべての画面で Breadcrumb を維持し、アクティブなチーム、モジュール、現在の画面を表示します。Laravel では、既存のシェルでレンダリングされる Breadcrumb または Breadcrumbs を活用します。
• CRUD の一覧、詳細、作成、編集で、単一のコンポーネント化された再利用可能な PageHeader を使用します。
• 一覧では DataGrid を全幅で使用し、常に ID 列を表示します。行を詳細へのリンクにし、編集ボタンと削除ボタンは行内で独立して配置します。

アンチパターン

• 質問、期間、比較を示さず、同一のカードに指標を分散させること。画面には数値が表示されても、変動や優先度を解釈できません。
• 画面ごとに新しい色、スペーシング、バリアントを作ること。デザインシステムの共通語彙が失われ、全体的な変更の予測可能性が損なわれます。
• プレースホルダーをラベルとして使うこと、アクセシブルなテキストのないアイコンを使うこと、色だけで状態を示すこと。インタラクションやアクセシビリティの状況によって意味が失われます。
• 「すっきりした」画面にするため、よく使うアクションをメニューに隠すこと。実際の複雑さを減らさずに、運用コストを増やし、発見しにくくします。
• 比較が必要なリストにカードを使うこと、または PageHeader を単独のタイトルに置き換えること。
• 画面ごとに PageHeader のマークアップを複製すること、ID を隠すこと、DataGrid の幅を狭めること、編集と削除をレコードの行の外に置くこと。

検証

• nominal、loading、empty、partial、error、offline、permission denied の各シナリオを、同じ構成で比較します。
• CRUD の画面に応じてレスポンシブな2列セクションを使い、DataGrid、DetailLists、PageHeader、フォームを確認します。
• 各画面で Breadcrumb を確認し、チーム名が表示され、現在の項目がページとしてマークされていることを確認します。Laravel では、既存のコンポーネントが再利用されていることを確認します。
• DESIGNSYSTEM.MD の例外について、適用範囲が記録されていることを確認します。
• 短い／長いコンテンツ、極端な数値、翻訳による文字列の拡張、日付・通貨・タイムゾーンの設定を試します。
• サポート対象の最小ビューポート、200%ズーム、リフロー、コントラスト、キーボード操作、フォーカス、reduced motion を確認します。
• 新しいトークンとコンポーネントを公開済みのものと照合し、重複があればその理由を説明します。
• 実装中に、関連する状態とビューポートで境界線、スペーシング、マージン、パディング、タイポグラフィを確認し、結果を VISUAL 項目に記録します。
• React アセットを適応した場合は、$specsfy-specialist-react-ui-components と共同で最終レビューを行います。
• 重要な状態とビューポートでスクリーンショットまたは同等の検査を行わずに、インターフェースが一貫している、またはレスポンシブであると宣言してはいけません。

関連するスキル

• $specsfy-specialist-reui は、無料カタログにすでに定義されている React と Tailwind のコンポジションに使用します。
• $specsfy-specialist-interface-experience は、ビジュアル構成の前に画面、操作、状態をマッピングします。
• $specsfy-specialist-nextjs はインターフェースのサーバー／クライアント境界とルーティングを管理し、このスキルはコンポジションと視覚的な状態を管理します。
• $specsfy-specialist-prototyping は、最終実装の前に必要最小限の忠実度でコンポジションの選択肢をテストします。
• $specsfy-specialist-shadcn-ui はプリミティブとバリアントを提供し、このスキルはそれらを使用するシステムの階層と一貫性を決定します。
• $specsfy-specialist-ux-design は、調査、ユーザージャーニー、情報アーキテクチャ、タスクの検証を管理します。
• $specsfy-specialist-react-ui-components は、コンポジションと階層の定義後に TSX の例を提供します。
• $specsfy-specialist-design-system は、ビジュアル構成の前にマクロルール、デフォルト、標準シナリオを提供します。
• $specsfy-specialist-web-accessibility は、WCAG、キーボード、支援技術の監査を行います。
• $specsfy-specialist-tailwind-css は、観察されたスタックが Tailwind の場合に、トークンとバリアントをユーティリティに変換します。

レイアウト、密度、データ、トークン、状態、ビジュアルレビューのルールに関するマトリックスについては、references/standards.md を参照してください。