Webプロダクトのデザイナーがネイティブアプリのデザインでつまずいたこと4選

こんにちは、デザイナーのさかたです。
新卒からWebプロダクトのデザイナーとして活動してきましたが、この1年半くらいiOSとAndroidのネイティブアプリのデザインも担当しています。
その中で、Webと違うなとか、くっそ不便！とか、これは理解しないとまずい…と思うなどしたことを解決できたことから未だ謎なことまでつらつら書き残しておこうと思います。

iOSアプリで奇数値のタイポグラフィが普通に使われてる

Webプロダクトのデザインをしていると基本的にあらゆる値において奇数値は嫌厭されると思います。
しかし、Apple Developerのガイドラインではしっかりタイポグラフィの奇数値が定義されており普通に使っていいんだなぁというのが驚きでした。純正アプリはもとより、他社さまのアプリをトレースしていても奇数値を使用しており（ガイドラインにあるんだから当然）、目から鱗な一件でした。
調べてみても奇数値を使用している根拠となるの記述は見つけられなかったので、いったんそういうものということで理解しました😇
ちなみにAndroidのMaterialDesignでは偶数値で定義されていました。

現れた単位dp、sp

こちらはAndroidのデザインをしているときに遭遇したものです。
今までWebプロダクトのデザインをしている中で、px・rem・vw/vhなどさまざまな単位を目にしてきました。その度にこれはなんぞやと調べつつしっかり理解したり、なんとなくの理解でいい感じに使ってみたりしてきましたが、またまた新しい単位に出会ってしまいました。正確には以前から存在を認識していたものの、きちんとdp、spに向かい合わなければならなくなりました。
いまだにdp、spについては正確に理解できておらず…。Android を搭載したあらゆるサイズのディスプレイで綺麗に表示を保つための単位と解釈しています。
現状、Androidのデザイン作業では画面幅360で制作しているため、小数点切り捨てで1dp=1px（font-sizeは1sp=1px）で制作しています。

実装してもらったデザインの確認は目視…？？

Webプロダクトだと実装してもらったデザインをテスト環境などでチェックする際にブラウザで確認し、目視で判断がつかないような箇所はブラウザのデベロッパーツールを使用して具体的な値を確認しますよね。
ただネイティブアプリのデザインはブラウザを使用しないのできわどくてもデザイナーが具体的な値の確認ができません。
なので、colorやfont-sizeのなどきわどい部分については目視で違和感があった場合にエンジニアさんに都度確認していただき、合ってます or 間違ってましたというラリーをしていました。
そんなこんなでデザイナーもローカル環境を構築して実装内容を確認するしかないのかと思っていました。そんな時にエンジニアさんともっといい解決策ないかなぁと探していたところHyperion-iOS / Hyperion-Androidという全てを解決するライブラリを見つけて導入していただきました！
簡単に言うと、アプリ上で上記のライブラリを使用すると選択した箇所のスタイルが表示されたり、要素間のmarginを確認することができます。（他にも色々機能があります）
Hyperionのおかげできわどいcolorやfont-sizeの違和感も全て目視に頼らず確認することができて、無駄なラリーも発生せず生産性爆あがりでした！

Androidアプリのデザインの仕方がわからない！！

これはかなり致命的だったのですが、さかた自身がiPhoneユーザーであるためAndroid端末をろくに触ったことがありませんでした。知っていたことといえば、ナビゲーションバーにあるバックキーをタップするとアプリ内外問わず一つ前にみていた画面に戻れるということくらいです。アサイン当初、えいやでデザイン着手してみたものの早々にこれはまずいぞと気が付きました。
当然なんですが、細かいところで地味に設計が異なるためWebやiOSの感覚でデザインしていると、これユーザー体験微妙かもしれんなと思う場面が多々ありました。
そこで普段iPhoneで使用しているアプリを手元のAndroid端末にダウンロードして体験設計の違いなどをしっかり確認するようにしました。
普段の些細な場面でも意識的にAndroid端末を使用したりなどしてようやく最近少しづつこういう時はこういう設計が良さそうというのがわかってきました。
基本的にはMaterial Designをがっつり踏襲して、プロダクト固有のモノもなるべくMaterial Design寄せていけば良いと思います。（さかたはそうしてます）
今回さかたはAndroidアプリのデザインでつまずきましたが、普段Android端末ユーザーの方は逆にiOSアプリのデザインでつまずくかもしれないのでお気をつけください。

さいごに

ネイティブアプリの初心者デザイナーが約1年半の間につまずいたこと4選でした。
周りにネイティブアプリデザインの経験者もいないので、いまだにかなり手探り状態ではありますが、エンジニア陣にも助けていただきつつ今後も考えうる限りユーザーの使いやすいアプリの設計を心がけていきます！