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).

ja/resources/DESIGN-SYSTEM.md

@@ -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

ja/resources/QUICK-START.md

@@ -0,0 +1,92 @@
+<!-- i18n-source: resources/QUICK-START.md -->
+<!-- i18n-source-sha: 20779db -->
+<!-- i18n-date: 2026-04-27 -->
+# クイックスタート — ブランドアセット
+
+## アセットをプロジェクトにコピーする
+
+```bash
+# すべてのリソースを Web プロジェクトにコピー
+cp -r resources/ /path/to/your/website/
+
+# Web 用 favicon のみをコピー
+cp resources/favicons/* /path/to/your/website/public/
+```
+
+## HTML へ追加（コピー＆ペースト）
+
+```html
+<!-- Favicons -->
+<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg" sizes="32x32">
+<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
+<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
+<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
+<meta name="theme-color" content="#000000">
+```
+
+## Markdown／ドキュメントで使う
+
+```markdown
+# Claude How To
+
+![Claude How To Logo](resources/logos/claude-howto-logo.svg)
+
+![Icon](resources/icons/claude-howto-icon.svg)
+```
+
+## 推奨サイズ
+
+| 用途 | サイズ | ファイル |
+|---------|------|------|
+| Web サイトヘッダー | 520×120 | `logos/claude-howto-logo.svg` |
+| アプリアイコン | 256×256 | `icons/claude-howto-icon.svg` |
+| ブラウザタブ | 32×32 | `favicons/favicon-32.svg` |
+| モバイルホーム画面 | 128×128 | `favicons/favicon-128.svg` |
+| デスクトップアプリ | 256×256 | `favicons/favicon-256.svg` |
+| 小さなアバター | 64×64 | `favicons/favicon-64.svg` |
+
+## カラーコード
+
+```css
+/* CSS でこれらを使用 */
+--color-primary: #000000;
+--color-secondary: #6B7280;
+--color-accent: #22C55E;
+--color-bg-light: #FFFFFF;
+--color-bg-dark: #0A0A0A;
+```
+
+## アイコンデザインの意味
+
+**コードブラケット付きコンパス**:
+- コンパスリング ＝ ナビゲーション、体系的な学習経路
+- 緑の北針 ＝ 方向、進捗、ガイダンス
+- 黒の南針 ＝ 基盤、揺るぎない土台
+- `>` ブラケット ＝ ターミナルプロンプト、コード、CLI コンテキスト
+- 目盛り ＝ 精度、体系的なステップ
+
+「明確なガイダンスでコードを進む道を見つける」を象徴している。
+
+## どこで何を使うか
+
+### Web サイト
+- **ヘッダー**: ロゴ（`logos/claude-howto-logo.svg`）
+- **Favicon**: 32px（`favicons/favicon-32.svg`）
+- **ソーシャルプレビュー**: アイコン（`icons/claude-howto-icon.svg`）
+
+### GitHub
+- **README バッジ**: アイコン（`icons/claude-howto-icon.svg`）64〜128px
+- **リポジトリアバター**: アイコン（`icons/claude-howto-icon.svg`）
+
+### ソーシャルメディア
+- **プロフィール画像**: アイコン（`icons/claude-howto-icon.svg`）
+- **バナー**: ロゴ（`logos/claude-howto-logo.svg`）
+- **サムネイル**: 256×256px のアイコン
+
+### ドキュメント
+- **章ヘッダー**: ロゴまたはアイコン（適切にスケール）
+- **ナビゲーションアイコン**: Favicon（32〜64px）
+
+---
+
+完全なドキュメントは [README.md](README.md) を参照。

ja/resources/README.md

@@ -0,0 +1,269 @@
+<!-- i18n-source: resources/README.md -->
+<!-- i18n-source-sha: 20779db -->
+<!-- i18n-date: 2026-04-27 -->
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="../../resources/logos/claude-howto-logo-dark.svg">
+  <img alt="Claude How To" src="../../resources/logos/claude-howto-logo.svg">
+</picture>
+
+# Claude How To — ブランドアセット
+
+Claude How To プロジェクトのロゴ・アイコン・favicon の完全コレクション。すべて V3.0 デザインを使用：コードブラケット（`>`）付きコンパスシンボルで、コードを進む案内付きナビゲーションを表現する。ブラック／ホワイト／グレーのパレットにブライトグリーン（#22C55E）のアクセントを加えている。
+
+## ディレクトリ構造
+
+```
+resources/
+├── logos/
+│   ├── claude-howto-logo.svg       # Main logo - Light mode (520×120px)
+│   └── claude-howto-logo-dark.svg  # Main logo - Dark mode (520×120px)
+├── icons/
+│   ├── claude-howto-icon.svg       # App icon - Light mode (256×256px)
+│   └── claude-howto-icon-dark.svg  # App icon - Dark mode (256×256px)
+└── favicons/
+    ├── favicon-16.svg              # Favicon - 16×16px
+    ├── favicon-32.svg              # Favicon - 32×32px (primary)
+    ├── favicon-64.svg              # Favicon - 64×64px
+    ├── favicon-128.svg             # Favicon - 128×128px
+    └── favicon-256.svg             # Favicon - 256×256px
+```
+
+`assets/logo/` 内の追加アセット：
+```
+assets/logo/
+├── logo-full.svg       # Mark + wordmark (horizontal)
+├── logo-mark.svg       # Compass symbol only (120×120px)
+├── logo-wordmark.svg   # Text only
+├── logo-icon.svg       # App icon (512×512, rounded)
+├── favicon.svg         # 16×16 optimized
+├── logo-white.svg      # White version for dark backgrounds
+└── logo-black.svg      # Black monochrome version
+```
+
+## アセット概要
+
+### デザインコンセプト（V3.0）
+
+**コードブラケット付きコンパス** — ガイダンスとコードの融合：
+- **コンパスリング** ＝ ナビゲーション、進路を見つける
+- **北針（グリーン）** ＝ 方向、学習経路の進捗
+- **南針（ブラック）** ＝ 基盤、揺るぎない土台
+- **`>` ブラケット** ＝ ターミナルプロンプト、コード、CLI コンテキスト
+- **目盛り** ＝ 精度、体系的な学習
+
+### ロゴ
+
+**ファイル**:
+- `logos/claude-howto-logo.svg`（ライトモード）
+- `logos/claude-howto-logo-dark.svg`（ダークモード）
+
+**仕様**:
+- **サイズ**: 520×120 px
+- **用途**: ワードマーク付きのメインヘッダー／ブランディングロゴ
+- **使用箇所**:
+  - Web サイトのヘッダー
+  - README バッジ
+  - マーケティング素材
+  - 印刷物
+- **形式**: SVG（完全にスケーラブル）
+- **モード**: ライト（白背景）とダーク（#0A0A0A 背景）
+
+### アイコン
+
+**ファイル**:
+- `icons/claude-howto-icon.svg`（ライトモード）
+- `icons/claude-howto-icon-dark.svg`（ダークモード）
+
+**仕様**:
+- **サイズ**: 256×256 px
+- **用途**: アプリケーションアイコン、アバター、サムネイル
+- **使用箇所**:
+  - アプリアイコン
+  - プロフィールアバター
+  - ソーシャルメディアサムネイル
+  - ドキュメントヘッダー
+- **形式**: SVG（完全にスケーラブル）
+- **モード**: ライト（白背景）とダーク（#0A0A0A 背景）
+
+**デザイン要素**:
+- 主要方位および中間方位の目盛り付きコンパスリング
+- 緑の北針（方向／ガイダンス）
+- 黒の南針（基盤）
+- 中央の `>` コードブラケット（ターミナル／CLI）
+- 緑の中央ドットアクセント
+
+### Favicon
+
+Web 利用向けに複数サイズで最適化されたバージョン：
+
+| ファイル | サイズ | DPI | 用途 |
+|------|------|-----|-------|
+| `favicon-16.svg` | 16×16 px | 1x | ブラウザタブ（旧ブラウザ） |
+| `favicon-32.svg` | 32×32 px | 1x | 標準ブラウザ favicon |
+| `favicon-64.svg` | 64×64 px | 1x-2x | 高 DPI ディスプレイ |
+| `favicon-128.svg` | 128×128 px | 2x | Apple touch icon、ブックマーク |
+| `favicon-256.svg` | 256×256 px | 4x | 近代ブラウザ、PWA アイコン |
+
+**最適化ノート**:
+- 16px: 最小限のジオメトリ — リング、針、シェブロンのみ
+- 32px: 主要方位の目盛りを追加
+- 64px 以上: 中間方位の目盛りを含むフルディテール
+- すべてメインアイコンとビジュアル一貫性を保つ
+- SVG 形式により任意のサイズで鮮明に表示
+
+## HTML 統合
+
+### 基本的な favicon セットアップ
+
+```html
+<!-- Browser favicon -->
+<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg">
+<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
+
+<!-- Apple touch icon (mobile home screen) -->
+<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
+
+<!-- PWA & modern browsers -->
+<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
+```
+
+### 完全セットアップ
+
+```html
+<head>
+  <!-- Primary favicon -->
+  <link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg" sizes="32x32">
+  <link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
+
+  <!-- Apple touch icon -->
+  <link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
+
+  <!-- PWA icons -->
+  <link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
+
+  <!-- Android -->
+  <link rel="shortcut icon" href="/resources/favicons/favicon-256.svg">
+
+  <!-- PWA manifest reference (if using manifest.json) -->
+  <meta name="theme-color" content="#000000">
+</head>
+```
+
+## カラーパレット
+
+### プライマリカラー
+- **ブラック**: `#000000`（メインテキスト、ストローク、南針）
+- **ホワイト**: `#FFFFFF`（ライト背景）
+- **グレー**: `#6B7280`（補助テキスト、補助目盛り）
+
+### アクセントカラー
+- **ブライトグリーン**: `#22C55E`（北針、中央ドット、アクセント線 — ハイライト専用、背景には使わない）
+
+### ダークモード
+- **背景**: `#0A0A0A`（ニアブラック）
+
+### CSS 変数
+```css
+--color-primary: #000000;
+--color-secondary: #6B7280;
+--color-accent: #22C55E;
+--color-bg-light: #FFFFFF;
+--color-bg-dark: #0A0A0A;
+```
+
+### Tailwind 設定
+```js
+colors: {
+  brand: {
+    primary: '#000000',
+    secondary: '#6B7280',
+    accent: '#22C55E',
+  }
+}
+```
+
+### 使用ガイドライン
+- メインテキストと構造要素にはブラックを使う
+- 補助・サポート要素にはグレーを使う
+- グリーンは **ハイライト専用** — 針、ドット、アクセント線
+- グリーンを背景色には使わない
+- WCAG AA コントラスト（最低 4.5:1）を維持する
+
+## デザインガイドライン
+
+### ロゴの使い方
+- 白またはダーク（#0A0A0A）背景に使用する
+- 比率を保ってスケールする
+- ロゴ周りに余白を確保する（最低: ロゴ高さの半分）
+- 背景に応じて提供されているライト／ダークバリアントを使う
+
+### アイコンの使い方
+- 標準サイズで使う: 16、32、64、128、256px
+- コンパスのプロポーションを維持する
+- 比率を保ってスケールする
+
+### Favicon の使い方
+- 文脈に応じた適切なサイズを使う
+- 16〜32px: ブラウザタブ、ブックマーク
+- 64px: サイトアイコン
+- 128px 以上: Apple／Android のホーム画面
+
+## SVG 最適化
+
+すべての SVG ファイルはグラデーションやフィルターのないフラットデザイン：
+- ストロークベースのクリーンなジオメトリ
+- 埋め込みラスター画像なし
+- 最適化されたパス
+- レスポンシブ viewBox
+
+Web 最適化用：
+```bash
+# 品質を保ちながら SVG を圧縮
+svgo --config='{
+  "js2svg": {
+    "indent": 2
+  },
+  "plugins": [
+    "convertStyleToAttrs",
+    "removeRasterImages"
+  ]
+}' input.svg -o output.svg
+```
+
+## PNG 変換
+
+旧ブラウザ対応のため SVG を PNG に変換するには：
+
+```bash
+# ImageMagick を使う
+convert -density 300 -background none favicon-256.svg favicon-256.png
+
+# Inkscape を使う
+inkscape -D -z --file=favicon-256.svg --export-png=favicon-256.png
+```
+
+## アクセシビリティ
+
+- 高コントラスト比（WCAG AA 準拠 — 最低 4.5:1）
+- どのサイズでも認識できるクリーンな幾何学形状
+- スケーラブルなベクター形式
+- アイコン内にテキストを含まない（テキストはワードマークで別途追加）
+- 意味伝達における赤緑の色依存なし
+
+## 帰属
+
+これらのアセットは Claude How To プロジェクトの一部である。
+
+**ライセンス**: MIT（プロジェクトの LICENSE ファイルを参照）
+
+## バージョン履歴
+
+- **v3.0**（2026 年 2 月）: ブラック／ホワイト／グレー＋グリーンアクセントのパレットによるコンパス・ブラケットデザイン
+- **v2.0**（2026 年 1 月）: エメラルドパレットの 12 光線スターバーストデザイン（Claude にインスパイアされたもの）
+- **v1.0**（2026 年 1 月）: ヘキサゴンベースの進捗アイコンの初期デザイン
+
+---
+
+**最終更新**: 2026 年 2 月
+**現バージョン**: 3.0（コンパス・ブラケット）
+**全アセット**: 本番利用可能な SVG、完全スケーラブル、WCAG AA 準拠