マテリアルデザインの特徴と概要に関する意訳

この記事はAdvent Calendar 2015における、Webデザインセオリー９日目の記事です。

マテリアルデザインという言葉を耳にするようになってしばらく経ちますが、実際これがどういうものなのか？をちょっとまとめました。

マテリアルデザインの概要

見た目だけで言えばフラットデザインに似てるな？という印象を受けますが、マテリアルデザインが指すのは、フラットデザインという言葉とは違い、見た目のフラットさだけにフォーカスを当た言葉ではありません。

マテリアルデザインが重要としている要素はいくつかあって、それはGoogleが公開している Material design に記述されています。

今回このサイトの意訳して記事にしてみようと思います。ここは違うとかがあれば、コメントでご指摘いただけるとありがたいです。

Material is the metaphor
Bold, graphic, intentional
Motion provides meaning

Material is the metaphor 訳：マテリアル（要素）はメタファー（比喩）である。

現実的に根拠の有るものを要素として設置することで、視覚的な手がかりをユーザーに提供することが出来ます。

例えば、よく見かける虫眼鏡アイコンは、それを使うことで何かを調べることが出来るというメタファーを持っています。

このような、ユーザーがよく知る触覚型の特質を採用することで、それを見た時に受け取るアフォーダンス（虫眼鏡でいう、調べるというもの）を理解する際、それを直感的に捉えることが出来るため、ユーザーは即座に、次は何が出来るのか？を捉えることが出来ます。

また、動作の基本原則についても、与えられたスペースの中で、オブジェクトがどのように移動し、移動した結果どのような相互作用が起こって外見がどうなるか？を伝えるために、光が鍵となっています。

文章で書くと非常にわかりづらいですが、Material design の動画を見れば感覚がつかめると思います。

動画の中でオブジェクトが移動する際、オブジェクト同士がぶつかり合わないよう、浮かび上がって移動している箇所がありますよね？

この、オブジェクトとオブジェクトの位置関係を表すのに使われているのが影であり、それを生み出しているのが光の存在です。

さらに、オブジェクトの形が変化すると、近隣にある要素に影響も与えています。

あるオブジェクトが移動することで、他の要素がずれる
あるオブジェクトが広がることで、まわりの要素が狭くなる

マテリアルデザインでは、これらの相互作用をうまく使い、状態変化によってユーザーに伝える事を重要視しています。

Bold, graphic, intentional 訳：強調、グラフィック、意図的

印刷ベースのデザインで基本的な要素である、タイポグラフィ、グリッド、スペース、スケール、イメージは
視覚的な処理としてユーザーを導きます。これらは見た目の楽しさだけでなく、階層や意味、または焦点などを生み出します。

また、深く考えられた色の選定や、端から端までの大胆なグラフィック、大規模なタイポグラフィや意図的なホワイトスペースなどは、大胆なユーザーインターフェースを作り出します。

さらに、ユーザーのアクションに重点を置くことで、ナビゲーションに必要となるポイントをユーザーに提供し、コアとなる機能を即座に伝えます。

例えば、動画で登場するお天気アプリで言えば、雲、雷、雨の形、色をシルエットで再現することで、天気の情報をつたえ、数字を大きく配置することで、それが今日の気温であることを伝えています。下にある情報は、今日の情報よりも小さく配置し、週間の天気を瞬時に把握することが出来ます。

Motion provides meaning 訳：モーションは意味を提供します

マテリアルデザインでは、モーションを重視し、ユーザーの原動力を補助する役割を持っています。

上記動画を見てもらえばわかると思いますが、とにかくよく動きます。モーションの起点となるポイントがあり、ユーザーがアクションを起こせば、モーションが起こってオブジェクトが移動し、そこからコンテンツが展開されます。

ユーザーの起こすアクションは、モーションを開始する際の起点、変曲点となり、デザイン全体を組み替えていきます。

そして、すべてのアクションは、一つの環境で行われ、オブジェクトが変形して再編成する場合でも、経験の連続性を破壊することなくユーザーに提供されます。

モーションはユーザーの注意を引き付けるのに役立ちます。フィードバックは微細ですがはっきりとしており、フェードイン、フェードアウト、ワイプ、オーバーラップといったトランジションを使うことで、視覚的に一貫性のある遷移が行えるため効率的です。

マテリアルとは？

環境

3Dの世界

具体的な環境は3Dで空間です。すべてのオブジェクトにはX、YとZ軸があることを意味し、Z軸の垂直な値は、ユーザーの方を向いて垂直に伸び、ディスプレイの平面に整列されます。

material_03

要素の全てのシートは、z 軸に沿った 1 つのポジションを占めており、標準的な 1dp（Android特有の単位。画面解像度に応じて変化する抽象的な独自単位）の厚さです。

Web上では、z軸は見え方ではなく、ユーザーの視点レイヤーのために使用され、３Dの世界はY軸を操作することによってエミュレートされます。

光と影

マテリアル環境では、仮想の明かりがシーンを照らします。

周囲の光が、あらゆる角度からのソフトシャドウを作成しつつ、キーとなる光が方向を表す影を作成します。

マテリアル環境での影はこれら二つの光源により表されます。

まとめ

マテリアルデザインの言葉が指すのは、見た目だけに限った話ではないということが理解できたと思います。

重要なのはユーザーの興味関心をモーションやグラフィックで引き、画面に集中させて使わせることです。

そのために、ユーザーのリアルの体験をうまく引き出すことを考え、触覚的にユーザーが理解できるデザインすることに有ります。

これらを理解してマテリアルデザインを採用することで、ユーザーとアプリケーションの距離をぐっと縮めることが出来、ユーザーは自分の必要な情報を得る際、迷子になりにくくなるため、ユーザビリティの高いUIになると考えられます。

基本はミニマルデザイン（伝えるメッセージに対して極力ノイズを避け、シンプル且つクリアにする事を採用したデザイン。）が根源にあり、それをさらにわかりやすくするのがマテリアルデザインの持つ特徴ではないか？と考えています。

ただ、注意するのは、モーションの部分で、直感的に捉えることが出来るためにスピーディに使えるUIのはずなのに、モーションが長いと、ユーザーのストレスは溜まりやすくなります。

それを避けるため、モーション部分の設計はよりしっかりとしないといけませんね。

参考文献

今回の記事を書くに当たり、下記サイトを参考にさせていただきました。

Material design Google
Googleマテリアルデザインとフラットデザインって結局何が違うの？[UI/UX] Naverまとめ

お役に立てたらお願いします🙇