CREATOR BLOG

MaterialDesign対応のUIフレームワーク5選

2015/01/23
鈴木潤一
  • このエントリーをはてなブックマークに追加
01

こんにちは。すーさんです。
今回はGoogleが提唱したデザインガイドライン「MaterialDesign」をWEBに取り入れる為のUIフレームワークをご紹介します。

Materialize

03

まずはBootstrapライクなCSSフレームワーク。コンポーネントとドキュメントも一通り揃っており使いやすそうです。

Materialize

Material Design for Bootstrap

05

こちらはBootstrapベースのCSSフレームワーク。BootstrapコンポーネントもすべてMaterialDesignになっています

Material Design for Bootstrap

Paper Bootswatch for Bootstrap

06

こちらもBootstrapベースのCSSフレームワーク。Bootstrapのテーマとして配布されています

http://bootswatch.com/paper/

Material UI

04

こちらもコンポーネントとドキュメントが一通り揃っているフレームワーク。ただ導入には「browserify」と「reactify」が必須です。

Material UI

polymer

02

最後にGoogle謹製の「polymer」
こちらのフレームワークは「Web Components」という新しい技術を使ったフレームワークで「Material UI」と同様に導入のハードルはすこし高めです。

公式サンプル

polymer

まとめ

モバイルから車の中まであらゆるデバイスで統一されたUIを提供するMaterialDesign。
一部のAndroidデバイスやGoogle製のアプリで少しずつ触れるようになってきており、2015年は更に身近になるでしょう。
ご紹介したように便利なフレームワークも揃ってきているので、是非この機会にWEBにも取り入れてみてはいかがでしょうか。

この記事を書いた人

鈴木潤一UIDesigner

写真/トレッキング/Apple/坊主

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive