ぬるま湯デザイン塾 – 公式ブログ

みなさんこんばんは！

東京から平原です＾＾

涼しいですね〜〜
お出かけしても
生きていける温度になりましたw

今週は「デザインカンプの画面幅」について。

サイト制作で欠かせない「デザインカンプ」。

そんなカンプの幅、
なんとなく作っていませんか？

実際に“どの幅で作るのか？”って、
意外と知られていない気がしています。

でも実は、ちゃんと指標があります。

それではレッツゴー！

実際のデータから見る指標

みなさんが作ったサイトが
どんな画面で閲覧されているのか？
データを見ながら考えてみましょう。

引用：https://gs.statcounter.com/

◆PCの場合

画像が荒れちゃったので、リンクでどうぞ。
画像はこちら>>

首位は横幅：1920px

これは、デスクトップPCでよく使われるサイズです。
ビジネス向けであれば、このサイズを採用するとドンピシャ。
と言えるでしょうか。

次点が横幅：1536px。ノートPCですね！

その他にも
1366px、1280pxなどのノートPCや、
よく企業で支給されるもののシェアが高いです。

5位の1440pxも同じくノートPC。
多くのツールのプリセットにもなっているサイズです。

◆SPの場合

こちらも画像が荒れちゃったので、リンクでどうぞ。
画像はこちら>>

首位は横幅：375px。
一昔前のiPhoneではこのサイズが採用されていました。

未だにシェアが1位のところをみると
まだまだ健在、という感じでしょうか。

次点は横幅：390px。
今のiPhoneのサイズです。
徐々にシェアを伸ばしている模様です。

その他にも414pxや393pxなど多種多様の画面幅が存在します。

では、どのサイズに合わせるべきなのでしょうか？

基本は首位のデバイスサイズに合わせていけば良い
とも言えるのですが、
注意したい点が2つあります。

注意したいポイント

1.高解像度に対応する

Appleの端末では高解像度のRetinaディスプレイが搭載されています。
また、Androidでも今は高解像度の時代。

綺麗に表示させるために、スマホ向けサイズは倍で作る必要があります。
つまり、375pxの倍で750px、ということです。
ちなみに平原は、390pxを倍にして780pxで制作しています。

また、PCでも画質を落としたくない箇所(PC向けFV)等では
倍のサイズで制作する場合もあります。

2.使用環境を想定する

PCの場合、1920pxが首位でした。

この1920pxというのはモニターで
ウィンドウを最大化した時の数値です。

しかし、このサイズの場合は、
ブラウザを最大化しないケースもありますよね。

なので、少し縮めたサイズの1440px、1366pxを採用する
ということも多いです。

そこで、1つ参考にしたいのが
各種ツールのプリセット。

Photoshopやfigmaなど、多くのツールで
1440pxに設定されています。

なので、この数値を使ってしまうのがおすすめです。

まとめ

さて、これまでを踏まえて少しまとめていきたいのですが、
基本的にデザインカンプは

PCの場合：1440px
(高画質を求めるならその倍もしくは1920px)

SPの場合：750px or 780px

と覚えておくと良いでしょう。

なお、あまり複雑に考える必要はありません。
全員が常に同じ環境で閲覧することはありませんし、
全ての環境ごとに分けて制作するのは
現実的ではないからです。

また、この先も画面の幅はどんどん変化していきます。
常に情報をキャッチアップしながら
正確な根拠を元にお仕事したいですね！

p.s.

作った画像を無理に引き伸ばすと
画質は当然荒れていきます。

もし気になる場合は
一度テストで実装してみるのも
おすすめです。