はじめに

iPhone12が本日10月23日発売されました。皆様買い替えましたでしょうか。
私は現在iPhone XSを使用しているのですが、これいとって使用感に不満がないため12の購入は一旦見送る予定です（LiDARはとても興味がそそられるのですが）。

iPhone12は5G、LiDARといった技術的な側面にフォーカスが当てられがちですが、WEBサイトを制作する側として見逃せないポイントがありました。それは画面の解像度です。結論から申しますと、iPhone12の登場でビューポートは今までより増えました。今回はiPhoneのビューポートからレスポンシブ対応のあり方について考えていきます。

iPhone12の解像度

まず、先日発表されたiPhone12の解像度を見てみましょう（わかりやすくするため横x縦の順で記載しています。公式サイトは縦x横の順番です）。

【参考】
iPhone 12 Pro と 12 Pro Max – 仕様 – Apple（日本）
iPhone 12とiPhone 12 mini – 仕様 – Apple（日本）

上記の解像度をデバイスピクセル比3で除するとビューポートのサイズは以下のようになります。

これだけ見ると、iPhone 12 miniで360という横幅のビューポートが追加されたのかと思うかもしれません。私自身、初報を聞いたときはそのように思いました。が、事実は異なります。正しいビューポートは以下の通りになるようです。

実際はデバイスピクセル比2.88を除算したものになりiPhone 12 miniのビューポートは375 x 812となるようです。これはiPhone Xとまったく同じ大きさとなります。ですので、制作においてiPhone12 miniについてはまったくこれまでどおりの制作方法でよいでしょう。問題は12 / 12 Pro /12 Pro Maxの3つです。これらのビューポートについてはまったく新しい大きさになります。

【参考】
https://uxdesign.cc/iphone-12-vs-designers-ca8bac776dad

ビューポートが多いと何が起きるのか

参考サイトでも挙げられたように、ビューポートが増えると設計が複雑になりがちです。
さてここでもう一度、iPhoneの主要なビューポートを見てみましょう。

iPhone6以前のものは、iOS14に対応しないため切り捨てましたが、それでもビューポートの多さには目がくらむ思いです。横幅も違えば縦幅も違う。当然のことながら見え方もまったく違ってきます。

さて、ここで一旦想定の話をしましょう。クライアントからの要望で、どうしてもある要素をファーストビューに入れたい（はみ出て表示されるのはNG）という相談を受けたとします。

分かりやすくグラフィカルに見てみましょう。次の画像はamazon.co.jpのトップページを各デバイスで見たときどのように映るのかをエミュレートしたものです。amazonのようなECサイトを制作していて、最後に各デバイスの見え方をチェックしている、というシチュエーションです。

どうでしょう。
もし、あなたが技術的なことをまったくわからないECサイトの運営者だったら、次のように思うのではないでしょうか。

「デバイスによっては商品画像が見切れてしまっている！　すべてのデバイスで見切れず画像を綺麗に見えるようにしてくれ！」

しかし残念ながら、それを達成するには大きな困難と時間的コストを伴います。仮にすべてのiOSデバイスに対応できたとして、ではAndroidデバイスはどうするのかという問題もありますし、今後出てくるだろうすべてのデバイスに対応していくのかという問いも当然出てくるはずです。

今あげた例は、いささか誇張したものではありますが（そもそも商品画像を常にFVで見せたいならデザインを再考した方がよいでしょう）、「ビューポートが増えると複雑性が上がるという問題が起きる」ということを知るきっかけ程度にはなったのではないかと思います。

iPhone4の時代、ビューポートはたったの２つでした。
それからモバイル端末の画面は大型化の一途をたどっています。現在では様々な端末が発売され、それぞれ別個の表示領域を持っています。これにより、それまでの狭い表示領域では表現できなかったリッチな体験を得ることができるようになりました。それは同時に、これまでの単一的な考え（スマホだからこの画面サイズで考える）は通用しなくなる未来が来るのではないのかという示唆でもあります。その時に求めらえるのはUXを高める画面の設計ができるデザイナーと、それを再現するエンジニアの力です。

おわりに

iPhone12の登場でビューポートが増えたことでレスポンシブ対応はさらに複雑化する方向へ向かいました。同じiOS端末を使っていても、人によってはビューポートがまったく異なるというこの断片化現象は悩ましい問題です。しかし、弊社ではレスポンシブ対応に力を入れており、スマホ、タブレット、PCでの動作をしっかりとサポートしております。

コーポレートサイトにはこれまでに制作したWEBサイトの一部を掲載しておりますので是非一度ご覧ください。サイト制作のご要望がございましたら、弊社サイトのフォームなどからお問合せをして頂けますと幸いです。

➡まずはお気軽にお声がけください。 よろしくお願いいたします。