目次
比較
特集
【2020年9月限定】TECH::CAMP(テックキャンプ)Amazonギフト券を5万円分プレゼント

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

この記事は約4分で読めます。

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

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

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

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

当サイトで人気のプログラミングスクール

  • DMM WEBキャンプ  (3ヵ月でRubyエンジニアに)
  • TechAcademy  (オンラインで好きな時間に学べる)
  • CodeCamp  (オンラインなのにマンツーマン指導。300社以上の大手IT企業が社員研修に導入する質実ともに評判が高い)

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

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

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

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

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

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

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

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

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

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

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

iPhoneの画面の大きさ

サイズ表記端末ポイント倍率ピクセル
3.5iPhone320 x 4801320 x 480
3.5iPhone 4320 x 4802640 x 960
4iPhone SE320 x 5682640 x 1136
4.7iPhone 6, 7, 8375 x 6672750 x 1334
5.5iPhone 6, 7, 8 Plus414 x 73631242 x 2208
5.8iPhoneX375 x 81231125 x 2436

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

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

PCやスマホの解像度対応

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

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

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

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

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

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

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

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

PCのWebデザイン作成時は、全体のデザインは通常サイズでもいいですが、パーツの解像度はiPhoneのどのバージョンを基本にするかを決め、2倍~3倍で作っておきます。

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

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

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

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

まとめ

  • スマホファーストでデザインする
  • スマホの解像度はiPhoneを基準にする
  • デザインパーツはiPhoneの解像度に合わせ、2倍または3倍で作成する
  • 解像度を2倍、3倍で作ったパーツはデータ名を「@2x」「@3x」として、ひと目でわかりやすく管理する

ご参考にしてください。

コンテンツのコピー・流用は著作権上禁止しています。
タイトルとURLをコピーしました