これからAndroidアプリをつくるデザイナーのための基礎知識

本記事はFOLIO Advent Calendar 2018、18日目の記事です。 昨日はまっちゃらのReplicated State Machinesでのストレージ故障からのリカバリーでした。─

株式会社FOLIOでUIデザイナーを務めていますコウノアスヤです。

この度、「フォリオ」が、GooglePlay ベストオブ2018 隠れた名作部門の大賞をいただきました！2017年春のキックオフ時に打ち立てた目標「iOS/Androidのストアで賞を獲る！」の片方を達成できたので感慨深いです。

キックオフ当初を振り返る意味もこめて、今回は、これからAndroidアプリをデザインし始めるすべてのデザイナーと、初心を忘れそうな未来の自分へ向けて、開発開始時に頭に入れておくと作業がスムーズになりそうな事柄をいくつかまとめました。

01.OSのマーケットシェアを知っておく

2018年11月時点で、iOSとAndroidのシェアは以下のような感じになっています。

※合計が100%にならないのは、その他のOSを除いているためです。

世界ではAndroidが圧勝、しかし日本ではiOSが圧勝という状態です。

しかし、2016年あたりから日本でもAndroidのシェアが徐々に盛り返してきています。Googleの提唱するガイドライン「MATERIAL DESIGN」の完成度が非常に高く、昨今のGoogle製アプリのUI/UXが非常に高品質だったり、Android端末の方が安価で最先端な機能を搭載していることが多かったりして、最近は日本におけるAndroidの地位もじわじわと上がってきている感じがあります。

02. iOSとは似て非なるものだと理解する

iOSもAndroidも同じスマートフォン向けのOSですが、そこにあるルールや文化は似て非なるものです。フォリオのアプリをデザインし始めるとき、Androidエンジニアの ふじたくに「これ読んどいてーや」と渡されたURLがありました。

【デザイナー向け】これからAndroidのデザインをする人へ

AndroidエンジニアのAAkiraさんがデザイナー向けに書かれた記事ですが、僕はこの記事の冒頭がとても好きです。”キッチンに立ったことない人がキッチンのUI/UXをデザインできるわけがない”、つまり、Androidのアプリを作るならAndroidを普段から使おうねということなんですが、当たり前のように思えて、意外とこれをしないデザイナーが多い印象です。AndroidにはiOSとはまた違った独自のコンポーネントや概念、ルールがたくさんあるので、まずはこれを肌で感じて頭だけでなく体でも理解すべきです。

ちなみに、僕は現在、iOSとAndroid両方のデザインを担当しているので数ヶ月おきにメイン機を変えたりしていますが、割とスイッチコストが高くて大変です。しかし、両方のOSを特性を理解したうえでそれぞれのOSのアプリのデザインを作れるのはかなり強いので、これはデザイナーに課せられた宿命かなと思います。

03. 「MATERIAL DESIGN」をガチガチに踏襲する

Androidのアプリをデザインする時は、基本的には「MATERIAL DESIGN」をガチガチに踏襲しましょう。ガイドラインとしてかなり高品質だし、そうすることで、デザイナーとエンジニアの作業コスト（調査コスト、デザインコスト、実装コスト等）を大幅に削減できます。また、ユーザーからしても、見たことのある、使ったことのあるUIが多いと認知コストがぐんと下がります。そして、作るうえでどうしてもガイドラインに沿うのが厳しかったり、ガイドラインを凌駕する体験を提供できる確信がある場合はオリジナルでUIを作成するのが良いです。そのあたりのバランスが絶妙なアプリとして僕はAbemaTVをよく参考にしています。

Material Designはドキュメントの量が多いので、一度に全てを覚える必要などありませんし、作業前にすべて読み込むべきとも思いません。まずはざっくり流し見してから、デザインするUIに応じてリファレンス的に参照するのが良いかと思います。

04. 「汎用密度」という概念を知る

AndroidでUIを作っていく時、抑えておかないといけない概念として汎用密度というものがあります。

まずは比較的最近に発売されたAndroid端末とそれらの画面スペックをご覧ください。

Pixel3 │ 2160×1080px(720x360dp) │ 440dpi │ xxhdpi
Pixel3 XL │ 2960×1440px(846x411dp) │ 523dpi │ xxxhdpi
Galaxy S9 │ 2960x1,440px(846x411dp) │ 570dpi │ xxxhdpi
Galaxy S9+ │ 2960x1,440px(846x411dp) │ 529dpi│ xxxhdpi
Android One X5 │ 3120×1,440px(891x411dp) │ 563dpi │ xxxhdpi
Android One S5 │ 2160x1080px(720x360dp) │ 439dpi │ xxhdpi
Huawei Mate 20 │ 2244x1080px(748x360dp) │ 381dpi │ xxhdpi
Huawei Mate 20 Pro│ 3120x1440px(891x411dp) │ 538dpi │ xxxhdpi
Xperia XZ3 │ 2880×1440px(823x411dp) │ 537dpi │xxxhdpi
OPPO AX7 │ 1520x720px(760x360dp) │ 271dpi │ xhdpi
OPPO FindX │ 2340×1080px(780x360dp) │ 401dpi │ xxhdpi

画面解像度（px）、画面密度（dpi）に加えて、Androidではこういった無数の画面サイズを考慮した、密度非依存ピクセル（dp）、汎用密度（dpi）という考え方があります。

画面解像度(px)…画面にいくつドットがあるかの値
画面密度(dpi)…1インチにどれだけドットがあるかの値
密度非依存ピクセル(dp)…画面密度に依存しない見た目上のピクセル
汎用密度…画面密度をセットにして6つにまとめたもの

汎用密度はdpiの値を元に6種類に分類されていて、この倍率によって解像度を割ると、密度非依存ピクセル（dp）で実際の表示サイズが決まります。

ldpi │  ～120dpi │ 0.75倍
mdpi │ ～160dpi │ 1倍
hdpi │ ～240dpi │ 1.5倍
xhdpi │ ～320dpi │ 2倍
xxhdpi │ ～480dpi │ 3倍
xxxhdpi │ ～640dpi │ 3.5倍

以上を踏まると、例えば…

Google Pixel3の画面解像度は2160×1080pxだが、画面密度は440dpiで対応する汎用密度はxxhdpi（3倍）なので表示サイズは720x360dp 。

となりますし、

Galaxy S9の画面解像度は2960x1440pxだが、画面密度が570dpiで汎用密度はxxxhdpi（3.5倍）なので、表示サイズは846x411dp。

という感じになります。

これを理解しておくと、特定の端末で表示がズレたりしたときに、「あーそうか、この端末は横幅が320dpだからテキストが折り返しちゃうのか」みたいなことが頭で理解できるようになります。実際のところ、最新の端末は2倍から3.5倍（xhdpi〜xxxhdpi）のものが多数をしめます。が、アプリのサポート範囲によってはこれも変わってくるでしょう。

05. 最もシェアが多い汎用密度でデザインを作る

結論から言うと、2018年12月時点でデザインを作り始めるなら720x360dpでアートボードを作成することを強くオススメします！特に横幅は360dpになる端末がかなり多いので、ここは絶対に揃えたほうが良いです（次点で411dpな感じがあります）。

手元にGalaxyがあるから、家に古いXperiaがあるから、といった理由でデザインモックに採用する表示サイズを決めるのはご法度です。できるだけシェアが大きい表示サイズでデザインを作ることを心がけましょう。該当する端末が手元にない場合は買いましょう。必要経費。

ちなみに、フォリオのデザインモックは730x410dpで作成されていますが、僕はこれを非常に後悔しています。Nexus5Xの画面スペックは以下の様になるんですが、

Nexus5X │ 1920x1080px(730x410dp) │ 423dpi │ DENSITY_420(!?)

おわかりいただけるでしょうか…。

デザイン開始時に手元にあったNexus5Xの汎用密度を反映したのが原因なんですが、この端末の汎用密度は先述した6種類を踏襲しておらず、謎に2.625倍という倍率が採用されています。Googleのリファレンス機だったから信用しすぎたのがダメでした。時間があれば全てのデザインデータを720x360dpに作り直したいと思っています。

06. 「4の倍数」で数字を管理する

Androidに限りませんがコンポーネントやマージンの距離などは、基本的に4の倍数で管理しましょう。汎用密度によって、実際のピクセルは画面解像度の値から1/n倍されるので、4の倍数で作っておくと表示サイズが奇数→偶数になってもズレにくくなります。あと、覚えやすい。

07. 様々な表示サイズで破綻しないようにする

デザインモック上でデザインが完成しても、それで終わってはいけません。Androidには様々な表示サイズがありますから、そのデザインが、例えば320x640dpだったらどうなるか、411x846dpだったらどうなるか、といったところまで考えながらデザインできると良いです（これはiOSも同じですね）。これを怠るとかならずエンジニアから返しがきます。

08. 横画面を忘れずに考慮する

Androidアプリを開発していくなかで、頻繁にエンジニアに注意されたのが横画面（Landscapeモード）の考慮が足りていないことでした。Androidアプリ開発の工数がiOSの1.5倍くらいかかると言われているのは、この「横画面対応」があるからだと言われているそうです。画面ごとに、横画面を禁止することもできるのですが、開発者理由でOSの機能を制限するのはアンチパターンなので、なるべく考慮したほうが良いでしょう。

最終的にはエンジニアを頼ろう

正直なところ、ことAndroidアプリの開発現場に関して言うと、エンジニアの方のほうがMATERIAL DESIGNやその他諸々のAndroidあるあるを理解していることが多いです。昔からiPhoneを使っていたので、どうしてもiOSベースで考えてしまって、何度もエンジニアに「それAndroidだとちゃうねん」と言われまくったのはいい思い出です。まぁ、初期の頃は仕方のないことだと思うので、デザイナーの皆さまはガンガンエンジニアの方々の力を借りましょう。

明日はFOLIOのフロントエンドチームのリーダー、ピカ氏の「プロダクトマネージャーとは BFF である」という記事です。お楽しみに!