Added Claude Skills
This commit is contained in:
@@ -0,0 +1,318 @@
|
||||
# Material 3 Styles
|
||||
|
||||
Material 3 Stylesは、カラー、タイポグラフィ、形状、エレベーション、アイコン、モーションを通じて視覚言語を定義します。
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Color](#color)
|
||||
2. [Typography](#typography)
|
||||
3. [Elevation](#elevation)
|
||||
4. [Shape](#shape)
|
||||
5. [Icons](#icons)
|
||||
6. [Motion](#motion)
|
||||
|
||||
---
|
||||
|
||||
## Color
|
||||
|
||||
### Color System Overview
|
||||
|
||||
Material 3のカラーシステムは、アクセシブルでパーソナライズ可能なカラースキームを作成します。
|
||||
|
||||
URL: https://m3.material.io/styles/color/system/overview
|
||||
|
||||
### Color Roles
|
||||
|
||||
UIエレメントを特定の色に結びつける役割:
|
||||
|
||||
#### Primary Colors
|
||||
- **primary**: アプリの主要色（メインボタン、アクティブ状態）
|
||||
- **onPrimary**: プライマリ色上のテキスト/アイコン
|
||||
- **primaryContainer**: プライマリ要素のコンテナ
|
||||
- **onPrimaryContainer**: コンテナ上のテキスト
|
||||
|
||||
#### Secondary & Tertiary
|
||||
- **secondary**: アクセントカラー
|
||||
- **tertiary**: 強調やバランス調整
|
||||
|
||||
#### Surface Colors
|
||||
- **surface**: カード、シート、メニューの背景
|
||||
- **surfaceVariant**: わずかに異なる背景
|
||||
- **surfaceTint**: エレベーション表現用
|
||||
|
||||
#### Semantic Colors
|
||||
- **error**: エラー状態
|
||||
- **warning**: 警告（一部実装で利用可能）
|
||||
- **success**: 成功状態（一部実装で利用可能）
|
||||
|
||||
URL: https://m3.material.io/styles/color/roles
|
||||
|
||||
### Color Schemes
|
||||
|
||||
#### Dynamic Color
|
||||
ユーザーの壁紙や選択から色を抽出:
|
||||
- **User-generated**: ユーザーの選択から
|
||||
- **Content-based**: 画像/コンテンツから抽出
|
||||
|
||||
URL: https://m3.material.io/styles/color/dynamic-color/overview
|
||||
|
||||
#### Static Color
|
||||
固定されたカラースキーム:
|
||||
- **Baseline**: デフォルトのMaterialベースライン
|
||||
- **Custom brand**: カスタムブランドカラー
|
||||
|
||||
URL: https://m3.material.io/styles/color/static/baseline
|
||||
|
||||
### Key Colors and Tones
|
||||
|
||||
- **Source color**: スキーム生成の起点となる色
|
||||
- **Tonal palette**: 各キーカラーから生成される13段階のトーン（0, 10, 20, ..., 100）
|
||||
- Light theme: 通常トーン40をプライマリに使用
|
||||
- Dark theme: 通常トーン80をプライマリに使用
|
||||
|
||||
URL: https://m3.material.io/styles/color/the-color-system/key-colors-tones
|
||||
|
||||
### Tools
|
||||
|
||||
**Material Theme Builder**: カラースキーム生成、カスタマイズ、エクスポートツール
|
||||
|
||||
URL: https://m3.material.io/blog/material-theme-builder-2-color-match
|
||||
|
||||
---
|
||||
|
||||
## Typography
|
||||
|
||||
### Type Scale
|
||||
|
||||
Material 3は5つのロール×3つのサイズ = 15のタイプスタイルを定義:
|
||||
|
||||
#### Roles
|
||||
1. **Display**: 大きく短いテキスト（ヒーロー、見出し）
|
||||
2. **Headline**: 中規模の見出し
|
||||
3. **Title**: 小さい見出し（アプリバー、リスト項目）
|
||||
4. **Body**: 本文テキスト
|
||||
5. **Label**: ボタン、タブ、小さいテキスト
|
||||
|
||||
#### Sizes
|
||||
- **Large**: 最大サイズ
|
||||
- **Medium**: 標準サイズ
|
||||
- **Small**: 最小サイズ
|
||||
|
||||
#### Example Styles
|
||||
```
|
||||
displayLarge: 57sp, -0.25 letter spacing
|
||||
headlineMedium: 28sp, 0 letter spacing
|
||||
bodyLarge: 16sp, 0.5 letter spacing
|
||||
labelSmall: 11sp, 0.5 letter spacing
|
||||
```
|
||||
|
||||
URL: https://m3.material.io/styles/typography/overview
|
||||
|
||||
### Fonts
|
||||
|
||||
- デフォルト: **Roboto** (Android), **San Francisco** (iOS), **Roboto** (Web)
|
||||
- カスタムフォントのサポート
|
||||
- 変数フォントの活用
|
||||
|
||||
URL: https://m3.material.io/styles/typography/fonts
|
||||
|
||||
### Applying Typography
|
||||
|
||||
- セマンティックな使用（見出しにはheadline、本文にはbody）
|
||||
- 一貫した階層
|
||||
- 行の高さと余白の適切な設定
|
||||
|
||||
URL: https://m3.material.io/styles/typography/applying-type
|
||||
|
||||
---
|
||||
|
||||
## Elevation
|
||||
|
||||
### Overview
|
||||
|
||||
エレベーションはZ軸上のサーフェス間の距離を表現します。
|
||||
|
||||
URL: https://m3.material.io/styles/elevation/overview
|
||||
|
||||
### Elevation Levels
|
||||
|
||||
Material 3は6つのエレベーションレベルを定義:
|
||||
|
||||
| Level | DP | Use Case |
|
||||
|-------|-----|----------|
|
||||
| 0 | 0dp | 通常のサーフェス |
|
||||
| 1 | 1dp | カード、わずかに浮いた要素 |
|
||||
| 2 | 3dp | 検索バー |
|
||||
| 3 | 6dp | FAB（休止状態） |
|
||||
| 4 | 8dp | ナビゲーションドロワー |
|
||||
| 5 | 12dp | モーダルボトムシート、ダイアログ |
|
||||
|
||||
### Elevation Representation
|
||||
|
||||
Material 3では2つの方法でエレベーションを表現:
|
||||
|
||||
1. **Shadow**: 影によるエレベーション（Light theme主体）
|
||||
2. **Surface tint**: サーフェスに色のティントを重ねる（Dark theme主体）
|
||||
|
||||
URL: https://m3.material.io/styles/elevation/applying-elevation
|
||||
|
||||
---
|
||||
|
||||
## Shape
|
||||
|
||||
### Overview
|
||||
|
||||
形状は、注意の誘導、状態表現、ブランド表現に使用されます。
|
||||
|
||||
URL: https://m3.material.io/styles/shape/overview-principles
|
||||
|
||||
### Corner Radius Scale
|
||||
|
||||
Material 3は5つの形状トークンを定義:
|
||||
|
||||
| Token | Default Value | Use Case |
|
||||
|-------|---------------|----------|
|
||||
| None | 0dp | フルスクリーン、厳格なレイアウト |
|
||||
| Extra Small | 4dp | チェックボックス、小さい要素 |
|
||||
| Small | 8dp | チップ、小さいボタン |
|
||||
| Medium | 12dp | カード、標準ボタン |
|
||||
| Large | 16dp | FAB、大きいカード |
|
||||
| Extra Large | 28dp | ダイアログ、ボトムシート |
|
||||
| Full | 9999dp | 完全な円形 |
|
||||
|
||||
### Shape Morph
|
||||
|
||||
**M3 Expressiveの重要機能**: 形状が滑らかに変形するアニメーション
|
||||
|
||||
- トランジション時の視覚的な流れ
|
||||
- ブランド表現の強化
|
||||
- ユーザーの注意を引く
|
||||
|
||||
URL: https://m3.material.io/styles/shape/shape-morph
|
||||
|
||||
---
|
||||
|
||||
## Icons
|
||||
|
||||
### Material Symbols
|
||||
|
||||
Material Symbolsは可変アイコンフォント:
|
||||
|
||||
#### Styles
|
||||
- **Outlined**: 線のみのスタイル（デフォルト）
|
||||
- **Filled**: 塗りつぶしスタイル
|
||||
- **Rounded**: 丸みを帯びたスタイル
|
||||
- **Sharp**: シャープなスタイル
|
||||
|
||||
#### Variable Features
|
||||
- **Weight**: 線の太さ（100-700）
|
||||
- **Grade**: 視覚的な重み（-25 to 200）
|
||||
- **Optical size**: 表示サイズ最適化（20, 24, 40, 48dp）
|
||||
- **Fill**: 塗りつぶし状態（0-1）
|
||||
|
||||
#### Sizes
|
||||
- 20dp: 密なレイアウト
|
||||
- 24dp: 標準サイズ
|
||||
- 40dp: タッチターゲット拡大
|
||||
- 48dp: 大きいタッチターゲット
|
||||
|
||||
URL: https://m3.material.io/styles/icons/overview
|
||||
|
||||
### Custom Icons
|
||||
|
||||
カスタムアイコンのデザインガイドライン:
|
||||
- 24×24dpグリッド
|
||||
- 2dpストローク幅
|
||||
- 2dpの角丸
|
||||
- 一貫したメタファー
|
||||
|
||||
URL: https://m3.material.io/styles/icons/designing-icons
|
||||
|
||||
---
|
||||
|
||||
## Motion
|
||||
|
||||
**M3 Expressiveの中核要素**: モーションは、UIを表現豊かで使いやすくします。
|
||||
|
||||
URL: https://m3.material.io/styles/motion/overview
|
||||
|
||||
### Motion Principles
|
||||
|
||||
1. **Informative**: ユーザーに情報を伝える
|
||||
2. **Focused**: 注意を適切に誘導
|
||||
3. **Expressive**: 感情的なエンゲージメントを高める
|
||||
|
||||
URL: https://m3.material.io/styles/motion/overview/how-it-works
|
||||
|
||||
### Easing and Duration
|
||||
|
||||
#### Easing Types
|
||||
|
||||
Material 3は4つのイージングカーブを定義:
|
||||
|
||||
1. **Emphasized**: 劇的で表現豊かな動き
|
||||
- Decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0)
|
||||
- Accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15)
|
||||
- Standard: cubic-bezier(0.2, 0.0, 0, 1.0)
|
||||
|
||||
2. **Standard**: バランスの取れた標準的な動き
|
||||
- cubic-bezier(0.2, 0.0, 0, 1.0)
|
||||
|
||||
3. **Emphasized Decelerate**: 要素が画面に入る
|
||||
- cubic-bezier(0.05, 0.7, 0.1, 1.0)
|
||||
|
||||
4. **Emphasized Accelerate**: 要素が画面から出る
|
||||
- cubic-bezier(0.3, 0.0, 0.8, 0.15)
|
||||
|
||||
#### Duration Guidelines
|
||||
|
||||
| Element Change | Duration |
|
||||
|----------------|----------|
|
||||
| Small (icon state) | 50-100ms |
|
||||
| Medium (component state) | 250-300ms |
|
||||
| Large (layout change) | 400-500ms |
|
||||
| Complex transition | 500-700ms |
|
||||
|
||||
**重要**: 長すぎるアニメーション（>1000ms）は避ける
|
||||
|
||||
URL: https://m3.material.io/styles/motion/easing-and-duration
|
||||
|
||||
### Transitions
|
||||
|
||||
ナビゲーション時のトランジションパターン:
|
||||
|
||||
#### Transition Types
|
||||
|
||||
1. **Container transform**: コンテナが変形して次の画面へ
|
||||
2. **Shared axis**: 共通軸に沿った移動（X, Y, Z軸）
|
||||
3. **Fade through**: フェードアウト→フェードイン
|
||||
4. **Fade**: シンプルなフェード
|
||||
|
||||
#### When to Use Each
|
||||
|
||||
- **Container transform**: リスト項目→詳細画面
|
||||
- **Shared axis X**: タブ切り替え、水平ナビゲーション
|
||||
- **Shared axis Y**: ステッパー、垂直ナビゲーション
|
||||
- **Shared axis Z**: 前後のナビゲーション（戻る/進む）
|
||||
- **Fade through**: コンテンツ更新（関連性が低い）
|
||||
- **Fade**: オーバーレイ、補助的な変更
|
||||
|
||||
URL: https://m3.material.io/styles/motion/transitions/transition-patterns
|
||||
|
||||
### M3 Expressive Motion
|
||||
|
||||
**新しい表現豊かなモーションシステム**:
|
||||
|
||||
- より大胆なアニメーション
|
||||
- カスタマイズ可能なモーションテーマ
|
||||
- ブランド表現の強化
|
||||
|
||||
URL: https://m3.material.io/blog/m3-expressive-motion-theming
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
|
||||
- Material Design 3 Styles: https://m3.material.io/styles/
|
||||
- Material Theme Builder: https://material-foundation.github.io/material-theme-builder/
|
||||
- Material Symbols: https://fonts.google.com/icons
|
||||
Reference in New Issue
Block a user