Material Designという新しいコンセプトがAndroid Lより採用されます。より直感的にステータスが分かるようになったり、選択しているオブジェクトが判断できるようになります。フラットによって情報構造がシンプルになったからこそ実現できるデザインでしょう。 そんなMaterial DesignをWeb上で実現できるフレームワークがPolymerです。Google製の格好いいフレームワークです、ぜひチェックしましょう。

Polymerの使い方

こちらはデモのフォーム。入力欄がフォーカスすると色が変わったりして自分が今どこで何をしようとしているのかが分かりやすいです。

こちらはクイズアプリのデモ。選択した時のアニメーション、カラーリング変更などが特徴です。

クイズ中。

リーダーボード。基本的にフラットなデザインです。

答えを選択したところ。こういう風にどれを選択したか、それが正解なのか分かりやすいのがMaterial Designの特徴と言えそうです。

空白が多くてみやすいのもいいですね。

ここからはエレメントを見ていきます。

チェックボックス。

ラジオボタン。

トグル。

入力。

ツールバー。

スクロールヘッダーパネル。

プログレスバー。

スライダー。

タブ。

ボタン。フォーカスしているかどうかでも表示が変わります。

アイコンボタン。

フローティングアクションボタン。

ダイアログ。

影の付け方も数パターン用意されています。

デモの電卓。

Material DesignはフラットUIの進化版と言えます。フラットUIはシンプルさゆえに行える操作が分かりづらいことがあります。それをPolymerを使えばユーザの操作を分かりやすく補助したり、アニメーションを使ってユーザ補助ができます。

PolymerはHTML5/JavaScript製のオープンソース・ソフトウェア（BSD License）です。

MOONGIFTはこう見る

フラットUIは静的なデザインですが、パララックスエフェクトをはじめ、数多くのアニメーション効果を取り込んだのがMaterial Designと言えるかも知れません。Webデザイナーの人は単純に絵を見せるだけでなく、こうした効果まで見せていく必要があるかも知れません。

また、Material DesignはAndroid Lに実装されているとあって基本的にスマホ向けですがPolymerはWebアプリでも実現できるようになっています。アプリとWebの境界線はどんどんなくなってきていると言えそうです。

Welcome - Polymer polymer