この記事は MATERIAL DESIGN の記事 "
Material partner studies" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
マテリアル デザインの新しい表現機能を活用した Lyft、Genius、NPR、Pocket Casts、Zappos の事例をご紹介します。
多くの開発チームは、アプリを短期間で完成させることと、魅力的なデザインにしたいという気持ちの間で葛藤しているのではないでしょうか。マテリアル デザインの最新リリースを活用すれば、品質面で妥協することなく、魅力的なデザインのアプリを短期間で完成させることが可能です。
2014 年にマテリアル デザインを公開して以来、Google は社内外の人々と協力して数百回というデザイン スプリントを実施し、膨大な数のデザインを検討して世界中のデザイナーやデベロッパーのニーズの把握に努めてきました。さらに、このプロセスの中で重要な役割を果たしたのが、Lyft、Genius、NPR、Pocket Casts、Zappos など、早い段階からマテリアル デザインを採用してくれたマテリアル パートナーとの協力でした。
マテリアル デザインが常に目標としているのは、簡単かつシステマティックにデザインできるようにすることです。それを可能にしたのが、アプリに独自のデザインを適用できるカスタム Material Theme、カスタマイズ可能なコンポーネントのライブラリ、チーム間のスムーズな連携を促進するツールです。
デザイン システムが本当に生命を宿す場所はユーザーの手の中です。すべてのタッチ、すべてのタップ、すべてのインタラクションが、ユーザーが画面上で体験したことを日常に具現化していくのです。ここに紹介するマテリアル パートナーたちが、マテリアル デザインの新しいコンポーネント、インタラクション、表現機能をどのように活用し、何を実現したかをご覧ください。
Lyft: 拡張フローティングアクションボタンで操作を明確化
 |
| Lyft アプリの拡張フローティングアクションボタン: 丸みを帯びたグラデーションのボタンで重要な操作であることを強調している |
「新たにチームを作り、デザイン システムを検討し始めたときにマテリアル デザインに出会いました。非常に堅牢なデザイン システムで、柔軟にカスタマイズでき、多くを学ぶことができます。私たちの選択は間違っていなかったと日々実感しています。」
- Lyft 社デザイン システム リード、リンジー ベリー氏
配車サービスを提供する Lyft のミッションは、ユーザーが A 地点から B 地点までできるだけ早く移動できるようにすることです。この「効率性の追求」は、アプリの体験において最も重視すべき要素であり、「配車を予約する」という重要なアクションにも反映すべきことです。予約を簡単かつスムーズに行えるようにするだけでなく、車の選択、予約、確認という一連のプロセスの中で、乗客が必要とする情報を的確に伝えることができるかどうかが課題です。
円形のフローティング操作ボタンを、マテリアル デザインに新たに追加された拡張フローティングアクションボタンに切り替えたことで、いくつかの重要な課題も解決できました。拡張フローティングアクションボタンを使用したことで、機能的なメリットもさることながら、その色、種類、形の組み合わせにより Lyft らしさも表現できています。
また、ボタンに追加できるラベルの長さも柔軟になったことで、アイコンだけのときに比べ情報を伝えやすくなりました。Lyft の場合なら、Lyft と Lyft Line という 2 種類のブランドの操作を明確に区別できますし、特定の市場にサービスを展開する場合も、それぞれの言語に応じて文字数を増やすなど柔軟に対応できます。目立つ場所に配置できる拡張フローティング操作ボタンは、ユーザーが戸惑うことなく簡単に見つけられるため、配車の予約のような重要な操作に最適です。
Genius: レスポンシブなレイアウト グリッドを作成
 |
| マテリアル デザインで一貫性のあるレスポンシブ レイアウト グリッドを作成した Genius アプリ |
「マテリアル デザインでレスポンシブなグリッド構造にしたことで、ブランド全体を通して一貫性のあるエクスペリエンスを提供できるようになりました。」
- Genius 社アート ディレクター、アリー ボール氏
レスポンシブ デザインが目指すのは、サイズの変更とコンテンツのスタックだけではありません。コミュニティを利用した歌詞表示サービスを提供する Genius は、独自の手法でモバイルとデスクトップの体験に一貫性をもたせました。
Genius のモバイル ユーザーは、スマートフォンで聴いている曲の歌詞やアーティストを調べるという使い方が多いのに対し、デスクトップ ユーザーは解説や注釈を共有するために使用する傾向にあります。ユーザーは状況に応じてモバイルとデスクトップを使い分けているわけですが、アプリのレイアウト グリッドは他のインターフェースのようにシームレスに適応しないことがありました。
そこで Genius では、マテリアル デザインの新たな指針に沿ってプラットフォーム間でレイアウト グリッドを統一し、デバイスを変えても違和感を抱かないレスポンシブなレイアウトを実現しました。
NPR: カードでエクスペリエンスを整理
 |
| カード、リスト、色を効果的に使い、コンテンツを整理してシンプルに表示した NPR アプリ |
「NPR が目指しているのは、コンテンツを視覚的に整理して提示し、ユーザーが欲しい情報をすぐ見つけられるようにすることです。」
- NPR 社シニア プロダクト デザイナー、リビー バウクーム氏
NPR の「ON DEMAND」画面は、複数の提供元からのさまざまなコンテンツを 1 つのインターフェースにまとめることで、厳選されたニュースを手早くチェックできるようになっています。以前はすべてのコンテンツを 1 つのリストにまとめていたため、さまざまなメディアが混在し明確には識別できない状態でした。一方で、ニュースキャスト、ポッドキャスト、ラジオは別々のセクションに分けられていたため、ユーザーからコンテンツを探しにくいとの声が上がり改善策を検討することになったのです。
NPR は、アプリに表示するコンテンツをもっと拡張性の高い柔軟な方法でグループ化することで、ユーザーがコンテンツをひと目で識別できるようにすると同時に、エディターがコンテンツを簡単に管理できるようにしたいと考えました。NPR が解決策として選んだのが、マテリアル デザインのカードをカスタマイズする方法でした。
白の背景に白のカードを配置して見た目をシンプルにし、それぞれのカードに影をつけてコンテンツのグループを表現しました。また、角を大きく丸めた特徴的なシェイプ システムを作成し、NPR ブランドを演出することにしました。
カードだけでなく、番組や出版物のカバーアート、ミニプレーヤーもすべてカスタム シェイプです。カード内のリスト コンポーネントは、必要に応じて拡張して関連コンテンツを表示できます。青色を効果的に使うことで、重要な操作と画面下部のミニプレーヤーを強調し、他にも再生可能なコンテンツがあることを表現しています。
Pocket Casts: プレーヤーの操作性を向上
 |
シンプルな配色手法を採用し、プレーヤーの操作性を高めた Pocket Casts アプリ
|
「画面をもっとうまく切り替える方法があるかもしれない。そう考えて Google に相談したところ、モーションの専門家から助言を得ることができました。これまで円形のボタンにばかり頼っていましたが、新しい方法で楽しく画面を切り替えられるようになりました。」
- Pocket Casts 社デザイナー、クリス マーティン氏
ポッドキャスト プレーヤー Pocket Casts の開発チームは、それまでのインターフェースを一新することを決断しました。新しくなったマテリアル デザインから得たインスピレーションをもとに、アプリの操作性を改善し、使用する色や動きを調整することで、Pocket Casts のブランディングを刷新、強化することにしたのです。特にプレーヤー コンポーネントは、コントロールを追加して動作パターンを充実させました。
たとえば、プレーヤーを開くと、アプリの他の部分（下部のナビゲーション バーなど）がに非表示になるようにしました。再生、一時停止、巻き戻し、早送りなどのコントロールにコレオグラフィを採用して適切な位置に表示することで、その他の項目（たとえば「次の曲」）を表示できる十分なスペースを確保しました。
また、ポッドキャストの多彩なアートワークに合わせつつ Pocket Casts らしさも表現するため、アプリ内で使用する色もこだわって微調整しています。まずポッドキャストのアートワークから色を抽出し、インタラクティブ コンポーネントや進行状況インジケータに使う色として確保するとともに、それらの色のグラデーションの中からサーフェス（たとえば折りたたんだプレーヤー）の色を選ぶことで、過度な色使いにならないようにしています。
Zappos: 背景を使って流れるような操作性を実現
 |
| 新しい背景を採用したことで、いつでもワンタップでコンテンツを検索、管理できるようになった Zappos アプリ |
「モバイルは、カスタマイズされたエクスペリエンスを提供するのに最も適したプラットフォームの 1 つです。マテリアル デザインの [背景] を採用したことで、今まで以上に関連性の高いコンテンツを見つけやすくなりました。」
- Zappos 社パーソナライゼーションおよびモバイル プロダクト ヘッド、アンドリュー グエン氏
Zappos は、以前から検索結果のフィルタリング機能に力を入れてきましたが、マテリアル デザインを使用してコンテンツをもっと簡単に検索、厳選できるようにしたいと考えました。問題は、ユーザーがよく使うコントロール（検索など）へのアクセスを犠牲にすることなく、ユーザーが探しているアイテムをいかに目立たせるかでした。
開発チームは、マテリアル デザインの新しい背景を採用することにしました。背景の背面レイヤにユーザーがよく使うコントロールを配置し、検索やフィルタにいつでもワンタップでアクセスできるという安心感を提供することにしたのです。前面レイヤには、検索結果や厳選されたコンテンツを表示することにしました。
これにより、それぞれのユーザー向けにカスタマイズしたコンテンツをメイン画面に表示しつつ、検索やフィルタに簡単にアクセスできるアプリが実現しました。
Posted by
Takuo Suzuki - Developer Relations Team
