近頃話題の「マテリアルデザイン」についてまとめてみました

こんにちは、森山です。

Webにご興味をお持ちの方はちらほら耳にされている方もいらっしゃるのではないかと思いますが、今日は近頃話題の「マテリアルデザイン」についてご紹介します。
さて、皆さんは「マテリアルデザイン」と聞いて、どんなものかパッと答えられますか？名前だけ聞いてもなんだかよく分からないですよね。私も初めて耳にしたときは「マテリアルなデザイン？？？うーーん・・」という感じでした。 「マテリアルデザインとは」と検索してみても「新しい“デザイン言語”」だとか「ユーザーインターフェイスの根幹をなすデザインの包括的なガイドライン」だとか・・言い方も様々で、ぼんやりとしていて、なかなか全体像を把握しにくいのではないかなぁと思います。私自身「？」という部分も多かったので、今回の記事ではできるだけ分かりやすく易しくお伝えできればと思います。

ではまずはじめに、マテリアルの直訳を見てみましょう。

material（マテリアル）【形容詞】発音/mətí(ə)riəl
1: 物質(上)の，物質的な，有形の，具体的な，肉体上の，感覚[官能]的な
2: 重要で必須な，不可欠な
3: 質料的な，実体上の

はい。
これだけ見てもちょっと意味が分かりませんね！
なぜ、「マテリアル」という名前がついているのか、最後にはご納得いただけるように順を追って説明して参りますのでよろしければお付き合いください。

マテリアルデザインは、Googleが発表した「ガイドライン」

まず、「マテリアルデザイン」というのはGoogleが生み出した言葉です。
2014年6月に開催された開発者のためのカンファレンスイベント「Google I/O 2014」で、同社は新たに開発された「Android Wear（ウェアラブルデバイス向けOS）」「Android TV（テレビ向けOS）」「Android Auto（自動車向けOS）」などを発表しました。Androidはもはやモバイル向けのOSだけではなくなるということです。そして、それらのOSのための新たなデザインアプローチとして発表されたのが「マテリアルデザイン」でした。

マテリアルデザインの目的

ではその目的とは何でしょうか。
Googleがマテリアルデザインを作った目的は、前章でも少し触れましたが、すべてのプラットフォーム（つまりスマートフォン、タブレットをはじめ、スマートウォッチ、テレビ、自動車などのあらゆるデバイス）において、共通した操作感・体験を実現することです。小さな時計の画面からテレビの大画面、自動車のダッシュボードまで、ユーザーがどの機器を使っても違和感を感じずにスムーズで快適な操作ができるように、どんなデバイスにも柔軟に適応することのできるユーザーインターフェイス（以下UI）デザインの大原則を作ることを目指したんですね。
今後Googleでは、次期AndroidOS「Android L」をはじめとして、このマテリアルデザインに則ったUIを持つソフトやサービスを順次提供していくとのことです。さらにアプリ開発者に対してもマテリアルデザインの原則に則った開発を行うよう求めています。すでに、11月にリリースされた「Google日本語入力（Googleが開発・提供している日本語入力システム（IME））」の新バージョンでは、キーボードテーマを「マテリアルデザイン」に設定することができるようになっています。

マテリアルデザインの特徴

ではマテリアルデザインの特徴はいったい何でしょうか。

まず、あらゆるサイズのプラットフォームで使える共通のデザイン原則を作り出すという難題に対してGoogleのデザイナーや科学者たちが導き出した答えは、「現実世界での物質（＝マテリアル）をまねた原理原則をUIを構成する各パーツに持たせる」ということでした。たとえば、ユーザーに複数のメッセージを通知するのに、「紙」に書いたメモが複数枚存在するかのように一枚ずつ表示させ、その順序を入れ替えたりできるようにする、などです。
Webデザイン業界においてはこれまでも、現実世界の素材をデザインに取り入れるスキュアモーフィズムという手法が流行した時期がありましたが、マテリアルデザインはそれとは少し考え方が異なります。 過去のUIデザインでは現実世界のモノと似せた「表現」をすることで分かりやすさを追求したのに対し、マテリアルデザインでは、各パーツはフラットデザインを基調とし、それぞれの素材自体にあまり「意味を持たせすぎない」よう配慮するとともに、影やアニメーションあるいは色でその情報の重要度を直観的に判断できるようにします。これは、現実世界のモノを見たとき、影があれば「そこにある」「動かせる」と連想し、毒々しい色は「触ると危険（かもしれない）」などと連想するのに似ています。

米GizmodoによるGoogleのデザイン担当ヴァイスプレジデントであるマティアス・デュアルテ氏へのインタビュー記事がマテリアルデザインの考え方を理解するのに大変参考になります。ここでは特に私が印象深かった点についてお伝えしたいと思います。

「脳の負担を軽くする」という考え方

デュアルテ氏がインタビューの中で語っている考え方が大変納得できましたのでご紹介させてください。

まず、人が生まれると、その脳は世界を理解しようと働くため、私たちは赤ちゃんの頃から世界の法則（たとえば「机の上に置いてあるモノを押すと落ちる」というようなこと）を学び続け、モデルを構築しています。それと同じように、私たちが初めてソフトウェアの中でピクセルに触れる時も「この新しい世界の法則はどうなっているか？」を理解しようとします。そんな時に困るのが、その世界に一貫性がない場合。挙動に一貫性がないと、ユーザーにとっては非常にストレスフルで、心理的エネルギーを消耗します。

そこで「一貫性のある世界を作る」ために、実世界の基本的な性質をデザインに取り入れることになったそうです。現実世界の原理原則をデザインシステムに取り込めば、人々が3歳ですでに学習していたことを活用できます。これは見た目のために実世界を模倣するということではなく、脳に対して実世界と同じ刺激を与えて「脳の負担を軽くしてやる」ということです。

私たちや本やWebページを見て、言語を処理したり文書や言葉を理解するためには、脳に大きな負担がかかります。でもアイコンや象形文字なら、ちょっと楽。モノとモノとの関係はさらに深く、より原始的なレベルの脳の奥深くで処理される。それは人間より下等な動物でもやっている効率の良い処理であるため、そうした処理を取り入れた視覚言語として、マテリアル（素材）のある世界を取り入れることになりました。

アニメーションのためのアニメーションではいけない

デュアルテ氏はインタビューの中でアニメーションのありかたについても言及しています。

アニメーションに関しても実世界の物理性質をもとにしており、現在Googleではユーザーを楽にするためにちょうど良いアニメーションの具合について把握しようとしているところです。Googleが行いたいのは、「アニメーションのためのアニメーション」ではありません。ブツ切りになったり瞬間移動して「あれ？ここどこ？ あ、ここか…」みたいな違和感をなくすためにアニメーションを使おうとしています。
ユーザーを集中させるために、ひとつひとつの場面に一貫性を持たせ、なるべくシンプルに。Google I/Oでの発表での大きなスクリーンでは、タッチに対する反応がすごく大きくドラマティックに見えたかもしれませんが、実際使ってみると、ほんのかすかなもの。小さな波のような動きで、ほとんど意識されず、タッチするとそこから反応が外向きに広がっていき、よりデバイスとの一体感が感じられます。生きているような、答えてくるような感じがあり、でもそれが過剰ではありません。

実世界をシミュレートしようとはしていない

デュアルテ氏はさらにこのようにも語っています。

さらにいえば、私たちは実世界をシミュレートしたいとか実世界に限定しようとはしていません。面が分かれて変形するなんて現実世界ではありえませんが、脳の根本に語りかけるメタファーを作り出せれば、魔法みたいなことも可能になります。 脳には質量保存の法則という考え方はありませんが、オブジェクトやエッジ、面は理解しています。だから知識として不可能だと知っている現象が画面上で見ても、感覚的には違和感なく受け入れることが可能です。魔法のように、まるでハリー・ポッターの世界のように見えるかもしれませんが、とにかく、不可能ではあるけれど、うそっぽくはないんです。マテリアルデザインでは、リアルな物理の法則に従うといってますが、リアル世界をコピーしようとは考えていません。ただ、「脳や心にとって自然なもの」を作ろうとしているだけです。
ソフトウェアの可能性の扉をひらき、進化し続ける本当にマジカルな体験をつくりだす・・・私たちはそんな世界でダンスしようとしているのです。

マテリアルデザインの概要（公式サイトより）

Googleの 公式サイトではマテリアルデザインの考え方やその手法などについて、具体的な事例をふまえながら大変細かく説明されています。ここですべてをご紹介することはできませんが、公式サイトの1ページ目"Introduction"にて紹介されている要旨、ゴール、原則を下記にご紹介させていただきます。
※英語翻訳についてはGoogleが云わんとしているところをできるだけ正確に表現できるよう配慮して翻訳させていただきましたが、意訳している部分や完全に訳しきれていない部分もあるかと思いますのであくまで参考までにご覧いただければと思います。念のため英語の原文も一緒に掲載させていただいておりますが、正確な内容を知りたい方は 公式サイトにてご確認ください。

要旨

私たちは、「古典的な良いデザインの原則」と「テクノロジーや科学の可能性と革新」を融合した “ 視覚言語（ビジュアル・ランゲージ）*” の作成に挑戦しました。それが、マテリアルデザインです。また、この仕様書は生きたドキュメントとして、マテリアルデザインの理念や仕様の開発に伴い順次アップデートされていきます。

原文）We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

* [補足] 視覚言語（ビジュアル・ランゲージ）とは

視覚言語（ビジュアル・ランゲージ）とは、視覚に訴えて、他者と意思を疎通させるための言語のことを指します。言葉で記述的に意味を伝えるのではなく、視覚により情報伝達を行うための要素を指し、手話・標識・絵文字などがその代表例といえます。

ゴール

1. 「古典的な良いデザインの原則」と「技術や科学の可能性と革新」を融合した “ 視覚言語（ビジュアル・ランゲージ）” を作り上げること。

原文）Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

1. あらゆるプラットフォームやデバイスで統一感のある操作ができる共通の基礎システムを開発すること。モバイルにおける操作法を基本とするが、タッチ、声、マウス、キーボードによる入力はどれも重要な入力方法である。

原文）Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.

原則

マテリアルはメタファー(比喩)である

マテリアルのメタファー(比喩)は、現実空間と動作システムが統合された理論です。マテリアルは私たちが普段触れることのできる現実世界に基づいており、紙とインクからの着想を得て、さらなる技術的進歩、そして想像と魔法のような世界が広がっています。
マテリアルの面とエッジは、現実世界に基づいた視覚的な手がかりとなります。人々になじみのある感覚をUIに取り入れることで、ユーザーは直感的に操作しやすくなるのです。さらに、マテリアルの持つ柔軟性は、物理学のルールを破ることなく、実際の世界とはまた違った新たなアフォーダンス（何らかの機能の目印となるもの）を生み出すことができます。
光、面、そして動きの基本原理は、物体がどのように動き、どのように相互作用し、どのように空間のなかに存在し、どのように関連し合っているのかを伝えるためのキーとなります。また現実世界に基づいたリアルな光は、コンテンツの継ぎ目や分割部分、あるいは動く部分を示します。

原文）A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

力強く、いきいきと、意図的に

印刷物のデザインにおける基礎的な要素（タイポグラフィ、グリッド、余白、スケール、色、画像の使い方など）は、視覚的処理という点でデザイン界を先導してきました。これらの要素は見た目に関することだけではなく、序列や意味、あるいは焦点を生み出します。UIにおいても、熟考された色の選択、画面いっぱいに広がるイメージ、大きなタイポグラフィ、そして意味のある余白は、ユーザーを夢中にさせるような力強くいきいきとしたインタフェースを作り上げるでしょう。また、ユーザーのアクションに応じて特定部分を強調させることは、重要な機能を瞬時に分かりやすくしたり、ユーザーに位置情報を提供することに役立ちます。

原文）The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience. An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.

アニメーションには意味をもたせる

アニメーションはユーザーを原動力として尊重し補強します。ユーザーのアクションはアニメーションの起点あるいはデザイン全体を切り替えるきっかけにもなります。また、すべてのアクションはひとつの環境下で表現します。オブジェクトは変形したり再構成される場合においても、経験の連続性を壊すことなくユーザーに示されなくてはなりません。
アニメーションは、注意をひき、連続性を維持するために、有効かつ適切です。ユーザーアクションに対する反応はさりげなく、でも明確に。変化は効果的に、ただし一貫性をもたせるべきです。

原文）Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design. All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize. Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

ガイドラインの詳細

公式ページでは下記の項目ごとに具体的なガイドラインが用意されています。詳しい内容が知りたい方はぜひ覗いてみて下さい。

• Animation（アニメーション）
• Style（スタイル）
• Layout（レイアウト）
• Components（コンポーネント）
• Patterns（パターン）
• Usability（ユーザビリティ）
• Resources（リソース）

Polymerとマテリアルデザイン

マテリアルデザインをWeb制作に取り込むためのツールとして今注目されているのが「Polymer（ポリマー）」です。 Polymerは、Webコンポーネントをより強力かつ柔軟に使えるようにするためGoogleが開発しているフロントエンドフレームワーク。JavaScript UIフレームワークであり、Webコンポーネントをモダンブラウザ以外でも利用できるようにしたライブラリだそうです。 ちなみにWebコンポーネントとは、Webページで利用する各パーツを「コンポーネント（カプセル化）」したものです。コンポーネント化することで、複数人での作業がしやすくなる、各パーツを再利用しやすくなるなどのメリットがあります。先日ウミメンバーが参加してきた京都でのWeb系セミナーCSS Niteに出演されていた阿部正幸氏によると「今後Web標準になる予定の技術」だそうです。

Polymer

まとめ

マテリアルデザインについて色々な側面からご紹介させていただきましたが、いかがでしたでしょうか。
マテリアルデザインとは、ひとことで言うなら「ユーザーの直感的操作を実現するため、現実世界のマテリアル（物質）がもつ原理原則に則り、あらゆるプラットフォームで一貫性あるUIを再現するためのデザインガイドライン」というところでしょうか。全然ひと言でまとめられてないですが・・（汗）

それにしてもスマホやテレビ、腕時計から車といったあらゆるサイズのプラットフォームで、しかも実に多種多様なサービスにおいて違和感なく使える共通のデザインの原則を作り出そうなんて、よく言い出したなぁと思います。マテリアルデザインは「大胆な試み」だという記事をよく目にしますが本当にその通りですよね。今まで私たちは腕時計での操作感とPCの操作感なんて、違って当然だと受け入れてきました。でも、今回のGoogleの試みは、とても合理的ですばらしい気付きだなぁと思います。 これまでの「当たり前」にとらわれないで、常にユーザーにとってより良いものを提供するべく取り組む姿勢はぜひ見習いたいものです。

これまでデザイン面においてはAppleがリードしていると言われてきました。Appleがもつ独特のデザインイメージが頭に思い浮かぶ方は多いと思いますが、Googleにはあまり固定イメージというものがなかったような気がします。インタビューの中で、Googleのマティアス・デュアルテ氏は「余白を多く取り、明るい楽観的な色使いに、楽しいポップなアニメーション」を用いたデザインのことを「非常にグーグルらしいスタイル」と語っています。そういわれると確かに、なんとなく「楽観的な色づかい」に納得です（笑） このマテリアルデザインのガイドラインの中にもそういったGoogleらしさが随所に出ているように感じます。マテリアルデザインが一体どの程度世界に普及し、ユーザーにどのように受け止められるのかはまだ分かりませんが、Googleがデザインの重要性を認識し、本格的に改革を始めたといってよさそうです。 また一歩、進化を遂げた今後のUIの世界に注目です。