ここ数年Web界隈の技術の進歩は素晴らしいです。僕が勉強し始めた頃はちょうどHTML5が勧告されるかされないかの頃で、通信制の3ヶ月くらいの学校に通っていたのですが教科書には載っているけど非推奨になるものなどがあったり、書き方がすごくシンプルになるとわかっていながら長い宣言文を書かされたりと学校って本当に意味ねーなーと思って1ヶ月で行くのをやめたのを思い出します。ほんとお金がもったいなかったです。
技術の進化に伴って周辺機器の進化もすごくて、僕が初めて買ったモニターは27inchのApple Thunderbolt Displayでした。重厚感があってすごくかっこよかったのを覚えています。今使用しているのはLG UltraFine 5K Displayです。解像度はざっと2倍になりました。iPhoneも当時は5だったのが今ではXが発売されています。こういった進歩に制作者はいつも頭を悩ませられます。その一つにページ幅の設定があります。
Webページをつくる際の幅はどうしたらいいのか
おしゃれなコーポレートサイトやブランディングサイトならフルサイズもありだと思いますが、Yahooや楽天市場などのECサイトでは老若男女が訪れるのでそうはいきません。制限があったり、ブラウジング環境も様々だったりして思った通りに表示されていないなんてこともあるからです。ラップトップ、デスクトップ、はたまたものすごく古いモニターで見ているかもしれません。
今回はそんなサイトのページ幅をどうすればいいか、最適なサイズを制作の観点からも踏まえてご紹介したいと思います。
日本のディスプレイの解像度シェア率
2017年4月~2018年4月までの1年間の最新のパソコンモニターの解像度のシェア率をstartcounterで調べてみました。1920*1080のフルHDと呼ばれるサイズがダントツに多いです。次点で1366*768です。Appleで言うと、今は生産が終了しましたがMacbook Airの11インチのディスプレイがこのサイズでした。Otherには、5k/4kのハイエンドモデルや、ワイドタイプのものが含まれるのかなと思います。余談ですが、LGから出てるワイドタイプ、湾曲しててかっこいいですよね…。使ってみたいです。
最適なサイズ
シェア率のデータを確認したところで、最適なサイズを考えたいと思います。データに表示されているサイズの中で最低サイズは1280pxです。なのでページ幅の最大サイズを1280pxにすれば、とりあえず全てのディスプレイで閲覧できると言うことになります。しかし僕もそうですが、世の中フルスクリーンでブラウジングする人ばかりではないので1280pxで設定するのは少し幅に遊びがなさ過ぎます。
結果的に言うと1080pxが個人的にすごくおすすめなページ幅です。
1080pxがおすすめな理由
1080pxがおすすめな理由を説明します。まず、Yahoo!ショッピングのデフォルトの設定は950px。今の時代のモニター環境だと左右の余白が多くなってしまい画面に表示される情報量が少なくなります。サイトを見ていて少し古臭いような感覚を経験したことがあるかもしれませんが、そういったときは大抵ページ幅が1000px以下だったりします。特別な理由がない限り1000px以下のページ幅は今の時代には合っていないと言えます。
「1000px + 80px」
この1000+80pxは魔法の数字です。ここからは制作目線で解説します。1080pxは実に扱いやすい数字なのです。昨今流行りのグリッドレイアウトはページを縦に均等分割してデザインしていきます。ECサイトはバナーを並べていくことが多いのでグリッドレイアウトとすごく相性がよく、またこの1080と言う数字はグリッドレイアウトとすごく相性のいい数字なのです。
| 2分割 | 540px |
|---|---|
| 3分割 | 360px |
| 4分割 | 270px |
| 5分割 | 216px |
| 6分割 | 180px |
| 8分割 | 135px |
| 9分割 | 120px |
すごく割れます。12分割でも90pxで割り切れます。なんとも使いやすく昨今のモニター事情から見てもちょうどいいサイズではないでしょうか。これだけ割りやすい数字だととページデザインもすごく作りやすいと思います。これでバナーのサイズに悩まなくて済みます。
おわりに
魔法の数字1080pxはいかがでしたでしょうか？ターゲット層にモダンな環境が多そうならあえてページ幅を1280pxにするのもアリだと思います。個人的には、PCで閲覧されることを想定したページを制作する際に、ページ幅に困ったらとりあえず1080pxにしておけばいいかなと思っています。この記事を書いているうちに1080と言う数字がとても好きになってきました。万能過ぎる1080px。もしページ幅に悩んでいたら一度1080pxを当てはめてみることをおすすめします。病みつきになるかもしれません。
