読者です 読者をやめる 読者になる 読者になる

Googleのマテリアルデザインまわりを調べた

f:id:syonx:20150312130355j:plain


Material design - YouTube

調査の背景

新しいWebアプリの制作を検討していて、デスクトップからタブレット、モバイルまで 対応しようものなら自分でデザインガイドラインなり考えるのは大変。だからすでに 世の中に出ているものを活用したいなと思っていて、たどり着いたのが去年 Google が 発表したマテリアルデザイン。

便利なやつ

f:id:syonx:20150313232227p:plain Material Icons Index
マテリアルデザインで利用されているアイコンの一覧


f:id:syonx:20150313232531p:plain Material Design Color Palette Generator - Material Palette
2色選ぶとマテリアルデザインのUIに適用したサンプルとカラーパレットを生成してくれる


f:id:syonx:20150313232851p:plain Material UI | Material Design | Material UI Colors
マテリアルデザインのカラーパレット。色をクリックしてコピーできる


f:id:syonx:20150313233045p:plain The Best Of Material Design, daily – MaterialUp
マテリアルデザインのショーケース

f:id:syonx:20150312131210g:plain
Filter Menu – Mobile app by Anton Aheichanka – MaterialUp

これおしゃれだな〜

マテリアルデザインの実装

Bootstrap

Material Design for BootstrapMaterial Design for Bootstrap

外観だけお手軽に実装するならこれ。ちょっと触ってみた感じだと、まだ完成度は低いかな~と。
活発に更新されているようなので、これからに期待です。

また、このBootstrapテーマで利用されている要素はこちらにまとまっています。

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!


Polymer

f:id:syonx:20150313234703p:plain

Welcome - Polymer

エレメントと呼ばれるWebコンポーネントrel="import"して組み込むことでマテリアルデザインのアプリを構築するフレームワーク。 つい先日 version 0.8 になりました (Mar 10, 2015)。*1
最新の “evergreen” ブラウザに対応しており、現在だと Chrome でしか動作しません。*2

この「Designer」を使うと、ドラッグアンドドロップでPolumerアプリのプロトタイプを作成できます。近い将来はこれでコンポーネントをデザインしてインポートすれば組み込み完了な構築フローになるのかな。

AngularJS

f:id:syonx:20150314001421p:plain

Material Design

Polymerは先進的過ぎますが、こちらは現実的です。コンポーネントの種類も豊富で、新しいバージョンのリリースもコンスタントに行われているようです。現在は v0.8.3 。

AngularJSリファレンス

AngularJSリファレンス

React

f:id:syonx:20150314003015p:plain f:id:syonx:20150314003620p:plain

Material UI - Material Design React Components

話題のReactと小洒落た配色でとても気になっているコレ。チェックボックスをクリックしたときの小さなアニメーションも効果的で行き届いていて、よく出来ています。サンプルソースを見てもAngularと比べてすっきりとした印象。Reactを学習したらまず使いたいライブラリです。

etc.

ほかにもいろいろ出てきてる。

採用事例

(・ω・)

途中でまとめ疲れた~。適宜更新していきます。

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4