トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

MaterialDesignのサイトを見る

MaterialDesign

GoggleがまとめているUIのデザインサイト「MaterialDesign」

時折見るのですが、結構いっぱい情報があってどこにどんな情報があるのかわからないので調べます。

material.io

解説サイト

note.mu

そもそもマテリアルデザインという概念について

saruwakakun.com

フラットデザイン的な感じでマテリアルデザインというデザインを提唱しているのか。

この違いの解説記事面白かった

saruwakakun.com

マテリアルデザインは動きも重要

gigazine.net

www.youtube.com

サイトを見る

Font

推奨フォントはRobtFontらしい。どこのページにそれが書いてあるか分からない。

fonts.google.com

ライセンスはApache License, Version 2.0だそうです。

http://www.apache.org/licenses/LICENSE-2.0

ライセンスの解説をしてくれている記事があった。

https://reikawatanabe.com/blog/whats-apache-license-v2/

 

日本語の推奨フォントはNotoSans

www.google.com

ライセンスは

Noto is a trademark of Google Inc. Noto fonts are open source. All Noto fonts are published under the SIL Open Font License, Version 1.1. Language data and some sample texts are from the Unicode CLDR project.

だそうです。

scripts.sil.org

nako-itnote.com

再配布の場合、著作権表示とライセンスの明示が必要

文字

フォントの大きさなどについて書いてあった。

material.io

日本語解説

medium.com

ColorSystem

material.io

f:id:bibinbaleo:20190818120629p:plain

使い方はこのサイトが詳しかった。

saruwakakun.com

まず500番でメインカラーを選んでその同じ列からサブカラーを選ぶ。

そのあと全然違うアクセントカラーを選ぶ

Resources

右上のResourcesに切り替えたらiconをダウンロードできる。

f:id:bibinbaleo:20190818074232p:plain

素材とか見本サイト

ここにいっぱいある。ダウンロードもできる

www.uplabs.com

 別にマテリアルデザインのサイトではないので検索。

f:id:bibinbaleo:20190824234754p:plain

それっぽい背景素材がダウンロードできた!

f:id:bibinbaleo:20190824234759p:plain

dream-net.org

最後に

楽しい!

ちゃんと参考にしてなにか作ってみよ!

 ここにも少し話を載せている。

bibinbaleo.hatenablog.com

 

本なかった。