Webサイトのデザインをするときのサイズはどうする？

自分がwebサイトのデザイン作り始めた頃(10年以上前ですけど)、スマホは横320pxでLPを作っていました※PCは1500ぐらいだったかも※ちなみに自分がweb制作しだしたときはガラケー対応サイトがまだまだある時代でした。PCもAdobe Flashをばりばり使っていた時代です。

最近はPCは1920px、スマホは375px(retina考慮でツール上では750px)で作っています。

しかし、スマホのサイズも多様化し、タブレットのシェアも上がってきておりこのままのサイズで作ってもきちんと見られないのではないか、と思うことが増えました。

そこで今のwebデザイン(LP)の制作サイズを調べなおしてみます。

chatGPTに最近の画面サイズを聞いてみた

まずchatGPTに聞いてみました。

「質問：webサイトのデザインを作ろうとしているのですが、最新の対応サイズはどのくらいですかねえ。例えばFigmaでつくるときとか、PC・スマホ・タブレットそれぞれ今はどのサイズで作るのがよいか教えてください。」

答えは下記でした

★PC

• 1440px × 1024px: これは現在デスクトップで最も一般的な解像度の一つです。大多数のユーザーがこの解像度か、これ以上の解像度を使用しています。

• 1920px × 1080px: これはフルHD解像度で、多くのモダンなデスクトップやノートパソコンで採用されています。特にビデオや画像が重要なウェブサイトには適しています。

★スマホ

• 375px × 667px: iPhone 6/7/8のサイズで、これを基準にデザインすることが多いです。

• 360px × 640px: Androidデバイスの中でも広く使われている基準のサイズです。

• 414px × 896px: iPhone 11 Pro Maxなど大画面の最新スマートフォン向けです。

★タブレット

• 768px × 1024px: iPadの標準解像度です。ほとんどのタブレット向けデザインで使われています。

• 1280px × 800px: 多くのAndroidタブレットで使われているサイズです。

パソコンは1440pxが多いんですね。たしかにFigmaのサイズテンプレートでも1440が一番大きいサイズでありました。ただ「これ以上の解像度を使用しています」ともありますし、1920でもよいかなあと思います。

スマホは375pxが多いとはいえ、414pxも増えているなら414pxで作ってもいいかなと思いました。最低360でも崩れずみられるようにデザイン調整すれば問題ないかと※320はいったん考慮しないようにしますアナリティクスとかみて対象のサイトのデバイスが多ければ考慮するとかかなあ。

また、Retinaの考慮も必要なのは変わらないようなので、サイズ２倍～は必要だなあと思います。

タブレットは768px、これは昔から大きく変わらない気がします。コスト・工数や要望、ターゲットなどと相談ですがタブレット対応するかどうかの優先度は自分の中では一番低いです。最悪、スマホ版が表示されていてもまあ見えなくはないので。

結論として、デザインツール(Figmaもしくはイラレ、フォトショ)で作る際はPCは1920px、スマホは375px(ただし画像は倍のサイズ)、タブレットは768pxで今後行こうと思います。

内側のサイズはどのくらいで作るの？

サイズはわかったんですが、では実際の可読するエリアのサイズ(正式になんて言うのかわからない)はどうなのでしょう。自分は1000pxで作っています。背景画像は1920で作ってテキストとか画像とかは1000pxの範囲内で、ということです。とはいえこれもベストではないはず。

chatGPTに聞くと「読みやすさのためのマージン: テキストのブロックの左右のマージンは、読みやすさを向上させるためにも重要です。一般的には、ページの幅の約10%から20%を目安に設定されることが多いです。たとえば、1440pxの幅があるデザインであれば、各サイドに140px～288pxのスペースを空けると良いでしょう。」とのことでした。自分が作っている1920pxなら192px～384pxですね。ただ実際これで作ると1540pxぐらいが可読範囲になるので広すぎる気がします。