UI基準調整
動作しているUIへ、余白、階層、文字、操作状態の調整を行う。 再設計やライブラリ移行は行わず、既存のデザインシステムと実装方式を優先する。
進め方
- 対象ファイルと実画面を確認する。
- 既存のtoken、component primitive、utility関数、animation方式を特定する。
- 違反を「対象箇所」「影響」「小さな修正」の組で列挙する。
- 重要度の高い操作と状態から直す。
- 複数幅とキーボード操作で確認する。
コンポーネントと操作
- キーボード、フォーカス、overlayを扱う部品は、プロジェクト既存のaccessible primitiveを使う。
- 一つの操作面で複数のprimitive systemを混ぜない。
- iconだけのボタンにはaccessible nameを付ける。
- 破壊的または取り消せない操作には確認用dialogを使う。
- エラーは操作が起きた場所の近くへ表示する。
- pasteを禁止しない。
- fixed要素はsafe areaを考慮する。
- viewport高には
100vhよりdynamic viewport unitを優先する。
読み込みと空状態
- 読み込み中は完成後の構造に対応するskeletonを使う。
- 重要な状態変化は文字でも伝える。
- 空状態には、その状態の理由と実行可能な次の操作を一つ示す。
- disabledな操作だけを置く場合は、利用可能になる条件を示す。
文字とレイアウト
- 既存のtype scaleを使い、見出し、本文、補助情報の差を明確にする。
- 見出しの折り返しと本文の読みやすさを調整する。
- 数表では桁がそろう数字を使う。
- 密な一覧では省略と全文確認の経路を用意する。
- 正方形のiconやavatarは幅と高さを別々に管理しない。
z-indexは既存の段階へ合わせ、任意の大きな値を追加しない。- Tailwind CSSを使う場合、既存tokenまたは標準scaleを優先する。
動きと性能
- 要求されていないanimationを追加しない。
- interaction feedbackは短くし、
transformとopacityを基本にする。 - 大きな面のblur、backdrop filter、継続的なpaintを避ける。
- loopは画面外で停止する。
prefers-reduced-motionを尊重する。- activeでない要素へ恒久的な
will-changeを設定しない。
視覚表現
- 既存themeにないaccentを増やさない。
- 一画面のaccent colorは原則一つにする。
- gradient、glow、shadowを情報階層の代わりに使わない。
- 色だけで状態を区別しない。
- 新しい装飾を足す前に、余白、配置、文字の修正で解決できるか確認する。
完了条件
- 主要操作をTab、Enter、Space、Escapeで扱える。
- narrow viewportで横方向にはみ出さない。
- loading、empty、error、successの必要な状態がある。
- 修正が対象外の構造やライブラリへ波及していない。
- 変更前後の差を、具体的な問題と対応づけて説明できる。
出典
- [ibelick/ui-skills: baseline-ui](https://github.com/ibelick/ui-skills/tree/main/skills/baseline-ui)
- MIT License
- 本文は原文を日本語の調整手順へ再構成した派生文書である。