【Webデザイン】LP制作時のPC・スマホ画面サイズの大きさ設定はコレ

制作するための第一歩、
どんなサイズで作ればいいかわからなくてつまづく、、、
あるあるです！！！わかります！！

特にグラフィックデザイナー（紙媒体中心）がWEBに転身した時に
立ちはだかる壁だと思います。
私も困ったし、きっとみんなも困ったはず。
解説します！

カンバスサイズ / アートボード

最近は当たり前すぎてなんとも思わなくなりましたが
illustratorでもPhotoshopでもXDでも新規作成するとこんな感じの画面が出てきますね

これはAdobeillustratorのアートボードサイズを選ぶ画面なのですが
タブをWEBに変えると、（大）とか（極小）とか（共通）とか
「なんでこんなに種類があるの？どれで作ればいいの・・・？」てなりました

会社の先輩やサイズ指示もあればいいのですが、フリーの方やこれから新しくルールを定めたい方にとっては、どうするのがベストか頭を悩ませる問題ですよね。

そもそも画面サイズって？どう決めるの？

画面サイズとは、今みている画面のサイズのこと。

でも、スマートフォンは人によっていろんな機種を使っているし、これからもいろんな機種が出ると思います。
PCに至っては最大画面幅でサイトを見ることある？…、ウィンドウ変化して自分で見やすいサイズに変えられちゃいますよね。

つまり、画面サイズはこれから無限に増えるし、
ルールなんて決められないし、決まりはないってことなんです。

その一方でこの画面サイズ、Webデザイナーやコーダーにとっては
めちゃくちゃ大事な問題なのに、全てに完璧に対応するなんてほぼ無理ゲーという現実があります……。

なので、決める基準としては世界中（日本語のみのサイトであれば日本）の人が一番使っているサイズになることが多いです。

みんなが一番使っているサイズの調べ方

みんなが使っている共通サイズなんてない！ って感じだとは思うのですが、調べる方法がインターネットにはあります。インターネットはすごい。
そしてこのビックデータを提供してくれるのもすごい。

statcounter

https://gs.statcounter.com/screen-resolution-stats/desktop/japan

この全WEBデザイナーお気に入り必須の便利なサイトでは、
どの画面サイズが最も使用されているのか調べることができます。すごい。

画面サイズのシェア率だけでなく、
ブラウザやSNSのシェア率もわかるので、実際の実務では、
資料の根拠として提示したり方向の擦り合わせによく使ったりします

PCの推奨サイズは？

シェア率の高いデバイスの等倍サイズで制作するのがベスト！
つまり、PCに関してはみている人がもっとも多い
1920×1080pxのサイズが推奨サイズです。

SP（スマートフォン）の推奨サイズは？

SPでは、390×844pxが最も多いです！
あれ・・・？なんか小さくない・・？と思った方大正解。

SPサイズは等倍サイズの2倍で作るのが主流です（横幅790×1688px）

その理由は、等倍サイズで作ると画像はジャミジャミ感を感じる仕上がりになるというのもありますが、一番はRetinaディスプレイというもののために行う行為なんです。

４つのレイアウトの呼び方と特徴

PCではウィンドウサイズが可変できる、SPでは多種多様な機種の画面幅や高さがある
そのそれぞれにベストな表示を目指さなければいけません。

動きに関する事なのでデザイナーさん向けよりも
コーダーさん向けなお話ですが、
知っておいた方が話が早いので、この知識は絶対必要だと思います。

気にしない人は、この囲み背景部分は読み飛ばしてOKです

おわりに

画面サイズの基本的なことについてお伝えしましたが、どうでしたでしょうか？

わたしも今回のブログを書くにあたって
なんとなく理解はしていましたがこういう事か！と発見もあり、より理解が深まったのでみなさんにもそう感じてもらえたら嬉しいです。