読者です 読者をやめる 読者になる 読者になる

inFablic

Fablic開発者ブログ

Android版フリルにおけるMaterial Designへの対応とガイドラインの捉え方

こんにちは。Androidエンジニアの @nakamuuu です。

1月24日(火)に株式会社Loco Partnersさんのオフィスで行われた App Talk Night by Relux に参加させていただきました。このイベントはGoogle Playの「ベストオブ 2016」に選出されたアプリデベロッパー5社から開発体制や受賞に至るまでの裏側についてお話しさせていただくというものでした。

自分からは 「Android版フリルにおけるMaterial Designへの対応とガイドラインの捉え方」 というテーマで、フリルでは早期からMaterial Design対応を進めてきたこと、そしてその過程で僕らが感じてきたMaterial design guidelinesに準拠することのメリットを紹介させていただきました。

発表内容の概要

  • Android版フリルにおけるMaterial Designへの対応
  • Material design guidelinesに準拠する開発者側にとってのメリット
    • ① エンジニアのデザインに対する意識の変化
    • ② フレームワークに乗っかることの旨味

Android版フリルにおけるMaterial Designへの対応

Material design guidelines が公開されたのはGoogle I/O 2014が開催された2014年6月のことでした。

Material Designは以下のようなベースとなる思想・哲学に基づいて構成されたデザインです。Androidアプリではユーザーに統一性のある使用感を提供するためにMaterial design guidelinesに準拠して設計することが強く推奨されています。

  • Material is Metaphor : 現実世界の物理法則を適用したマテリアルの概念
  • Bold, graphic, intentional : 印刷物デザインを応用した大胆かつ意識的なデザイン
  • Motion provides meaning : 効果的で一貫した意味のあるオブジェクトの動き

フリルで最初にMaterial Designに対応したバージョンをリリースしたのは2014年10月、ガイドラインの提供から4ヶ月後のことでした。それから今まで2回の大規模なデザイン変更を伴うリニューアルを行ってきましたが、それに合わせて細かな部分でガイドラインに準拠できていなかった部分も改善を行っています。

f:id:nakamuuu-muuu:20170130171124p:plain

Material design guidelinesに準拠する開発者側にとってのメリット

Material Designへの対応というとアプリの使い勝手の向上を通してのアクション率の改善など、ユーザーのエンゲージメント周りに関心が寄せられることも多いのではないかなと思います。実際、フリルではMaterial Designへの対応で操作性を改善し、ユーザーの継続率や滞在時間などを向上させることができました。この辺りの詳細については、一昨年に取り上げていただいたAndroid Developer Storyの記事および動画を参照していただければと思います。

developers-jp.googleblog.com www.youtube.com

今回の発表では、こういった使い勝手の向上によるユーザーにとってのメリットやエンゲージメント周りの変化ではなく、Material design guidelinesに準拠したことによる 「開発者側にとってのメリット」 にフォーカスを当ててお話しさせていただきました。

① エンジニアのデザインに対する意識の変化

Material design guidelinesに準拠したことによる開発者側にとってのメリットで、1つ目に挙げたのは 「エンジニアのデザインに対する意識の変化」 という部分です。

「デザイン」という分野は美的な感性による部分も大きいため、苦手意識を持っているエンジニアの方も多いと思います。Material design guidelinesではこの記事の前半で紹介したような思想・哲学が上手く言語化されていて、かつ、それが具体的な数値・寸法を持った細かい仕様にまで落とし込まれています。簡単に言うと エンジニアが理解・納得しやすいガイドライン なのではないでしょうか。

こういったガイドラインがあったとき、どういった変化が起こるかというと、「エンジニアもガイドラインさえ把握していれば、ある程度共通の知識や言葉を知った上でデザイナーとやり取りできる」という状態になります。Fablicでは、こういったエンジニアとデザイナーとの踏み込んだやり取りというのは以前からもあったのですが、やはり、エンジニアが具体的な根拠を示せるのと示せないのとでは大きな違いがあると思います。

これは決して、デザイナーさんが作ったデザインにあれこれ注文をつけたりするということではありません。デザインに対して時に意見を言うこともしながらも、エンジニアが納得感を持って実装作業に入ることができるのが大きなメリットなのではないかと考えています。

② フレームワークに乗っかることの旨味

例外はあるかと思いますが、基本的にフレームワークで用意されている「標準」と言われるUIから離れるほど、実装のコストは上がるものです。そのため、設計者はその「標準ではないUI」で達成されるユーザー体験の向上と実装コストを常に天秤にかけながら設計を行うべきであると思います。

ただ、今までのAndroidアプリでは、「標準ではないUI」を選択せざるを得ない状況も多々あったのではないでしょうか。Android 4.4以前の「標準」であるHoloテーマは無機質な見た目で、リッチなユーザー体験を生み出しにくいものになっていました。また、Playストアが「標準」に従っていないアプリで溢れかえっているので、自分たちのアプリも「標準」でなくなったところで体験が悪化するリスクが低かったという状態でした。

そういった状態はMaterial Designの登場後に大きく変わったように思います。「標準」のMaterialテーマで十分にリッチなユーザ体験を実現することが可能になりました。さらに、多くのアプリがMaterial Design対応を進めていく中で、自分たちのアプリだけが「標準」でなくなることでの体験の悪化のリスクは高まっているはずです。

フリルでは昨年10月の大規模なリニューアルに合わせて商品画面を改修しています。複雑なスクロール時のエフェクトを含むレイアウトも、Android Design Support Libraryで提供されているコンポーネントを用いることで少ない工数で実装することができました。

https://cdn-ak.f.st-hatena.com/images/fotolife/n/nakamuuu-muuu/20161223/20161223014136.gif

商品画面の改修におけるCollapsingToolbarLayoutを用いたレイアウト構築については以下の記事も合わせてご覧ください。

in.fablic.co.jp

Material design guidelinesに準拠しているからこそ少ない工数でリッチな体験を実現できるということを、 「フレームワークに乗っかることの旨味」 として紹介させていただきました。

最後に

今回の発表ではMaterial Designへの対応で使い勝手やエンゲージメントの向上の他に、開発者にとっても大きなメリットがあるということを簡単に紹介させていただきました。

既存のアプリをMaterial Designに対応させるのは大きな工数が発生します。しかし、Android Design Support Libraryを始めとする各種ライブラリ・リソースの提供により、フリルが対応したときよりもMaterial Designを導入しやすい環境は整ってきていると思います。

Material design guidelinesが公開されてもうすぐ3年が経ちますが、Material Designに対応していないアプリはまだまだ多く見かけることがあります。改めて今のタイミングで対応を検討してみてはいかがでしょうか。


Fablicでは、Material Designに準拠した使いやすいユーザーインターフェースの構築やAndroid Wearアプリの対応などプラットフォームへの最適化に力を入れてAndroidアプリの開発を行っています。このような環境で共にプロダクトを作り上げていきたいアプリエンジニアの方のご応募もお待ちしております!