2018年03月30日

Webデザインメモ

iPhone X用のデザインの注意点

デザイナーの山本です。

今月、スマホをiPhone 6からiPhone Xに買い換えました。
憧れの顔認証のログインは、慣れるととっても快適です!

しかしながら、使っていて気になったのが、
アプリの微妙な見え方の違いです。

特に、iPhone Xに対応していないアプリは、
画面の表示が一回り小さかったり、以前のiPhoneで見た時と比べてデザインが微妙に変わっていたりしました。

そこで、iPhone Xユーザーのための
押さえておきたいデザインのポイントを3つご紹介します。

1.(縦で見た場合、)上下で切り取られるデザインは、やめよう!
iPhone Xからアプリを閲覧する際に気が付いたことが、アプリによって上下がスパッと切れてしまっていることです。
このように「セーフエリア」(iPhoneXの上部真ん中にある、角丸のカメラ部分などと被らない、安全な領域)の形でページを表示させるのは、非推奨だそうです。

上下の背景とコンテンツが溶け込むようなデザインにする必要があります。

(参照:https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/)

2. Touch ID以外の方法でも、簡単にログインできるようにしよう
iPhone Xはボタンが廃止されていますので、当然Touch IDはありません。
例えば、Suicaのアプリは現在Touch ID機能に対応していますが、Face IDには対応していません。そのため、毎回ログインするたびに、パスワードを要求され、煩わしさを感じています。

できれば、Face IDに対応するか、いちいち複雑なパスワードを入れなくて良い工夫をしたほうが良いかもしれません。

3. フォントが、一部明朝体になる。
これは、iPhone Xだけなのかどうかは分からないのですが、アプリを表示した際に、一部明朝体になってしまうような現象がみられました。
今の所、はっきりとした原因・対処は分かっていませんが、フォントの指定には注意が必要です。

いかがでしょうか?
今後は、iPhone Xのような、ディスプレイが綺麗な長方形ではない画面への対応が不可欠になるのではないかな、と思います。

画面の表示のしかたに細心の注意を払いながら、
使いやすいアプリデザインに改良していけたらと思います。