208 lines
5.8 KiB
Markdown
208 lines
5.8 KiB
Markdown
# 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
|