はじめに

マテリアルデザインは各企業が紹介しているデザインガイドラインの一つです。これはGoogleによって作られ、Android OSやGmail、MeetなどのGoogle製品で使用されています。

マテリアルデザインが学習に使える理由

• マテリアルデザインは、Android OS用のGoogleのデザインシステムです。そのため、Androidアプリをデザインする場合、マテリアルデザインはAndroid OSのベースとなります。
• Androidアプリをデザインする際は、Android OSのUIコンポーネントの基礎となるマテリアルデザインについて読むことを強くお勧めします。
• しかし、UI/UXデザイナーにとって、マテリアルデザインはUIをどのようにデザインし、それを有用にするかについて詳細な解説を提供しています。だから、これを読むことが役立つでしょう。

マテリアルデザインページの全体構造

マテリアルデザインページは主に以下の3つのパートから構成されています。

1. Foundation（基礎）
2. Style（スタイル）
3. Component（コンポーネント）

初学者は具体的な形を紹介するComponentから見ていくのがおすすめではあります。

Foundation（基礎）

• Google Design（マテリアルデザイン）の基礎となる概念です。
• しかし、そのトピックはどんなUIをデザインする上でも有用です。
• 特に以下のトピックは誰にとっても役立つでしょう。
• Accessibility（アクセシビリティ）
• Adaptive design（適応的デザイン）
• Design tokens（デザイントークン）
• Interaction states（インタラクションの状態）

Style（スタイル）

• UIの視覚的な外観の基礎を作る上で必須となる要素の説明です。
• 注意: 一部のトピックはMD3向けに書かれており、全てのUIコンセプトに対応しているわけではありません。
• Color（色）
• 色のシステム: MD3向けに基づいているため、全てのUIコンセプトには適応できません。
• Typography（タイポグラフィ）
• タイプスケール: タイポグラフィのシステムパターン
• タイプの適用
• Elevation（エレベーション）
• Icon（アイコン）
• Motion（モーション）
• Shape（形状）

Component（コンポーネント）

• 特定のUIパターンとその使用方法です。

コンポーネント

初めにコンポーネントから始めることをお勧めします。なぜならそれは具体的で理解しやすいからです。

なぜ重要なのか？

• UI/UXデザイナーにとって、マテリアルデザインはUIをどのようにデザインし、それを有用にするかについて詳細な探求を提供しています。だから、これを読むことが役立つでしょう。
• 例えば、デザインシステム:
• UIデザインに必要な色やタイポグラフィの種類、それの操作方法を教えてくれます。
• デザインシステムがない場合、マテリアルデザインは色やタイポグラフィのバリエーションの設定方法を教えてくれます。
• 例えば、コンポーネント:
• UIコンポーネントの機能的な使用は、マテリアルデザインに関係なくUIを扱う際には同じです。
• だから、あなたがダイアログのUIコンポーネントを使う場合、基本的な使い方をチェックすることが可能です。

これをどのように使用し、学習するか？

1. まず最初にUIデザインに慣れておくことが重要です。UIデザインの経験が少ないと、マテリアルデザインを理解するのは難しいでしょう。
2. まず全体を一冊の本として読むことが重要です。理解できない部分があっても大丈夫です。重要なのは、「マテリアルデザインには何が書かれているか」を知ることです。
3. 次に、何かをデザインするときにマテリアルデザインをチェックします。マテリアルデザインを何度もチェックしながらデザインすることで、少しずつマテリアルデザインを理解することができるでしょう。

推奨の使用方法

• まずは、コンポーネント部分から始めることをお勧めします。コンポーネントは具体的で、理解しやすく、使用しやすいからです。
• コンポーネント、スタイル、基礎の順で理解しやすいです。

‍

はじめに

マテリアルデザインは各企業が紹介しているデザインガイドラインの一つです。これはGoogleによって作られ、Android OSやGmail、MeetなどのGoogle製品で使用されています。

マテリアルデザインが学習に使える理由

• マテリアルデザインは、Android OS用のGoogleのデザインシステムです。そのため、Androidアプリをデザインする場合、マテリアルデザインはAndroid OSのベースとなります。
• Androidアプリをデザインする際は、Android OSのUIコンポーネントの基礎となるマテリアルデザインについて読むことを強くお勧めします。
• しかし、UI/UXデザイナーにとって、マテリアルデザインはUIをどのようにデザインし、それを有用にするかについて詳細な解説を提供しています。だから、これを読むことが役立つでしょう。

マテリアルデザインページの全体構造

マテリアルデザインページは主に以下の3つのパートから構成されています。

1. Foundation（基礎）
2. Style（スタイル）
3. Component（コンポーネント）

初学者は具体的な形を紹介するComponentから見ていくのがおすすめではあります。

Foundation（基礎）

• Google Design（マテリアルデザイン）の基礎となる概念です。
• しかし、そのトピックはどんなUIをデザインする上でも有用です。
• 特に以下のトピックは誰にとっても役立つでしょう。
• Accessibility（アクセシビリティ）
• Adaptive design（適応的デザイン）
• Design tokens（デザイントークン）
• Interaction states（インタラクションの状態）

Style（スタイル）

• UIの視覚的な外観の基礎を作る上で必須となる要素の説明です。
• 注意: 一部のトピックはMD3向けに書かれており、全てのUIコンセプトに対応しているわけではありません。
• Color（色）
• 色のシステム: MD3向けに基づいているため、全てのUIコンセプトには適応できません。
• Typography（タイポグラフィ）
• タイプスケール: タイポグラフィのシステムパターン
• タイプの適用
• Elevation（エレベーション）
• Icon（アイコン）
• Motion（モーション）
• Shape（形状）

Component（コンポーネント）

• 特定のUIパターンとその使用方法です。

コンポーネント

初めにコンポーネントから始めることをお勧めします。なぜならそれは具体的で理解しやすいからです。

なぜ重要なのか？

• UI/UXデザイナーにとって、マテリアルデザインはUIをどのようにデザインし、それを有用にするかについて詳細な探求を提供しています。だから、これを読むことが役立つでしょう。
• 例えば、デザインシステム:
• UIデザインに必要な色やタイポグラフィの種類、それの操作方法を教えてくれます。
• デザインシステムがない場合、マテリアルデザインは色やタイポグラフィのバリエーションの設定方法を教えてくれます。
• 例えば、コンポーネント:
• UIコンポーネントの機能的な使用は、マテリアルデザインに関係なくUIを扱う際には同じです。
• だから、あなたがダイアログのUIコンポーネントを使う場合、基本的な使い方をチェックすることが可能です。

これをどのように使用し、学習するか？

1. まず最初にUIデザインに慣れておくことが重要です。UIデザインの経験が少ないと、マテリアルデザインを理解するのは難しいでしょう。
2. まず全体を一冊の本として読むことが重要です。理解できない部分があっても大丈夫です。重要なのは、「マテリアルデザインには何が書かれているか」を知ることです。
3. 次に、何かをデザインするときにマテリアルデザインをチェックします。マテリアルデザインを何度もチェックしながらデザインすることで、少しずつマテリアルデザインを理解することができるでしょう。

推奨の使用方法

• まずは、コンポーネント部分から始めることをお勧めします。コンポーネントは具体的で、理解しやすく、使用しやすいからです。
• コンポーネント、スタイル、基礎の順で理解しやすいです。

‍

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

1. Item 1
2. Item 2
3. Item 3

Unordered list

• Item A
• Item B
• Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript