この記事は2015年5月28日に行われたGoogle I/O 2015「Material Now」セッションの翻訳です。「Material Now」では、Material Designがリリースされてからの1年間の状況や反響、事例等を取り上げています。本翻訳の後編は、Google社のデザインに対する取り組みと、Material Designの採用事例について記述します。

Design Sprints

• Design Sprint | Google Developers

私たちはみなさんにMaterialをもっと好きになってもらいたいですし、みなさんのフィードバックをMaterialに取り込みたいと考えています。みなさんと対話するために、去年から私たちはいくつかのプログラムを始めています。

スターターのために、私たちはGoogleでDesign Sprintsを行いました。マウンテンビューのキャンパスでガレージと呼ばれる場所で、1日かけてデザインワークショップをします。いくつかの企業を招いて、そのチームのデザイナー、プログラムマネージャー、エンジニアが一緒にプロダクト開発における特定の問題に取り組むのです。

私たちはそれをサポートするのですが、それはなにも既存のアプリのMaterial Design化だけでなく、アプリデザインをいろんな観点からサポートするのです。これはとても素敵な取り組みで、私たちはみなさんが抱えている問題が何なのかを理解することができます。とても真剣で濃密なプロセスですが、反応はとても良いものでした。私たちは17の企業と協力し、今もこれ続けています。

加えて、私たちは100以上のデザインレビュー、それは1、2時間の短いセッションで、私たちのデザイナーの何人かがみなさんのデザインチームとMaterial Designの実装について話し合うのです。これもまたみなさんと協力しあえることができ、技術・デザイン両面からみなさんをサポートすることができます。

I/Oではデザインのセッションが他にもありますので、ぜひとも、みなさんチェックしてみてください。もし、このようなデザインレビューができないのなら、どうかdesign@google.comまで連絡ください。

FORM

• FORM

昨年、Googleで初めてデザインカンファレンスを、ここサンフランシスコで開催しました。このイベントはとても素晴らしいものとなりました。このイベントは招待制なので、みなさんの中でどれだけの人がこのイベントに行けるかどうかは私にはわかりませんが、デザインコミュニティに繋がっていればその機会があることでしょうし、私たちは世界中のデザイナーを招き、講演をし、パネルディスカッションをし、ハンズオンのワークショップもしました。次のFORMを企画していますので、どうぞご期待ください。

Material Design in the Wild

さて、Material Designについてはここで終わりです。なぜなら、私たちはみなさんにもっと美しいアプリを作ってほしいですし、もっと直感的な体験をみなさんのユーザー・顧客に届けてほしいと考えています。

ここでセッションを終えますが、みなさんが実装したMaterialの事例について話す時間を設けることにしましょう。私たちはいくつかのMaterial Designを採用しようとする企業と話す機会を得ました。そして彼のストーリーを聞きました。そこで彼らの事例についてシェアしたいと思います。

Trello

まず、Trelloです。いくつかのプロジェクトを組織したりシェアするのに便利です。MobileリードのHamidはTrelloのMaterial Design化することで、プロダクトそれ自体、デザインにフォーカスすることができたと言っています。さらにははっきりとしたインパクトも数字として現れています。

• 週間ユーザーあたりのセッション数が10%増加
• セッションあたりのボード作成数が42%増加
• セッションあたりのボードを追加するユーザー数が63%増加

The Hunt

次にファッションスタイルを共有するThe Huntですが、プロダクトデザイナーのJennyは、Material Designはデザインチームをスムーズに拡張してくれるものであり非常に助かっており、それはまたチームを加速させるものだと述べています。私たちは非常に嬉しかったです。なぜならこれは私たちが望んでいたことだからです。同様に、HuntのMaterial Design化で、以前と比べて”Hunts”が30%増加しました。

Pocket Casts

最後に、ポッドキャストアプリのPocket Castsですが、前述のアプリと同じような効果をあげていますし、Material Design化により30%も売上が増加しました。ファンタスティックですね！

このような事例は、なぜMaterialを採用するのかといった証明になりますし、まさしく私たちが進むべきものです。私たちは、みなさんが現在やっていることをさらに集中・加速させることを手助けしようとしているのです。もし、Material Design化に対して説得を要するのならこれらの事例をぜひとも使ってもらいたいです。

みなさんのこのような素晴らしい成果に私たちは非常に感動しました。もう少しこのようなアプリに対してより多くのみなさんにシェアや賞賛をしてもらいたいと考え、私たちPlayチームとDevチームは18の素晴らしいMaterial Designアプリを選択し、ショーケースとしてみなさんにシェアしたいと思います。

• Best-In-Class Android Design – Google Play の Android アプリ

昨年、Material Designを紹介する動画を作成しましたが、実際それらはフェイクのアプリですが、今回並んでいるのは実際のみなさんが作ったまぎれもないリアルなアプリです。私たちは非常に興奮しております。

Material Design Award

• Material Design Awards – Articles – Google Design

さらに私たちは、特定の分野でもっとも素晴らしいMaterial Designをしているアプリを表彰するためのMaterial Design Awardも用意しました。今年は6つのカテゴリーから選びました。これらのアプリはまさしくMaterial Designのパイオニアです。

• Adaptive Layouts – Pocket
• Immersive Imagery – B&H Photo Video Pro Audio
• Elegant Typography – NYTimes – Latest News
• Seamless Browsing – Pocket Casts
• Crafted Simplicity – Weather Timeline – Forecast
• Delightful Animation – Tumblr

私たちMaterial Designチーム全体は非常にみなさんに感謝いたしております。なぜなら、システムそれ自体はただのアイデアに過ぎませんが、みなさんの日々の仕事のがんばり、貢献、革新のおかげで、Material Designがリアルなものとして、実際に手に触れるものとなったのです。本当にありがとうございます。

そういうわけで、Material Designの最初の一年は素晴らしくわくわくするような成功した一年でした。私たちは引き続き、みなさんとコミュニケーションしていきたいと考えています。何が機能して、何が機能しないのか、などみなさんから学びたい。次の一年はさらに素晴らしい一年となることを楽しみにしていますし、また来年ここGoogle I/OでMaterial Designの2歳の誕生日を祝うために集まりましょう。今日は本当にありがとうございました。

この記事は2015年5月28日に行われたGoogle I/O 2015「Material Now」セッションの翻訳です。「Material Now」では、Material Designがリリースされてからの1年間の状況や反響、事例等を取り上げています。本翻訳の前編は、Material Designの普及状況とアップデート内容について記述します。

• Material Now – Google I/O 2015

こんにちは、みなさん。私の名前はMatias Duarteです。今日はMaterial Nowについてお話したいと思います。まずは、ハッピーバースデー！Materialですね。記念すべきマイルストーンです。昨年のI/Oで私たちはMaterial Designを紹介しました。私たちは異なるプラットフォーム、異なるスクリーンサイズを超えたデザインシステムを作りたかったのです。私たちはモダンなグラフィックデザインと現実的なユーティリティ、ユーザービリティを組み合わせたかったのです。そして、後づけではないモーションデザインを重視したシステムを作りたかったのです。

信じられないかもしれませんが、私たちがMaterial Designを作っていた時、どのようにそれが受け入れられるのか、少しナーバスでした。しかし、ふたを開けてみれば、私たちはそれを気に入っていましたし、こんな素敵なクオートも見かけました。

Material Designは単なるタブレット・スマートフォン用のデザインではない。それはプロダクトが何百万というユーザーにどうコミュニケーションするのかシステマティックなアプローチである。
— Gizmodo

また開発者のみなさんも、良い反応を示してくれました。

Googleはデザインゲームを次に進めた。それは絶対的な美的感覚に頼る変わりに、個々のデザイナーをより自由にする原則を定義したのだ。
— Sacha Greif Creator of Folyo, Telescope, and Sidebar

もちろん、デザイナーのみなさんもMaterial Designが何を解決しようとしているのか、そのシステムが、すべてのインタラクティブなプラットフォーム上でデザインする上で助けになると、とても理解しているよう思えます。

Material Designは、Web全体のビジュアルを根本的に変えるポテンシャルを持っている。
— Armin Vit Under Consideration/Brand New

こういった感想を聞けて、私たちはホッとしました。しかし、本当にみなさんが聞きたいのは、どのくらいMaterialが役に立っているのか？ということでしょう。私たちGoogleは数字が好きですので、ここでMaterial Designに関する数字を見ていきましょう。

Material Designに関するデータ

まずは、私たちのMaterial Designガイドラインを見ていきましょう。私たちはこれを親しみを込めて、『スペック』と呼んでいます。この一年足らずで、250万ユニークビジターがこのスペックに訪れました。これはとても良い結果だと私は考えます。もし、あなたがYoutuberであったり猫動画をアップロードしている人であれば、これはそんなに良い結果とは言えないでしょう。しかし、これはデザインガイドラインですよ？すごくありませんか？

もっと重要なことに、このうち60%以上のユーザーが再訪問しているのです。これはMaterial Designガイドライン決して一度チラ見すれば理解できるものではないですし、何度も何度も見るような役立つリファレンスだということでしょう。特に、カラー、タイポグラフィとアイコン、そしてもちろん、FAB（Floating Action Button）などのコンポーネントのセクションが特に閲覧されているようです。

デザイナーだけでなく、開発者のみなさんもMaterialを使っています。Polymerに目を向ければ、MaterialコンポーネントをWebに実装するために必要なシステム、Paper Elementの仕様書が250万回も閲覧されています。もっと重要なことは、10万ものWebプロジェクトで、このフレームワークが使われていることです。

また、みなさんが気にかけているのはAndroid上ではどのくらいなのか？でしょう。Play Store上では25万近くのMaterial Designを実装したアプリを確認することができます。たぶん、これはそんなに大きな数字ではないでしょう。なぜなら何十億というAndroidデバイスがあるというのに、もしくはPlay Storeができてからの7年間どれだけのアプリがリリースされたのだろうか？と考えるからです。

違う観点からこの数字を見れば、2014年10月にLollipop(Android 5.0)がリリースされてから、Play Storeで出されたアプリの40％はMaterial Designを採用しています。これは良い結果だと考えています。新しくできたアプリの3つに1つはMaterialの恩恵を受けているからです。

これらは始まりにしかすぎませんが、私たちはもっとこの数字を大きくしたいと考えています。デザインに終わりはありません。そこでこれらの数字をどのように大きくするのか、またいかに早く普及させるのか、そしてMaterialをみなさんにいかに簡単に使ってもらうか説明したいと思います。

私たちは、より良く、より包括的にするためにMaterial Designガイドラインのアップデートを公開以来、続けています。実際、私たちはこれまで2回アップデートを既にしています。

最初は2014年11月、Organizing Objects、Navigation Drawers、スクローリングテクニック、Swipe to Reflesh、プロダクトアイコンのセクションを追加しました。

2015年4月のアップデートでは、Data Tables、App StructureなどのMaterial Designのガイドラインを多く追記しました。

2015年5月のアップデート

そして今日、2015年5月はガイドライン公開後もっとも大きなアップデートとなります。非常に多くのものを追加しました。その中にはデザインパターンのリニューアルも含まれています。

Floating Action Button

そう、みなさんも好きなFABです。スペック公開時は非常に限定したガイドラインになっており、どのようにフローティングアクションボタンが振る舞うのか、もっと違うトランスフォームがあるのではないか、もっと柔軟性があっては良いのではないかとみなさん考えたことでしょう。私たちもそう思います。よって今日はこのFABパターンを拡張したいと思います。これによりもっと柔軟にFABをみなさんのアプリに実装することができることでしょう。

Material Icon Library

また、今日はスペックにまったく新しいリソース、Material Iconライブラリを追加しました。このサイトには750以上ものみなさんのプロジェクトで簡単に使えるアイコンあります。しかも、ワンクリックでプロジェクトに導入できるようにしてあります。アプリ開発者のみなさんはすべての必要な解像度のアイコンをここでダウンロードできます。さらにこれらのアイコンをWebフォントとしてもリリースしてますので、リガチャ（合字）として利用できるので、みなさんはアイコンの名前をタイプするだけで実装できます。とってもクールですよね？

Adaptive Layout

• Adaptive UI – Layout – Google design guidelines

Material Designについての要望で一番大きなものと１つとしてアダプティブレイアウトがあります。このため、今回はスケーラブルで一貫性のあるグリッド、レイアウト間でのブレークポイント、振る舞いなど関する詳細なセクションを新たに追加しました。この新しいパターンはきっとどのコンテキストにもなじむことでしょう。

Device Metrics

• Device Metrics – Google Design

加えて、アダプティブデザインのためにデバイスのサイズレファレンスを新たにサイトに追加しました。これは、ウェアラブルだろうと、携帯端末であろうとも、タブレット・ラップトップであろうとも任意のサイズのデバイス上でデザインするときに役立つでしょう。そしてキーとなる解像度や密度を発見できるでしょう。もっと重要なことは、これによってどのデバイス・向きで、どのアダプティブテンプレート・パターンを使うべきか理解できるようになったことでしょう。この2つのリソースがみなさんの役に立つことを祈っています。

もちろん、ほかにもたくさんのアップデートがあります。意味のあるモーションについて解説したセクション、ローンチスクリーン、エンプティステートなどの追加と、多くのアップデートがなされました。

そして、現在Material Designはほかのプロダクト、TV、Auto、VRのCardboardに対しても適用できるよう、ガイドラインを追加しました。

今回の大型アップデートによって、みなさんのデザインのお役に立てること祈っていますし、私たちに引き続きフィードバックをください。そうすれば、私たちはアップデートを続けることができます。

私たちはガイドライン・ツール、リファレンスの枠を超えたかったのです。つまり、それらはいくぶんか静的で、ドライ、権威的なのです。そこで、私たちはデザイナーがダイレクトに繋がれる場所にするために、Google Designを新しくリニューアルしました。

つまり、それをデザイナーと開発者のコミュニティにしたかったのです。どうしてデザインをするのか、どのようにデザインするのかといった情報をシェアする場所として考えています。実用的な記事やビデオを配信することで、デザイナー・開発者が抱えている関心事、例えば、どのようにブランド・アイデンティティを損なわずMaterial Designを実装するのかなどを解決できると思っています。

また、Android、iOS、Webと異なるプラットフォーム間でデザインを簡単にするTipsなどの記事などもあります。私たちはみなさんにどこでも快適にMaterialを使ってほしいと思っています。チュートリアルもちろん、Material Designの裏側のシーンを収めたビデオなどもありますので、どうぞチェックしてみてください。

Polymer

• Welcome – Polymer

ここまで紹介してきた技術はデザイナーにとって、Materialを表現する上で便利なものですが、今日は開発者のカンファレンスですからMaterialを実装する上で役立つものを紹介したいと思います。

もちろん、最初はPolymerです。今日Polymer 1.0がアナウンスされました。これはパフォーマンス的にも満足が得られるようになったり、安定したり、APIが固定されたことを意味します。PolymerはモダンなWebプラットフォームとモバイルプラットフォームのために必要なものです。もしPolymerを使えば、簡単にスケール可能なアプリケーションを作ることができるでしょう。Polymer開発チームはパフォーマンス改善のために、一行毎にPolymerのコードを書き直したと私に言いました。とっても速くなりましたよ。つまり、プロダクション用途に使ってもらっても問題ないということであり、高品質のアプリのようなものをWeb上でも作成可能ということです。

さらに、Polymer Starter kitとCatalogはMaterial Designのアプリ作成にとりかかる前に、すべてのPaper Elementsを実際に使って試してみることができます。デモやサンプルも含んでいて、とっても見やすいサイトになっていますし、コマンドラインを使わなくてもクールなショッピングカートで各エレメンツをダウンロードできます。

Android Design Library

もちろん、MaterialはAndroid 5.0、Mでも使うことができますが、みなさんは2つの気にかかっていることでしょう。もっと簡単に使いやすいコンポーネントがないのか、そして後方互換性も広く対応してほしいと。

Support Libraryは常に後方互換性と対峙しています。これはプラグ・アンド・プレイシステムなので、古いAndroidバージョンで新しい機能を動かすことができます。昨年、Materialをリリースしたとき、appcompat libraryを提供しました。これは基本的なレイアウトとスタイリングをサポートするライブラリです。

今回紹介する新しいライブラリはAndroid Design Libraryです。このライブラリはMaterial Designのコアエレメントを使うことができ、隠蔽化された実装を簡単に導入することもできます。例えば、以前シンプルなFABを実装するにも5,6つのXMLファイルが必要でしたが、今日からは1つのフローティングアクションボタンの要素を追加するだけです。新しいライブラリは、他にも簡単に実装できるシャドウ付きのカード、複雑なサイドナビゲーションも、Navigation Drawer Viewにドロップするだけで、スペック通りの動作をするコンポーネントを実装できます。

同様にMaterialタブもまた、アプリに簡単に実装できます。私のお気に入りであり、複雑なコンポーネントで知られるツールバースクローリングも１つのコンポーネントにピンチなどの動作を設定するだけで実装できます。パレットは去年紹介しましたが、今日はそれが6倍速くなりました。詳細について知りたければデベロッパーサイトを確認して下さい。

先ほど、私はSupport libraryは完全なMaterialコンポーネントを提供していない、つまり簡単にデプロイできない、より多くのAndroidデバイスに提供できていないと申し上げました。現在、LoliipopはAndroidデバイスの10%程度しかありませんが、今回紹介した新しいSupport libraryを使用すれば、Android2.1以上のデバイスにMaterialを提供することができます。最高じゃありませんか？

（後編に続きます）

この記事は、連載「基礎からわかるWeb Components徹底解説～仕様から実装まで理解する〜」の第4回目になります。今回は、前回紹介したGoogleが開発するWeb Componentsのライブラリ、Polymerを元に作られたコンポーネント群「Core Elements」と「Paper Elements」について紹介します。

Core ElementsとPaper Elements

Core ElementsとPaper ElementsはGoogleが開発するWeb Components群です。Core Elementsは、Webを構成する要素をWeb Componentsとして切り出し抽象化したものであり、Paper ElementsはデザインコンセプトMaterial DesignをWebで実現します。

いずれもPolymerをベースに作られている他、各コンポーネントが異なるコンポーネントに依存したつくりになっているものもあります。アーカイブファイルの配布もされていますが、Bowerであればインストール時に依存関係は自動で解決されるため、意識する必要はありません。

インストールして実際に利用する例

Core Elementsのひとつであるcore-imageというコンポーネントを、Bowerを使ってインストールし、実際に使う例を以下に示します。core-imageは通常のimgタグにはない、画像のリサイズやプリロードといった機能を備えたWeb Componentsです。

まず、コマンドラインからBowerを使ってcore-imageをインストールします。bower.jsonに依存情報を記録する場合は--saveオプションを付けます。

$ bower install Polymer/core-image

実行後は、デフォルトであればbower_componentsフォルダ配下にcore-imageと、core-imageが依存するサブリソースがダウンロードされています。core-imageが依存するのはPolymer Coreのみですが、Polymer Coreが依存するリソースがさらに存在するので、それらもダウンロードされています。

ダウンロードしたcore-image.htmlをHTML内でロードすることで、core-image要素を使えるようになります。

<html>
  <head>
    <link rel="import" href="bower_components/core-image/core-image.html">
  </head>
  <body>
    <core-image src="http://lorempixel.com/400/400"></core-image>
  </body>
</html>

サンプルでは、ダウンロードされたPolymer Coreを参照していませんが、ロードしているcore-image.htmlの中でPolymer Coreのインポートが行われているため、改めてPolymer Coreを読み込む必要はありません。

Polymerチームは、依存管理にBowerを使うことを推奨しています。自身でWeb Componentsを作成し、公開する場合は依存するリソースをbower.jsonに書き、コンポーネント内のサブリソースへの参照も、Bowerが使われることを意識するとよいでしょう。

基本的な要素・機能を提供するCore Elements

Core Elementsは、ユーザーインターフェースの基礎です。よく使われるけどブラウザネイティブには提供されていない機能や、Polymerの強力な機能との橋渡しとなるコンポーネントを提供します。後述のPaper Elementsの土台になっているように、拡張前提のコンポーネントも多くあります。

• Polymer core elements Polymer公式サイトのCore Elementsのページ
• Core Elements Sampler Core Elementsのサンプル集

UI関連のCore Elements

UIに関するCore Elementsとしては、既存のHTMLでは提供されていないドロップダウンやオーバーレイといった汎用的なUIや、既存のUIの機能を補完しているコンポーネントが用意されています。

例えば、core-dropdown-menuを使ったドロップダウンが挙げられます。ドロップダウンのUIは今や当たり前のように見かけますが、要件が出る度にイチから実装していたケースも多いのではないでしょうか。

以下は、core-dropdown-menuとcore-menu及びcore-itemを組み合わせて実装するドロップダウンメニューの例（公式サイトから引用）です。

<core-dropdown-menu label="Choose a pastry">
  <core-dropdown class="dropdown">
    <core-selector>
      <core-item label="Croissant"></core-item>
      <core-item label="Donut"></core-item>
      <core-item label="Financier"></core-item>
      <core-item label="Madeleine"></core-item>
    </core-selector>
  </core-dropdown>
</core-dropdown-menu>

他にも以下のようなインターフェースが切り出されています。

• core-collapse 折りたたみコンテンツ
• core-drag-drop ドラッグアンドドロップ
• core-menu メニューアイテム
• core-overlay 他のコンテンツに覆いかぶさるオーバーレイ
• core-tooltip ホバー時に表示されるツールチップ

機能を補完している例としては、core-inputがあります。

core-inputはis="core-input"のように、ネイティブHTMLの拡張として利用します。拡張されたinput要素は、aria-labelやaria-disabledといったARIAで定義されるアクセシビリティを自動で保管したり、フォームとしてサブミットされた時の値をcommittedValueとして取得できるようになります。

他には前述のcore-imageも、後者に該当すると言えるでしょう。

アニメーション関連のCore Elements

Core ElementsにはUIパーツだけでなく、アニメーションを抽象化したコンポーネント群があります。その中核を成すのがcore-animationです。

core-animationでアニメーションを定義し、core-animation-keyframeとcore-animation-propでアニメーションの具体的な挙動を指定します。以下はcore-animation要素でアニメーションを定義する例（公式サイトから引用）です。

<core-animation id="fadeout" duration="500">
  <core-animation-keyframe>
    <core-animation-prop name="opacity" value="1"></core-animation-prop>
  </core-animation-keyframe>
  <core-animation-keyframe>
    <core-animation-prop name="opacity" value="0"></core-animation-prop>
  </core-animation-keyframe>
</core-animation>

<div id="el">Fade me out</div>

<script>
  var animation = document.getElementById('fadeout');
  animation.target = document.getElementById('el');
  animation.play();
</script>

ここではキーフレーム毎に透過度を変化させ、フェードアウトのアニメーションを宣言しています。そして、アニメーションさせたい要素を、core-animationのtarget属性に指定することでフェードアウトさせてます。これはJavaScriptのコードで命令的に行っています。

複数のアニメーションを組み合わせて使いたい場合は、core-animation-groupというグルーピングを担うコンポーネントもあります。

ブラウザAPI関連のCore Elements

提供しているのは、汎用的なアイコンやユーザーインターフェースといったビジュアルに関わる部分に限りません。Core ElementsではAjaxやキーボードアクションのハンドリング等、見た目には直接関わらない機能もWeb Componentsとして抽象化しています。

• core-a11y-keys キー押下のハンドリング
• core-ajax Ajaxの定義及びハンドリング
• core-localstorage ローカルストレージへのアクセス

今まではJavaScriptからそれぞれのAPIを実行し制御していた機能ですが、これらによって、他の要素との連携がPolymerが提供するデータバインディング機能などで容易になる他、HTMLに記述することで宣言的に挙動を定義していくことが可能になります。

以下はデータバインディングを利用してinput要素に入力した値をローカルストレージに保存する例です。

<input type="text" value="{{value}}">
<core-localstorage name="localstorage-key" value="{{value}}"></core-localstorage>

core-localstorageのvalue属性の値がローカルストレージに保存されるので、inputのvalueとバインドすることで入力値がそのまま保存されるようになります。今まではイチからJavaScriptで制御していたことを考えれば、よりわかりやすく、そしてグッと楽になっています。

Material Designを実現するPaper Elements

Paper ElementsはMaterial DesignをWebで実現するWeb Components群です。Polymer Coreへ依存している他、Core Elementsをベースに構成されているコンポーネントが多くを占めています。

Material Designについては、話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そうという記事を一読するとよいでしょう。

• Polymer paper elements Polymer公式サイトのPaper Elementsのページ
• Paper Elements Sampler Paper Elementsのサンプル集

UI関連のPaper Elements

UI関連のPaper Elementsとしては、Core ElementsのUIコンポーネントにMaterial Designを取り入れた要素が多くあります。これは要素の一覧を見比べてもらうとわかるかと思います。

以下はpaper-dropdown-menuの利用例です。

<paper-dropdown-menu label="Your favorite pastry">
  <paper-dropdown class="dropdown">
    <core-menu class="menu">
      <paper-item>Croissant</paper-item>
      <paper-item>Donut</paper-item>
      <paper-item>Financier</paper-item>
      <paper-item>Madeleine</paper-item>
    </core-menu>
  </paper-dropdown>
</paper-dropdown-menu>

このように、利用方法もほぼ同じです。Paper Elementsとして独自に拡張しているのは、影やエフェクトのdurationなどのMaterial Designの表現に関わる部分だけとも捉えられます。

Material Designを体現するエフェクト

影の動きや波紋のようなインタラクションや、奥行きを表現するZ座標のルールといった、特徴的なMaterial Designのコンセプトを担うのは、以下のコンポーネントです。

• paper-ripple クリックした位置から波紋が広がるエフェクト
• paper-spinner 円状のスピナー
• paper-shadow 紙で持ち上げられ影がついたようなエフェクト

特にpaper-rippleとpaper-shadowはMaterial Designのコンセプトの中核を担っており、Paper Elementsのほとんどが、この2つのいずれかに（あるいは両方に）依存したコンポーネントになっています。

paper-shadowを利用する例

実際にpaper-shadowを取り入れてみます。以下はpaper-shadowを使わずにレイアウトしています。

paper-shadowを使うには、冒頭で解説したようにBowerを使ってインストールして、影を付けたい要素をpaper-shadowタグで囲むだけです。

<paper-shadow z="2">
  <core-selector id="theme-selector" selected="default">
    <paper-item name="arta">Arta</paper-item>
    <paper-item name="ascetic">Ascetic</paper-item>
    <paper-item name="color-brewer">Color Brewer</paper-item>
    <paper-item name="docco">Docco</paper-item>
    ...
  </core-selector>
</paper-shadow>

このコードの場合はcore-selectorを囲っていますが、Core Elementsである必要はありません。divでもsectionでも大丈夫です。適用すると以下のようになります。

サンプルページでは、簡単ではありますが他のPaper Elementsも使っています。Paper Elementsを取り入れる例としては、PolymerでMaterial Designなチャットアプリを作ろうという記事に、より実践的なチュートリアルがあります。

Polymer Designer

Core ElementsやPaper Elementsを試す手段としてPolymer Designerがあります。

Polymer Designerではブラウザ上で、Core ElementsやPaper Elementsをドラッグアンドドロップで配置し、データバインディング等もGUI上で行いコンポーネントを作成することが可能なツールです。Web上でお手軽に試したい場合には、こちらを使うのもよいでしょう。

使い方についてはWeb Componentsが変えるWeb開発の未来という記事で触れています。

おわりに

Core ElementsとPaper Elementsの概要・使い方について紹介しました。Web Componentsを使ってWebページの基礎を組み立てるならCore Elementsは便利ですし、Material DesignをWebに取り入れるには、Paper Elementsが既にデファクトスタンダードと言えるかもしれません。

使う分にはもちろん便利なCore ElementsとPaper Elementsですが、興味があればGitHubで公開されているソースコードを見てみることをオススメします。どういった設計でどのように抽象化しているかを見るのも、今後Web Componentsを自分で作っていく上できっと参考になるはずです。

年間読まれた記事ランキングTOP20！

＜1位＞
Googleはなぜモバイルに力を入れるのか？これからのWebパフォーマンスで注力すべきポイント
── 川田寛

＜2位＞
モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」
── Tomomi Imura

＜3位＞
Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」
── 中島 直博

＜4位＞
Web Componentsが変えるWeb開発の未来
── 泉水翔吾

＜5位＞
HTML5とかモバイルとかJSフレームワークとか、ぶっちゃけどうなの座談会
── 村地彰

＜6位＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
── 小山田 晃浩

＜7位＞
いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念会
── 佐川 夫美雄

＜8位＞
HTML5で実現できる！環境光に合わせたレスポンシブなUI
── Tomomi Imura

＜9位＞
いま、UXを語るのはなぜ悩ましいのか？─長谷川恭久ロングインタビュー
── 白石 俊平

＜10位＞
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方
── 酒巻瑞穂

＜11位＞
Web技術者も知るべきデモ・プレゼンの極意（西脇資哲氏）「Microsoft de:code」イベントレポート
── 岩瀬 義昌

＜12位＞
HTML5が変える、エンタープライズITの可能性とこれから
── 川田寛

＜13位＞
【速報】Google I/O 2014 キーノート ライブレポート
── 岩瀬 義昌

＜14位＞
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
── 石本 光司

＜15位＞
キミはionicを知っているか？AngularJS+PhoneGap+美麗コンポーネント群！
── 金井 健一

＜16位＞
話題のMaterial DesignをWebで実現！Polymerで「Paper Elements」を試そう
── 佐藤歩

＜17位＞
HTML5ハイブリッドアプリ開発、最新動向はやわかり！
── 久保田 光則

＜18位＞
ミツエーリンクスのCTOに「UXとWebアクセシビリティ」について聞いてきた─木達一仁ロングインタビュー
── 白石 俊平

＜19位＞
Web Componentsを構成する4つの仕様 ー Web Components基礎編
── 泉水翔吾

＜20位＞
NUCで手のひらサイズの格安WebSocketサーバーを立ててみた(ハード組立編)
── 高橋 登史朗

モバイルWeb、WebComponets、AngularJS…

モバイルWebというキーワードは今年注目を集めましたね。関連記事がいくつかランクインしています。また、WebComponets、AngularJSという今年話題になった技術の記事もランクインしています。特集では、GoogleI/O特集やExperts Opinions「UX」特集が注目を集めました。UX特集は年明けにも記事公開を予定していますので、お楽しみに！

HTML5 Experts.jpは2014年も多くの方々にご愛読いただきまして、執筆陣・編集部共々感謝しています。ありがとうございました。来年も引き続き宜しくお願いいたします。

この記事では2014年7月にGoogle I/Oで発表されたMaterial Designについて、どのようなコンセプトなのか、これまでのデザインガイドラインと何が違うのか、ポイントをおさえて紹介します。記事の後半では、Material DesignをWebで実現するためのPolymerとPaper Elementsに関しても説明します。

Material Designという視覚的言語

Material Designの目的は、ひとつの視覚的な言語（Visual Language）によって、あらゆるプラットフォーム、あらゆるスクリーンサイズのデバイスで、一貫性のある体験を提供することです。

それを実現するため、伝統的なグラフィックデザインとテクノロジーによる可能性を引き出して開発に取り組み、ガイドラインは生きたドキュメントとして更新され続けるとしています。

フラットな中に、自然な影や動きを取り入れた

Material Designは、フラットデザインを取り入れた他のデザインガイドラインと同様に、伝統的なグラフィックデザイン、たとえばタイポグラフィーやレイアウトの原則を取り込んでいます。文字やグラフィックを中心に構成された現在のアプリやWebに、はるか昔から積み重ねられてきたノウハウを融和させることで、優れたビジュアルが得られます。

しかし、単なるビジュアルのルールだけでは、スクリーンサイズの多様性の中で、UIや体験の一貫性を保つのはどこかで限界があるのかもしれません。そこでMaterial Designは、「Material is the Metaphor」というコンセプトを取り込んでいます。

http://googledevelopers.blogspot.jp/2014/06/this-is-material-design.html

規則性のある影や、連続性のあるモーションなどを、現実世界のメタファとして細部に取り込むことで、深いレベルで一貫性をもった世界を構築しようとしています。これらの表現に、現実の物質世界と同じ物理的性質をもたせることで、認知的な負担を少なくし、より自然にアフォーダンスを受け取れるようにしています。

例えば、フラットな面に影の表現を加えることで、オブジェクトの重なりやヒエラルキーが表現できます。強く影をつけた大きなボタンは、ユーザーの目にひときわ浮き立つプライマリなアクションとして認識されます。

このような影について、Android Lではリアルタイムソフトシャドウとして、現実世界のメタファを通して、より自然な振る舞いになるようエンジニアリングが発揮されています。モーションについても、直線的な動きではなく、現実世界の慣性に従った動きになるようにガイドラインで定められています。

Material Design Paper

Material Designのコンセプトについて詳しくは、PDFで9つの特徴にまとまっています。Google I/Oのデザインブースでは、このPDFの図画が、実際の紙にインクで印刷されたものが頒布されていました。

「具体的な」デザインガイドライン

Material Designのガイドラインとして、具体的にどのようなデザインを実現すれば良いかのドキュメントは、プレビュー版としてすでに公開されています。

以前のAndroid Designにおいても詳細な項目が用意されていましたが、今回のガイドラインでは、そこにアニメーションや陰影の深度に関する項目をはじめとして、多岐にわたり詳細な情報が掲載されています。特徴的なのは、文字のレイアウト、アニメーション、陰影の表現、画像のフェード効果など細部に至るまで、具体的な数値とサンプルをもって表現していることです。

ガイドラインの一例

さらにAndroidの開発ライブラリはもちろん、後半で紹介するPaper Elementsが、ガイドラインを体現した実装として存在しています。具体的なガイドラインと、それを反映した実装の2つが揃うことによって、Material Designのガイドラインは、他のデザインガイドラインよりも確かで、強固なものになっています。

Google I/O でのセッション

• Google I/O 2014 – Material design principles – YouTube
• Google I/O 2014 – Material design: Structure and components – YouTube
• Google I/O 2014 – Material design: Visual style and imagery – YouTube
• Google I/O 2014 – Material design: Motion – YouTube

キーノートの中で紹介されたMaterial Designですが、その後のセッションでもテーマごとに、詳細な内容の紹介がありました。より深く理解したい方は、これらの動画もチェックしてみると面白い話が聞けるはずです。（YouTubeでは英語字幕が表示されるので、聞きやすいです）

Webで実現するためのPolymerとPaper Elements

ここまでMaterial Designについて紹介しましたが、いよいよこのデザイン原則をWebの世界に取り込むため、PolymerとPaper Elementsについて説明します。

はじめにPolymerとは、Web Componentsが変えるWeb開発の未来で説明されたWeb Componentsをより強力に、より柔軟に使えるようにGoogleで開発されているラッパーライブラリです。Web Componentsが注目を集め始めたのと同時に、Polymerの話題も多く目にするようになっています。

Polymerには、そのラッパーとしての機能を活かして作成された、汎用コンポーネント群があります。それがCore ElementsとPaper Elementsです。このうち、Paper ElementsがMaterial DesignをWebで表現するための鍵になりますが、実際に開発するにはPolymer本体に、これらCore ElementsとPaper Elementsを組み合わせて利用します。

ここでは、Rob DodsonによるUnlock the next era of UI development with Polymerというセッション（SlideShare）の内容を参考に紹介していきます。

レイアウトを構築する

はじめにCore Elementsを使ったアプリケーションのレイアウトについて紹介します。Core Elementsには、一般的なナビゲーションパターンのレイアウトを、手軽に制御できるコンポーネントが用意されています。

たとえばcore-header-panelを利用すると、よくある固定ヘッダーとコンテンツ部分の管理ができます。これまで、普通にHTMLとCSSでレイアウトして、インナースクロール用のJavaScriptライブラリを組み込んで実現していたUIが、ひとつのコンポーネントをHTML内に取り込むだけで作れるようになります。

core-drawer-panel (参考スライドP27から引用)

上図のようなドロワーメニューを内包したレスポンシブなレイアウトも、core-drawer-panelを利用すると、drawerとmainという属性をそれぞれ持った要素を、子要素として追加すれば容易に制御できます。

もうひとつレイアウトするための強力な機能が存在します。それがLayout attributesです。これはPolymer本体に備えられた機能です。

layout属性 (参考スライドP35から引用)

このように、layout属性を付与して、要素を並べる方向（vertical, horizontal）や、子要素にflexなどの指定を行うことで、CSSを使わずにHTML側で基本的なレイアウトを制御できます。ここでは一例を紹介しましたが、詳細はPolymerのドキュメントを確認してみてください。

Material Designを使う

いよいよPaper Elementsが登場します。Core Elementsが基本的な機能と素朴な見た目しか持たない汎用コンポーネント群であるのに対して、Paper ElementsはMaterial DesignのガイドラインにおけるUIコンポーネントを、ビジュアルとインタラクションの両面において実装しています。

たとえばpaper-tabsは、次の画像のようなマークアップでMaterial Designで表現されたタブのUIを組み込むことができます。

paper-tabs (参考スライドP44から引用)

このようなPaper ElementsのUIコンポーネントはPaper Elements Samplerで動作デモを確認できます。

Material Designは影や波紋のようなエフェクトといったインタラクションも重要です。Paper Elementsの中にはそのような、特定のUIを表現するものではなく、エフェクトを適用するための要素も用意されています。

paper-shadow (参考スライドP47から引用)

paper-shadowは親要素に、z属性で指定されたコンテンツの深度に応じて、適切な影の表現をつけられます。Material Designでは、影を表現するために、深さを表現するKey Shadowと、オブジェクトの形態を示すAmbient Shadowの2つが使われています。このpaper-shadowもCSSのbox-shadowで2種類の影をかさねて表現しています。

前半で説明したとおり、Material Designにおける影は、ただの装飾ではなく、オブジェクトの階層やユーザーのフォーカスを得るための、意図的な表現です。多くのオブジェクトに、このようなエフェクトを積極的に使っていくことになります。

paper-ripple (参考スライドP46から引用)

paper-rippleは親要素に、clickやtouchしたときのエフェクトを適用できます。デモを見ると、それがどのような効果か分かりやすいはずです。このエフェクトは、親の要素と同じサイズのcanvasを展開して、その上で波紋のようなエフェクトを表現しています。

スタイルを適用する

Polymerの要素は、Shadow DOMが使われているため、従来どおりのCSSセレクタでは、内側の要素にスタイルを適用できません。ここではCSS Scoping Moduleとして定義されている、::shadowと/deep/セレクタを紹介します。

::shadowは、疑似要素としてShadow DOMのルートにアクセスできます。次の例では、Polymerで作られたx-fooが持つShadow DOM内のspanにアクセスして、color: redを指定しています。

<style>
x-foo::shadow span {
  color: red;
}
</style>

<polymer-element name="x-foo" noscript>
  <template>
    <span>Hi!</span> <!-- color: red -->
  </template>
</polymer-element>

<x-foo></x-foo>

/deep/は、::shadowと同じくShadow DOM内へのアクセスを可能にしますが、より強力にネストしたShadow DOMの奥深くまで適用できます。次の例では、x-helloの中にあるすべてのspanにcolor:blueを適用しています。::shadowの場合だと、x-worldの中のspanにはネストしたShadow DOMの境界を越えられず適用されません。

<style>
x-hello /deep/ span {
  color: blue;
}
</style>

<polymer-element name="x-hello" noscript>
  <template>
    <span>Hello</span> <!-- color: blue -->
    <x-world></x-world>
  </template>
</polymer-element>

<polymer-element name="x-world" noscript>
  <template>
    <span>World</span>  <!-- color:blue -->
  </template>
</polymer-element>

<x-hello></x-hello>

一方、Core ElementsにはPolymerの要素間でスタイルを共有するために、core-styleというコンポーネントが用意されています。

core-style (参考スライドP58から引用)

core-styleを使ってid属性が指定されたStyle Producerで定義されたスタイルを、ref属性を指定してStyle Consumerから参照することで、コンポーネントをまたいで特定のスタイルを共有できます。

トランジションを利用する

core-animated-pagesを利用すると、Single Page Applicationのように、ひとつのHTMLで複数のコンテンツを切り替えて表示するときに、トランジションを適用できます。core-animated-pagesも、対象の要素に属性を付与するだけで、トランジション効果を得られます。

<polymer-element name="animated-sample" noscript>
  <template>
    <style>
      section > div { color:white; height: 500px; }
    </style>

    <!-- コンテンツ切り替え用のタブ -->
    <paper-tabs id="tabs" selected="0">
      <paper-tab>ONE</paper-tab>
      <paper-tab>TWO</paper-tab>
      <paper-tab>THREE</paper-tab>
    </paper-tabs>

    <!-- コンテンツとトランジション付与 -->
    <core-animated-pages
      selected="{{$.tabs.selected}}"
      transitions="cross-fade-all">
      <section>
        <div style="background:red">
          <h1>ONE</h1>
        </div>
      </section>
      <section>
        <div style="background:blue">
          <h1>TWO</h1>
        </div>
      </section>
      <section>
        <div style="background:orange">
          <h1>THREE</h1>
        </div>
      </section>
    </core-animated-pages>
  </template>
</polymer-element>

<animated-sample></animated-sample>

core-aniamted-pagesのtransitions属性で、使いたいトランジションの種類を宣言すると、中のコンテンツが切り替わるときにトランジションが適用されます。

Paper Elementsのサンプルアプリ

Paper Elementsを駆使することで、Material DesignがWebでどのように表現されるのかは、Topekaというサンプルのクイズアプリが用意されています。スマートフォンにも対応しているので、モバイルデバイスでどの程度動いてくれるのかも、自分でさわって確かめてみると面白いはずです。

http://www.polymer-project.org/apps/topeka/

さいごに

今回はMaterial Designとそれを実現するPolymerとPaper Elementsについて、Google I/O 2014での情報をもとにご紹介しました。Material DesignもPolymerも、Preview版というステータスであり、まだ始まったばかりのプロジェクトです。これらが、今後どのように普及し、Webの世界にも影響を与えていくのか楽しみに思います。

先日開催された第49回HTML5とか勉強会でも「Material Design with Polymer」と題して、同じようなテーマについてご紹介しました。YouTubeとSpeakerDeckでそれぞれ当日の録画とスライドが公開されているので、こちらも合わせてご覧いただけると理解が深まるはずです。Material Designについて詳しく説明していたり、Paper Elementsを利用したオリジナルのデモを行っていたりもしますので、ぜひご覧ください。