#author("2021-09-25T11:17:38+09:00;2019-07-05T20:51:16+09:00","default:inoue.ko","inoue.ko")
*Material Design
Googleが提唱する デザインシステム
~
**はじめに
Material Design とは、ユーザーの操作性向上を目的としてGoogleが提唱している UI/UX デザインガイドラインのことです。Googleのサービス、アプリ、Webサイトの大半が、現在そのルールに則ってデザインされています。
>Google では、時代を超えて共通する優れたデザインの原則と、科学技術の革新性と可能性とを融合させた視覚言語を作り出すことに 取り組んできました。こうしてできたのが、マテリアル デザインです。 Google がマテリアル デザインの理念や特徴を発展させ続ける限り、 この仕様は生きたドキュメントとしてこれからも更新されていきます。
-公式サイト：https://material.io/
--https://material.io/design/introduction/#
--https://material.io/design/foundation-overview/
--https://material.io/design/guidelines-overview/
Materialとは「物質的な」「具体的な」という意味で、現実世界にある物の動きや影、奥行きを意識した構成によって、ユーザの直感的理解を可能にします。また、様々なデバイス・閲覧環境にあわせて「ビジュアル・レイアウト・動き」の統一ができるよう、装飾の少ないシンプルなデザインを基本としています。以下のような特徴があります。
-1) 現実世界の物理法則を取り込む
日常生活において馴染みのある「物体同士の重なり」や「影のつき方」などを画面上に再現することで、「どのように操作すれば良いのか」を直感的に理解できるようにします。
-2) 印刷物におけるデザインの発想を取り込む
文字や画像、余白の使い方などは印刷物におけるデザインの考え方を踏襲します。それにより、階層構造や重要なポイントを示しやすくなります。
-3) 連続性のあるアニメーション
連続性のある動きを採用することで、ユーザーの注意を引きつけつつ、スムーズな作業フローを実現します。
~
***メリットとデメリット
-メリット
--ユーザーにとって直感的に分かりやすい UI/UX が実現できる
--ルールの統一により、操作の学習が効率的にできる
-デメリット
--明確なガイドラインがあるがゆえにサイトごとの個性が無くなる
（これは CSS フレームワークに共通して言えることですが・・）
~
***マテリアルデザイン vs フラットデザイン
マテリアルデザインという言葉が登場した背景には、フラットデザインというスタイルがあります。
-フラットデザイン
文字通り平面的なデザインのことで、影やグラデーションによる「奥行き」や「立体感」は存在しません。iPhone や Windows のOS、また Instagram や facebook などが Webサイトに採用したことで 2012年頃から普及しました。
-マテリアルデザイン
「現実世界の物理法則」を基調としたデザインで、「紙」を触るような直感的な操作を前提に「影」による「奥行き」や「重なり」が表現されます。
~
***コンポーネント
以下に、Webサイト用コンポーネントのカタログがあります。
https://material-components.github.io/material-components-web-catalog/
~
***参考サイト
-サルワカ｜https://saruwakakun.com/html-css/material
-SONIC Moov Lab.｜https://lab.sonicmoov.com/design/material-design/
~
~
**実装方法
***テンプレート / FrameWork
Material Design を取り入れたテンプレート、フレームワークが、オープンソースとして多数公開されています。実際にはこうしたものを利用することで、Webサイトやアプリを実装します。
-Material Design Lite：https://getmdl.io/
-Materialize：https://materializecss.com/
-MDB：https://fezvrasta.github.io/bootstrap-material-design/
-MUI：https://www.muicss.com/
-Material-UI：https://material-ui.com/
~
***事例：[[MDB｜Material Design for Bootstrap>https://fezvrasta.github.io/bootstrap-material-design/]]
Bootstrap が提供するフレームワークを利用した事例を紹介します。
-''DEMO''：https://koichi-inoue.github.io/MaterialDesign/
-''CODE''：https://github.com/koichi-inoue/MaterialDesign
[[公式サイトの情報にならって>https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/getting-started/introduction/]]、関連するファイルは BootstrapCDN を利用していますので、手元で作成するファイルは HTML と CSS のみです。
~
~
~
