---
name: k8o-design
description: k8oが好むUIデザインの方針。UIコンポーネントの作成、画面デザイン、スタイリングの判断時に使用する。ArteOdysseyを使うプロジェクトではコンポーネントやトークンの具体的な使い方を、それ以外のプロジェクトではデザインの方向性を提供する。自由にデザインを作るとき、見た目の判断に迷ったとき、UIレビュー時にも使用する。
---

# k8o Design

k8oが好むデザインの方針。

## 美学

**触れるものは柔らかく、読むものは端正に。**

LinearやCal.comのような方向性。余白がしっかりあり、情報の構造が明確で、視線が自然に流れる。レイアウトとタイポグラフィで魅せ、装飾に頼らない。ただし「ただ情報を載せただけ」に見えるのはNG。意図とこだわりが感じられるデザインを目指す。

### 魅力の源泉は「空間と形」

色ではなく、**余白のゆとり**と**形の柔らかさ**がこのデザインの個性を作る。色は穏やかで目に優しいことが条件であり、色そのものが主役ではない。

- **余白は多めに、呼吸を持たせる**: 要素間に十分な間隔を取り、情報が自然に目に入る
- **角丸で柔らかさを出す**: フォームやカードは大きめの角丸、ボタンはピル型
- **影はふんわりと**: 境界線より奥行きで分離する
- アニメーションは静かな変化。跳ねない、踊らない
- 使いやすさを重視しつつ、他にないより良い見た目を目指す
- ライトモードが本命。ダークモードも対応するが、ライトを基準に設計する

### 要素の性格に合わせた使い分け

すべてを同じトーンにしない。要素の役割に応じてシャープさと柔らかさを使い分ける。

| 要素の種類 | 方向性 | 理由 |
|-----------|--------|------|
| フォーム（input, textarea, button） | 柔らかい（大きな角丸、ピル型ボタン） | ユーザーが触れる場所は親しみやすく |
| カード・コンテナ | 柔らかい（rounded-xl〜2xl、ふんわり影） | コンテンツの器は穏やかに |
| 情報表示（Alert, Badge） | 現行のまま（過度に丸めない） | 情報の明確さを優先 |
| ナビゲーション（Tabs, Breadcrumb） | シャープ（現行のまま） | 構造を示す要素は端正に |

## 質感

| 軸 | 好み |
|------|------|
| ページ背景 | 薄いグレー（bg-subtle）。カードが白で浮く構造 |
| カード | 白背景、大きめ角丸、ふんわり影で奥行き |
| コントラスト | 穏やか。攻撃的でない、目が休まる |
| 余白 | たっぷり。p-8〜p-10、gap-8〜gap-16 |

## 避けるもの

### AI Slop

「AIが生成したUI」に見えるパターンを徹底的に避ける:

- 紫やネオンのグラデーション
- Inter / Roboto / Open Sans（汎用的すぎる）
- bounce / spring アニメーション
- テキストグラデーション
- 装飾的な絵文字の多用
- 透明度によるステート表現（`/90`, `/80`）
- グレー on グレーの低コントラストテキスト
- カードの入れ子（Card in Card）

### 退屈なデザイン

シンプルなだけで工夫のないUIも避ける:

- 情報をただ並べただけのレイアウト
- 視線の導線がないページ構成
- 余白もなく装飾もない、ただ素っ気ないだけのUI

## 色

60-30-10の比率:
- **60%** ニュートラル（グレー系）
- **30%** サポートカラー
- **10%** アクセント（Teal）

色は穏やかで控えめに。鮮やかなパレットは引き出しとして持つが、UIに出る色はセマンティックトークンで抑えたトーンにする。色で魅せるのではなく、空間と形で魅せる。

## タイポグラフィ

- **フォント**: Noto Sans JP、M PLUS 2（日本語最適化フォントを選ぶ）
- **ウェイト**: 3種まで（normal 400、medium 450、bold 700）
- **行間**: 本文は `leading-relaxed`（1.625）で日本語の可読性を確保
- 1ページに4種以上のウェイトを使わない
- 日本語テキストに `uppercase` や `letter-spacing` の拡大をしない

## 余白とレイアウト

- 余白は多めに。要素間に呼吸を持たせる
- `gap-6` を標準間隔、`gap-8` / `gap-10` をセクション区切りに
- ページ背景は `bg-subtle`、カードが白で浮く構造を基本にする
- カードは主要なコンテナ単位。ただしカードの入れ子は禁止
- セクション分割には `Separator` + 余白を使う

## アニメーション

- 持続時間: 最大300ms（150-200msが標準）
- イージング: `ease-out` のみ。spring / bounce は使わない
- 色変化: `transition-colors duration-150 ease-out`
- `prefers-reduced-motion` を尊重する

## インタラクティブステート

| 状態 | 表現 |
|------|------|
| ホバー | 控えめな背景色変化 |
| フォーカス | `focus-visible:ring-2`（マウスユーザーにはリング非表示） |
| アクティブ | やや濃い背景 |
| 無効 | `opacity-50 cursor-not-allowed` |
| エラー | ボーダーとテキストで伝える |

`focus-visible` を使い、`focus` は使わない。

## ArteOdyssey使用時

ArteOdysseyが使えるプロジェクトでは、そのコンポーネントとセマンティックトークンに従う。具体的な使い方はArteOdyssey側のドキュメントを参照。

## ArteOdysseyなしの場合

上記の方針を自由に適用する:
- ページ背景は薄いグレーを基本にする
- Tailwind CSSを使う場合は、セマンティックなカスタムプロパティを定義してから使う
- 生のTailwindカラー（`bg-teal-500`）ではなく、意味のある名前をつける
- ダークモードは色の単純な反転ではなく、独立したトーン設計にする