すべてのカテゴリ

スマホの画面幅は375px。でもデザインは750pxが正解？スマホ向けのデザインを作るとき、「表示される幅は375pxだからデザインも375pxで作ればいい」と思いがちです。しかし、このやり方では実機で表示したときに画像がぼやけたり、線がにじんだりしてしまうことがあります。理由はとてもシンプルで、現代のスマホの多くがレティナ（高解像度）ディスプレイを採用しているからです。見た目は375pxでも、内部のピクセル数は2倍の750px以上で表示されているのです。なぜ375pxで作った画像はぼやけるのか？375pxの画像をそのままスマホに置くと、スマホ側は「表示には750px必要だ」と判断し、自動的に画像を2倍に拡大します。このとき、見た目のピクセル密度が足りないため、・ぼやける・ジャギる・線が太く見えるといった劣化が起こってしまいます。デザインがいくら綺麗でも、元の素材サイズが足りないとスマホが無理やり引き伸ばしてしまうという仕組みです。「750pxのデザイン」は別レイアウトではない「750pxでデザインをお願いします」と伝えられると、「750px幅のスマホがあるの？」と思うデザイナーさんもいます。しかし、これは誤解されやすいポイントです。実際には、・デザインの見た目は375px幅のスマホそのもの・すべての数値（画像・フォント・余白など）を2倍にした750pxのデータを作るという意味です。750pxは“別の画面サイズ”ではなく、単に375pxデザインの高解像度版（2倍版）という位置づけなのです。なぜコーダーは750px PSDを要求するのか？コーダー側が750pxを求めるのは、実装す