Siaのブログ

独身のうちにやっておきたいことを真面目に考えるブログ

マテリアルデザインについて触れてみた

最近マテリアルデザインについて触れる機会がありました。

マテリアルデザインについて知らなかったのですが、調べてみるとおしゃれで素敵!と楽しくなりました。笑

 

そこで今回は、マテリアルデザインの概要や、マテリアルデザインを考えるうえで便利なサイトをまとめてみました。

 

 

f:id:siaris:20200329155649p:plain

 画像元:https://www.legit.co.jp/materialdesign-appearning-one-after-another/4471

 

マテリアルデザインとは?

マテリアルデザインは、Googleが推奨するデザイン手法です。

主に以下の特徴があります。

  • 現実の物理法則に即した(マテリアルな)デザイン
  • 印刷物向けデザインの基本要素を取り込む
  • 装飾ではない、操作性向上のためのアニメーション

 より具体的な説明は、以下の動画がわかりやすかったです。


【Develop】マテリアル デザインでよりよいユーザー体験を実現しよう

 

個人的には、フラットデザインとの違いがぴんとこなかったのですが、以下の違いがあるようです。

より個性を重視するならフラットデザイン、より操作性を重視するならマテリアルデザイン、らしいです。

なぜ個性を重視するならフラットデザインなのかというと、マテリアルデザインはルールが厳格なため、似たようなデザインになりやすいからです。といっても、なりやすいだけで個性を出すことはできます。

より具体的な説明は、以下ブログをご参考ください(このブログわかりやすい!)。

saruwakakun.com

 

マテリアルデザインを考えるうえで便利なサイト

マテリアルデザインを体験できるサイト(個人サイト)

material.cmiscm.com

マテリアルデザインのカラーパレット

www.materialpalette.com

マテリアルデザインのアイコン

material.io

 

マテリアルデザインを利用したWebサイトの例

Googleのサービスは基本的にマテリアルデザインを採用しています。

www.youtube.com

rentberry.com

おわりに

今回は、マテリアルデザインの概要についてのご紹介でした。

 

ちなみに、本ブログもマテリアルデザインのテンプレートを使用しています。

 

そのうち、実際に実装してみた話をできたらよいなーと思っていますので、よろしければお楽しみくださいませ。

 

ではでは。