はじめに

Googleマテリアルデザインについて学んだので、まとめていきます。

概要

以下のサイトを参考にしながら、書いていきます。
https://tayori.com/blog/material-design/

ChatGPTを使用して、聞いてみました。

Googleマテリアルデザインは、Googleが開発したデザインシステムです。このデザインシステムは、ユーザーインターフェース（UI）やユーザーエクスペリエンス（UX）の設計に適用され、一貫性のあるデザインと使いやすさを提供することを目的としています。

Googleマテリアルデザインは、フラットで洗練された外観、シャドウや光の効果、視覚的な要素の階層化などの特徴を持っています。また、カラーパレット、アイコン、フォント、レイアウトのガイドラインなども含まれており、デザイナーや開発者が一貫性のあるデザインを実現するためのリソースとして利用できます。

Googleマテリアルデザインは、Webアプリケーション、モバイルアプリケーション、デスクトップアプリケーションなど、さまざまなプラットフォームで使用されています。また、Google自身の製品やサービスにも広く採用されており、多くのユーザーに馴染みのあるデザインスタイルとなっています。

Googleマテリアルデザインの目標は、シンプルで直感的なインターフェースを提供し、ユーザーが情報を理解しやすく、効率的に操作できる環境を作り出すことです。

要約すると、Googleマテリアルデザインとは、Googleが開発したデザインシステムで、ユーザー体験をよくするための、法則みたいなものだと思っていればいいかなと思います。

マテリアルデザインには、5つの特徴があります。

①現実世界の物理的法則を取り入れる
②紙とインクの要素で組み立てる
③色の数を少なく配色する
④影を活用して立体感を作る
⑤連続性のあるアニメーション

これは、現実世界で多く見られる動きの法則(物体に対しての影や重力など)を意識して、開発を進めるべきということです。そうすることで、ユーザー体験の向上が期待できるということです。

これは、画面のデザインを紙に書いてみても、変な見た目にならないようなデザインをすべきということです。
そうすることで、ユーザーが画面の情報を的確に得ることができるそうです。

Googleマテリアルデザインでは、有彩色4色(赤、青、緑など)に加え、無彩色3色(白、黒、グレー)を使って、画面を組み立てることが推奨されています。
そうすると、画面の見やすさが向上し、ユーザー体験が向上するということです。

これは、要素に影を活用することで、画面に立体感を生むことが推奨されています。
その影もむやみに使用するのではなく、先ほどもあった、現実世界と同じ法則で影をつけることが推奨されています。

アニメーションは、連続させるように使用しましょうということです。
自分の操作が画面にどんな影響を与えたのか、アニメーションで表現することで、ユーザーは自分がどんな操作をしたのかが、わかりやすくなり、ストレスが少なくなります。

以下は、「colormind」というツールで、AIが自動的に相性の良い配色(5色)を選んでくれるツールになります。
実際のサイトの使い方を見ていきます。
http://colormind.io/bootstrap/

下のCSSのカードは、要素に影をつけるものです。これ使えば、いい感じに影がつきます。

box-shadow: 0 16px 13px -12px rgba(0, 0, 0, -19.44), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

メリットとしては画面を見た時のわかりやすさが1番大きいと思います。
現実世界の物理法則に則って設計されているので、複雑な操作は少なく、かつ配色も抑えられれているので、シンプルなデザインでサイトの見やすさに繋がります。

マテリアルデザインを取り入れることで生じるデメリットは特にないと感じます。強いて言うなら、参考にさせていただいたサイトにもある通り、パターンやコツを覚えるコストがあるという点です。

基本的にGoogle社のWebサイトやサービスはマテリアルデザインが採用されています。Google MapsやGoogle Chromeなどを見ていただければ、よくわかると思います。

他にも記事を書いているので、良ければ見ていってください。

基本設計について
 Vue.jsとNode.jsでチャットアプリを作った
 Next.js×TypeScriptでTODOアプリを作成する