LIFULL Creators Blog

LIFULL Creators Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。

トップ > アプリをマテリアル対応するときデザイナーがすべきこと　適応編

アプリをマテリアル対応するときデザイナーがすべきこと　適応編

f:id:homes_designers:20160216173212p:plain

 

こんにちは、HOME'Sアプリのデザインを担当しているこばやしです。

今回は「マテリアルガイドラインの上手な使い方」をお話したいと思います。

 

今回のテーマは、

マテリアルガイドラインからは、手段よりも本質を読み取ろう

分解すると、

  • マテリアルガイドラインに載っている手段を真似るでは不十分
  • 本質を自分なりに解釈してみる
  • その解釈から、手段を検討して、アプリに適応していく

以上をデザイナーは留意したいね、という内容になります。

どうしてこれらが大事なのか、それについて「インタラクション」をテーマにお話します。

※ここでの解釈はHOME'Sアプリにおけるものなので、すべて正解ではないです

 

 

インタラクション

なぜインタラクションなのか

前編でもお伝えしましたが、マテリアルガイドラインの3つのデザインの原則の１つである「意味のあるアニメーション」として、インタラクションは非常に重要で、優れたユーザー体験をつくるデザインの要素なので、今回テーマとしてお話します。

 

リップル効果

f:id:homes_designers:20160317121409g:plain

引用元:Material Design Guidlines

マテリアルデザインのアニメーションといえば、タップしたときに波紋のように広がるアニメーションです。これはタップした場所からエフェクトを付けることで、画面のどこをタップしているのかがわかりやすくなります。

入力があった際に、画面内でアクションに応じた返答を返してあげることで、ユーザーへの注意喚起や、UIの理解を助ける働きをしてくれます。

 

連続性

f:id:homes_designers:20160318113042g:plain

引用元:Cards Swipe Animation – MaterialUp

ビュー・画面の切替りの話がでましたが、そこでもインタラクションが重要になります。これまでのWebでは常識であったページ遷移は急にページが切り替わる・閉じてしまうなど動きでしたが、これは明らかにバーチャルな世界でメタファーとは異なります。

このインタラクションを工夫することで、現実的な動きに置き換えることができます。急に画面が切り替わるのではなく、タップした次のページには要素を維持したまま遷移させることで、ユーザーは何が起こっているのかを明確に把握しやすくなります。

 

 

次に、HOME'Sアプリではどのように取り入れているのかお話します。

 

 

インタラクションを考える時、HOME'Sアプリが注意したこと

f:id:homes_designers:20160318151625p:plain

OSバージョンのデフォルトを考える

マテリアル対応を進めていくにあたり無視できないのが、OSバージョン毎の扱いです。ここまで説明してきたマテリアルデザインですが、端末デフォルトで搭載しているのはバージョンOS5.0以上になります。

現在のOSシェアはまだまだ4.x系が多く、そういったユーザーはあまり普段からこのマテリアルデザインのインタラクションに慣れていません。つまり、新しいユーザー体験になります。 

 

ユーザーに余計な学習をさせない

HOME'Sアプリでは

  • OS5系以上では、リップル効果のインタラクションを採用
  • OS4系以下では、デフォルトのインタラクションを採用

としています。

様々なアプリを使う中で、HOME'Sアプリだけインタラクションが他のアプリより明らかに異なると「ユーザーの理解を助けるためのアニメーション」が、かえって驚かれてしまったり、余計なことを考えることに繋がるのではないか、という考えのもと上記のような対応をしています。

 

Google純正アプリを見てみる

f:id:homes_designers:20160318110055p:plain

ご存知の通りGmail、Youtubeなどそれぞれ開発チームが異なるので、マテリアルガイドラインの解釈の仕方もそれぞれ微妙に異なっていて参考になります。

  • OS5系以上では、リップル効果のインタラクションを採用

  • OS4系以下では、デフォルトのインタラクションを採用

純正アプリでも未対応です。

というより、おそらくあえてやってないのかなと思います。繰り返しになりますが、マテリアルガイドラインの本質は全アプリのUI統一をすることではなく、ユーザーがアプリを使うときにスムーズに使えるよう基準を設けることだと思うので、Android4.x以下の端末の場合は従来のインタラクションのままがこの場合「筋が通っている」ということなのかもしれません。

 

まとめ

マテリアルガイドラインからは、手段よりも本質を読み取ろう

大切なのははじめにお伝えしたこれです。

 

マテリアルガイドラインには、マテリアル対応するための手段や方法・事例が具体的に記されていますが、マテリアルデザインの本領を発揮させるためには、手段だけではなく、本質を各自が解釈して各々のサービスにどのように適応していくのが最良かを考えることが大切だと思います。

 

そういった意味では、デザイナーがやらなければならないことに何も変わりはないですね。上手に適応させてより使いやすいアプリを目指しましょう。

 

そんなマテリアルデザインですが、対応を進めていくとHOME'Sではある問題を抱えました。次編ではその内容と解決手段についてお話しします。