• FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業

Webデザインメモ

日々学ぶウェブデザインについて、すぐに役立ちそうな情報を綴っていきます。Webデザインメモ

2018年3月30日(金曜日)  (山本 真里奈)

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のような、ディスプレイが綺麗な長方形ではない画面への対応が不可欠になるのではないかな、と思います。

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