【Material Design】Material Designを読むときに知っていると理解しやすくなる単語集

## 概要
この記事では、少し前に公開された[Material Design 3(通称 : M3)](https://m3.material.io/)を読むときに
知っていると、M3さらに理解しやすくなる単語とその意味について解説します。

この記事を読んで、単語とその意味について理解すれば、
M３をさらに理解することができるでしょう！

## Banner
目立つメッセージと、それに関連するアクションを表示するコンポーネント。
[詳しい解説はこちら](https://material.io/components/banners)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ceb7706c-0fd6-ccbd-f761-902f73290ac9.png)


## Button
メールの送信やドキュメントの共有、投稿へのいいね！など、ユーザーのアクションを助ける　コンポーネント。
[詳しい解説はこちら（M3）](https://m3.material.io/components/all-buttons)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e02cf710-1adb-c6e0-4d78-f367e8d9216c.png)

## Bottom app bar
モバイル画面の下部にある、ナビゲーションやキーアクションを表示するコンポーネント。
[詳しい解説はこちら](https://material.io/components/app-bars-bottom)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/99586e18-ccc1-c878-4085-f559258d765f.png)

## Bottom sheet
画面下部にある補助的なコンテンツを含むコンポーネント
[詳しい解説はこちら](https://material.io/components/sheets-bottom)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d50f45ca-9cb5-1e1e-a169-ab49d01d5daf.png)

## Card
メインのコンテンツとそれに関連するコンテンツ、それらにアクションを含むコンポーネント。
[詳しい解説はこちら（M3）](https://m3.material.io/components/cards/overview)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/3f566146-f450-426d-691e-584bb2ce7790.png)

## Checkbox
ユーザーが1つ以上の項目を選択できるようにするコンポーネント。
クリック（タップ）することで、ON/OFFを切り替えることができる。
[詳しい解説はこちら](https://material.io/components/checkboxes)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9b4a2b28-1e17-5041-c0dc-fc9f7f99d404.png)

## Chip
情報の入力・選択、コンテンツのフィルタリング、アクションをサポートするコンポーネント。
Chipは、複数のインタラクティブな要素を同じエリアにまとめて表示することができる。
[詳しい解説はこちら（M3）](https://m3.material.io/components/chips/overview)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/62f26feb-bb8c-8c36-2edc-7e4e6c83aa71.png)

## Color
### Baseline scheme
ライトモードとダークモードに使われるデフォルトの色調グループのこと
![Frame 39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/703c6bc5-414d-5cf9-2421-81a81b0275d8.png)

### Dynamic color
ユーザーが作成した配色をアプリの配色にマッピングするカスタマイズ機能。
[詳しい解説はこちら（M3）](https://m3.material.io/styles/color/dynamic-color/overview)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/77b06303-fecc-789e-1028-f4e21bf9295a.png)

### Extended color 
カスタムスキームで色の役割を果たすために、key colorとは別に指定する色のこと。
また、ブランド表現や習慣的な意味のある色の役割や用途のためのカテゴリー。

### Key color
Source colorから派生した色で、Tonal paletteの基礎となる色のこと。
コードでは使われない。
[詳しい解説はこちら（M3）](https://m3.material.io/styles/color/the-color-system/key-colors-tones)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/221ff120-fe5d-2557-b1dc-b6ced12da096.png)


### Scheme
Tonal paletteから色の役割にマッピングしたもの。
Schemeは、複数の色の役割で構成されている。
![Frame 40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/6d2e8612-4c9d-be0a-11fd-75cc7c616c73.png)

### Source color
5つのキーカラーを定義するために抽出された1つのカラーのこと。
動的な配色を作る時の最初の1色。


### Tonal palette
13の色調範囲から構成されるSchemeを作る基礎となるもの。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2c3e9a07-5821-afe1-59bf-4ac5d51e5cc3.png)

### Tone
同じ色相と彩度を持つ色の集まりのこと。 明るさが違う。


### User-generated schemes
Dynamic colorの一種で、ユーザー個人の壁紙選択やAndroidのプリセットカラーから派生して適用されるschemes。


## Contrast
色調の差のこと。
コントラストが40で、コントラスト比≧3.0。　コントラストが50で、コントラスト比≧4.5　。

## Customization
アプリやブランド、ユーザー自身の視覚的な好みをUIに反映した修正のこと。
個々のUI要素（コンポーネント　の色、スタイル）だけでなく、グローバルな要素（全体の一貫したテーマ）などにも適応が可能。


## Dark theme
暗いサーフェスを中心に表示する低輝度UIのこと。
[詳しい解説はこちら](https://material.io/design/color/dark-theme.html)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2cb97173-404d-2eab-eec6-6968df4a1eca.png)

## Data table
行と列があるデータのセットを表示するコンポーネント。
[詳しい解説はこちら](https://material.io/components/data-tables)
![スクリーンショット 2022-04-24 22.49.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/52b2762d-8d36-f2ac-8080-10ffa8c6fbcc.png)

## Date picker
日付または日付の範囲を選択できるコンポーネント。
[詳しい解説はこちら](https://material.io/components/date-pickers)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/bb0aecbb-17fe-fe0f-458d-87a16cc558be.png)

## Design attribute
フォントや色などのデザイントークンやハードコーディングされた値が適用されるスタイル。

## Design guidelines
デザインに関する使い方や動作を示す、説明的な文章や図解された文章。
エンジニアやデザイナーが仕様の問題解決や意思決定をする際に役に立つ。

## Design specs
コンポーネントや機能がコードに落とし込まれ、パラメータや値を定義するデザインや文書のこと。


## Design System Package (DSP) 
Adobeが作成した、階層構造上のオーブンフォーマットで、チームがツール間でデザインシステムを共有するのに役立つパッケージ。
[詳しい解説はこちら](https://github.com/AdobeXD/design-system-package-dsp)

## Design tokens
### Design tokens
再利用可能な小さなデザインで、デザインシステムの視覚的なスタイルの決める。
[詳しい解説はこちら](https://m3.material.io/foundations/design-tokens/overview)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e6c952ba-bf53-39fa-05fd-d597213165eb.png)

### Context
ダークテーマやdenseレイアウトのように、トークンがデフォルトの値以外でも使えるようにするための条件のこと

### Role
トークン名の省略形。
例) Secondary container color、Headline 1

### Types
利用できる形にトークン化された値のこと。

**コンポーネントトークン**：ボタンコンテナの色など、コンポーネント内の要素のデザインを定義している。
**システムトークン**：色やタイポグラフィー、elevation、shapeなどの、システムを構成する選択肢やRoleを定義している。

### value
トークンで指定されてる実際の値、情報のこと。

## Dialog
ユーザーにアクションを要求したり、情報を伝えたり、タスク完了を支援したりするコンポーネント。
[詳しい解説はこちら（M3）](https://m3.material.io/components/dialogs/overview)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/1537b97e-433f-0286-722d-123fe0d53a24.png)

## Divider
リストなどで、コンテンツとコンテンツを区切るために使わせる線のこと
[詳しい解説はこちら](https://material.io/components/dividers)
![スクリーンショット 2022-04-25 21.08.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/23a7d8d6-87e0-ce39-a0d1-cea0415775ed.png)

## Element
コンテナやテキストなどのトークンを適用する部品のこと

## Floating action button (FAB)
画面上で最も重要なアクションを表すコンポーネント。
[詳しい解説はこちら（M3）](https://m3.material.io/components/extended-fab/overview)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7be30568-7d6a-20a5-afcf-8e3cb4e76259.png)


## Extended FAB
サービス、アプリにおいて重要なアクションを設定するコンポーネント。
テキストが設定でき、ターゲットエリアがFABより広い。
[詳しい解説はこちら（M3）](https://m3.material.io/components/floating-action-button/overview)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b2fbb7ae-286d-dc7f-da3a-9ec34a0801dd.png)

## HCT
Hue（色相）、Chroma（彩度）、Tone（彩度と明度の組み合わせ）で表す色空間のこと。
Dynamic Colorで使われている

## Image list
画像を表示するグリット状のコンポーネント。
[詳しい解説はこちら](https://material.io/components/image-lists)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/eba56c64-f4dd-819f-e038-dccecf17355e.png)

## Libraries
開発者向けのライブラリーのこと。
[詳しい解説はこちら（M３）](https://m3.material.io/libraries/additional)

## List
テキストや画像が垂直に連続しているコンポーネント。
[詳しい解説はこちら](https://material.io/components/lists)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0f51ce89-342f-a2c5-dce5-c3afe6f16aa8.png)


## Material Components
Android、Flutter、WebにMaterialデザインを実装するためのオープンソースのUI要素。

## Material Design
Material Designはインターフェースデザインの最善のガイドライン、コンポーネントやライブラリーからなる汎用的なデザインシステム。

**Material Design 1 (M1)**： 2014年に発表されたMaterial Designの第1世代。(現在はアーカイブ)
**Material Design 2 (M2)**： 2018年に発表されたMaterial Designの第2世代では、マテリアルテーマとコンポーネントが追加された
**Material Design 3 (M3)**： 2021年に発表されたMaterial Designの第3世代では、Material Youの機能が追加された。

## Material Theming
アプリやサービス内のモジュールをカスタマイズ可能にして、ブランドを反映できるようにする機能。
[詳しい解説はこちら](https://material.io/design/material-theming/overview.html#material-theming)
![スクリーンショット 2022-04-26 22.44.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d92e4f64-1497-b5d8-a6cb-f0976be1c790.png)

## Menu
一時的に複数の選択肢をリストを表示して選択できるようにするコンポーネント。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/dadd0462-36a3-aa9b-f9c2-86f05a6ea5ca.png)

## Mode
フォーカスモードや機内モードといった、システムをよりよく使うためのバイナリーな設定。

## Navigation bar
アプリのメインの機能を切り替えるために、多くの画面で使われるコンポーネント。
[詳しい解説はこちら（M3）](https://m3.material.io/components/navigation-bar/overview)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/3105dc63-2874-03eb-725b-e2d141d2406c.png)

## Navigation drawer
アプリやサービス内で目的地にアクセスするためのコンポーネント。
[詳しい解説はこちら（M3）](https://m3.material.io/components/navigation-drawer/overview)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ecbdcd1c-96c6-da37-5083-ecc3d0bc62cf.png)

## Navigation rail
タブレットやデスクトップ画面を使うときにアプリの目的地にアクセスするためのコンポーネント。
[詳しい解説はこちら（M3）](https://m3.material.io/components/navigation-rail/overview)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/3b9c414f-a587-b31b-0816-672c790e8fa3.png)

## Progress indicator
 待ち時間や処理中い表示するためのコンポーネント。
[詳しい解説はこちら](https://material.io/components/progress-indicators)
![スクリーンショット 2022-04-26 23.01.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/62edf31d-74d8-abaa-afcb-4002fdc8952d.png)

## Radio button
複数の選択肢の中から1つの選択肢を選択することができるようにするコンポーネント。
[詳しい解説はこちら](https://material.io/components/radio-buttons)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9325f59a-d91b-b8d3-d92c-ec6b7d573b8c.png)

## Role
On surface や Body1 のようなデザインシステムのトークンの目的を説明するための名前のこと。

## Side sheet
画面の左隅や右隅に固定された補助的なコンテンツを含むコンポーネント。
[詳しい解説はこちら](https://material.io/components/sheets-side)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e67c5558-4843-80ca-cacf-96647f4e8902.png)

## slider
ユーザーが範囲内から選択できるようにするコンポーネント。
[詳しい解説はこちら](https://material.io/components/sliders)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b809139a-c175-f820-d84e-f73af6fc6360.png)

## Snackbar
アプリの処理に関するメッセージを下部に表示するコンポーネント。
[詳しい解説はこちら](https://material.io/components/snackbars)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/71fa1789-31f7-9aa8-aa07-67f0a8c1f295.png)

## Style
UIの色やTypography、形状と行った見た目を定義するプロパティのこと。

## Switch
1つのアイテムをオン・オフするコンポーネント。
[詳しい解説はこちら](https://material.io/components/switches)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ed730265-b350-2527-dd06-21398b5ead38.png)

## Tab
異なる画面やデータセットを整理するためのコンポーネント。
[詳しい解説はこちら](https://material.io/components/tabs)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/35eeafd5-c656-5efa-db40-93cd09d44d2a.png)

## Text field
ユーザーがテキスト入力したり編集て切るようにするためのコンポーネント
[詳しい解説はこちら](https://material.io/components/text-fields)
![スクリーンショット 2022-04-26 23.22.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ee9838c6-429f-aab2-e6b8-84bcff9d33ed.png)

## Theme
アプリ・サービスの見た目を一貫させるための、アプリ・サービスのグローバルなスタイルセット。

## Time picker
ユーザーが特定の時間を選択できるようにするためのコンポーネント。
[詳しい解説はこちら](https://material.io/components/time-pickers)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c52dae88-c96e-6e68-3677-48d6d2d2d4f2.png)

## Tooltip
ユーザーが要素にホバーしたり、フォーカスを当てたときにテキストを表示させるコンポーネント。
[詳しい解説はこちら](https://material.io/components/tooltips)
![スクリーンショット 2022-04-26 23.27.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c9f03fc8-05b9-d8d5-ce01-f108e4a19060.png)

## Top app bar
画面の上部にある情報やアクションを表示するためのコンポーネント。
[詳しい解説はこちら（m３）](https://m3.material.io/components/top-app-bar/overview)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f679c0a3-6c78-af02-6564-42e3406b214d.png)

## Widget
ホーム画面に配置させるAndroidアプリケーションの小さなガジェット、コントロール。
[詳しい解説はこちら（m３）](https://m3.material.io/components/widgets)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2c0a8a88-56b3-a57d-4e13-49705550addd.png)

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510