【2021年下半期】Webデザイナー必読！横幅サイズとファーストビューサイズ

こんにちは。FASTCODINGデザイナーの七転び八重子です。
みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？
私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。
前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。

ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？

まず、Webサイトをデザインする上で、どのようなレイアウトにするのかを最初に決める必要があります。どのレイアウトデザインも、一長一短あるので、Webサイトの用途に合わせて選択します。最近では、パソコンはソリッドレイアウト、タブレットやSPはリキッドレイアウトを採用しているケースが多いです。

余談ですが、

よくレスポンシブデザインとリキッドデザインを比較するような説明があるのですが、正確には、レスポンシブデザインを実現する手段のひとつがリキッドレイアウトです。

ソリッドレイアウト（固定レイアウト）とは？

「ソリッドレイアウト」とは、ウインドウの幅に関係なく、コンテンツを固定の幅で表示するレイアウトです。幅はピクセル(px)で指定します。

◎メリット

固定幅の中であれば、自由に要素をデザインできる。幅によってデザインが変わらない為、どんな閲覧環境でも同じデザインを表示したいWebサイトに向いている。(金融機関や役所などに多いレイアウト)

△デメリット

固定幅なので、閲覧環境によって余白が多くなったり、逆に横スクロールが出てしまう事がある。

リキッドレイアウト（可変レイアウト）とは？

「リキッドレイアウト」とは、ウインドウの幅に合わせて、コンテンツの表示が変化するレイアウトです。幅は100%を最大として要素を％で指定します。

◎メリット

どんな画面幅でも横スクロールが出ず、左右の余白がない分、情報量をたくさん載せる事ができます。2020年頃から、人気のレイアウトでファーストビューに力を入れているサイトは、画面いっぱいにダイナミックな表現が可能になります。また、今後新しい規格のスマホやタブレットが登場してもブレイクポイントの利用が無いので対応しやすいと言えます。

△デメリット

一定のレイアウトを保つように作られているので、デザインに自由がなく単調になりやすい。極端に画面幅が広かったり狭かったりする場合に文章によっては可読性が下がることもある。あらゆるサイズで調整が必要になるので、慣れてないとコーディングはやや大変といった印象。

リキッドの進化系！フレキシブルレイアウトとは？

「フレキシブルレイアウト」とは、リキッドレイアウトのデメリットをカバーしたレイアウトで、極端に広い幅のウインドウでも、min-widthとmax-width（最小幅と最大幅）を設定することで可読性を損なわないようにする方法です。

Webサイト横幅サイズとファーストビューの結論

３つのレイアウトを説明しましたが、それぞれのレイアウトでWebサイトをデザインする時の設定サイズも異なってきます。合わせて、statcounterで2021年7月現在のブラウザシェアも確認して結論を出しました。

パソコンの場合

パソコンの場合は、画面サイズ＝立ち上げたブラウザサイズではない場合があります。つまり、画面いっぱいにブラウザを広げて見ない場合も考慮する必要があります。

タブレットの場合

タブレットとスマートフォンは、画面サイズいっぱいにデザインするので基本はリキッドレイアウトでのデザインでOKです。

スマートフォンの場合

Retinaディスプレイに対応するには？は過去のブログでまとめています。合わせてご覧下さい。

FASTCODING BLOG

 

37 Pockets

【2021年1月】スマホ用Webデザインはこのアートボードサイズで作ろう！

こんにちは。FASTCODINGデザイナーの七転び八重子です。新型iPhone 12の発売に伴い、iPhone画面解像度を調べてみました。また、スマホ用Webデザインをする際に、どのサイズで作れば良いのかもまとめてみました。 目次 iPhone 12　解像度まとめ スマホ用Webデザインのアートボードサイズは何pxにすれば良い？ Retinaディスプレイに対応するには？ まとめiPhone 12　解像度まとめ 端末画面サイズ画面解像度 iPhone 12 Pro Max 6.7インチ CSSピクセル 926 x 428 iPhone 12iP...

まとめ

今回は、2020年から流行りだしたリキッドレイアウトも考慮してみました。やはり、デスクトップは画面サイズに結構な差があるので、フレキシブルレイアウトの方法を取り入れて置くのは、大切だなと思いました。

Web制作でお悩みの方はファストコーディングにお任せください！
SEOやページスピード対策を取りれた最新のコーディング/フロントエンド開発に特化しているため質の高いサイト制作が可能です。
お悩み・ご相談も受け付けておりますので、お気軽にお問い合わせください。