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

【連載】

Web、モバイルのデザイン新基準「マテリアルデザイン」を学ぼう

【第4回】アワード表彰アプリに見る「Material Design」の"良さ"

[2017/08/04 06:55]鈴木拓生 ブックマーク ブックマーク

  • Webサイト構築

Webサイト構築

連載目次

第2回第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」というサムネイル画像や動画を効率的に表現できるコンポーネントがあります。

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 を「どのようにプログラミングで利用するか」について解説します。

連載目次

※ 本記事は掲載時点の情報であり、最新のものとは異なる場合がございます。予めご了承ください。

関連リンク

この記事に興味を持ったら"いいね!"を Click
Facebook で IT Search+ の人気記事をお届けします
2971
2
【連載】Web、モバイルのデザイン新基準「マテリアルデザイン」を学ぼう [4] アワード表彰アプリに見る「Material Design」の"良さ"
第2回、第3回は、Material Design を使ったアプリの開発の流れについて解説しました。第4回では、Material Design が実際のアプリでどのように使われているのか、事例を見てみましょう。
https://news.mynavi.jp/itsearch/2017/02/15/material_newindex.jpg
第2回、第3回は、Material Design を使ったアプリの開発の流れについて解説しました。第4回では、Material Design が実際のアプリでどのように使われているのか、事例を見てみましょう。

会員登録(無料)

セキュリティ・キャンプ2017 - 精彩を放つ若き人材の『今』に迫る
ぼくらのディープラーニング戦争
ドローンのポテンシャル、メーカーやキャリア、ユーザー企業はこう見る
マイナビニュース スペシャルセミナー 講演レポート/当日講演資料 まとめ
人事・経理・総務で役立つ! バックオフィス系ソリューション&解説/事例記事まとめ

一覧はこちら

今注目のIT用語の意味を事典でチェック!

一覧はこちら

ページの先頭に戻る