319 lines
9.0 KiB
Markdown
319 lines
9.0 KiB
Markdown
# 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
|