スマホファーストを意識せよ！Webサイトデザインの推奨サイズ

今はPCやタブレット、スマホなどどんなモニタから見てもきちんとWebページが最適かされる「レスポンシブWebデザイン」が主流です。

これからWebデザインを勉強する人は、最初からレスポンシブデザインを勉強しましょう。

この記事では、Webサイトデザイン時の推奨画面サイズをご説明します。

Webクリエイター歴15年の私が説明します。

PC表示用の横幅ピクセルは「ワイド画面」に合わせよう

ちょっと前まではPCのモニターはスクエア型ディスプレイと呼ばれる4：３の画面が主流でした。

今では16：９、16：10などのワイド型が主流です。

最近のWebサイトも、従来よりも横幅サイズを大きくしたり、リキッドデザインにして横幅を可変する作り方が増えています。

PC表示時の横幅は1,000を基本にする

YahooやMSN、その他多くの大手上場企業の多くのWebサイトは横幅960pxから1200pxくらいで作られています。

これから作る場合、PC表示時のWebサイトの横幅は1,000pxを目安にして作るといいと思います。ユーザーやターゲットに合わせて最大を1200pxにしておけばいいと思います。

スマホ表示時の横幅はiPhoneを基準にする

スマホの場合iPhoneユーザーは全体の6割で大きなシェアを占めていますが、その他の４割はアンドロイド系のスマホを使っています。

Android系のスマホはiPhoneのように一定ではなく固定サイズがありません。

でも、大きめのAndroid系スマホでも480pxまでが主流になっているようなので、480px以下なら問題なく表示されます。

iPhoneの画面の大きさ

iOS13のアップデート対象は、iPhone7までと発表されました。

そのため、今後はiPhone7以上に買い替え組も増えていくでしょうが、まだまだiPhone SEやiPhone 6ユーザーがたくさんいますから、デザインに関してはSEの「375ｘ568」やiPhone6～8の「375ｘ667」をベースに作成しましょう。

PCやスマホの解像度対応

上の表の「倍率」を見るとお分かりの通り、iPhone4からiPhone8までは2倍の解像度、iPhone Plus以降は３倍の解像度が必要になります。

今まではWebデザインの解像度は72dpiが基本でした。でも今ではRetinaディスプレイを搭載した鮮明で美しいiPhoneの進化に伴って、Webデザインも高解像度で作る必要があります。

普及率の高いiPhoneSE～８に合わせてスマホ用のデザイン解像度も2倍で作られることが多いです。

Android系の解像度はさらに種類が多いので、すべての解像度に合わせて対応したいなら横幅1440pxでデザインする必要がありますが、工数が増えて価格も高くなるので現実的ではありません。

実際のスマホ用画像を用意する場合のポイント

今はスマホユーザー数がPCユーザーを超えているので、今後はスマホファーストでWebサイトを作ることが必須です。

ですから、スマホ表示したときに「なんだか画像がボケてるな」ということになると、ユーザービリティが下がって離脱率が上がってしまったり、サイト全体がもっさりした印象になりブランディングという意味でも価値が下がってしまいます。

用意する画像パーツは上の表の一番右「ピクセル数」を参考に実際にPhotoshopで解像度を指定してから作ります。

チームで作業する場合は、最初にディレクターに解像度をいくつに設定するかを確認しておきましょう。

２倍、３倍で書き出したパーツはわかりやすい名称で管理

スマホ用に作った２倍、３倍の解像度で書き出した画像は、すぐにわかるようにファイル名を「〇〇〇〇＠2x.png」、「〇〇〇〇＠3x.png」のようにしておきます。

こうすることで、わざわざ画像を開かなくてもサイズが予測できるのでミスが減るし、作業が楽になります。

まとめ

ご参考にしてください。