Webサイトをデザインする時、最近では様々ツールがありますよね！
少し前の時代まではPhotoShopでWebデザインをする方が多かったと認識していますが、Illustratorもあれば、Adobe XDやSketch・Figmaなど様々なツールがここ数年で登場したことによって、デザインツールは多様化しています。
さてそんな中、Webデザインを行うときにどのツールであったとしても1番最初に考える・設定するのが「アートボードサイズ」ですよね！
いったいアートボードサイズって何pxにすればいいのか？？本日のブログではそのあたりのことを書いていきたいと思います！
目次
アートボードサイズは何pxにすれば良い？（PCデザイン編）
例えば、Adobe XDで新規ファイルを作成しようとするとき、PCサイズのデザインのアートボードを作成しようとすると、
- 1280×800
- 1366×768
- 1920×1080
以上3つの何かから選択するようになっています。
この3パターンの画面サイズ、どこから由来が来ているのかというと、よくWebサイト閲覧に利用されているPCサイズの画面モニタの大きさランキングの上位になっているものがそのまま当てはまっているようです。
色々なサイトを眺めてみましたが、確かに1366×768や1920×1080のモニタ画面サイズはどのサイトの調査においても上位に来ていますね!
ちなみにGoogle Analyticsによると、Arrownを訪問してくださる方々が使用している上位3つのPC版モニタ画面サイズ（画面解像度）は
- 1920×1080
- 1440×900
- 1366×768
になっていました。特にArrownの場合はなぜか1920×1080のシェアがずば抜けています・・・！
色々書いてしまいましたが、何がいいたいかというと、アートボードは1920×1080のサイズにすれば良いよということではなくて、その時代でよく利用されているモニタサイズ（画面解像度）のシェアをしっかりと把握した上で、アートボードのサイズに用いる大きさを判断しましょうね、ということですね！
ちなみに僕は、例えばAdobe XDなんかでPC版Webサイトのデザインをする時は、今のところ1366×768のアートボードサイズを用いてデザインをすることが多いです。
メインターゲットとなるアートボードサイズだけに執着しない！可変した時にどう見せるのかの答えも用意しておく
とはいえ、1366×768のアートボードサイズで作成したら1366×768のサイズの時に限ってきちんとデザインされた状態で見られれば良いのかといえば、そんなことはありません！
先ほど掲載させていただいた情報からもわかるように、PCでWebサイトを見る人の中にも色々な環境をお持ちの方がいらっしゃいます。
なるべく多くの方が問題ない状態でWebサイトを閲覧できるように、1366×768のアートボードサイズでWebデザインをしたとしても、
- 1920×1080の大きさのモニタ画面で閲覧された場合はどう見えるのか
- 1024×768の大きさのモニタ画面で閲覧された場合はどう見えるのか
それぞれ答えを用意した状態でWebデザインをしないといけないわけなんですね！
繰り返しみたいになりますが、大事なのは「どんな方にも、どんな環境においても、なるべく多くの方が問題なくWebサイトを閲覧できる状態を作る」という視点になるわけなんですね！
デザインをする時は、色々なモニタ画面サイズが存在することを念頭に置きながら、大きめのモニタ画面でも、小さめのモニタ画面でも見せ方・見え方がこうなるという答えが用意できるようにしておきましょう！
アートボードサイズは何pxにすれば良い？（SP・スマホデザイン編）
さて、PCのつぎはSPつまりスマホデザインにおけるアートボードサイズについてです。
こちらもPC版のWebデザイン同様、アートボードサイズを考える時に考慮しなければいけないのは、Webサイトが閲覧されるモニタ画面サイズのシェアです！
こちらも色々なWebサイトをみていると、どうも
- 375×667
- 375×812
- 360×640
- 414×896
あたりがスマホのモニタ画面サイズの上位シェアになっていることが多いようです。
特に2020年6月現在でも横幅375pxの画面サイズの端末のシェアが多いようなので、現時点では「375px」をSP・スマホWebデザイン用のアートボードサイズとして用いる形で問題ないかと思います！
ただし、PC同様スマホでも「どんな方にも、どんな環境においても、なるべく多くの方が問題なくWebサイトを閲覧できる状態を作る」という視点が重要になります！
例えば、かつて全盛を誇ったiPhone 5Sに相当に相当するサイズである320×668のモニタ画面サイズであったり、今でいうiPhone Plusシリーズにあたる414×736、414×896のモニタ画面サイズの端末であったり、スマホの画面サイズも端末によってバラバラです。
やはり大きめのスマホの画面でも、小さめのスマホの画面でも見せ方・見え方がこうなるという答えが用意できる状態を作っておくことが大事になってくるわけなんですね！
スマホ用Webデザインをする時にアートボードサイズを想定モニタ画面の2倍や3倍にする必要はある？？
さて、今回の話の内容に関連して、スマホ用Webデザインをする時にアートボードサイズを想定モニタ画面の2倍や3倍にする必要があるかどうか？という質問・疑問を受けることがよくあります。
実際、例えばスマホ用Webデザインのためのアートボードを作成する時に、Retina ディスプレイとは？高解像度モニターが当たり前の現代でWeb制作における変化・影響はどんなことがあった？で紹介したような高解像度モニタを理由にアートボードサイズを2倍・3倍にしてデザインを作成するというケースもよくあるそうです。
ですが、僕の見解としてはRetina ディスプレイとは？高解像度モニターが当たり前の現代でWeb制作における変化・影響はどんなことがあった？にも掲載したように、
- アートボードサイズは高解像度モニタを考慮して2倍・3倍などしなくてもOK
- デザインに使用するラスター画像（pngやjpg画像）のみ高解像度モニタを考慮してデザインサイズの2倍・3倍など大きめのサイズで用意しておく
という対応で問題ないと考えています。
理由としては、高解像度モニターを考慮する必要があるのは、デザインに使用するラスター画像（pngやjpg画像）のみだからです。
詳しくはRetina ディスプレイとは？高解像度モニターが当たり前の現代でWeb制作における変化・影響はどんなことがあった？をご覧になってみてくださいね！
アートボードサイズは何pxにすれば良い？（タブレット編）
さて、PC・スマホと来て最後はタブレットについてです。
そもそもタブレット用のWebデザインを作成しないで、成り行きに任せてコーディングフェーズでどうするか考えるという方も多くいらっしゃるかもしれません。
確かにタブレット用のWebデザインデータまで作成すると、単純に工数も時間もかかりますからね・・・
ただし、PC用とスマホ用のWebデザインデータを作成していざコーディングに取り掛かってみると、800px〜1000pxあたりのモニタサイズの時に見た目が波状してしまうなんていう状況にあたったことがある方も少なからずいらっしゃると思います。
そう考えると、本当はタブレット用Webデザインのデータも作った方が良さそうですよね！
しかし、工数や時間・経費の問題でタブレット用Webデザインを作成するに至らないということも現実問題ありそうなので、PCやスマホ用のWebデザインを作成する時と同様に、「どんな方にも、どんな環境においても、なるべく多くの方が問題なくWebサイトを閲覧できる状態を作る」視点で見ていきましょう！
具体的には横幅800〜1000pxあたりの画面モニタサイズでWebサイトを見た時にどんな見た目になるかの答えを用意しておく、というものですね！
様々なサイズの端末が出てきている現代では、タブレット=PCと考えるのはますます難しいというのが個人的な見解です・・・
まとめ
ということで、今回は「Webサイトデザイン時のアートボードサイズは何pxで作成すれば良い？PC・スマホ・タブレットそれぞれの設定サイズについて考えてみよう！」というタイトルで記事を書かせていただきました！
明日は、コンテンツ幅について書いてみたいと思います！無事に6月毎日更新できるかなぁ・・・今日で16日連続更新達成です！
