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

iPhone 12シリーズが発表され、iPhone 12/12 Proの予約も始まりましたね。23日配送予定で予約できたので、私も楽しみです。ユーザーとしてはその新しいデザインや機能にワクワクしますが、デザイナー・デベロッパーとしては悩みのタネが増えるかもしれません。

ビューポートのサイズの種類が増え、多くの解像度、アスペクト比、断片化が進むデバイスの複雑さがUIの設計にどのように影響するのかを紹介します。

iPhone 12を含む、iPhoneデバイスのビューポートの一覧

iPhone 12 vs Designers
by Michal Malewicz

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

iPhone 12のリリース

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

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

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

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

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

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

SketchとFigmaのデバイス一覧

SketchとFigmaのデバイス一覧

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

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

iPhone 4のスクリーン

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

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

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

2020年の現状

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

iPhoneの主要デバイスのサイズ

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

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

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

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

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

サイトのキャプチャ

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

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

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

わたし達が構築しているアプリのデザイン

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

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

わたし達が構築しているアプリのデザイン

ボタンの位置も異なる

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

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

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

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

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

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

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

わたし達が構築しているアプリのデザイン

スクロールの高さを合わせようとすると、最適ではない未使用のスペースができてしまいます。これらのスマホの一部はアスペクト比が異なるため、明らかに誇張されているものもあります。これは、一般的な原則を示すことを意味します。

重要な要素は折り目の上に

折り目とは、スクリーンに表示されるもの(スクリーンせずに)とそれ以外のものを分離する目に見えない線のことです。コンセプトは、もっとも重要な要素はアクセスしやすいように折り目の上にあるべきだというものです。

「ユーザーはスクロールしない」という議論がありましたが、現代では少し馬鹿げているように聞こえます(多くの人は毎日300mのスクロールをしているそうです)。

ただし、スクリーン内に関連情報をできるだけ多く表示し、「購入」ボタンを収めるようデザインされたオンラインショップに影響を与える可能性はあります。もちろん、オーバーレイのボタンを用意することはできますが、それでは特定のスマホで情報が切り取られる問題は解決しません。

そのため、オンラインショップの場合は、同じデザインをより大きくすることで、すべてのデバイスで一貫して表示できるようになるので、エクスペリエンスをテストするのが簡単かもしれません。

iPhone 4の時代では、44ポイントの高さ(および@1xで44ピクセルの高さ)ボタンは、320x480のビューポートで同じ44からレンダリングされ、@2xで88ピクセルの高さでした。

iPhone 4の時代

iPhone 4の時代

終わりに

同じビューポートを基準にした解像度が2つだけの時代が懐かしいです。そのおかけで、効果の測定も容易でエクスペリエンスのデザインが楽でした。

現在のこの断片化で、iOSはゆっくりとAndroidと同じになりつつあります。多くの解像度、アスペクト比、デバイスの複雑さが増しています。

sponsors

top of page

©2020 coliss