Webデザインにおける横幅のおススメサイズは？
こんにちは！ 湘南 藤沢の小さなWeb制作所、S-Create Garageです。
今回は「Webデザインにおける横幅のおススメサイズ」について書いてみようと思います！
みなさんはデザインをする際に横幅のサイズはどの位をベースに考えていますか？
デザインを作成する際には、まず基準となる「サイズ」を決める必要があります。
とある入門書では「画面に対して70%」で設定していたりしますが、本当にそれで大丈夫なのでしょうか？
WEBデザインにおける横幅とは？
WEBサイトを作成する上での「横幅」ですが、とても重要なものになってきます。
これを決めることで中に入れ込むコンテンツの画像のサイズやアイコンのサイズを考える基準となります。
では横幅の概念は何を元に決めていけばよいのか？？
僕も最初の頃は漠然と「70%」かな。。くらいの雰囲気で作っていました。
しかし、そんなにもザックリとサイズを決めると…
綺麗にデザインが出来たとしても、あくまで「自分が見ているデバイス（例 15.6インチPCなら、実際の画面表示サイズは1580pxくらい）」での話になってしまいます。
ではそれを解決するにはどうすればよいのか。。
それは「基準値を決める事」で解決できます！
マルチデバイスを意識しよう！
と、言うことで今までは色んなサイズの画面で見たときの事を考える必要を説明してみました。
では「いろんなサイズとは何なのか？」を詳しく書いていきます。
まず大きく分けると上から以下のようになります。
- 大きい
- PC
- タブレット
- スマートフォン
- 小さい
では、更にPCを細かく見ていきましょう。
PCの中でもサイズは様々です。
13インチ（例 Macbook Air）のノートパソコンと、27インチのデスクトップPC （例 i Mac） では画面のサイズが違います。
一般的には持ち運びしやすいサイズとしては13インチくらいが多いのかな？と思います。
こちらに参考のURLを貼っておきます。
https://101010.fun/posts/world-display-share.html
2021年 12月現在だとやはり1920px×1080px（フルHD）が主流でしょうか。
数年前までだと1366px×768px（HD）でした。
この様に数年で画面のサイズ感の変化が大きいのがわかります。
また近年はタブレットやスマートフォンが主流となり「PCを持っていない人」が増えています。
この様に現在はマルチデバイス対応させる必要があり、こういったデザインをレスポンシブデザイン、リキッドデザインと言います。
このような多様化の中では「70パーセント」というザックリな値では画面幅によって表示が変わってしまいます
僕が実際に参考にしたサイズ感
今まで書いてきた中で「様々なデバイスがあり、どのデバイスでも同じ様に表示させる必要」がある事が分かりました。
そんな中で僕が参考にしたのは、言うまでもなく師匠のデザインでした。
僕も今ではとても多用しておりますが、それは「抑揚をつけるデザイン」と「マルチデバイス対応」「イマドキ感」という、とても大切な事柄がまとまっているデザインでした。
これは僕が作成したデザインの一例です。
横幅が左右いっぱいの部分は画面に対して100%
しかし基本となるサイズは最大値1024pxにしてあります。
これはどのサイズのPCで見ても1024pxの枠の中で完結できるので、画面が大きくても小さくても同じレイアウトが保たれます。
また、こうする事でレスポンシブ対応の際にも「iPadPro（横1024px）」の調整が必然的に殆どなしでOKとなります。
そうすると、あとはiPadとスマートフォンのレスポンシブの二種類を入れてあげる事でOKなので時間の短縮にもつながり、安定したデザインを作成する事が可能になってきます。
以上の事を踏まえて、僕は師匠より学んだ1024pxという値を意識しデザインを行うようにしています。
まとめ
如何でしたでしょうか？
デザインを行う際は、色んな画面サイズで見ることを忘れずに、自分の構築環境での表示が絶対でないという事をしっかりと意識しましょう！
多様化していく中で、マルチデバイス対応が必須項目になっていくのは制作する側としては大変ですが、それも含めてのWEBデザイン。
楽しんでやっていきましょう！
S-CreateGarageではホームページのデザイン、制作、保守運用を承っております！
湘南、藤沢地区、もちろん全国からのホームページ制作、チラシデザイン等のご依頼等お待ちいたしております！
それではまた！