CalvinBackup/claude-howto
1
0
Fork 0
mirror of https://github.com/luongnv89/claude-howto.git synced 2026-06-05 22:36:34 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
claude-howto/ja/resources/DESIGN-SYSTEM.md
T
JiangCheng 1d1df9235b 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).
2026-04-30 00:16:46 +02:00

7.5 KiB
Raw Permalink Blame History

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. 黒・白・グレーの構造は変えない

スケーリング

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

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

バージョン管理

デザイン変更を git で追跡する：

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

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

Reference in New Issue View Git Blame Copy Permalink