カラムの幅ってどうやって決めていますか？

質問

２カラムの時は、790pxとかをよく見かけましたけど、最近は全体の幅もバラバラで、２カラム、３カラムとデザインもバラバラ。
あげくにそれぞれの幅もバラバラになっていますが、これって皆さんどうやって幅を決めているのですが？

いろいろ調べてはいるのですが、中途半端な数字が多いので、何か計算式にのっとって幅を決定しているのかな？
と思い質問させていただきました。

いろいろ教えてください。

回答No.1

mezashi2000 · ベストアンサー

特に計算とか決まりとかはないと思います。
ただ、サイト全体の幅としてモニターのサイズを考慮はします。
最近は液晶の表示領域も大きくなったのですが、それでも横幅1200pxあたりを想定します。
これは画面のサイズなので、ブラウザを全画面表示で見ないことを考慮し、かつブラウザ自身の枠などを考えると、サイトの横幅は800～1000が妥当です。

MAXを800～1000で決めた後に、ページのデザインにあわせてそれぞれの項目の幅を決めていきます。
概ね、メインコンテンツの見栄えを考慮しますので
　２カラム　メイン８：メニュー２
　３カラム　メイン６：メニュ右２：メニュー左２
のような比率になることが多いです。
３カラムの時は、左右の幅は大抵同じにします。

ただし、あくまでデザインメインなので、２カラムでメニューに見栄えのいい画像を並べる場合などは７：３とかの比率もあり得ます。
数字よりも、デザインやページの視認性に重きを置く方がユーザーにも優しいものができると思いますよ。

回答No.4

神崎 渉瑠（@taloo）

> 幅を広くしすぎると改行の際の目の動きが右から左へ大きくなり、疲れやすく読みづらくなりますので、
> 私は最大幅1000pxにしています。

自己レスですが、この考え方はやはり穴がありました。

フルハイビジョン（幅1920px）対応リビング向けテレビで、
インターネットテレビやインターネット接続ができるゲーム機を使って表示し、
テレビから３ｍ以上離れると、1000pxでは文字が小さくて読めず、
フォントサイズを大きくすれば、頻繁に改行されて読みづらいです。

モバイル環境では800pxや480pxも考えられますし、
ピクセル数か文字数、もしくは必要があればウインドウサイズで有効なサイズになるようにしていかないとダメですね。

いずれにしても、サイズは気分次第というのに変わりありません。

回答No.3

神崎 渉瑠（@taloo）

> いろいろ調べてはいるのですが、中途半端な数字が多いので、何か計算式にのっとって幅を決定しているのかな？
計算式はありません。
Fireworksで「このくらいの大きさで表示したいな」と思ったサイズを矩形でとり、
だいたい5pxか10px単位に切り上げています。
ツールの違い、切り上げるかどうかの違いだけで、ほとんどの方が同じじゃないでしょうか？

22インチワイドモニターが２万円を切るようになりましたが、
幅を広くしすぎると改行の際の目の動きが右から左へ大きくなり、疲れやすく読みづらくなりますので、
私は最大幅1000pxにしています。

回答No.2

noname#83877

私は790pxよりは780pxで考えますね。
スクロールバーの幅ががだいたい16px程度だと思うので、解像度の低いモニターを使っていても全画面でサイトが見えるようにするためです。
さすがに横幅640pxや400pxのモニターを使っている人はいないと思われるので、現在主流と思われる17～19型（横1280px）の一つ狭い解像度の1024pxからスクロールバー等の余裕分を引いて1000px以下なら問題ないと思います。
私はさらにこれに保険をかけて800pxのモニタにも対応しようとしているだので780pxとなるわけです。