

Webブラウザ上で利用する業務アプリを開発しています。  
最近のPCやタブレットは1920X1080以上の解像度がありますが  
Webページとして横幅はどのように決めるべきなのでしょうか。  
基礎的なことなのかもしれませんが教えてください。

色々なサイトで書かれていることを見ましたが、950-1000が一般的との記載があったり、  
最近は1200PX以上とか。。 どれも感覚的な説明で、どのように決めてよいのか分かりません。


CC BY-SA 4.0
2020-05-25T02:42:06.137
66959
2020-05-25T06:54:06.323
40320
question
html5
Webページの横幅はどう決めるべき？


プログラムの問題というより、要件定義やデザイン定義のはなしっぽいですが、一応回答をしておきます。

業務アプリであればある程度、想定する顧客や利用シーンを限定できるのではないでしょうか？  
そのうえで横幅を設定しましょう。また表示するコンテンツやUIUXによっても画面幅を決めるべきでしょう。

もしハードウェアが限定できる場合、特定のモニタでしか使わないということであればそのサイズで適して作るべきです。逆にスマホでしか使わないシステムなのに、PC画面のサイズを用意しても意味はないですね。  
もし様々なサイズが想定できる場合はいまは画面幅いっぱいを利用してレスポンシブな画面デザインを作ることが多いと思います。

ただし画面幅いっぱいといってもあまりコンテンツがないところに  
広ーいものを作ってしまうと正直間延びした感じになると思いますので  
さらにコンテンツ量やUIUXを考えて最大画面幅を設定します。  
スタックオーバーフローのPCサイトもヘッダーフッターは画面幅いっぱいまでありますが、実際の中のコンテンツの最大幅で97.2307692rem
という数字になっています。

レスポンシブの場合は重要なのはブレークポイントでどこを境目にしてレスポンシブを作るかになります。  
またブレークポイントはいくつか最小幅を設定してそれ以下になったらレイアウトを崩さずに、  
デザインを変えることである程度整ったデザインにするという仕組みです。  
デザインのフレームワークであるBootstarpを私はよく参考にします。

大体イメージはこんな感じです  
スマホ縦持ち < 576px < スマホ横持ち <768px < タブレットぐらい < 992px < ノートPCぐらい < 1200px 大きなモニタ

スマホ縦とノートPCだけだったら  
スマホ縦 < 576px < PC

ただし端末やモニタによってはスマホだけど画面が大きかったりIoT機器だとさらに小さかったりします。  
なのでどのような端末で見れたほうがいいかは要件を確認してきちんと定義しておいて検証確認が重要です。

デザイナともやり取りしてきちんと使いやすい幅の設定をするとよいと思います。


CC BY-SA 4.0
2020-05-25T06:54:06.323
66966
2020-05-25T06:54:06.323
22665
66959
answer