Material DesignのWebページを作ってみた。

お久しぶりですえんたです。
徐々にこのブログも1ヶ月の出来事を月末にまとめと振り返りとして書くことが定着してきました。

 

 

さて今回は今年のGoogle I/Oで発表された「Material Design」のWebページを作ってみたいと思います。

こちらのページを参考にさせていただきました。
[Polymer]Material Designを使ったWebページを作ってみる

Polymerや詳しいソースコード等については、
上の参考ページや他のサイトでも紹介されているので今回は省きます。

 

 

実際に作ってみたページはこんな感じです。
スクリーンショット 2014-08-26 1.30.37

Demoページ

あまりWebページを作った事がない私でも、簡単にそれらしいものを作ることが出来ました。

タブをクリックしたときのアクションや、チェックボックスのアニメーションは人それぞれ意見があると思いますが、私はクリックする楽しさがあっていいと感じました。

 

 

さて、Material Designには2つのゴールがあると言われています。

  • 「古典的な良いデザインの原則」と「技術や科学の可能性と革新」を融合した Visual Language (視覚的な言語) の作成
  • 多様なプラットフォーム・デバイスサイズ間で統一感のある体験ができる、単一の基盤となるシステムの開発

一つ目のゴールは、簡単に言えば『温故知新』でしょうか。すべてを新しいものにするのではなく、古典的なデザインも取り入れてこその新しいデザインだと。

二つ目のゴールは、PC、スマートフォン、タブレットさまざまなデバイスで同じ体験(UX?)が得られるようにする、とのこと。

それでは実際にPolymerのDemoにあるCalculatorで比較してみましょう。

 

  • PC版

スクリーンショット 2014-08-26 1.51.44

 

 

  • Android(Nexus5)

2014-08-24 16.02.58 2014-08-24 16.03.04

 

 

  • iOS(iPhone5S – Safari)

2014-08-26 01.56.46 2014-08-26 01.57.18

 

 

  • iOS(iPhone5S – Chromeアプリ)

2014-08-25 01.02.29 2014-08-25 01.02.38

 

PC、Android、iOSで試してみたところ
最後に行った、iOSでChromeアプリを使ってみたときに、
Chromeアプリは横にスライドさせるとタブを切り替えることのできる機能があります。
しかし、Calculatorでは横からスライドさせて計算の追加機能を表示出来るようになっていたのですがChromeアプリのスライド機能とかぶってしまってうまく使う事が出来ませんでした。

 

 

デザインに限らず、新しい概念が登場すると、物珍しさでいろいろ取り入れてみたくなったりしますね。
今回私はMaterial Designを試してみましたが、思っていたより導入が簡単であったり、アニメーション等は新しい体験をしているようで面白かったですが、さまざまなデバイスで統一した体験をユーザーにさせられるようなモノを作るには、まだまだ無知な部分も多いため、本格的に手をつけるのはもう少しあとになりそうです。

 

以上、『Material DesignのWebページを作ってみた。』でした。