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について]

  1. Material Designとは(Introduction)

[Polymerを使ってMaterial Designを表現する]

  1. Polymerとは、初めてのPolymer
  2. [エレメント]
    Polymerエレメント、Jsonの読み込み

    Polymer Layoutエレメント
    Polymer Iconエレメント
  3. Polymerを使って、Material Designを表現しよう
 
 

 

この記事を読むと

 

Googleが提唱する、ユーザーに分かりやすいデザインの概念について学べます。
さらにW3Cが策定しているWeb Componentsと、UIフレームワークのPolymerについて学ぶことができます。Web Componentsについては今後の制作スタイルをがらっと変える内容になっています。

Polymerを使うとこんなことが出来るようになります。

こちらのデモは、Rob Dodson氏のWeb Component Mashups at 3 a.m. 」を参考にしています。
素晴らしいデモですので、こちらも是非参考にしてみてください。

 

 

このエントリーをはてなブックマークに追加

関連タグ:

この記事をシェアする

次へ
前へ