ui-refactor

UI のリファクタリングとデザイン

このスキルでは、ユーザーインターフェースのデザインに戦術的かつ論理的なルールを適用します。「芸術的な才能」よりも、明快さ、階層、システムを重視します。

基本ワークフロー

1. 機能を優先: 「シェル」（ナビゲーションバー、サイドバー）のデザインから始めないでください。まず、具体的な機能（検索フォーム、連絡先カードなど）から始めます。
2. 低忠実度で作成: まずは色、影、フォントを無視します。レイアウトと余白の問題を先に解決するため、太いマーカーや基本的なワイヤーフレームを使ってグレースケールでデザインします。
3. システムを定義: 任意の値を使わないでください。余白、文字、色について、すぐに制約のあるシステムを確立します。
4. 洗練: 階層、奥行き、仕上げのための具体的な戦術を適用します。

分野別の戦術

具体的な実装ルールについては、以下のリファレンスを参照してください。

• 要素を目立たせる／なじませる: hierarchy.md を参照してください（サイズ、ウェイト、コントラスト、セマンティクス）。
• 余白と配置: layout-spacing.md を参照してください（グリッド、余白のスケール、密度）。
• テキストとフォント: typography.md を参照してください（文字のスケール、行の高さ、フォント）。
• 色とパレット: color.md を参照してください（HSL、彩度、アクセシブルなコントラスト）。
• 画像、影、仕上げ: depth-and-polish.md を参照してください（光源、アセット、仕上げの細部）。

すぐに使える経験則

• 選択肢を絞る: 2 つの選択肢で決められないなら、選択肢が多すぎます。色、フォントサイズ、余白を、あらかじめ定めたスケールに制約してください。
• 個性:
  • シリアス／エレガント: セリフ体フォント、角の鋭い形状、ゴールド／ブルー系の色、フォーマルな言葉遣い。
  • 遊び心／親しみやすさ: 角丸のサンセリフ体、大きな border-radius、ピンク／オレンジ、カジュアルな言葉遣い。
• 複雑さ: 最初からエッジケース向けにデザインしないでください。「ハッピーパス」（シンプルなバージョン）をデザインしてから、複雑さに応じて反復します。