今さら聞けない!?正しいマテリアルデザインとの付き合い方

マテリアルデザインとの正しい付き合い方

Googleの新しいデザインガイドラインとして先ごろ発表された「マテリアルデザイン」。早速この新しいトレンドを取り入れた事例や、スムーズに導入するためのフレームワークが紹介されたりするのを見かけますが、UIの開発に携わるクリエイターとしては、取り入れる前にその思想をしっかりと理解しておく必要があります。というわけで、思想の背景やデザインのポイント、注意点をまとめてみました。

マテリアルデザインが定義された背景

Googleの生み出すサービスは、もはやスマートフォンやタブレットやPC(Android OS)だけに限られたものではなく、腕時計やメガネといったウェアラブル(Google glass、Google Fit)、ハンズオンでの操作を可能にする自動車用システム(Android Auto)などなど、様々な分野に広がっています。

今後も更に様々なスクリーン環境、操作環境が増え続けるのは確実です。そこで、誰もが迷うことなく、尚且つどんな環境でも一貫したブランドを正確に分かりやすく伝えるUIを作成するための、根本的な思想を定義する必要がありました。そこで大きく、ビジュアル・モーション・インタラクションに分けてガイドラインとして定めたものが、マテリアルデザインと呼ばれるものです。

マテリアルデザインの哲学

Googleのデザイン担当ヴァイスプレジデントであるマティアス・デュアルテ氏へのインタビューがGizmodoに掲載されていますが、これを読むとマテリアルデザインの根本に流れる哲学を知ることができます。思想の源にあるのは「我々が生きている実在の世界にある物理的なルールをインターフェイスの中に取り入れ、考えることの負担を軽くする」ということです。

我々人間は生きている中で自然とこの現実世界のルールを学んでいます。光が当たっているものには影が付くというルール、ボールが転がると最初は勢いがあって最後はゆっくり止まるというルール、水面に何かが落ちれば波紋が広がるというルール。こういった現実世界のルールは我々がこの世に生きている以上は変わらないルールです。しかし、新しいOSや様々なサイズのスクリーン、数々のアプリケーションが増え続けるデバイスの世界においては、それぞれに独自のルールが適用されることが多々あります。そんな時に我々は「これはどう操作すればいいんだろう?」と悩んでしまうのです。

ここに現実世界にあるマテリアル(素材)という一定のルールを用いることで「考えることの負担を軽くする」というのがマテリアルデザインの哲学です。現実世界と同じく、触れるものには影があり、物が動く時には慣性があり、物は連続的に動いて消えたりしない、という法則をうまく利用することが、操作しやすいインターフェイスに繋がるということです。

ビジュアル・アニメーション・インタラクションの特徴

マテリアルデザインとの正しい付き合い方

ここまで読み解くと、appleのiOS6まで継続されてきたデザインのテイストであるスキュアモーフィズム(現実世界にある物の質感を取り込んだ視覚的なデザイン)と同じようにも聞こえますが、マテリアルデザインの一番の大きな違いは「脳が判断するのに必要とする分だけの、最低限のルールを利用する」ことと言えます。

ガラスでできたようなギラリとした光沢が無くても、うっすらとした影が付いたものがあるだけで、人はそれを「押せるボタン」と認識することができます。現実世界をそっくりそのまま再現するのではなく、理解に必要なルールを必要な分だけ取り入れるのが、マテリアルデザインの考え方と言えるでしょう。

少し気をつけておきたいのは、マテリアルデザインは根源となるルールをできるだけ分かりやすく定義するために、見た目をシンプルにすることに注力しています。今後また色々と環境が変わる中で、今とは違った見た目に変わるようなことも可能性としてゼロではないでしょう。ですから「フラットな面に少し影が付いて、キーカラー+グレーの配色で、クリックすると波紋が広がっているデザインがマテリアルデザイン」と、安易に解釈するのは危険です。変わらないのは、脳の判断を補助する最低限のルールを適用することと言えます。

アニメーションやインタラクションについてもビジュアルと同じく「脳が判断するのに必要とする分だけの最低限のルール」という考え方は共通しています。何かを操作している時に急に物が消えたり、違う場所に移動したりして「あれどこ行った? あ、ここか…」とならないために、アニメーションを利用するとあります。

ブランドが変わればデザインは変わる

違うブランドや会社でも同じ「マテリアル」の枠組みを使えるはずですが、会社が変われば違う使い方になる。

インタビューの中で注目すべき点として、こんな発言があります。この思想を私たちデザイナーやデベロッパーは深く認識しておく必要があります。

簡単に言うと、今Googleのサービスで適用されているマテリアルデザインは、Googleというブランドに最適化されたものであるということです。明るい楽観的な色使いや楽しくポップなアニメーションはまさにGoogleのブランドイメージ。ですから、今Googleのサービスに適用されているデザインをそっくりそのまま真似ると、Googleのブランドイメージになってしまうのです。

もちろん、定義されているグリッドシステムやカラースキームの使い方を闇雲に変えるのも間違っていますが、安易に出来映えだけを模すことは、マテリアルデザインの正しい使い方とは言えません。ブランドのイメージを適切に伝えるために、Googleが定義したグリッドシステムやカラースキームが使えるのであれば、そこはうまく利用するのが良いと思います。

最も優先すべきなのは、そのブランドが持つイメージを適切に伝えることであり、そこにマテリアルデザインの思想を適用するというのが正しい順序です。マテリアルデザインの哲学を抑えつつユーザ体験に一貫性を作りながら、如何にしてそのブランドのイメージを向上させるかが、マテリアルデザインとの正しい接し方だということを作り手として認識しておくべきでしょう。

…と、色々と思うところを述べてみましたが、私自身はこのデザインはとても良いなと感じています。マネーフォワードのデザインにマテリアルデザインを適用した例が先日紹介されていましたが、適用後は非常に洗練された印象になっていました。自分自身の制作の中にも、この考え方をうまく取り入れることにチャレンジしてみたいなと感じました。


Web制作に関わる方、情報交換しませんか?

現在、Web制作に関わるデザイナー、エンジニア、ディレクター、プロデューサーの方と積極的な交流を求めています。ご興味ある方はぜひ各種SNSからフォロー(フレンド申請もお気軽に)をお願いします。クリエイティブに関わること、私のブログに対するご意見、それ以外のことなど何でも、若手・ベテラン、男・女問わず、いろんな方と情報交換ができると嬉しいです。