マテリアルデザインは、Googleが提唱するメタファーに基づいたデザイン手法ですが、多くのアプリに適用されだしています。
マテリアルデザインの第一の目的はユーザーを幸せにすることです。 デザインのあらゆる側面（色、タイポグラフィ、ビジュアル、マルチメディア、構造など）は、ユーザーが欲しいものを即座に得られるような快適な環境を作り出し、且つ心地よくそれが実現することを手助けするべきなのです。
マテリアルデザインでは、次のことが求められます:
- ユーザーインターフェイスは直感的ですっきりしている
- 情報の階層構造は明確でわかりやすくすべきである
- 全ての構成要素は配置・目的ともに必然であるべきである。飾りとして使われるアニメーションでさえも、意図や関連性を持つべきである
今回はUpLabsでキュレーションしているデザイナーによるギャラリーの中から、これらのガイドラインと各デザイナーの考える最適解が組み合わさった、デザイン例をいくつかご紹介します。
1. Todoist Material
By Jordi Tambillo
Todoist Materialのアナウンスページ
これはTodoistというタスク管理アプリがマテリアルデザインに対応する際に公開されたアナウンスページですが、Googleのマテリアルデザインのガイドラインに準拠しています。このWebサイトを作るにあたり、詳細まで綿密な計画が立てられました。
このサイトの美しさは、以下の幾つかの要因から成り立っています。
- カンディンスキーの絵を思い起こさせるような、背景の左側の豊かで抽象的なイメージ
- 自然と重要な位置にコンテンツを配置させる意図的な空白のスペース
- タイトルを強調する比較的大きなタイポグラフィ
- 主となるCTA（行動喚起）は、ユーザーに注目させるために大胆な赤色を使用し、ソーシャルメディアアイコンには陰影をつけ、自然とフローの中で目立つようになっています。
TodoistのWebアプリ
2. Cookicons
By cookicons
Cookiconsはマテリアルデザインのアプリアイコンギャラリーですが、こちらもGoogleの新しいビジュアル言語を中心としており、掲載されているコンテンツもガイドラインに忠実に従っています。
Michael Cook氏は、力強い、魅力的なデザインを作り出しました。大量の空白スペースがブロック同士をそれぞれ適度に引き離し、構成を保てています。
フレキシブルなレイアウトが様々なスクリーンデバイスに対応し、訪問者に一貫性のあるUXを提供していますし、もう一つの大きなトレンドであるCardデザインが その快適な環境作りに一役買っています。
カードレイアウトとマテリアルデザインが、 親しみやすさと扱いやすさを兼ね備えたレイアウトを生み出すための鍵を握っているのです。
Cookicons
3. Responsive Material Card
By David Foliti
David Foliti氏も、マテリアルデザインのエッセンスを用い、カードデザインの中に収めています。
ここでは一つ一つの要素が適切に並べられ整理されており、デザインとコンテンツは一体となり融合しています。鮮やかな色を使ってビジュアル的にも訴えかけています。
動的な要素とアニメーションの使用もきちんと意味を持ち、適切といえますし、余白の部分によっても、プロジェクトのトーンを作り上げています。
David Foliti氏は、実際に、Googleの哲学を見事に適用することに成功した数少ない人のうちの一人です。ユーザーを夢中にさせる、扱いやすいUXを作り出すモダンなツールで、クラシカルで長年使用されているレンガ状のレイアウトをうまく強化しようとしました。
レスポンシブマテリアルカード by David Foliti
4. KickMaterial — Kickstarter Material app icon
By Grzegorz Oksiuta
Grzegorz Oksiuta氏は、Kickstarterの非公式デザインリメイクを手がけ、ユーザーがすぐに簡単に使うことができるような、シンプルな見た目にすることを選びました。
影や類似色、そしてフリップアニメーションを使い、物体の動きをリアルに再現しました。
メインのアクセントのあるトーンから成るプライマリーパレットは、ブランドイメージを映し出しており、ブランドの精神に沿うだけでなく、重要な部分を確立しています。タイポグラフィはありませんが、本質的な部分をアレンジしたことで伝統的なプリントデザインを再現しています。
Grzegorz氏は、ガイドラインの全てを考慮に入れ、感情や動きを使った非言語的なコミュニケーションを作り出すことができたのです。
KickMaterial — Kickstarterマテリアルアプリアイコン By Grzegorz Oksiuta
5. Night & Travel UI Kit
By Jan Losers
上記の例とは異なり、このデザインコンセプトはダークなカラースキームでエレガントで洗練された印象を与えています。他の一般的な明るい鮮やかなアプリとは一線を画し、ユーザーの注意を引きます。
Jan Losert氏は、ダークな背景を使い、前面の要素がきちんと目立つように作っています。明るいパープルを使った重要な部分、コントロールパネルのハイライト、そして軽めのグラフィックとタイポグラフィによって、UIの内容をフレンドリーな印象にするようにしています。ユーザーは快適に読みながら、ナビゲートしていくことができます。
Jan氏は、今流行りのフローティングアクションボタンを使うことや、パワフルなUIを使うことにおける利点を見落としませんでした。イメージやイラストレーションが、ユーザーに衝撃を与えることなく、たくさん使用され目を引くようになっていて、芸術的な感覚を生み出しています。
このコンセプトは、素晴らしいUXへと導く、素晴らしい第一印象を与えています。
Night & Travel UI Kit By Jan Losers
