スマホの画面幅は375px。でもデザインは750pxが正解？
スマホ向けのデザインを作るとき、「表示される幅は375pxだからデザインも375pxで作ればいい」と思いがちです。
しかし、このやり方では実機で表示したときに画像がぼやけたり、線がにじんだりしてしまうことがあります。
理由はとてもシンプルで、現代のスマホの多くがレティナ（高解像度）ディスプレイを採用しているからです。
見た目は375pxでも、内部のピクセル数は2倍の750px以上で表示されているのです。
なぜ375pxで作った画像はぼやけるのか？
375pxの画像をそのままスマホに置くと、スマホ側は「表示には750px必要だ」と判断し、自動的に画像を2倍に拡大します。
このとき、見た目のピクセル密度が足りないため、
・ぼやける
・ジャギる
・線が太く見える
といった劣化が起こってしまいます。
デザインがいくら綺麗でも、元の素材サイズが足りないとスマホが無理やり引き伸ばしてしまうという仕組みです。
「750pxのデザイン」は別レイアウトではない
「750pxでデザインをお願いします」と伝えられると、「750px幅のスマホがあるの？」と思うデザイナーさんもいます。
しかし、これは誤解されやすいポイントです。
実際には、
・デザインの見た目は375px幅のスマホそのもの
・すべての数値（画像・フォント・余白など）を2倍にした750pxのデータを作る
という意味です。
750pxは“別の画面サイズ”ではなく、単に375pxデザインの高解像度版（2倍版）という位置づけなのです。
なぜコーダーは750px PSDを要求するのか？
コーダー側が750pxを求めるのは、実装するときに“シャープな見た目”を実現するためです。
CSSでは、750pxで作った画像を50%縮小して375pxの見た目に合わせます。
これにより、
・文字や線がくっきり見える
・画像がぼやけない
・デザインどおりの見た目になる
といったメリットが得られます。
つまり、コーダーが言う「750pxでPSDを作ってください」は、
「375pxのスマホデザインをそのまま2倍の高解像度データにしてください」
というシンプルな意味なのです。
デザイン時に気を付けるべきポイント
スマホデザインを作るときは、次の点を意識しておくと安心です。
・レイアウトは375px幅で考える
・すべてのサイズを2倍にして750pxでデザインする
・完成したデザインを“半分に縮めて375pxで表示される”流れを理解する
・小さなアイコンや線は、2px・4pxなど偶数にしておくと安定しやすい
「375pxの見た目 × 750pxの実解像度」を常に意識することで、実機での仕上がりが大きく変わります。
まとめ
・スマホの見た目の幅は375px
・でもディスプレイの実解像度はその2倍
・だからデザインは最初から750pxで作る必要がある
・750pxは「別画面」ではなく、375pxの高解像度版
・これを理解すると、画像のぼやけや劣化が解決する
・コーダーが750px PSDを求めるのは、高品質な表示のため
スマホデザインに慣れていないデザイナーさんほど、この部分を誤解しやすいですが、一度理解すれば難しい話ではありません。
「375pxで見えるものを、2倍の750pxで作る」ただそれだけです。
