Added Claude Skills
This commit is contained in:
@@ -0,0 +1,207 @@
|
||||
# Material 3 Foundations
|
||||
|
||||
Material 3 Foundationsは、すべてのMaterialインターフェースの基盤となる設計原則とパターンを定義します。
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Accessibility](#accessibility)
|
||||
2. [Layout](#layout)
|
||||
3. [Interaction](#interaction)
|
||||
4. [Content Design](#content-design)
|
||||
5. [Design Tokens](#design-tokens)
|
||||
6. [Adaptive Design](#adaptive-design)
|
||||
|
||||
---
|
||||
|
||||
## Accessibility
|
||||
|
||||
### Core Principles
|
||||
- 多様な能力を持つユーザーのための設計
|
||||
- スクリーンリーダーなどの支援技術との統合
|
||||
- WCAG準拠のコントラスト比
|
||||
|
||||
### Key Areas
|
||||
|
||||
#### Structure and Elements
|
||||
- 直感的なレイアウト階層
|
||||
- アクセシブルなUI要素の設計
|
||||
- フォーカス管理とナビゲーション
|
||||
|
||||
URL: https://m3.material.io/foundations/designing/structure
|
||||
|
||||
#### Color Contrast
|
||||
- WCAG準拠のカラーコントラスト
|
||||
- テキストとUIコントロールの視認性
|
||||
- 4.5:1（通常テキスト）、3:1（大きいテキスト、UIコンポーネント）
|
||||
|
||||
URL: https://m3.material.io/foundations/designing/color-contrast
|
||||
|
||||
#### Text Accessibility
|
||||
- テキストリサイズのサポート（200%まで）
|
||||
- アクセシブルなテキスト切り詰め
|
||||
- 明確で適応可能な文章
|
||||
|
||||
URL: https://m3.material.io/foundations/writing/text-resizing
|
||||
|
||||
---
|
||||
|
||||
## Layout
|
||||
|
||||
### Understanding Layout
|
||||
|
||||
#### Core Components
|
||||
- **Regions**: 画面の主要エリア（ヘッダー、本文、ナビゲーション）
|
||||
- **Columns**: グリッドシステムの基本単位
|
||||
- **Gutters**: カラム間のスペース
|
||||
- **Spacing**: 4dpベースの一貫したスペーシングシステム
|
||||
|
||||
URL: https://m3.material.io/foundations/layout/understanding-layout/overview
|
||||
|
||||
### Window Size Classes
|
||||
|
||||
画面サイズに応じたレスポンシブデザイン:
|
||||
|
||||
| Size Class | Width | Typical Device | Key Patterns |
|
||||
|-----------|-------|---------------|--------------|
|
||||
| Compact | <600dp | Phone | Single pane, bottom nav |
|
||||
| Medium | 600-840dp | Tablet (portrait) | Dual pane optional, nav rail |
|
||||
| Expanded | >840dp | Tablet (landscape), Desktop | Dual/multi pane, nav drawer |
|
||||
| Large/XL | >1240dp | Large screens, TV | Multi-pane, extensive nav |
|
||||
|
||||
URL: https://m3.material.io/foundations/layout/applying-layout/window-size-classes
|
||||
|
||||
### Canonical Layouts
|
||||
|
||||
よく使われるレイアウトパターン:
|
||||
|
||||
1. **List-detail**: マスター・詳細ナビゲーション
|
||||
2. **Feed**: コンテンツフィード
|
||||
3. **Supporting pane**: 補助コンテンツパネル
|
||||
|
||||
URL: https://m3.material.io/foundations/layout/canonical-layouts/overview
|
||||
|
||||
---
|
||||
|
||||
## Interaction
|
||||
|
||||
### States
|
||||
|
||||
#### Visual States
|
||||
- **Enabled**: デフォルト状態
|
||||
- **Hover**: ポインタがホバーしている状態（デスクトップ）
|
||||
- **Focused**: キーボードフォーカス
|
||||
- **Pressed**: アクティブに押されている状態
|
||||
- **Dragged**: ドラッグ中
|
||||
- **Disabled**: 無効化状態
|
||||
|
||||
#### State Layers
|
||||
半透明なオーバーレイで状態を視覚的に示す:
|
||||
- Hover: 8% opacity
|
||||
- Focus: 12% opacity
|
||||
- Press: 12% opacity
|
||||
|
||||
URL: https://m3.material.io/foundations/interaction/states/state-layers
|
||||
|
||||
### Gestures
|
||||
|
||||
モバイルインターフェース向けタッチジェスチャー:
|
||||
- Tap: 基本的な選択
|
||||
- Long press: コンテキストメニュー
|
||||
- Drag: 移動、並べ替え
|
||||
- Swipe: ナビゲーション、削除
|
||||
- Pinch: ズーム
|
||||
|
||||
URL: https://m3.material.io/foundations/interaction/gestures
|
||||
|
||||
### Selection
|
||||
|
||||
選択インタラクションパターン:
|
||||
- **Single selection**: ラジオボタン、リスト項目
|
||||
- **Multi selection**: チェックボックス、選択可能なリスト
|
||||
|
||||
URL: https://m3.material.io/foundations/interaction/selection
|
||||
|
||||
---
|
||||
|
||||
## Content Design
|
||||
|
||||
### UX Writing Principles
|
||||
|
||||
1. **Clear**: 明確で理解しやすい
|
||||
2. **Concise**: 簡潔で要点を押さえた
|
||||
3. **Useful**: ユーザーのニーズに応える
|
||||
4. **Consistent**: 用語とトーンの一貫性
|
||||
|
||||
### Notifications
|
||||
|
||||
効果的な通知コンテンツ:
|
||||
- アクション可能な情報
|
||||
- 明確な次のステップ
|
||||
- ユーザーコンテキストの理解
|
||||
|
||||
URL: https://m3.material.io/foundations/content-design/notifications
|
||||
|
||||
### Alt Text
|
||||
|
||||
アクセシブルな画像説明:
|
||||
- 装飾的画像: 空のalt属性
|
||||
- 機能的画像: アクションを説明
|
||||
- 情報的画像: 内容を簡潔に説明
|
||||
|
||||
URL: https://m3.material.io/foundations/content-design/alt-text
|
||||
|
||||
### Global Writing
|
||||
|
||||
国際的なオーディエンス向けの文章:
|
||||
- ローカライゼーションを考慮した単語選択
|
||||
- 文化的に中立な表現
|
||||
- 翻訳しやすい文法構造
|
||||
|
||||
URL: https://m3.material.io/foundations/content-design/global-writing/overview
|
||||
|
||||
---
|
||||
|
||||
## Design Tokens
|
||||
|
||||
### What are Design Tokens?
|
||||
|
||||
デザイントークンは、デザイン、ツール、コード全体で使用される設計上の決定の最小単位:
|
||||
|
||||
- **Color tokens**: primary, secondary, surface, error など
|
||||
- **Typography tokens**: displayLarge, bodyMedium など
|
||||
- **Shape tokens**: cornerRadius, roundedCorner など
|
||||
- **Motion tokens**: duration, easing curves
|
||||
|
||||
### Benefits
|
||||
|
||||
- デザインとコード間の一貫性
|
||||
- テーマのカスタマイズが容易
|
||||
- プラットフォーム間での統一
|
||||
|
||||
URL: https://m3.material.io/foundations/design-tokens/overview
|
||||
|
||||
---
|
||||
|
||||
## Adaptive Design
|
||||
|
||||
### Principles
|
||||
|
||||
- **Responsive**: ウィンドウサイズに応じた調整
|
||||
- **Adaptive**: デバイス特性に応じた最適化
|
||||
- **Contextual**: 使用コンテキストを考慮
|
||||
|
||||
### Key Strategies
|
||||
|
||||
1. Window size classesに基づくレイアウト調整
|
||||
2. 入力方式（タッチ、マウス、キーボード）への対応
|
||||
3. デバイス機能（カメラ、位置情報等）の活用
|
||||
4. オフラインとオンラインシナリオの対応
|
||||
|
||||
URL: https://m3.material.io/foundations/adaptive-design
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
|
||||
- Material Design 3 Foundations: https://m3.material.io/foundations/
|
||||
- Glossary: https://m3.material.io/foundations/glossary
|
||||
Reference in New Issue
Block a user