Skill ファイル

Ui Design

Name: Ui Design
Author: Gami19

UI デザインの設計・レビュー・改善を、書籍『Refactoring UI』の原則に基づいて支援する。視覚的階層、スペーシング、タイポグラフィ、カラー、コンポーネント設計のベストプラクティスを適用。 Use when user says「UIを改善して」「デザインをレビューして」「配色を決めて」「レイアウトを設計して」「コンポーネントを設計して」「UIのベストプラクティスを教えて」「スペーシングを修正して」「タイポグラフィを改善して」「カラーパレットを作って」「ボタンのスタイルを決めて」「フォームを設計して」「カードデザインを作って」。

Gami190 スター2026/04/08

職業
カテゴリ: 教育

スキル内容

Skill: UI Design（UI 設計・レビュー・改善）

デザインは芸術ではなくエンジニアリング — 制約とシステムの中で最適解を見つけよ

Instructions

ワークフロー内の位置

要件定義 → [ui-design] → 実装（effective-typescript）→ review
              ↓
         フロントエンド設計
         ・視覚的階層
         ・スペーシングシステム
         ・カラーパレット
         ・コンポーネント設計

入力

入力	説明	例
UI コード（HTML/CSS/TSX）	既存 UI の改善対象	React コンポーネント、CSS ファイル
ワイヤーフレーム / 要件

関連 Skill

Ui Design | Skills Pool

出力	形式	説明
改善提案	Markdown + コード	問題点の指摘と具体的な修正案
CSS / デザイントークン	CSS / JSON	カラーパレット、スペーシングスケール
コンポーネント設計	HTML/CSS/TSX	コンポーネントの構造とスタイル
レビューレポート	Markdown	UI の品質評価と改善優先度

観点	確認項目	参照
視覚的階層	Primary / Secondary / Tertiary の 3 段階が存在するか	visual-hierarchy.md
スペーシング	一貫したスペーシングスケールに従っているか	spacing-and-layout.md
タイポグラフィ	フォント種類・サイズ・行間が体系的か	typography-guide.md
カラー	パレットが 3 層（Primary/Neutrals/Supporting）で構成されているか	color-system.md
コンポーネント	ボタン・フォーム・カード等が一貫しているか	component-patterns.md
深度・影	影のエレベーションシステムがあるか	depth-images-finishing.md §1
画像・背景	画像上テキストのコントラスト、UGC 対応は適切か	depth-images-finishing.md §2
仕上げ・装飾	空の状態、アクセントボーダー、デフォルト強化があるか	depth-images-finishing.md §3

パターン	確認方法
Inter / Roboto / Open Sans が使用されている	フォント宣言を確認
白背景に紫グラデーション	背景 CSS を確認
全要素が均等間隔のグリッド配置	レイアウト構造を確認
アニメーション・トランジションが皆無	motion 関連 CSS の有無を確認
背景がべた塗りのみ	background プロパティを確認
コンテキスト固有の個性が感じられない	業種・ブランドとの整合を確認

レイヤー	サイズ	色	ウェイト	用途
Primary	大きめ	濃い色（Neutral 50-200）	Bold / Semibold	見出し、キー情報
Secondary	標準	中間色（Neutral 300-400）	Regular	説明文、メタデータ
Tertiary	小さめ	薄い色（Neutral 500-600）	Regular / Light	日付、注釈

Primary Action:   塗りつぶしボタン（1 画面 1-2 個）
Secondary Action: ボーダーボタン / 薄い背景ボタン
Tertiary Action:  テキストリンク
Danger Action:    Red 系カラーボタン（破壊的操作）

4px — 8px — 12px — 16px — 24px — 32px — 48px — 64px — 96px — 128px

/* 本文の最大幅 */
.prose { max-width: 65ch; }  /* 約 45-75 文字 */

:root {
  /* Primary — Blue 例 */
  --primary-900: hsl(205, 100%, 21%);  /* #003E6B — 最暗 */
  --primary-700: hsl(205, 82%, 33%);   /* #0F609B */
  --primary-500: hsl(205, 67%, 45%);   /* #2680C2 — Base */
  --primary-300: hsl(205, 84%, 74%);   /* #84C5F4 */
  --primary-100: hsl(205, 79%, 92%);   /* #DCEEFB — 最明 */

  /* Neutrals — Blue Grey */
  --neutral-900: hsl(209, 61%, 16%);   /* #102A43 — テキスト */
  --neutral-700: hsl(209, 34%, 30%);   /* #334E68 */
  --neutral-500: hsl(210, 22%, 49%);   /* #627D98 */
  --neutral-300: hsl(210, 31%, 80%);   /* #BCCCDC — ボーダー */
  --neutral-100: hsl(210, 36%, 96%);   /* #F0F4F8 — 背景 */
}

コンポーネント	主要な設計判断	参照
ボタン	階層（Primary/Secondary/Tertiary）、サイズ、角丸	component-patterns.md
フォーム	入力スタイル、ラベル配置、バリデーション表示	component-patterns.md
カード	影 vs ボーダー、画像配置、情報構造	component-patterns.md
テーブル	ストライプ、数値配置、ヘッダースタイル	component-patterns.md
ナビゲーション	水平 vs 垂直、アクティブ表示	component-patterns.md
アラート	スタイル、アクセントボーダー位置	component-patterns.md
アイコン	サイズ統一、色の一貫性、ラベル併用	icon-catalog.md

:root {
  --shadow-sm:  0 1px 3px hsla(0, 0%, 0%, 0.2);
  --shadow-md:  0 4px 6px hsla(0, 0%, 0%, 0.1),
                0 2px 4px hsla(0, 0%, 0%, 0.06);
  --shadow-lg:  0 5px 15px hsla(0, 0%, 0%, 0.1),
                0 4px 6px hsla(0, 0%, 0%, 0.07);
  --shadow-xl:  0 15px 35px hsla(0, 0%, 0%, 0.2);
  --shadow-2xl: 0 20px 25px hsla(0, 0%, 0%, 0.15),
                0 10px 10px hsla(0, 0%, 0%, 0.04);
}

影レベル	用途	インタラクション
sm	ボタン、小さなインタラクティブ要素	クリック時に除去
md	カード、ドロップダウン	ホバーで lg へ
lg	ポップオーバー、ホバー時のカード	—
xl	モーダルダイアログ	—
2xl	最前面の大きなモーダル	—

/* 直接光（大きく柔らかい）+ 環境光（タイトで暗い）の 2 層構成 */
box-shadow:
  0 4px 6px rgba(0, 0, 0, 0.07),
  0 5px 15px rgba(0, 0, 0, 0.1);

手法	実装	推奨場面
半透明オーバーレイ	`background-color: hsla(0,0%,0%,.55)`	ヒーローセクション
画像コントラスト低減	`brightness: +40%; contrast: -70%`	写真の印象を保ちたい場合
画像カラー化	desaturate + multiply ブレンド	ブランドカラー統一
テキストシャドウ	`text-shadow: 0 0 50px hsla(0,0%,0%,.4)`	部分的にコントラストを補強

.user-image {
  object-fit: cover;
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.1); /* にじみ防止 */
}

.card { border-top: 4px solid var(--primary-500); }
.alert-warning { border-left: 4px solid var(--yellow-500); }

## UI 改善提案

### 問題点
1. [視覚的階層] テキストの階層が不明確（全要素が同じウェイト・色）
2. [スペーシング] margin/padding に一貫性がない（13px, 17px 等の任意値）
3. [カラー] ダークテキストのコントラスト比が不足

### 改善案
（具体的な CSS / コード変更を提示）

### 改善後の効果
- 視認性の向上
- 一貫性のある見た目
- アクセシビリティの改善

## デザイントークン

### Colors
（CSS カスタムプロパティで定義）

### Typography
（フォント・サイズ・行間のスケール）

### Spacing
（スペーシングスケール）

### Shadows
（box-shadow の段階定義）

### Motion
（ページロード演出 + インタラクションフィードバック + 状態遷移の定義）

### prefers-reduced-motion 対応
（アクセシビリティ対応コード）

「このダッシュボードの UI をレビューして改善案を出して」

→ Step 1 で 5 観点の分析を実施
→ 問題点を優先度付きで列挙
→ 各問題に対する具体的な CSS 修正案を提示

「新規プロジェクトのカラーパレットを設計して。ブランドカラーは青系」

→ Step 4 で HSL ベースの 3 層パレットを生成
→ Primary（Blue 10段階）/ Neutrals（Blue Grey 10段階）/ Supporting（Red, Yellow, Green 各10段階）
→ CSS カスタムプロパティとして出力
→ コントラスト比の確認

「ボタンとフォームのコンポーネントスタイルを設計して」

→ Step 2b でボタン階層を設計
→ Step 5 でフォームスタイルを選定
→ HTML/CSS のコード例を出力
→ レスポンシブ対応を含む

「アプリケーション用のタイポグラフィシステムを作って」

→ Step 3 でスペーシングスケールも同時に設計
→ フォント選定（システムフォント or カスタムフォント）
→ サイズスケール、行間、文字間の定義
→ CSS / Tailwind 設定として出力

「ヒーロー画像の上にテキストを載せたいが読みにくい。改善して」

→ Step 7 で背景画像のコントラスト対策を実施
→ 半透明オーバーレイ or テキストシャドウを適用
→ Step 2 でテキスト階層を設計
→ Step 9 でアクセントボーダー・背景装飾の仕上げ

「アプリの初回ログイン画面が殺風景。デザインを改善して」

→ Step 9 で空の状態をデザイン（イラスト + CTA）
→ デフォルト要素の強化（アイコン付き箇条書き、カスタムチェックボックス）
→ アクセントボーダーの配置
→ ボーダーの代替を検討（shadow / 背景色 / 余白）

問題	原因	解決策
すべてが同じに見える	視覚的階層が不足	Step 2 で 3 レイヤーの差を大きくする
色の組み合わせが悪い	パレットが体系的でない	Step 4 で HSL ベースの 10 段階を再設計
テキストが読みにくい	コントラスト比不足 or 行間不足	コントラスト比 4.5:1 以上、line-height 1.5 以上
余白がバラバラに見える	任意の数値を使っている	Step 3 のスペーシングスケールに統一
ボタンが多すぎて迷う	アクション階層が不明確	Primary は 1 画面 1-2 個に制限
カードがのっぺりしている	深度表現がない	Step 6 の shadow 段階を適用
フォームが使いにくい	ラベル配置やバリデーション表示が不適切	Step 5 のフォーム設計パターンを参照
アイコンが浮いている	サイズ・色がテキストと不一致	icon-catalog.md のサイズ指針を適用
画像上のテキストが読めない	背景画像の明暗が不均一	Step 7 のオーバーレイ / テキストシャドウを適用
画面が殺風景に見える	仕上げが不足	Step 9 のアクセントボーダー / デフォルト強化を適用
空の状態が放置されている	未デザイン	Step 9 でイラスト + CTA のデザインを追加
アニメーションがない / 静的に見える	モーション設計が未実施	Step 8 のページロード演出 / インタラクションフィードバックを適用
アニメーションで酔う・不快感がある	速度が速すぎる or 動きが大きすぎる	`prefers-reduced-motion` 対応、150-500ms の範囲に収める
影がリアルに見えない	単一シャドウのみ使用	Step 6 の二重シャドウ（直接光 + 環境光）を適用

ファイル	内容
visual-hierarchy.md	視覚的階層の詳細パターン
spacing-and-layout.md	スペーシングシステム + レイアウト原則
typography-guide.md	タイポグラフィの選択基準 + スケール
color-system.md	HSL パレット設計 + アクセシビリティ
component-patterns.md	コンポーネント設計原則 + バリエーション
icon-catalog.md	200 SVG アイコン一覧 + CSS カラーサンプル
motion-guide.md	モーション・トランジション・アニメーション設計
depth-images-finishing.md	深度・光源模倣・画像処理・仕上げテクニック

スキル	関係	説明
ux-psychology	補完	ux-psychology = 心理学的 WHY（なぜこのデザインが効果的か）、ui-design = 視覚的 HOW（どう作るか）。特に Aesthetic-Usability Effect と AI slop 回避の判断基準を共有
front-design	補完	既存 UI の分析・改善・レビューは ui-design、新規サイトのビジュアル戦略・アセット準備は front-design。AI slop 回避の詳細チェックは front-design の design-quality-standards.md を参照
effective-typescript	後続	UI 設計に基づく React/TSX コンポーネントの実装
review	検証	UI の品質レビュー、アクセシビリティ検証
diagram	補助	ワイヤーフレームやフロー図の作成

層	役割	段階数
Primary	ブランドカラー、主要アクション	8-10 段階
Neutrals	テキスト、背景、ボーダー	8-10 段階
Supporting	エラー・警告・成功・情報	各 8-10 段階

Ui Design

Skill: UI Design（UI 設計・レビュー・改善）

Instructions

ワークフロー内の位置

入力

Ui Design

Skill: UI Design（UI 設計・レビュー・改善）

Instructions

ワークフロー内の位置

入力

出力

Step 1: 現状分析

1f. AI 生成デザインの均質化チェック

Step 2: 視覚的階層の設計

2a. テキスト階層の確立

2b. アクション階層の確立

Step 3: スペーシングシステムの適用

推奨スケール

適用ルール

テキスト幅の制限

Step 4: カラーシステムの設計

4a. 3 層パレットの構築

4b. HSL での定義

4c. アクセシビリティ確認

Step 5: コンポーネントの設計・改善

対象コンポーネント

Step 6: 深度と影（Depth & Shadow）

光源の原則

box-shadow の 5 段階エレベーション

二重シャドウ（質の高い影）

フラットデザインでの深度表現

Step 7: 画像とコンテンツ

テキスト × 背景画像のコントラスト

意図されたサイズ

UGC（ユーザーアップロードコンテンツ）

Step 8: モーションとトランジション

8a. ページロード演出の設計

8b. インタラクションフィードバック

8c. 状態遷移の演出

8d. アクセシビリティ

8e. パフォーマンス

Step 9: 仕上げのテクニック

デフォルトの強化

アクセントボーダー

空の状態（Empty States）

ボーダーの代替

Step 10: 出力とレビュー

改善提案の場合

デザインシステムの場合

出力に含めるべき項目（追加）

Examples

Example 1: 既存 UI のレビューと改善

Example 2: カラーパレットの設計

Example 3: コンポーネント設計

Example 4: タイポグラフィスケールの設計

Example 5: ランディングページのヒーローセクション設計

Example 6: 空の状態と仕上げの改善

Troubleshooting

References

Related Skills

Update Skills

Eval Harness

Ecc Tools Cost Audit

Code Tour

Rules Distill

Design System