アワード表彰アプリに見る「Material Design」の良さ

第3回は、Material Design を使ったアプリの開発の流れについて解説しました。第4回では、Material Design が実際のアプリでどのように使われているのか、事例を見てみましょう。

第1回でも説明しましたが、Material Design を利用したアプリは Google Play ストアで配信されているものだけで100万を超えています。今回ご紹介するのは、 「Material Design Award」と「Best In Class Android Design」で紹介されているものから、いくつかピックアップしてみましょう。

まずはそれぞれの企画の説明から。Material Design Awardは2015年より年に1回開催している国際アワードで、2016 年には日本の「 C Channel 」がアジアのアプリとして初めて受賞しました。一方のBest In Class Android Designは、優れたデザインのアプリを Google Play チームが選び、Google Play ストアのサイト内に特設ページ上で紹介しています。それでは、アプリのデザインを見ていきましょう。

New York Times

New York Times のアプリは、ユーザーがコンテンツを読むことに集中できるレイアウトを、Material Design で実現しています。

第2回で説明した Floating Action Button や Raised Button を敢えて使用せず、何かアクションを想起させる要素を画面から排除して、コンテンツを読むという行為に集中できるように設計されています(アプリ挙動の動画はこちら)。

Kitchen Stories

New York Times アプリがテキスト中心のレイアウトであったのに対して、Kitchen Stories はさまざまな動画レシピと画像を、より魅力的に見せるレイアウトにしています。Material Design には「Cards」というサムネイル画像や動画を効率的に表現できるコンポーネントがあります。

Fabulous : Motivate Me!

Fabulous は日々の行動管理ツールです。朝食を取ったり、運動するといった日常的にこなしたいタスクながらもなかなか実行できない行動目標を設定することで、アプリがリマインダーや目標設定のプランを提示してくれます。

単調になりがちな To Do アプリのデザインにテコ入れしています。テーマに合わせたイラストや色、そしてアニメーションを大胆に用いて、ユーザーが楽しく使えるようにデザインしているのです。

ただ単に多くのイラストや色を使うだけでは画面が乱雑になってしまい、ユーザーにとって見辛いアプリ画面になってしまいがちです。そこで Material Design が推奨している「グリッド」を利用することで、多彩なイラストや色を使いながらも統一感を保っています。

C Channel

C Channel はアジアで唯一 Material Design Award を受賞したアプリです。ご存知かもしれませんが、このアプリではメイクアップやヘアスタイルなどのユーザーがアップロードしたタテ動画を見ることができます。

C Channel はコンテンツを階層構造にせず、タブやコンテンツを横スクロールすることでカテゴリの遷移が可能なデザインになっています。このデザイン意図は「片手で気軽に見られる」というスマートフォンならではのユーザー体験を意識したものです。

AirBnB

最後に取り上げる宿泊サービス「 AirBnB 」も、Material Design Award の2016年の受賞アプリです。こちらのアプリは、Material Design のデザインシステムをベースとしつつ、アイコンやマージンなどは独自のデザインシステムを使用しています。

まとめ

Material Design ではアイコンやマージンなどのデザインを提唱、ツールを提供しています。それは、基本的な部分にガイドラインやツールを活用してもらい、ブランドとして重要なデザインに対して、より時間をかけて開発いただきたいという考えからです。

Material Design を上手く取り入れつつ、つまり、独自のブランドデザインをディテールに利用することで、Material Design が実現するユーザーにとってより良い使い心地と、他社アプリとの差別化を両立させることが可能になります。

今回は「どのように Material Design が利用されているか」を、アワード表彰アプリなどを参考に解説しました。紹介した事例からもわかるように、Material Design は特定の用途に合わせたデザインシステムではなく、ニュースやEコマース、業務支援、動画など、多種多様なアプリに対応できる柔軟なデザインシステムです。

第5回以降は、Material Design を「どのようにプログラミングで利用するか」について解説します。