マテリアルデザインとは何なのか？新米プロダクトデザイナーが調べてみた
こんにちは！ぎぼんぬです🐈
前回のnoteに書いたUIの知見を貯める取り組みの振り返りnote第１弾です👼🏻
今回はそもそもマテリアルデザインとは何なのか？についてと、UIの周辺用語や基礎知識についての私なりに調べてわかったことなどの調査結果です！
マテリアルデザインとは
そもそもマテリアルデザインとは何なのかを調べてみました。（とは言っても、マテリアルデザインのサイトから引用してみただけなんですが笑）
以下がマテリアルデザインについてのからの公式からの定義です🌏
マテリアル デザインは、Google のデザイナーと開発者によって構築およびサポートされているデザイン システムです。Material.io には、Android、Flutter、Web 用の詳細な UX ガイダンスと UI コンポーネントの実装が含まれています。
最新バージョンのマテリアル 3 では、ダイナミックなカラーや強化されたアクセシビリティから、大画面レイアウトやデザイン トークンの基礎に至るまで、個人的で適応性のある表現力豊かなエクスペリエンスが可能になります。
正直ちょっと何言ってるかわかりませんでした！
マテリアルデザイン＝デザインシステムである。というのは理解できたのですが、そもそもデザインシステムって何なのでしょうか？😶🌫️
それを調べてみました！
デザインシステムとは
デザインシステムとは、デザインに関わる複数の要素（色やフォントなどさまざまなもの）をひとつに管理したもの、だそうです。デザインシステムがあることによって、一貫したユーザー体験の提供や業務の効率化を図ることができるようになります！（へぇ〜💡）
デザインシステムとは一つの指針。ページ全体や、サイト全体での世界観がズレを防ぐことにつながるそうです。
例えば、デザイナー複数人でサイトを作成するとします。もしマテリアルデザインがなかった場合、デザイナーによってちょっとずづボタンの形が違ったり、色が微妙に違ったり、同じヘッダーでもページによって高さや余白が違うページなる可能性もあります☠️（たまにこういうサイトやパーツを発見したりします笑）
デザインシステムは大きく３つに分類することができます。
❶ドキュメント
→デザインの概念、原則などをまとめたもの。
❷スタイルガイド
→フォント・ロゴ・カラーなど
❸コンポーネントライブラリ
→ボタン・ナビゲーション・リスト・モーダルなど
いくつか解説した記事があったのですがその中でも以下の記事がわかりやすかったです！
デザインシステムの例
また、実際のデザインシステムってマテリアルデザイン以外にも何があるのかも調べてみました！
▼デジタル庁
▼SmartHR
▼Abema
▼OpenAI
Open AIのデザインシステム、今風な感じがします📱
マテリアルデザインとはまとめ
私なりにまとめると、マテリアルデザインとはサイト全体のデザインの方針を定めたルールブック（by Google）なのでは、と考えます。
デザインシステム自体は沢山ありますが、マテリアルデザインはその中でも世界中の人が触れていてる親しみやすいデザインシステムなのではないかなと思います！🌏
その他デザイン周りの用語
デザインシステムを調べていくと、わからない用語たち幾つか出てきたので、そちらも調べてみました。
デザインガイドライン
デザインガイドライン。解説によると以下の意味があるそうです。
デザインシステム：
デザインガイドラインと、デザインガイドラインを用いて作られたデザインのパーツが合わさったもの。
デザインガイドライン：
デザインシステムの中に存在し、デザインに関する指針（ブランドコンセプト・デザインの指針・色などの具体的なルール）のこと。
つまり、デザインシステムという大きな枠組みの中に、デザインガイドラインが存在するということですね🌈
デザインガイドラインを作成し、チーム内で共有することによって、スムーズな制作進行を促し、開発の遅延を避けることにつながりるそうです。
デザイントークン
デザイントークンとは、以下のことを意味するそうです。
デザイントークン には、色、フォント、スペース、アニメーション、アセットなどの UI データが含まれており、クロスプラットフォームの UI（ユーザーインターフェース）をスタイリングして構築するのに使用されます。
クロスプラトフォームとは、AndroidやmacOSなどの異なる環境でも同じ仕様のアプリケーションを動かすことが可能なフレームワークのことを指します。
では、デザイントークンってなんのためにあるのでしょう？😶🌫️
以下に挙げられてることがデザイントークンの目的になるそうです。
・デザイナー・エンジニアに低レイヤーな統一言語を提供します。
・開発設計担当者に必要な情報を明確に伝えられます。
・スケーラブルで一貫性のあるプロダクト設計を可能にします。
・ハードコードな設計を減らし、変更に強いプロダクト開発を可能にします。
・効率的に速いインターフェース設計を可能にします。
また、デザイントークンのパイオニア的存在とされている企業がSalesForceなのだそうです☁️
▼SalesForceのデザイントークン
とはいえ実はマテリアルデザインにもデザイントークンはあるんです！
両者ともに世界的な企業ですが、それぞれのデザイントークンの違いは何があるのでしょうか？
これは次回の調査テーマにしたいと思います✌️
調べた結果わかったこと
調べる前までは、マテリアルデザインって一体なんなのかも正直わかっていませんでした。これでデザインの基礎的なルールが学べるかも！ぐらいのイメージでした⚡️
調べていくいうちに、UIに関する解像度が上がったと思います。
そもそもマテリアルデザインとはどういうものなのか、という疑問を通してデザインシステムへの理解と、他のデザインシステムにはどういったものがあるのかを調べることもできるようになりました！（そもそもデザインシステムというものが分かってなかったら、他との比較をするという観点すら生まれなかったかもしれません、、、）
また、今回の調査を通して他にも知らなかったデザインに関する単語を知るきっかけにもなりました。
次回の調査について
次回は、後半でちょっと触れたマテリアルデザインのデザイントークンについてを解説したいと思います！
それではまた次回もお楽しみに🍰
この記事が気に入ったらサポートをしてみませんか？