これなに

Material Design(M3) の Guidline ページを読みつつ、全体感を把握するスクラップです
詳細な記述はしません

M1
M2
M3（対象はこれ）

https://m3.material.io

終わったら HIG もやる予定です

Material Design - はじめに

Material Designは、Googleのデザイナーと開発者によって構築され、サポートされている デザインシステム です。Material.ioには、Android、Flutter、Web向けの詳細なUXガイダンスとUIコンポーネントの実装が含まれています。

そうか「Google が作ったデザインシステム」なのか（なんかそういう認識なかった）

最新バージョンであるMaterial 3は、ダイナミックカラーやアクセシビリティの強化から、大画面レイアウトやデザイントークンの基盤まで、 パーソナルでアダプティブ 、そして表現力豊かな体験を可能にします。

個人レベルのカスタマイズ性・柔軟性があると（M2 との違い）

Material.ioのデザインシステムは、Foundations、Styles、Components の3つの主要部分で構成されています。各セクションには、Materialを使ったカスタマイズやビルドに役立つデザインガイダンスやツールが含まれています。

Foundations（基礎）
- アクセシビリティの基準から、レイアウトやインタラクションに不可欠なパターンまで、優れたユーザーインターフェースの基礎
Styles
- UIに独特のルック＆フィールを与える視覚的な側面
- テーマを変更することでカスタマイズ出来る
Components
- ユーザーインターフェースを作成するためのインタラクティブなビルディングブロック
- 目的に応じて「Action」「containment」「communication」「navigation」「selection」「text input」のカテゴリーに整理することが出来る

Daigo Wakabayashi

Material 3 - Faundations（基礎）

Accessibility
- あらゆる能力を持つ人々が製品を使用できるようにするためのアレコレ
- スクリーンリーダー対応、文字サイズの調整、認識しやすい色とそのコントラストなどが記載されている
Content design
- ライティングと情報デザインによってUIを使いやすくするためのアレコレ
- 製品で使用するテキストの言葉選び、文法や句読点の適切な使い方などが記載されている
Customizing Material
- デバイスや製品をよりパーソナルに感じさせ愛着を持ってもらうためのアレコレ（意訳）
- ユーザー設定によって動的に決まる Material 3 の Color Scheme の仕組み、配色の役割などが記載されている
Design tokens
- 柔軟なデザインシステム・カラーシステムの設計や命名をするためのアレコレ
Interaction（Gestures, Inputs, Selection, States）
- ユーザーのアクションの種類の定義やその最適化をするためのアレコレ
- Swipe, Drag, Pinch, Pan など用語定義や、タップなどのアクションによるUIの状態変化（ボタンのMaterialState）などが記載されている
Layout
- 画面上の要素のざっくりとした配置の最適化についてのアレコレ
- ユーザーが実行したいアクションに最短で導くための全体配置やそのバランスなどについて記載されている
Material A-Z
- 用語とそのコンセプト
- Banner, BottomSheet, Chip などの単語集がアルファベット順で並べられている

Daigo Wakabayashi

Material 3 - Styles

スタイルとは、UIに独特のルック＆フィールを与える視覚的な側面です。マテリアルのテーマを変更することでカスタマイズできます。

Color
- Color system
  - システムの全体像についてのアレコレ
  - Color system とは何か、配色の仕組みなどが記述されている
- Color roles
  - Role 一覧とそれぞれの目的やユースケースについてのアレコレ
  - Primary, Secondary, Tertiary それぞれの配色等について定義されている
- Color scheme
  - Static Color、Dynamic Color の分類や選択についてのアレコレ
- Advanced
  - 複数の Color scheme（コンテンツベースの Color Scheme + ユーザー生成 Color Scheme）を組み合わせる時のアレコレ
  - まじで Advanced なので結構難しい（そもそもの Scheme 理解が必要）
- Resources
  - Material Color の構築に役立つデザインツールやチュートリアル、コードラボなど
Elevation
- Elevation とは何か、どうやって適用するのか、トークン定義についてのアレコレ
Icons
- Google Fonts の Icon リソースや、自分でデザインする際の How to など
Motion
- 効果的な Motion デザインについてのアレコレ
- 推奨 Easing（加速・減速）と Duration の組み合わせや Transition（画面遷移時の効果）などについて記載されている
Shape
- Material コンポーネントの輪郭についてのアレコレ
- M2 との違いや Shape Scale などについて記載されている
Typography
- 読みやすく美しい文字設計のアレコレ
- フォント、スケールなどについて記載されている

Daigo Wakabayashi

Material 3 - Components

Component は、ユーザーインターフェースを作成するための インタラクティブなビルディングブロック です。コンポーネントは、その目的に応じて、「Action」「Containment（封じ込み）」「Communication」「Navigation」「Selection」、「Text input」のカテゴリーに整理することができます。

これなに

App Bars

Buttons

Navigation

Sheets