iPhone 12で、ビューポートのサイズの種類が増えすぎ！デバイスの複雑さがUIの設計にどのように影響するのか

Post on:2020年10月19日

iPhone 12のリリース

10月13日、Appleは毎年恒例のiPhoneイベントを開催し、4つの新しいiPhoneを発表しました。中でも話題になったのは、iPhoneの新しいデザインや機能についてでしたので、それらの話題はこの記事では割愛します。

断片化がUIデザインにどのように影響するか

iPhone 5/iPad Proのスタイルに戻るのは素晴らしい選択だと思います、私は個人的にそのデザインが大好きです。また、Proの機能やMiniでより小さなiPhoneを利用できるというのも気に入っています。MagSafeによる磁気充電は、Appleの将来のラップトップ（ARMベース）の希望を取り戻すこともできるでしょう。

だけど、このメタルとガラスの中には象がいる

あなたがスマホアプリ（もしくはレスポンシブWebサイト）に携わっているデザイナーであれば、Appleのデバイスの選択肢が増えていることは知っているでしょう。
現在、SketchとFigmaのアートボードのプリセットはこんな感じです。

SketchとFigmaのデバイス一覧

しかし、iPhone 12の登場により、この景観をさらに複雑にします。Steve JobsがRetinaディスプレイを搭載したiPhone 4を発表した時のことを覚えていますか？

Jobsは、基本解像度は他のすべてのiPhoneとまったく同じの320x480、2倍なのはピクセル密度だけだ、と言いました。

基本解像度はまったく同じ、違いはピクセル密度だけ

これは、UIデザインにとって素晴らしくシンプルな時代でした。すべてを320x480でデザインし、Retina用（640x960）に@2xで書き出すだけです。

これは非常に「Appleらしい」です。
不必要な複雑さを取り除くことを目的とした、明確で分かりやすい道筋です。

2020年の現状

2020年現在、iPhoneの主要デバイスのビューポートのサイズをご覧ください。

初代iPhone SE(320x568)を入れてないのに、こんなにあります。

375x812や390x844の解像度はどこから来たのでしょうか？
まぁ、単に主要な解像度の1/3なのですが、非常に複雑だと思いませんか？

これはどのように処理されますか？

iPhone 12と12Proは下記のツイートによると、390という新しい幅になります。

iOS 14 iPhone resolutions for developers:

iPhone 4”: 320 x 568 pt
iPhone 4.7”: 375 x 667 pt
iPhone 5.5”: 414 x 736 pt

iPhone 5.4” & 5.8”: 375 x 812 pt
iPhone 6.1" (2020): 390 x 844 pt

iPhone 6.1” (2018–2019) & 6.5”: 414pt x 896 pt
iPhone 6.7”: 428 x 926 pt

— Steve Troughton-Smith (@stroughtonsmith) October 13, 2020

しかし、iPhone 12 Miniは、iPhoneXと同じ375x812のダウンスケール解像度を取得します。このアプローチの問題点は、実際には3倍の比率ではなく2.88倍であるということです。確かに、オブジェクトの表示方法に関する実際の計算のほとんどはコードで行われるため、スクリーンが小さい場合はそれほど問題にはなりません。

Ukiyo -わたし達が構築したクリエイティブのためのマインドフルネスアプリ
現在利用可能なすべてのサイズで表示しています。

どのようにデザインすればよいか？

現在わたし達が構築しているアプリのデザインで例を示します。
ご覧の通り、これは理想的なデザインではありません。特に上下のスペースを正しく表示するには、スマホごとに調整する必要があります。一部のスマホでは、メインボタンがスクロールを必要とするので、これらのデバイスのためにカード全体のフォントサイズを調整しなければなりません（これは開発中に起こります）。

左: 画像を拡大縮小するだけの調整、右: 特定の解像度ごとに必要な調整

もちろん、Swift UIやその他のコーディングの進歩により、もう少しシンプルになりましたが、デザインの段階では、より大きなデバイスでどのように見えるかを確認したいと考えています。また、各デバイスでプレビューするためにSketch Mirrorを使用しており、必要以上の作業を行うことができます。

ボタンの位置も異なる

今までは、375x812のiPhone Xのビューポートとより大きな414x896用にデザインしていました。個別のスマホをカバーし、他のデバイス上でより多くのコンテンツに合うよう（または単に大きくなるよう）にレイアウトを調整していました。

しかし、390と428の新しい幅はどうすればよいでしょうか？

単純にそれらのスマホ用にデザインを大きくすればいい？

答えは、状況によって異なります。
コンテンツを消費する場合、UIは比較的同じサイズを維持できますが、コンテンツ自体は拡大され、はるかに高品質（ピクセル単位）になります。

ただし、すべてのデザインを拡大縮小するだけでは、特定のサイズに設定したフォントのバランスが崩れてしまう可能性があります。大きすぎたり、小さすぎたり、幅が広すぎたりするかもしれません。

また、一部の拡大または縮小はすべてピクセルの近似値に基づいているため、非常に細いラインでアンチエイリアスが悪くなる可能性があります。つまり、細いフォントを使用している場合は、可読性が損なわれるかもしれません。

AppleはiOS 7以降、太いウェイトのフォントを導入し、細いフォントのほとんどを取り除くことで、この問題を解決しました。しかし、一部のデザイナー（そしてさらに多くのプロダクトオーナー）は何らかの理由で「ミニマル」および「優れたデザイン」として認識しているため、これらの細いフォントを好んで使用します。