Google Material Design をPolymerで表現する
先日のGoogle I/O 2014で、Googleが提唱するデザインガイドラインが発表されました。
その名も「Google Design」です。
今回は6回に分けて、Material Designについてと、具体的な実現方法についてご紹介していきたいきます。
はじめに
Google I/O 2014で、発表されたGoogle Material Designは、ユーザーに分かりやすいデザインを実現するため指標です。
Material Designでは、昔からある良いデザイン（紙のデザイン）と、現在のテクノロジーを融合し、ユーザーに分かりやすいデザインを提供すると言っています。
私は、Material Designの発表を見て、もしかしたらこの記事を読めば、デザイナーでは無い私もデザインが出来るようになるのではないかという淡い期待が生まれました。
そこで、このMaterial Designを読み進めてみました。読み進めると、ユーザーが気持ちいいアニメーションや、インタラクションなど細かいガイドラインがでてきます。
このアニメーションや、インタラクションを表現しようとすると、これまたGoogleが開発をしているPolymerを使う必要があります。
そこで今回はMaterial Designの概要と、Polymerを使った表現を紹介させていただこうと思います。
目次（今後の公開予定）
[Material Designについて]
- Material Designとは(Introduction)
- Material Designガイドライン、アニメーション (8月末公開予定)
- Material Designガイドライン（9月中旬公開予定）
[Polymerを使ってMaterial Designを表現する]
- Polymerとは、初めてのPolymer
- Polymerを使って、json読み込み、エレメントの取り込み（8月末公開予定）
- Polymerを使って、Material Designを表現しよう（9月中旬公開予定）
※ 紹介する項目は書き進めるうちに、増えていくかと思います。週一くらいを目処に、記事を公開していきたいと思います。
この記事を読むと
Googleが提唱する、ユーザーに分かりやすいデザインの概念について学べます。
さらにW3Cが策定しているWeb Componentsと、UIフレームワークのPolymerについて学ぶことができます。Web Componentsについては今後の制作スタイルをがらっと変える内容になっています。
Polymerを使うとこんなことが出来るようになります。
こちらのデモは、Rob Dodson氏の「Web Component Mashups at 3 a.m. 」を参考にしています。
素晴らしいデモですので、こちらも是非参考にしてみてください。