• 制作ブログ

【マテリアルデザイン】Google推奨のUIの在り方

5,454 view

Webデザインを考える上で欠かせない「マテリアルデザイン」とは、どのような表現方法なのでしょうか？あまり意識していなくても、日頃ネットに接続するたびに、目にしているはずのデザイン手法です。この記事では、マテリアルデザインが生まれた経緯や、基本的な概念について解説していきます。

マテリアルデザインとは

Googleによる厳密なルール

Google社は2014年のカンファレンスで、新たなデザイン手法「マテリアルデザイン」を発表しました。マテリアルデザインには厳密なルールが定められており、公式サイトでガイドラインが公開されています。（マテリアルデザイン https://material.io/design/ ）

AndroidOSをはじめ、Googleの各種Webサービスに採用されているため、私たちの生活にすでに浸透しているデザインと言えるでしょう。

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

かつてインターネットの接続端末といえばパソコンが主流でしたが、現代ではさまざま端末が普及しました。腕時計型端末から、スマホやタブレット、そしてPCモニタまで、操作画面の大きさや形状が大きく異なります。そこで、端末が変わっても直感的な操作ができるよう、マテリアルデザインという共通のルールが設けられました。

これまでのデザインとマテリアルデザインの比較

これまでのデザイン手法を振り返りながら、マテリアルデザインと比較してみましょう。

リッチデザインとスキューモーフィズム

インターネット黎明期は、現在に比べて通信回線の速度が大変遅かったこともあり、データの「軽さ」が重視され、デザインの構成要素もシンプルでした。やがて高速通信の普及とともに、「リッチデザイン」が流行していきます。リッチデザインとは、影・光沢・立体感などを多用して細部のディティールを作り込んだデザインです。

そしてリッチデザインでは、実物に質感を似せた「スキューモーフィズム」が多用されました。例えばカメラアプリのアイコンであれば、カメラ本体の鈍く光る質感や、レンズガラスのツヤがリアルに再現されていたものです。

フラットデザインとマテリアルデザインの違い

2012年頃になると、それまでのリッチデザインの反動のように、装飾を極力排除したシンプルで平面的な「フラットデザイン」が広まってきます。そして2013年に発表されたアップル社のiOS7では、スキューモーフィズムが多用されていたインターフェースデザインからフラットデザインに一新されました。これを機にフラットデザインが急速に普及していきます。

装飾の無駄を削ぎ落としたフラットデザインは、ミニマムで洗練された印象ですが、「どこがボタンなのか分からない」「要素の区別がつかない」と分かりづらさを批判する声もありました。そこでフラットデザインの簡潔な美しさを継承しながら、ユーザーの操作性にも配慮した概念が「マテリアルデザイン」です。

マテリアルデザインの概念と基本原則

「マテリアル（Material）」とは、「物質」という意味です。マテリアルデザインの基本概念は、仮想物質の「紙」と「インク」を構成要素として、X・Y・Z軸の3次元（X：横、Y：縦、：Z：奥行）に存在するものとしています。光と影による立体感と物理法則に即した視覚効果を重視することで、フラットデザインを踏襲しながらも、理解しやすく直感的な操作を促すデザインです。

「紙」のルール

紙は、重なりを影で表現することでZ軸における位置関係を説明します。また、奥行（Z軸）は端末の厚みが最大と考えるため、例えば紙の裏表をひっくり返す動きはできません。紙の厚みは1dpi、形状は四角形あるいは円形（多角形は不可）で、大きさは自由に変えることができます。

「インク」のルール

紙の上に存在するのがインク要素です（色・写真・文字・動画など）。インクは紙の範囲内で動かすことができ、厚みの概念はありません。

アクションに反応する「モーション（動き）」

マテリアルデザインでは、ユーザーの操作に応じたモーション（動き）を多用します。モーションにはそれぞれ意味を持たせる必要があり、飾りではありません。

モーションの意味の一例

  • アクションが成功したかどうか判断できる
  • どの項目を選択しているのかを示す
  • コンテンツが読み込み状態であることを表現する
  • ユーザーに操作のヒントを与える

マテリアルデザインのメリット

短時間で完成度が高いデザインができる

マテリアルデザインは、定められたルールに従って作成するだけで完成度の高いインターフェイスをつくることができます。Googleの公式サイトにはデザインルールに則ったボタンやアイコンが用意されているので、デザインにあまり時間を掛けたくない人や、デザインが苦手な人でも安心です。

直感的な操作性と利便性

マテリアルデザインは構成要素のルールが統一されているため、初めて操作するアプリケーションでも、直感的な操作が可能になります。

マテリアルデザインのデメリット

マテリアルデザインの厳密に統一されたルールは、デザインの没個性につながり、差別化が難しくなる側面も持っています。

まとめ

マテリアルデザインの基本概念を解説しました。フラットデザインのシンプルな美しさを踏襲しながら、よりユーザーの利便性を追求しています。デザインに流行の移り変わりはありますが、ネット環境や人々のライフスタイルの変化に応じて、今後もより使いやすく変化を見せていくでしょう

一覧へ戻る