はじめに
「Web制作では、スマホの画面幅を何pxに設定すればいいの？」「iPhoneやAndroidで画面サイズが違うけれど、どの幅を基準に作ればいいの？」と迷っていませんか。
PC版からスマホ版のデザインを作ろうとしても、375pxや390px、430pxなど複数のサイズがあり、デザインカンプを何pxで作成すればよいのか迷ってしまうこともありますよね。
この記事では、スマホ制作で基準にしやすい画面幅の目安から、デザイン時に確認したいサイズ、異なる画面幅へ対応する方法まで分かります。
Web制作でスマホのサイズは何pxを基準にする？
Web制作でスマホ向けの画面を設計するときは、表示幅390px前後をひとつの基準として考えます。
ここでは、スマホ制作で基準にする表示幅と、端末ごとの違いに対応する考え方を説明します。
スマホの表示幅は390px前後を基準に考える
スマホ向けのWebデザインでは、表示幅390px前後を基準にすると設計しやすくなります。
デザインカンプも390px前後を目安に、文字や画像、ボタンの配置を調整するとよいでしょう。
ただし、端末によって表示幅は異なるため、390pxはあくまで制作時の目安として考えます。
端末によって表示幅が異なるため固定サイズにしない
スマホは端末によって表示幅が異なるため、Webサイト全体を390pxなどの固定幅にはしません。
固定すると狭い画面ではコンテンツがはみ出し、広い画面では余白が増える場合があります。
画面の大きさに合わせて、コンテンツの横幅が変わるように設定しましょう。
スマホのサイズで確認したい3つのポイント
スマホ向けのWebサイトを制作するときは、端末本体の画面サイズだけでなく、Webサイトが実際に表示される幅を確認する必要があります。
ここでは、画面サイズと表示幅の違い、画像サイズの決め方、複数のスマホ画面幅で確認する方法の3つを説明します。
画面サイズとWebサイトの表示幅は分けて考える
スマホの画面サイズと、Web制作で使う表示幅は分けて考えます。
端末の画面サイズはインチで表されますが、Web制作ではCSS上の表示幅をpx単位で確認します。
そのため、何インチの端末かではなく、Webサイトが何pxの幅で表示されるかを基準に設計しましょう。
画像はRetinaディスプレイを考慮してサイズを決める
Retinaディスプレイを考慮する場合は、表示する幅の2倍程度を目安に画像を用意します。
たとえば300pxで表示する画像なら、横幅600px程度の画像を用意すると、ぼやけにくくきれいに表示できます。
制作時は複数のスマホ画面幅で表示を確認する
制作時は390pxだけでなく、複数のスマホ画面幅でレイアウトを確認します。
画面を狭くしたときに文字や画像がはみ出さないか、広くしたときに配置が崩れないかを確認し、幅が変わっても自然に表示されるよう調整しましょう。
スマホで実際の表示を確認する方法が分からない場合は、確認手順もあわせて押さえておきましょう。
▶スマホでホームページの表示を確認する方法｜レイアウト崩れのチェックポイントを解説
スマホのWeb制作はレスポンシブ対応を前提にする
スマホ向けのWebサイトは、1つの画面幅に固定するのではなく、端末の表示幅に合わせてレイアウトが変わるように制作します。
ここでは、画面幅に合わせてレイアウトを調整する方法と、特定の端末サイズだけを基準にしない考え方を説明します。
画面幅ごとにレイアウトを切り替える具体的な方法を知りたい場合は、レスポンシブ対応の設定方法も確認しておくと安心です。
▶レスポンシブWebデザインとは？スマホ対応の作り方をわかりやすく解説
画面幅に合わせてレイアウトを調整できるようにする
スマホ向けのWebサイトは、画面幅が変わっても文字や画像が収まるようにレイアウトを調整します。
コンテンツの横幅を固定せず、画面に合わせて広がったり縮んだりするように設定すると、幅の異なるスマホでも横にはみ出しにくくなります。
特定の端末サイズだけに合わせて制作しない
スマホの表示幅は端末によって異なるため、390pxなど特定のサイズだけに合わせて制作するのは避けましょう。
狭い画面では文字や画像がはみ出し、広い画面では余白が増えることもあるため、複数の画面幅でレイアウトを確認しながら調整します。
まとめ
Web制作でスマホ向けの画面を設計する場合は、表示幅390px前後をひとつの基準にすると制作を進めやすくなります。
ただし、スマホの表示幅は端末によって異なるため、390pxだけに合わせて横幅を固定するのではなく、画面幅に応じてレイアウトが変わるように設定することが大切です。
画像は表示幅の2倍程度を目安に用意し、制作後は複数の画面幅で文字や画像のはみ出し、余白、配置を確認しましょう。
特定の端末サイズだけを基準にせず、異なる表示幅でも崩れないレスポンシブ対応を前提に制作することがポイントです。
