ケータイ用語の基礎知識

第684回:マテリアルデザイン とは

 今回紹介する「マテリアルデザイン」というワードは、Googleが発表した、新たなビジュアルや画面上の動き、ユーザーへの反応といった、ユーザーインタフェイス(UI)の根幹をなす、デザインの包括的なガイドラインです。

Google日本語入力の新バージョンでは、キーボードテーマを「マテリアルデザイン」に設定することができる

 2014年6月、Googleが、同社プラットフォーム上での開発者のためのイベント「GoogleI/O 2014」で、このマテリアルデザインの概要について公表しています。

 Googleからは今後、このマテリアルデザインに則ったインターフェイスを持つソフトやサービスが提供されます。スマートフォン関連では、11月に登場した「Google日本語入力」の新バージョンで、オプションの1つとして、このマテリアルデザインを採用するスキンが含まれています。また、Androidの新バージョン「Android 5.0“Lollipop”」でも、ユーザーインターフェイスのデザイン原則として、このマテリアルデザインが取り入れられる予定になっています。

あらゆるデバイスで統一感のある「UIの基礎原則」を

 マテリアルデザインが作られた目的は、Googleのすべてのプラットフォーム、つまりスマートフォン、タブレット、スマートウォッチ、TVや自動車など、さまざまな機器において、共通して味わえ、体験できる操作感を作ることでした。つまり、これらのデバイスのいずれを使っても違和感を感じないような形を目指そう、スケーラビリティのあるユーザーインターフェイスのデザイン原則を作ろうとしたわけです。

 もし統一感のないユーザーインターフェイスのままでは、それぞれのデバイスを使えるようになるまでユーザーは操作方法を習得し、慣れなければなりません。かといって、それまでユーザーが慣れたユーザーインターフェイスがどのデバイスでも最良だとは限りません。たとえばパソコンに慣れた人は多いですが、パソコンのユーザーインターフェイスをそのままスマートウォッチのような画面の小さなデバイスに持ってきても、使いやすいインターフェイスにするのは至難の業です。

 そこで、マテリアルデザインでは、多くのソフトサービスで同時期に同じ原則に則ったユーザーインターフェイスの法則を作ることとなりました。Googleは、AndroidやGoogle App Engineなどのソフトウェア基盤サービスも提供していますから、その上で動くアプリもまた同じユーザーインターフェイスの法則を採用することになります。

 さて、「同じ原則」に沿ったユーザーインターフェイスにするとして、どのような原則を導入すれば、“小さなデバイス”から“大きなデバイス”まで、あるいはさまざまなサービス上で違和感なく使えるでしょうか。Googleのデザイナーやサイエンティストたちの出した答えは、現実世界での「物質」をまねたような原則をユーザーインターフェイスを構成する部品に持たせる、ということです。たとえば、ユーザーに複数のメッセージを通知をするのに、「紙」に書いたメモが複数枚存在するかのように一枚ずつ表示され、これを順序を入れ替えたりできるようにする、ということです。

 これまでもコンピューターのユーザーインターフェイスでは、現実世界のアレコレをメタファーとして用いる、という方法が過去にも多々ありました。パソコンのウィンドウシステムなどもそれで、パソコンの画面のことを“机の上”つまり「デスクトップ」などと呼んだりします。このウィンドウシステムのデスクトップは、1970年代に開発されたAltoなどでも使われているくらい、古くから使われているメタファーです。

 マテリアルデザインが、そのようなメタファーを用いたUI体系と異なるのは、過去のUIデザインが現実のものと似せた見た目にすることで理解を助けてようと志向したのに対して、マテリアルデザインでは、各アイテムがフラットなデザインを基調としていて、それぞれにあまり意味を持たせないように志向していることでしょう。

 フラットデザインは、最低限、表示するアイテムのパーツに影をつけたり、またそのパーツをアニメーションで動かすアイテムの影やアニメーションさせたり、色彩を赤や青といった色で見せたりすることで、その情報が重要かどうか、といったことを直観的に理解できるようにしています。これは、現実世界の物体を目にするとき、影があれば「そこにある」「動かせる」と連想し、毒々しい色は「触ると危険(かもしれない)」などといったことを連想するのと似ています。

 実際のマテリアルデザインでは、どうなっているのか。たとえば、Google日本語入力では、文字のボタンはこれまでよりも平面的で、それがボタンであることすらわかりにくくなっています。しかし、タップすると、現在タップしているボタンがアニメーションで色が変わります。フリックすると、どの文字が選択されたのか、アニメーションで表示され、選択している文字の入力であること、選択している文字を明らかにしていることなどを表現しています。

 ちなみに、マテリアルデザインのマテリアルとは、「物質的な」「有形の」「具体的な」といった意味を持つ英単語「Material」のことです。マテリアルデザインとは、ひとことで言うなら物質的な、あるいは具体的な現象の特徴を表現したデザインということになります。

大和 哲

1968年生まれ東京都出身。88年8月、Oh!X(日本ソフトバンク)にて「我ら電脳遊戯民」を執筆。以来、パソコン誌にて初歩のプログラミング、HTML、CGI、インターネットプロトコルなどの解説記事、インターネット関連のQ&A、ゲーム分析記事などを書く。兼業テクニカルライター。ホームページはこちら
(イラスト : 高橋哲史)