Material Design と Polymer - HTML5とか勉強会に登壇してきた

まさかのデザインに関するトーク

先日の 第49回 HTML5とか勉強会 で、Material Design と、それをWebで実践するための Polymer (Paper Elements) まわりについてお話させていただきました。

去年とか、Googler が紹介するパフォーマンス関係のわりとマニアックなトコだとかケーススタディの共有に努めたり、さらにその前もJavaScript関係のライブラリ・ツールの話をしておりました。

という流れで、エンジニア的なブランディングに終始しておりました為、今回Google I/O 現地で話を聞いてきたとはいえ、デザインに関するセッションのお話をいただいて緊張しきりでございました。

YouTube(追記)

いつの間にか動画があがってました。

小並感

なんでgreeの会場で、私と @1000ch というCyberAgentのふたりが喋ってるんだろうっていうか、超アウェーだし超緊張しました。及川さんのお話、はじめて伺ったような気がしますが楽しかった。

要約

全体的に Google のこと推しすぎましたが、利害関係ないので回し者じゃないですし中立です... (´ω`)

  • Google I/O 楽しかっタヨー
  • あらゆる環境で体験の統一をはかるのが目的ダヨー
  • 影や慣性といった現実世界のルールを持ち込むことで、一貫性を作ってるんダヨー
  • 自然界にあるルールのほうが人間の認知量つかいすぎ無くて優しいUIになるんダヨー
  • たとえばリアルな影があればオブジェクト間の関係・階層とかアフォーダンス受け取れるヨネー
  • 伝統的なグラフィックデザイン + テクノロジーによる実現 って感じダヨー
  • ガイドラインに、そのデザインを実現するための具体的な情報があって詳細ダヨー
  • Android にせよ Paper Elements にせよ、ガイドラインが実装済みコードとして存在するのイイヨー
  • Web (HTMLの世界) でやるなら Polymer + Paper Elements で用意されてるヨー
  • Paper Elements でドロワーメニューつきのUIつくるデモしたヨー
  • Polymer Designer でタブコンテンツのUIつくるデモしたヨー
  • プロダクションで使うのはまだ先だろうけど、管理画面とか個人レベルでは使い始めちゃえばいいヨー
  • 途中からMaterial DesignっていうかPolymerの話になってたヨー ←

エゴサ

Twitterを拝見する限り、デモの評判が上々だったようで何よりです。

デモ解説うますぎだろw #html5j

— たまょ (@tamaxyo) July 28, 2014

#html5j デモとシンクロし過ぎw

— 1000ch (@1000ch) July 28, 2014

このデモめっちゃいいな… #html5j

— 酒井優 (@glatyou) July 28, 2014

#html5j こういうデモが見たかった

— NAKAMURA Hiroyuki (@nhiro78) July 28, 2014

polymer designerの機能もすごかったし映像とタイミング合わせた解説もすごかった。 #html5j

— 高梨ギンペイ (@ginpei_jp) July 28, 2014

参考リソース

また機会があれば、お話させていただくこともあるかもしれません...が、しばらくないと思います( ˘ω˘)

IO

Polymer

記事

当日まとめ