iPhone12シリーズが秋に発売されて数ヶ月経ちました。
毎年新しいデバイスが発売されたり、OSやブラウザアップデートされるたびにウェブサイトに要求される要素は変化していくもので、書籍のようにひとつの形で出版して終わり、とはいかないところが非常に頭を悩まされるところですね。
その一つがViewportの存在です。Viewportは端末のベースとなる解像度ですが、ウェブサイトの横幅の仕様の最低値がこれより上にあると、デザインが壊れてしまうこともある厄介な数字です。
さて、今世代と過去数年のViewportのサイズとピクセル比を見ていきましょう。
| 機種名 | ViewPortの解像度(px) | ピクセル比 |
|---|---|---|
| iPhone 12 | 390 x 844 | 3 |
| iPhone 12 Pro | 390 x 844 | 3 |
| iPhone 12 Pro Max | 428 x 926 | 3 |
| iPhone 12 mini | 375 x 812 | 2.88 |
| iPhone SE (2020) | 375 x 667 | 2 |
| iPhone 11 Pro Max (2019) | 414 x 896 | 3 |
| iPhone 11 Pro | 375 x 812 | 3 |
| iPhone 11 | 414 x 896 | 2 |
| iPhone SE | 320 x 568 | 2 |
| iPhone XS Max | 414 x 896 | 3 |
| iPhone XS | 375 x 812 | 3 |
| iPhone XR | 414 x 896 | 2 |
Appleよ、正気か？
iPhone初期に、解像度が統一されていることによってアプリの制作がやりやすいとか何とかいう話があったような気がしますが、もはやiPhoneも生まれて10年。あらゆる層の人々が顧客になったことで、その発言も過去になり、多種多様な要望に答える必要があるのでしょう。
実質iPhoneSEの後継機種であるminiの横幅が375pxであるのは朗報ですね。
手の収まりの良さからiPhoneSEから他機種へ乗り換えを拒んでいたユーザーは少なくなかったので、その横幅の320pxを下限に制作する必要があり、デザイナーが苦心するポイントでもありました。
ただし、iPhone 12 miniは高額なので、生産終了したスマホで耐えてきた人たちが乗り換えるかは…不明ですね。
ちなみに、Androidの有名どころ・Youtubeあたりで話題になっているやつはこのような感じ。
| 機種名 | ViewPortの解像度 | ピクセル比 |
|---|---|---|
| Galaxy S20 | 390 x 844 | 4 |
| Pixel 5 | 393 x 851 | 2.75 |
| Pixel 4a | 393 x 851 | 2.75 |
| Xperia 1 | 411 x 960 | 4 |
| Oneplus 8 | 412 x 915 | 2.625 |
国内で知名度こそ無いがガジェットユーザーに評判が高いスマホのViewportは検索したら出てくるものの、逆に国内のMVNOでシェアがそれなりにあるAquosとかOPPOは調べても出てこない。ガラパゴスみを感じます。
iPhoneの画面は最も高精細だという刷り込みがRetina以降ありますが、実のところは何年も前からAndroidの上位機種はとっくにiPhoneよりも解像度が高いです。
ちなみに小ささと、実質無料であることで去年注目されたRakuten miniですが、実は360pxだったりします。
どちらにせよ、各社それぞれに美学によって、解像度の多様さは混乱を極めている、ということですね。
刻々と変わる環境から、どうやって仕様を決めるのか？
さて、こうした状況の中でスマホサイトの横幅は何を基準に決めるべきでしょうか。
流行をに倣うか、参考としたサイトを真似るか、それとも可能な限り何でも表示できるようにするか…。
COLSISではこれまで、なるべく横320pxの表示に対応してきました。安全性を優先するために、下限値を低めに見据えておくことが多かったということです。
しかし、下に合わせるということは、同時に表現の自由度を失うということでもあります。たとえば、幅が小さければ横に並べられるボタンもせいぜい２つになりますし、PC表示している画像をスマホでは諦めることもあり得ます。モバイルファーストのレスポンシブであればPC側のデザインや構成を制約することに繋がります。安全性に気を取られて見落としがちですが、一方で表現の可能性が成約されているわけですね。自由度の低さはクオリティ向上の鈍化や、プロジェクトごとのバリエーションの貧困さにも繋がってくるため、長期的に考えると看過できない問題です。
つまり、仕様というものは全体のクオリティに影響するので、社内の仕様のテンプレートに頼りすぎず、都度検討して決定する必要があるということですね。（ここからはViewportに限らず、すべての仕様の話になります）
ならば、どうすればよいかということで…僕の考える一つがこれです。
対象ユーザーのボリュームゾーンを基に、正しく仕様を見積もる（正しくやらないことの定義もする）
当たり前のように聞こえますが、とても大事なことです。
クライアントに対し、既存顧客や、今後のターゲットについて詳細に聞き取り、そこから適切な仕様を検討します。そして重要なこと、勇気を持って「やらないこと」の提案もしていきましょう。
たとえば、プロジェクトが国に関連する組織のサイトであればより多くの人が閲覧できる必要があるので、Viewportはかなり低い幅からカバーするのがよいでしょう。ブラウザはIEをサポートする可能性が高いです。しかし、ページの軽量化を最優先するならばウェブフォントは諦めたほうがいいかもしれません。
逆に、高度なグラフィックを使用したエンタメのウェブサイトであれば、全体の足を引っ張る可能性のある、非モダンブラウザや低スペック端末をお断りして、Viewportもミドルスペック以上に全力投球のサイトを作ったほうが、SNSでバズったり、ショーケースとして注目されて、プロモーション最も効果的な施策になる可能性もあります。
諦めることもしっかり定義することで、限られたリソースの配分を最適化し、サイト制作の効果を最大化することを狙っていく、ということです。
「やらないほうがいい」とアドバイスするのは説得力のある説明が必要ですし、クライアントにも勇気ある決断を迫られる部分ですが、思い切った提案が、お互いにとって幸せかもしれませんよ！
豪華全部入りでやりたいところ…なんですけどね。日本人はこれを、目指しがち。人も時間も有限ですから、その中でのベストプラクティスを模索いくのはどうでしょうか。
GalaxyFoldの背面とか、iPadのSplit Viewまで気にしてあげる人が世の中にはいるようですが…僕は聞かなかったことにします。
変なディスプレイが主流にならないことを祈ります
執筆者
