LogoMark.png

MaterialDesign

Material Design

Googleが提唱する デザインシステム

はじめに

Material Design とは、ユーザーの操作性向上を目的としてGoogleが提唱している UI/UX デザインガイドラインのことです。Googleのサービス、アプリ、Webサイトの大半が、現在そのルールに則ってデザインされています。

Google では、時代を超えて共通する優れたデザインの原則と、科学技術の革新性と可能性とを融合させた視覚言語を作り出すことに 取り組んできました。こうしてできたのが、マテリアル デザインです。 Google がマテリアル デザインの理念や特徴を発展させ続ける限り、 この仕様は生きたドキュメントとしてこれからも更新されていきます。

Materialとは「物質的な」「具体的な」という意味で、現実世界にある物の動きや影、奥行きを意識した構成によって、ユーザの直感的理解を可能にします。また、様々なデバイス・閲覧環境にあわせて「ビジュアル・レイアウト・動き」の統一ができるよう、装飾の少ないシンプルなデザインを基本としています。以下のような特徴があります。

メリットとデメリット

マテリアルデザイン vs フラットデザイン

マテリアルデザインという言葉が登場した背景には、フラットデザインというスタイルがあります。

コンポーネント

以下に、Webサイト用コンポーネントのカタログがあります。
https://material-components.github.io/material-components-web-catalog/

参考サイト

実装方法

テンプレート / FrameWork

Material Design を取り入れたテンプレート、フレームワークが、オープンソースとして多数公開されています。実際にはこうしたものを利用することで、Webサイトやアプリを実装します。

事例:MDB|Material Design for Bootstrap

Bootstrap が提供するフレームワークを利用した事例を紹介します。

公式サイトの情報にならって、関連するファイルは BootstrapCDN を利用していますので、手元で作成するファイルは HTML と CSS のみです。






PAGES

GUIDE

DATA

Last-modified: 2021-09-25 (土) 11:17:38