学ぼう&使おう！業務で使えるオープンソース（144）「マテリアルデザイン」

今回のテーマはマテリアルデザインです。Google I/Oで提唱されていらい、様々なライブラリ、フレームワークが登場しています。とはいえ見た目だけでなくフォーカスやクリックしたときのアニメーションも含めて考える必要があるため、なかなか作るのは難しいと思われます。

そんな中でも幾つか出てきたマテリアルデザインのフレームワーク、ライブラリを含め、その特徴を紹介します。

コンセプト

マテリアルとは素材のことです。これまでのWebやアプリではクリックできるか、入力状態がどうなっているのか、自分がどのステータスにいるのかなどを考えつつ操作しなければなりませんでした。それを実世界にある現象（押したら作用反作用があるなど）を取り入れることでより直感的に、ユーザが考えたりすることなく操作できる仕組みを取り入れています。

すべてのデバイス、スクリーンサイズに

マテリアルデザインは何もスマートフォン、タブレットに限らずすべてのデバイス、スクリーンサイズに対して使えるデザインコンセプトになります。その点はレスポンシブと被った考え方になるかも知れません。デザイン体験が統一できればブランディング向上にもつながるでしょう。

アニメーション

アニメーションはフラットデザインとマテリアルデザインを異なるものにしている肝だと思います。とはいえアニメーションが多ければ良いという訳ではなく、ユーザの迷いをなくすためのサポートができるアニメーションである必要があります。主張しすぎない、かといって気づかれないのでは意味がないと言ったところでしょうか。このあたりのバランスが難しいところだと思います。

肝は情報設計

フラットデザインが流行って以来、情報設計を重視する動きが強まっています。特にアプリのように全世界に対して誰でもすぐに使えるものを考えると適切、かつすっきりとした表示というのは大事になってくるはずです。最初はすっきりとした表示ができても、更新が行われるたびに徐々に機能が追加されていくのはよくあることです。1つ追加する時には1つマイナスするなどといった取り決めが必要でしょう。