はじめてのマテリアルデザイン入門

242件のシェア(すこし話題の記事)

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

この記事では、マテリアルデザイン初心者の自分が良いなと思うサイトをご紹介します。 上から順に見ていくと理解が深まるのではないのかなと思います。

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

よくわかるマテリアルデザインの設計コンセプト

よくわかるマテリアルデザインの設計コンセプト | fladdict

マテリアルデザインの設計コンセプトが分かりやすく書かれている良記事です。 これをまず読んでみてコンセプトを掴んでおけば、理解が深まると思います。

マテリアルデザインとフラットデザインって結局何が違うの?

Googleマテリアルデザインとフラットデザインって結局何が違うの?[UI/UX] | naver

フラットデザインなら知っているよっていう人はこちらを見ると良いかもしれません。

動画で見てみる

マテリアルデザインを解説してくれてます。 日本語字幕が出ているので親切です。

ちなみにGoogleのデザイン関連の動画はプレイリストにまとまってます

Google DesignBytes | YouTube

デモアプリを見てみる

Material Library Demo

Material Library Demo | Google Play

Material Library のデモアプリです。 モバイルのデザインする人は見ておいても良いかもしれません。

Material Library Demo

制作ガイドライン

Google Material design

https://www.google.com/design/spec/material-design/

Google_design_guidelines

GoogleのMaterial designのページ。これに全てが集約されているため、これを読めば良い感じもしますが、 わかりやすくQiitaにまとまっていたので、こちらもご紹介します。

マテリアルデザイン#1 Menus, Dialog, Pickers
マテリアルデザイン#2 Subheaders, Switches, Snackbars & toasts
マテリアルデザイン#3 Card, Chips, Tabs

マテリアルデザインをするにあたって便利なサイト

material up

http://www.materialup.com/

マテリアルデザインの事例を集めたサイト。

MaterialUp

Material Design Colors

http://www.materialui.co/colors

マテリアルデザインの色パターン。 画面右の Palette Creator でシミュレーションが出来ます。

Material UI Colors

FLAT ICON DESIGN

http://flat-icon-design.com/

フラットデザインなアイコン。カワイイです。

FLAT_ICON_DESIGN

polymer

https://www.polymer-project.org/

あのSanta TrackerのWeb版で使われていたと聞きました。

Polymer