feat(i18n): Add Japanese (ja/) translation (#105)
- Translate all 101 markdown files: P1 core, all 10 modules, examples, auxiliary docs (CONTRIBUTING, CODE_OF_CONDUCT, SECURITY, CLAUDE.md, etc.), peripheral docs (.github/, docs/, resources/, scripts/) - Translate comments and user-facing messages in 06-hooks/*.sh examples - Copy 05-mcp/*.json examples (standard JSON, no comments) - Update root README.md language switcher to include 日本語 - Add ja/TRANSLATION_NOTES.md (glossary + style guide) All translations pass pre-commit quality gates (markdown-lint, cross-references, mermaid-syntax, link-check, build-epub).
This commit is contained in:
JiangCheng
247
ja/resources/DESIGN-SYSTEM.md
Normal file
247
ja/resources/DESIGN-SYSTEM.md
Normal file
@@ -0,0 +1,247 @@
|
||||
<!-- 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
|
||||
Reference in New Issue
Block a user