claude-howto/ja/resources/DESIGN-SYSTEM.md

<!-- i18n-source: resources/DESIGN-SYSTEM.md -->
<!-- i18n-source-sha: 20779db -->
<!-- i18n-date: 2026-04-27 -->
# Claude How To — デザインシステム

## ビジュアル・アイデンティティ

### アイコンデザインのコンセプト：コードブラケット付きコンパス

Claude How To のアイコンは **`>` コードブラケット付きのコンパス** で、コードを進む案内付きナビゲーションを表現する：

```
     N (green)
     ▲
     │
W ───>─── E     Compass = Guidance/Direction
     │          > Bracket = Code/Terminal/CLI
     ▼
     S (black)
```

これにより以下が生まれる：
- **視覚的な明瞭さ**: 「コードのナビゲーションガイド」を即座に伝える
- **象徴的意味**: コンパス＝進路を見つける、`>`＝コード／ターミナル
- **拡張性**: 16px から 512px までどのサイズでも機能する
- **ブランドの一貫性**: 最小限のパレットで開発者ツールの美学に合致する

---

## カラーシステム

### パレット

| 色 | Hex | RGB | 用途 |
|-------|-----|-----|-------|
| ブラック（プライマリ） | `#000000` | 0, 0, 0 | 主要ストローク、テキスト、南針 |
| ホワイト（背景） | `#FFFFFF` | 255, 255, 255 | 明るい背景 |
| グレー（セカンダリ） | `#6B7280` | 107, 114, 128 | 補助目盛り、補助テキスト |
| ブライトグリーン（アクセント） | `#22C55E` | 34, 197, 94 | 北針、中央のドット、アクセント線 |
| ニアブラック（ダーク背景） | `#0A0A0A` | 10, 10, 10 | ダークモード背景 |

### コントラスト比（WCAG）

- 白地に黒: **21:1** AAA
- 白地にグレー: **4.6:1** AA
- 白地にグリーン: **3.2:1**（装飾用のみ。テキストには使わない）
- ダーク地に白: **19.5:1** AAA

### アクセントカラーのルール

**ブライトグリーン（#22C55E）はハイライト専用：**
- コンパスの北針
- 中央のドット
- アクセントの下線・枠線
- 背景色には使わない
- 本文テキストには使わない

---

## タイポグラフィ

### ロゴフォント
- **ファミリー**: Inter, SF Pro Display, -apple-system, Segoe UI, sans-serif
- **「Claude」**: 42px、weight 700（bold）、ブラック
- **「How-To」**: 32px、weight 500（medium）、グレー（#6B7280）
- **サブタイトル**: 10px、weight 500、グレー、letter-spacing 1.5px、大文字

### インターフェイスフォント
- **ファミリー**: Inter, SF Pro, system fonts (sans-serif)
- **ウェイト**: 400〜600
- **スタイル**: クリーンで読みやすい

---

## アイコン詳細

### コンパス仕様

コンパスマークは以下の幾何要素で構成される：

```
Element             | Stroke/Fill    | Color
--------------------|----------------|------------------
Outer ring          | 3px stroke     | Black / White (dark mode)
North tick          | 2.5px stroke   | Black / White (dark mode)
Other cardinal ticks| 2px stroke     | Gray / White 50% (dark mode)
Intercardinal ticks | 1.5px stroke   | Gray / White 40% (dark mode)
North needle        | filled polygon | #22C55E (always green)
South needle        | filled polygon | Black / White (dark mode)
> bracket           | 3px stroke     | Black / White (dark mode)
Center dot          | filled circle  | #22C55E (always green)
```

### サイズ別の進化

```
16px  → Ring + needles + chevron only (minimal)
32px  → Adds cardinal tick marks
64px  → Adds intercardinal tick marks
128px → Full detail, all elements crisp
256px → Maximum detail, thick strokes
```

---

## サイズ指針

### ロゴサイズ

- **最小**: 幅 200px（Web 用）
- **推奨**: 520px（ネイティブサイズ）
- **最大**: 無制限（ベクター形式）
- **アスペクト比**: 約 4.3:1（幅:高さ）

### アイコンサイズ

- **最小**: 16px（favicon）
- **推奨**: 64〜256px（アプリ、アバター）
- **最大**: 無制限（ベクター形式）
- **アスペクト比**: 1:1（正方形）

---

## スペーシングと配置

### ロゴのスペーシング

```
┌─────────────────────────────────────┐
│                                     │
│        Clear Space Minimum          │
│         (logo height / 2)           │
│                                     │
│    [COMPASS]  Claude                │
│               How-To                │
│                                     │
└─────────────────────────────────────┘
```

### アイコンの中心点

すべてのアイコンはキャンバス中央に揃える：
- 256px キャンバスでは 128×128
- 128px キャンバスでは 64×64
- 他の UI 要素との整列を維持する

---

## アクセシビリティ

### カラーコントラスト
- すべてのテキストは WCAG AA（最低 4.5:1）を満たす
- グリーンアクセントは装飾用で情報伝達には用いない
- 赤緑の色依存はない

### 拡張性
- ベクター形式で任意のサイズで明瞭
- 16px でも図形が認識可能
- 利用可能サイズに応じて段階的に詳細化

---

## 利用例

### Web ヘッダー
- サイズ: 520×120px のロゴ
- ファイル: `logos/claude-howto-logo.svg`
- 背景: ホワイトまたはダーク（#0A0A0A）
- パディング: 最低 20px

### アプリアイコン
- サイズ: 256×256px
- ファイル: `icons/claude-howto-icon.svg`
- 背景: ホワイトまたはダーク
- 用途: アプリのショートカット、アバター

### ブラウザの Favicon
- サイズ: 32px（メイン）、16px（フォールバック）
- ファイル: `favicons/favicon-32.svg`
- 形式: 鮮明な表示のため SVG

### ソーシャルメディア
- プロフィール: 256×256px のアイコン
- バナー: 520×120px のロゴ（中央配置）

### ドキュメント
- 章ヘッダー: ロゴを適切なサイズに調整
- セクションアイコン: 64×64px の favicon
- インライン: 32×32px の favicon

---

## ファイル形式の詳細

### SVG 構造

すべての SVG ファイルはフラットデザイン：
- グラデーションなし（単色のみ）
- フィルター効果なし（ぼかし、グロー、シャドウなし）
- クリーンなストロークと塗りの幾何学
- レスポンシブスケーリング用の ViewBox
- 可読でコメント付きのコード

### クロスブラウザ互換性

- Chrome／Edge: 完全対応
- Firefox: 完全対応
- Safari: 完全対応
- iOS Safari: 完全対応
- すべての近代的ブラウザ: 完全対応

---

## カスタマイズ

### アクセントカラーの変更

別のアクセントを使うバリアントを作るには：

1. すべての `#22C55E` を任意のアクセントカラーに置換する
2. 装飾要素のコントラスト比を 3:1 以上に保つ
3. 黒・白・グレーの構造は変えない

### スケーリング

```css
svg {
  width: 256px;
  height: 256px;
}
```

SVG は viewBox で自動スケールする — transform は不要。

---

## バージョン管理

デザイン変更を git で追跡する：
- SVG ファイルは通常通りバージョン管理する（テキスト形式）
- デザイン変更を伴うリリースにタグを付ける
- DESIGN-SYSTEM.md をコミットに含める

---

**最終更新**: 2026 年 2 月
**デザインシステムバージョン**: 3.0