design-with-taste

Taste に基づくデザイン

ユーザビリティ上の制約が明確になった後に、独自の美意識を反映します。このスキルは、品質基準を満たす選択肢の中から方向性を選びます。タスクの達成、アクセシビリティ、製品の慣例、ユーザーが明示したビジュアルの方向性を覆すことはありません。

利用可能な場合は、品質ゲートとして design-better-interfaces を使用してください。ビジュアルに関する判断を行う前に、references/taste-profile.md を最後まで読んでください。

1. インターフェースの要点を定める

主なタスク、決定的な状態、確立された製品の表現、コンポーネントの種類、情報密度、既存のブランド要素を特定します。変更が依頼の一部でない限り、製品の情報アーキテクチャを維持してください。

現在の階層構造と変更可能な要素が明確になったら、このステップは完了です。

2. 控えめなデフォルトを選ぶ

階層を読み取りやすくするために必要な、装飾を最小限にした構成から始めます。落ち着いたシェル、安定した行、意味に沿った色、状況に応じたコントロール、標準的なアフォーダンスを優先します。注意や意思決定を促す場合に限り、強調を加えてください。

目に見えるすべての境界線、表面、バッジ、色、エフェクト、アニメーションに、それぞれ明確な役割があることを確認したら、このステップは完了です。

3. そぎ落とす

重複したコンテキスト、構造上の意味がない入れ子のコンテナー、常に表示される例外用コントロール、装飾的なステータスラベル、複数のレイヤーが所有する表現を取り除きます。そぎ落としたことで領域や状態が曖昧になった場合は、控えめなラベルを戻してください。

残っている要素を取り除くと、理解しやすさ、状態の明確さ、アフォーダンス、ブランドアイデンティティのいずれかが損なわれる状態になったら、このステップは完了です。

4. 個別のピクセルではなく、コンポーネントの種類ごとに調整する

同種の行、ボタン、メニュー、ポップオーバー、ヘッダー、スクロール領域を比較します。同じ種類の中で、形状、視覚的な重み、角の丸み、アイコンのサイズ、トランジション、表面の所有関係を揃えます。ホバー、選択、ライブ更新の間も、ターゲットの位置を維持してください。

同種の要素が意図的に統一され、例外に意味上の理由があることを確認したら、このステップは完了です。

5. 実際の状況で美意識を検証する

現実的なデータを使い、ライトテーマとダークテーマの両方で、狭幅、中間幅、広幅の画面に主なフローを表示します。長いコンテンツ、ホバー、フォーカス、無効状態、アクティブ状態、オーバーレイ、モーションの低減設定を確認します。同じデータとビューポートを使って、変更前と変更後を比較してください。

カードだらけ、バッジだらけ、二重のシェル、形状が変わるターゲット、装飾的なモーション、ライトテーマでのコントラスト不足、説明のつかない余白が見られたら、修正してください。

情報、復旧手段、プラットフォームへの適合性、タスクの明確さを損なわずにインターフェースが落ち着き、未検証の環境がすべて明記されたら、このステップは完了です。

報告

維持した階層構造、取り除いたクローム、強調を残した箇所、統一したコンポーネントの種類、確認したレンダリング結果について説明します。製品要件と、この美意識のプロファイルに基づいて選択した内容を区別してください。