こんにちは、ダニエルです。
下記のお悩みありませんか？
現在 Webデザインを学習中で、デザインカンプを作成したい。スマホのサイズはどの大きさで作れば良いの？レスポンシブデザインが大事だと聞いたけど、具体的に何を意識したら良いのか知りたいです。
上記のお悩みに答えます。
結論、375pxで問題なしです。
最近だとiPhoneサイズも390px（iPhone 14）や393px（iPhone 14 Pro）など、だんだん大きな画面サイズも登場してきていますが、Webデザインの制作時においては375pxで問題なしです。
私は普段フリーランスのWebデザイナーとして活動しています。以前はWeb制作会社でも働いていました。現在は大手デジタルスクールでWebトレーナーとしても勤務しています。
上記の経験から「実務でどのように制作するか？」をお伝えでき、さらにトレーナーとして分かりやすく丁寧さを意識しました。よければご覧ください。
Contents
Webデザインでスマホサイズは何px？
結論、375pxでOKです。
- 実務だと圧倒的に375pxだから
- 小さい画面に合わせるべきだから
- シンプルに作りやすいから
順番に解説します。
実務だと圧倒的に375pxだから
実際の制作現場だと、デザインカンプのスマホサイズは基本的に375pxでやり取りされます。現場では関係者とデータのやり取りする機会が非常に多く、スマホサイズのデザインカンプは375pxで作成することが慣習になっています。
自分のためのサイト用なら好きなピクセスサイズ（例えば390pxや393pxなど）でスマホデザインを作っても良いですが、関係者がいる場合、375pxは最も無難な選択といえます。
「現場だと375pxで最も制作されるから、375pxで作ればOK」とお話ししましたが、1つだけ事実があります。
それは、本来であればユーザーに合わせるべきということです。
実際のユーザーが最も利用しているスマホサイズ、最もシェア率が高いスマホサイズを選んで制作するほうがユーザー視点に立っていると言えます。
「ユーザー視点＝ユーザーとの距離が近い」なので、よりユーザーが抱える課題や悩みに寄り添いやすくなります。
それでもやっぱり実務の慣習を守った方がスムーズです。
今はまだ375pxが圧倒的に無難です。
もしかすると今後は、375pxの慣習も社会情勢などに伴って変化していくかもしれません。
「375pxで作ればOK」とは言え、実際のピクセルサイズのシェア率については知っておくべきです。
下記リンクから確認できます。
ざっくり一覧化すると下記のとおりです。
- 1920×1080
- 360×800
- 390×844
- 1536×864
- 1366×768
- 393×873
- 375×812
- 412×915
上からシェアが高い順に記載しています。
PCとスマホのサイズが混ざっていますが、Androidスマホで多い360pxのシェアが高く、次いで最近のiPhoneで使われているサイズ390pxが多いみたいです。
実際のスマホ画面、どのピクセルサイズが使われているのか？把握しておくと良いです。
下記リンクで確認できます。
小さい画面に合わせるべきだから
シンプルに作りやすいから
大きすぎず、小さすぎず、デザインしやすいサイズと言えます。
Webデザインのスクールなどでも、カリキュラムで用意されている教材は375pxが使われていることが多いので、学びやすいサイズとも言えます。
Webデザイン初心者さんが知っておくべきこと
レスポンシブ対応を常に研究する
デベロッパーツールで研究しよう
ブラウザには、デベロッパーツールと呼ばれる便利機能があります。
このツールを使うと、自分が持っているパソコンの画面以外のサイズでも、Webサイトの状態を確認できるようになります。
- ステップ①：まずは 1440px → 375px の順にチェック
- ステップ②：その後、375から少しずつ広げて 768px付近 を確認
- ステップ③：さらに 769〜1440px の間もチェック
勉強になります。良い参考サイトを見つけたら、必ずデベロッパーツールで動きを追ってみましょう。
世の中にWebブラウザは様々あります。EdgeやSafariやFireFoxなどですね。
しかし、ブラウザはGoogle Chromeを必ず使うべきです。
これはシェア率が理由です。全世界の7割近くの人はGoogleを選んでいます。
Webデザイン制作を行なっていくなら、最も多くの人が使っているブラウザ＝Googleを使いましょう。
スマホサイズ、750pxでは作らないで
初心者が陥りやすい誤解のひとつに「スマホカンプは750pxで作る」というものがあります。
- これは間違い。理由は画像書き出し都合に過ぎないから
- Retinaディスプレイ対応のため、画像を2倍サイズで用意する必要はありますが、それは画像だけの問題です
- デザインカンプ自体を750pxで作ると、余計に作りづらくなり、コーディングも二度手間になります
正しいやり方は、375pxでカンプを作り、画像は2倍サイズで書き出すこと。これでRetina対応も可能になります。
