# 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