GoogleがMaterial Designの仕様を更新
Googleは、Androidでも採用されている「Material Design」の仕様更新を行い、新しいセクションが追加されています。
Material Designとは、ユーザインターフェースの見た目や動き、操作した時のリアクションを定義したガイドラインです。名前に「Material」とあるとおり、現実世界の素材や物の動きをメタファーとして使っているのが特徴です。こうすることで、ユーザにとって親しみやすく分かりやすいものにするのが狙いです。Material Designは、Androidアプリだけでなく、Googleのウェブサービスなどにも採用されています。最近では、垣根を越えてiOSでもこの考え方を取り入れたアプリを見かけます。
追加されたセクションは、「Motion」と「Expansion panels」、そして「Growth & communications」です。それでは順に見ていくことにします。
Motion
Motionは、動きに関わる部分で最も分かりやすいセクションです。アニメーションの方法やタッチ操作に対してのフィードバック方法がまとめられています。ページでは、考え方とともに実際の動きを動画で解説しているので視覚的に理解できます。
たとえば、オブジェクトが移動する場合は速度が線形ではなく、現実世界には摩擦があって、これの影響をうけるので、はじまりと終わりの速度が落ちるように移動する方が自然な動きに近くなると説明されています。
オプジェクトの移動速度だけではなく動き方に対しても言及しています。オブジェクトが斜め上に移動する場合は、直線的に動くのではなく現実世界では重力の影響を受けるので、弧を描くように斜め移動する方が自然だと提案されています。
いずれもMaterial Designを適用した場合としない場合の実例が提示されているので、自身の目で見比べることができます。
Expansion panels
さまざまなアプリで使われている、伸縮するパネルの動きと使い方のガイドラインです。
ページでは、パネルが縮んでいる状態と伸びた状態の使用例が提示されています。
パネルが伸びた時は、広くなった面積を有効活用するために、操作の助けとなるテキストを表示して編集が可能になる例が示されています。
また、各パーツごとのサイズと各パーツを配置した時のパーツ間のスペースの取り方も例として提示されています。ケースバイケースで、必ず従う必要はないと思いますが、これを基準にしてUIをデザインする方法も考えられます。
Growth & communications
これまでのセクションは実践的なガイドラインでしたが、これは指針のみのセクションで、ユーザのアプリ習熟度に応じて使い方や機能を示唆する仕組みを設けるガイドラインです。
例として、最初の一週間と次の30日に分けられています。
最初の1週間では、アプリの特徴をユーザがいち早く理解できるように、基本的な使い方などを提示するように示されています。次の30日では、ユーザがアプリをより深く理解したり、アプリをより活用できるようなヒントを提示するようにと示されています。
たとえば、導入直後はアプリの使い方を提示して、ある程度の期間が経過したら「こんな機能はご存じですか？」と言った感じでヒントを提示する使い方が考えられます。
Material Designは2014年6月に公開されたので、2年が経過しようとしていますが、人が心地良いと感じる普遍的な部分に対して触れているためか、あらためて思い知らされることが多くあります。UI/UX関連のエンジニアだけではなく、プログラマーも一度目を通してみることをオススメします。ユーザにとってわかりやすいアプリを開発する良い目線を与えてくれるはずです
今週は、このあたりで。また来週。
