Webデザイントレンド定点観測 マテリアルデザインについて学ぶ
東京都渋谷区でフリーランスWebデザイナーとして働く、黒野明子（くろのあきこ）と申します。
ずっと「当連載で取り上げたい」と思いながら、なかなか手を出せなかったテーマが、Googleが昨年7月に発表した「マテリアルデザイン」です。
かなり「いまさら」感はありますが、「2015年のWebデザイントレンド」関連記事には必ずと言っていいほど取り上げられるこのテーマ、やはり当連載でも触れておきたいと思います。
「マテリアルデザイン」は、iOSやWindows 8などで採用されている「フラットデザイン」と、デザイン要素のシンプルさでは共通する部分があるものの、最大の違いは「光源、影、奥行き」の概念を持つことでしょう。
しばしば「どこを押せば良いか分からない」と言う声も聞かれるフラットデザインとは違い、マテリアルデザインでは「キーライト」と「アンビエントライト」という2種類の仮想の光源がもたらす影を重視し、直感的に分かりやすいインタラクションを提供します。
画面の中に奥行き（3D空間のZ軸）の概念を設定し、影を使ってオブジェクト同士の関係性を表します。しかしその影は、かつてトレンドだった「スキュアモーフィズム」のリアルな質感よりも控えめです。基本の状態やフロートした状態など、コンテキストによって、どのくらいの奥行きの影を使うかが、ビジュアル言語として規定されています。
この辺りの考え方は、本家本元であるGoogleのガイドラインにまとめられていますので、英語ではありますが、ぜひ一読されることをお勧めします。
平易な英語ですし、かつ図解やアニメーションでの説明も豊富で、なによりこのガイドライン自体が、マテリアルデザインの（かつレスポンシブな）サンプルとなっています。また、アニメーションを利用する際にも、現実の物理法則を裏切らないようなイージングの方法などが詳しく解説されています。
Introduction – Material design – Google design guidelines
Inbox
さて、当連載でも数回取り上げたことのあるGmailの新しいインターフェイス「Inbox」の紹介サイトも、マテリアルデザインの良いお手本です。
上部のナビゲーションと、それ以下のコンテンツの境目には最小限の影がついており、メニューバーの下にコンテンツが潜り込んでいく奥行き感が表現されています。ボタンにも影がついていることで、押すべきところが明確に分かります。
加えてこのサイトは、下に向かってスクロールする際に、機能説明のアニメーションも進んでいくという見せ方が上手です。
自動で再生されるアニメーションだと流し見されてしまうところを、ユーザーの操作に応じて進むアニメーションであれば、機能を「短いストーリーの積み重ね」として伝えられます（ただし、複数回訪問しているユーザーにとっては、しつこいかもしれません）。
Inbox by Gmail – the inbox that works for you
Android
次もGoogle関係になりますが、Androidのサイトにもマテリアルデザインが採用されています。
Inboxのサイトとちょっと異なるのは、画面をスクロールしはじめると、はじめてナビゲーション下部に影が表示されるところでしょうか。このタイプのレイアウトパターンは、「Waterfall」というバリエーションとして、Googleのガイドライン内に記述があります。
Principles – Layout – Google design guidelines
実際に自分のサイトにマテリアルデザインを取り入れる際には、こういう細かなバリエーションの存在も確認しておきたいところです。
Materialize
自分のサイトにもマテリアルデザインを取り入れたい場合、重宝しそうなのが「Materialize」というフレームワークです。
やはり、この説明サイト自体が、良いサンプルになっています。筆者は、このサイトでは、ボタン周りのアニメーションに着目しました。InboxやAndroidのサイトよりも、ボタンにマウスカーソルを重ねた時とクリックした時のレスポンスが丁寧に作り込まれています。
Material Interaction
次にご紹介するのは、アニメーションを使ったマテリアルデザインの「動きの参考」になりそうなサイト。
現実世界の物理法則を模したアニメーションの利用もマテリアルデザインの特徴のひとつですが、このサイトでは、マウスカーソルの操作に応じてリアルにオブジェクトが追随する様子や、物理法則に従ってオブジェクトが跳ねる様子などのアニメーションが作り込まれています。
MaterialUp
マテリアルデザインのショーケースサイトもご紹介しておきましょう。またしても、このサイト自体がマテリアルデザインのサンプルになっています。
各コンテンツが収められている矩形は、マテリアルデザインのお作法に則り、最小限の影が施されています。また、右上の「＋」ボタンは、マウスカーソ ルを重ねると呼応して回転します。この「＋」ボタンをクリックすると、Twitterアカウントを利用して、誰でもサンプルを投稿出来るようになっていま す。いまはまだ投稿数が多くありませんが、今後増えていくことを期待したいサイトです。
Daily Material Design Inspiration – MaterialUp
Introducing the new UX and UI for Google News platform
マテリアルデザインの良い見本となるサイトを探していて気づいたのが、実際に公開されたサイトよりも、コンセプトワークの方が目につくということです。DribbbleやBehanceなどのデザイン投稿サイトでは、「Material Design」というワードで検索すると、沢山のコンセプトワークを見つけることができます。
その中でひときわ目立っていたのが、George Kvasnikov氏の「Introducing the new UX and UI for Google News platform（Googleニュースのための新しいUXとUIのご紹介）」というプロジェクトです。
現状の（どちらかというと無個性な）UIを分析し、ユーザーシナリオやムードボードを作成し、論理的にリデザインをしていく様子は、読んでいて非常に勉強になり、わくわくするとても良いお手本です。ぜひご覧になってみてください。
以上、筆者にとって「思い残し」だったマテリアルデザインについて、主立ったサイトを見てきました。
最後に一言付け加えておきますと、筆者がAndroid端末を所有していないため、Androidアプリにおけるマテリアルデザインを確認できなかったことが心残りな状態です。Evernoteのアプリも、Android版はマテリアルデザインが採用されているそうですし。
ということで、それに関しては、また日を改めて調査してみたいと思っています。
（了）