Googleのマテリアルデザインまわりを調べた
調査の背景
新しいWebアプリの制作を検討していて、デスクトップからタブレット、モバイルまで 対応しようものなら自分でデザインガイドラインなり考えるのは大変。だからすでに 世の中に出ているものを活用したいなと思っていて、たどり着いたのが去年 Google が 発表したマテリアルデザイン。
便利なやつ
Material Icons Guide - Google Design
マテリアルデザインで利用されているアイコンの一覧
Material Design Color Palette Generator - Material Palette
2色選ぶとマテリアルデザインのUIに適用したサンプルとカラーパレットを生成してくれる
🎨 Material Design Colors, Color Palette | Material UI
マテリアルデザインのカラーパレット。色をクリックしてコピーできる
Unlimited Android Templates Ready for Commercial Use - UpLabs
マテリアルデザインのショーケース
これおしゃれだな〜
マテリアルデザインの実装
Bootstrap
外観だけお手軽に実装するならこれ。ちょっと触ってみた感じだと、まだ完成度は低いかな～と。
活発に更新されているようなので、これからに期待です。
また、このBootstrapテーマで利用されている要素はこちらにまとまっています。
Polymer
エレメントと呼ばれるWebコンポーネントをrel="import"して組み込むことでマテリアルデザインのアプリを構築するフレームワーク。
つい先日 version 0.8 になりました (Mar 10, 2015)。*1
最新の “evergreen” ブラウザに対応しており、現在だと Chrome でしか動作しません。*2
この「Designer」を使うと、ドラッグアンドドロップでPolumerアプリのプロトタイプを作成できます。近い将来はこれでコンポーネントをデザインしてインポートすれば組み込み完了な構築フローになるのかな。
AngularJS
Polymerは先進的過ぎますが、こちらは現実的です。コンポーネントの種類も豊富で、新しいバージョンのリリースもコンスタントに行われているようです。現在は v0.8.3 。
React
MUI: The React component library you always wanted
話題のReactと小洒落た配色でとても気になっているコレ。チェックボックスをクリックしたときの小さなアニメーションも効果的で行き届いていて、よく出来ています。サンプルソースを見てもAngularと比べてすっきりとした印象。Reactを学習したらまず使いたいライブラリです。
etc.
ほかにもいろいろ出てきてる。
採用事例
- 【マテリアルデザイン採用】リニューアルで気をつけた4つの大事なポイント -feedly編- - Photoshop VIP
- マテリアルデザイン採用でUIを一新した「Sleipnir Mobile for Android 3.0」リリース - GIGAZINE
- iOS版Googleカレンダーが登場、Gmailから自動で予定登録などが可能に - GIGAZINE
- https://www.google.co.jp/maps/
- http://www.google.com/inbox/
- http://www.google.com/calendar/about/
(･ω･)
途中でまとめ疲れた～。適宜更新していきます。
