Material Design Guidelineを読む - Material System
この記事は個人学習のために、マテリアルデザインガイドラインを読んだ備忘録です。英語読めないマンなので、DeepL翻訳先生とたくさんの翻訳記事を参考にさせていただきました。
マテリアルデザインってなに？
こちらです
Googleが作ったデザインシステムのことです。
Material Principles - マテリアルデザイン原則：3つ
1. Material is the metaphor（メタファーである）
2. Bold, graphic, intentional（力強く、視覚的であると同時に意図的）
3. Motion provides meaning（モーションは意味を与える）
1. Material is the metaphor（メタファーである）
Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.
超要約：（ニュアンス違ってたらすみません）
マテリアルデザインは、現実世界で存在する光の反射や影の落とし方などからインスパイヤーされています。
「マテリアルサーフェイス」（というマテリアルデザインの中にある概念）は紙やインクを（スクリーン上に）再構築したものです。
▶︎ つまり・・
マテリアルデザインは、「現実世界の物理的法則」を取り入れ、物の重なり方に連動した影、質量を感じる物の動きを取り入れている。
そして、紙︎（のようなもの）やインク（のようなもの）で作られている。
そしてその概念をサーフェースという。
2. Bold, graphic, intentional（力強く、視覚的であると同時に意図的）
Material Design is guided by print design methods — typography, grids, space, scale, color, and imagery — to create hierarchy, meaning, and focus that immerse viewers in the experience.
超要約：
マテリアルデザインは、タイポグラフィー、グリッド、余白、スケール、カラー、イメージといった印刷デザインの手法を取り入れ、階層、意味、焦点を生み出し、見る人をその体験に没頭させます。
（ここもっと良い訳し方ないのかな・・）
▶︎ つまり・・
印刷デザインの手法を使っています。
テキストサイズやグリッド、余白の付け方、色の付け方などで階層をつけることができ、意味を与えている
3. Motion provides meaning（モーションは意味を与える）
Motion focuses attention and maintains continuity through subtle feedback and coherent transitions. As elements appear on screen, they transform and reorganize the environment with interactions generating new transformations.
超要約：
（できなかった・・難しい）
モーションは、微妙なフィードバックと首尾一貫した遷移によって、注意を集中し、連続性を維持します。画面に表示された要素は、相互作用によって新たな変化を生み出しながら、環境を変化させ再編成します。
▶︎ つまり・・
モーションに意味があるということで理解しました
（ここまた後で補足したい😭）
Material Components -マテリアルコンポーネント
マテリアルコンポーネント（マテリアルデザインで提供されているコンポーネントのこと）はユーザーインターフェースをインタラクティブに作れるブロックとして作られていて、それぞれ状態を持っている。
各コンポーネントはフォーカス中、選択中、active状態、エラー、ホバー、プレス、ドラッグ、無効という状態を持っている。
コンポーネントのライブラリはAndroid, iOS, Flutter, Webがある。
コンポーネントには以下のような種類がある。
Display: カード、リスト、シートといったコンポーネントを使用してコンテンツを配置し、整理する
Navigation: ドロワーやタブといったコンポーネントを使用して、ユーザーが製品内を移動できるようにする
Actions:フローティングアクションボタンなどのコンポーネントを使用して、ユーザーがタスクを実行できるようにする
Input:テキストフィールド、チップ、選択コントロールなどのコンポーネントを使用して、ユーザーが情報を入力したり、選択したりできるようにする
Communication: スナックバー、バナー、ダイアログなどのコンポーネントを使用して、ユーザーに重要な情報やメッセージを通知する
Material Theming - マテリアルテーマ
マテリアルテーマ（マテリアルデザインで提供しているテーマ）は、色、タイポグラフィスタイル、角の形などをカスタマイズするためのサポートとガイダンスが組み込まれていて、ブランドのルック＆フィールに合うようにMaterial Designを簡単にカスタマイズすることができるようになっている。
Color
マテリアルデザインのカラーシステムは、UIに色を適用するための組織的なアプローチです。グローバルなカラースタイルには、プライマリー、セカンダリー（ブランドカラー）、サーフェス、バックグラウンド、エラーという意味不明な名前と、コンポーネントでの使用方法が定義されている。
また、どの色も、その上に配置される要素に使用される補色を持ち、一貫性とアクセス可能なコントラストを促進する。
Typography
マテリアルデザインのタイプスケールは、見出しから本文、キャプションまで、13種類のタイポグラフィースタイルがある。それぞれのスタイルには明確な意味があり、インターフェイス内での用途が意図されています。
書体、フォントの太さ、文字ケースなどの重要な属性は、ブランドやデザインに合わせて変更することができる。
Shape
形状スタイルを適用することで、注目を集めたり、部品を識別したり、その状態を伝えたり、ブランドを表現したりすることができます。
すべての素材コンポーネントは、サイズ（小、中、大）に基づいた形状カテゴリにグループ化されています。これらのグローバルスタイルは、同じようなサイズのコンポーネントの形状をすばやく変更する方法を提供します。
形状のカスタマイズツールを使って、独自の形状スタイルを生成することができます。
Special Thanks! ♡
https://zenn.dev/yu_sakai/articles/design-material-system-introduction
http://dotgraphy.com/notes/entry-151.html
https://www.asobou.co.jp/blog/web/material-design
https://tayori.com/blog/material-design/
https://qiita.com/takecian/items/839b324512ddc09503ee
この記事が気に入ったらサポートをしてみませんか？