アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

マテリアルデザインのためのリソース、フレームワークまとめ

最近のアプリデザインの注目と言えばマテリアルデザインです。現実世界を投影し、ユーザのストレスを減らすのを目的に作られているのが特徴です。単純にデザインだけでなく、アニメーションを含めることでより高度なデザインとなっています。

そこでマテリアルデザインを手軽に利用するために使えそうなリソース、フレームワークをまとめて紹介します。

アイコン

Material Icons Index

f:id:moongift:20150222004923j:plain

Material Icons IndexはGoogleがマテリアルデザインを発表した時、一番最初に出てきたアイコン集です。ステータスの変化やアニメーションを考慮して多くのパターンでアイコンが作られています。

Material Icons Index

Material Design Fonticons

f:id:moongift:20150222005009j:plain

Material Icons IndexがPNGなどで提供されていたのに対して、Material Design FonticonsはWeb Fontになっています。カラーリングや大きさの変更という面においてMaterial Design Fonticonsのが便利でしょう。

Material Design Fonticons

CSSフレームワーク

Documentation - Materialize

f:id:moongift:20150222005026j:plain

マテリアルデザインのためのスタイルシートフレームワークです。レスポンシブも考慮されており、デスクトップ、タブレット、スマートフォンすべてで使えます。

Documentation - Materialize

ember-paper - The Ember approach to Material Design.

f:id:moongift:20150222005047p:plain

Ember.js向けのマテリアルデザインフレームワークです。アドオンとしてのインストールもコマンドからできます。

ember-paper - The Ember approach to Material Design.

Material Design for Bootstrap

f:id:moongift:20150222005318p:plain

こちらはBootstrap 3向けです。既にBootstrap 3ベースである場合、テーマファイルとして入れ替えるだけでマテリアルデザインになるでしょう。

Material Design for Bootstrap

Polymer Material Design Playground

f:id:moongift:20150222005113j:plain

Polymer向けのマテリアルデザインプレイグラウンドです。アニメーションなどを確認できます。

Polymer Material Design Playground

LumX

f:id:moongift:20150222005123j:plain

AngularJS向けのマテリアルデザインフレームワークです。Sassを使っています。jQueryを少し使っていることで、既存のjQueryプラグインも使いやすくなっています。

LumX

React Material

f:id:moongift:20150222005436p:plain

React.js向けのマテリアルデザインフレームワークです。

React Material

Material Design

f:id:moongift:20150222005147j:plain

Angular MaterialはAngularJS本体が行っているプロジェクトとあって、今後に期待がかかります。

Material Design

Material design with Polymer - Polymer

f:id:moongift:20150222005158p:plain

こちらはPolymer本体が行っています。Polymerとマテリアルデザインをいかに組み合わせ、提供するかを解説しています。

Material design with Polymer - Polymer

Ionic Material / Material Design / Ionic Framework / AngularJS / Zach Fitzgerald

f:id:moongift:20150222005211p:plain

Ionicでマテリアルデザインを実現します。これによりハイブリッドアプリにおいてもマテリアルデザインが使いやすくなるでしょう。

Ionic Material / Material Design / Ionic Framework / AngularJS / Zach Fitzgerald

Material UI - Material Design React Components

f:id:moongift:20150222005226p:plain

React.js向けのマテリアルデザインコンポーネントです。数多くのデモが提供されています。

Material UI - Material Design React Components

その他

materialup

f:id:moongift:20150222005240j:plain

マテリアルデザインに関するアイディア、デザイン案が並んでいます。ここから大きなヒントが得られそうです。

materialup


マテリアルデザインはフラットデザインにおける問題と言える、アクションできるオブジェクトなのかどうか分かりづらいという問題を解決してくれる可能性があります。情報構造を明確にしていくフラットデザインに、マテリアルの考えを追加することで操作性を向上させたり、ユーザビリティを高められるようになります。

Androidアプリからはじまった流れですが、既にiOSにおいても取り入れられています。ハイブリッドアプリは両方に対応しますので特に重視したいデザインと言えるでしょう。

ハイブリッドアプリを開発する際にはぜひアプリカンを使ってください。

アプリカン | アプリ開発支援プラットフォーム