uiux-excellence-guide

UI UX 卓越ガイド

概要

曖昧な UI の依頼を、本番環境で使える判断と実装ガイダンスに変換します。 視覚的な品質、明瞭さ、使いやすさ、アクセシビリティ、レスポンシブ対応、パフォーマンスを、ひとつのシステムとして扱います。

ワークフローの選択

変更を提案する前に、主要なワークフローをひとつ選びます。

1. Greenfield：新しい画面、機能、プロダクトの UI、またはデザインシステムの一部を作成します。
2. Refactor：プロダクトの動作を維持しながら、既存の UI を改善します。
3. Audit：実装の前に、問題点の指摘、診断、修正の優先順位付けを行います。

ユーザーが直接実装を依頼した場合は、ワークフローを内部で進め、変更した UI を提供します。依頼が曖昧でもリスクが低い場合は、妥当な前提を置き、その内容を明示します。

共通ルール

すべてのワークフローで、次のルールを適用します。

1. ユーザーのタスク、対象者、プラットフォーム、成功を示す指標を起点にします。
2. 余白の段階、グリッド、マージン、ガター、密度など、レイアウトのリズムを早い段階で決めます。
3. 余白、タイポグラフィ、色、角丸、エレベーション、モーションにはセマンティックトークンを使用します。
4. マイクロコピー、空の状態、読み込み状態、エラーをインタラクションデザインとして扱います。
5. アクセシビリティの要件は譲れないものとして扱い、満たせていない項目はリスクとして記録します。
6. ツールを利用できる場合は、納品前に実際に変更した部分を検証します。

数値の既定値、アクセシビリティのしきい値、タッチターゲット、モーションのルール、Web Vitals の基準が必要な場合は、references/uiux-baseline-2026.md を読みます。完全なデザイン引き継ぎ資料や監査レポートを作成する場合に限り、references/uiux-delivery-template.md を読みます。

Greenfield

1. 課題を整理します。

• 対象者、プラットフォーム、主要なユーザージャーニー、成功基準を特定します。
• 既存のデザインシステムがあるか確認します。ない場合は、最小限のトークン仕様を定義します。

2. 構造のシステムを確立します。

• 装飾的なスタイルを加える前に、余白、グリッド、マージン、ガター、密度を設定します。
• データ量の多い画面や業務用画面に限り、compact を優先します。

3. 可読性と階層を定義します。

• 文字サイズの段階、行の高さ、コンテンツの階層、状態を先に示す簡潔なラベルを定義します。
• コントラスト、フォーカスの可視性、テキスト以外の操作要素のコントラストを確保します。

4. モーションと状態の伝達方法を定義します。

• 状態の変化と空間的な連続性には、短く意図的なトランジションを使用します。
• モーションを低減する場合の代替動作を用意します。

5. 検証を計画します。

• 実装前に、UX、アクセシビリティ、レスポンシブ対応、パフォーマンスの受け入れ基準を設定します。

Refactor

1. 現状の UI を監査します。

• 混乱、誤操作、読みにくいコンテンツ、階層の問題など、使いづらさの原因を洗い出します。
• トークンの不統一、余白のリズム、レスポンシブな動作、インタラクションパターンを特定します。

2. 変更に優先順位を付けます。

• タスクの達成、エラーの削減、アクセシビリティリスクへの影響に基づいて順位付けします。
• 見た目を整える前に、リスクの低い構造上の修正を優先します。

3. ガードレールを設けてリファクタリングします。

• 回帰が明示的に許容されていない限り、正常に動作している機能を維持します。
• セマンティックトークンに統一し、個別に定義された値を取り除きます。
• ユーザーが行き詰まる箇所では、コピー、状態のフィードバック、復旧手順を改善します。

4. 検証して報告します。

• 変更した部分について、変更前後の動作を比較します。
• 変更したファイルと、ユーザーから見て期待される改善内容を具体的に記載します。

Audit

1. 重要度の高い順に、まず調査結果を提示します。
2. 具体的な根拠（該当する場合はコンポーネント、フロー、ファイル、行番号）を添えます。
3. 曖昧な提案ではなく、実行可能な修正案を示します。
4. 重大な阻害要因と改善の機会を分けて記載します。
5. 検証を完了できない場合は、検証上の不足を明記します。

出力要件

規模の大きいデザイン作業や実装作業では、次の順番で結果を返します。

1. Direction：視覚面と UX の方向性を簡潔に示します。
2. Decisions：余白、タイポグラフィ、密度、モーション、アクセシビリティ、パフォーマンスに関する判断を示します。
3. Implementation：具体的な変更内容、またはコードレベルの計画を示します。
4. Validation：チェックリストと、測定結果または代替指標による結果を示します。
5. Risks：未確認または未テストの事項を示します。

小規模な修正の場合は簡潔に回答しますが、ユーザーから見て変わる点、実施した検証、残るリスクには触れます。

参考資料

• references/uiux-baseline-2026.md：実装のデフォルト設定としきい値。
• references/uiux-delivery-template.md：デザインおよび実装タスクで再利用できる回答形式。