ページ横幅のベストサイズは? | キッドマンのブログ

ページ横幅のベストサイズは?

Webページの横幅は、サイト制作のたびに迷う人が多いようだ。


もちろんユーザー環境を考えるのは当然だが、コンテンツの性質も意識して決めた方がよい。


一般的に大きく分けて、760px前後にするか900px前後にするかの2択になる。古いPCで全体を閲覧できるようにするには760px前後が適切だが、それほど古いPCが少ないことを考えると、ユーザーサイドからすれば実際は900px程度で問題ない場合が多い。


意外に辛い900px


ユーザー環境としては事実上問題ない900pxだが、コンテンツの内容次第では制作が辛くなることも多い。


横組みの文章の場合、読みやすい文字数の基準は最大で40文字ほど。


13pxで1行40文字の場合、文字の段組横幅は520pxとなる。


ユーザーが文字を小さくすることも考えると、余白を考えても300px以上をサイドメニューなどに使わないと間が持たないが、それには3段組でないと厳しい。


さらに、ビジュアル要素に乏しいと、スペースが広い分だけ逆に貧弱に見えてしまう。


結論として、現状ではユーザー環境を意識するよりもコンテンツの内容と充実度を優先して決定するのがよいだろう。


文字中心のコンテンツであれば、無理に横幅を広げず、従来どおりの760pxにとどめておくのが、ユーザーにも制作者にも優しいサイトとなる。


行長と行間を比例させて読みやすく


また、横幅が変わると1行の文字数に影響があるが、行間とのバランスもきちんと調整していきたい。


行長に対して、読みやすい行間はおよそ比例関係にある。


行長が長いほど、行間を空けたほうが読みやすい。


そのため、CSSでline-heightを指定する際、行長のことを考えて設定することが大切だ。


1行15文字のブロックと、1行40文字のブロックが同じ行間では読みづらくなってしまうおそれがあるので、それぞれの文字組を目で確認して最適な設定を作っていくことが必要だ。





さらに詳しく見るなら

CSS、XHTML、レイアウト、ブラウザ、Ajaxなど、Webに関わる人なら最低限知っているべき常識100を紹介。知りたかったテク、使いたいワザが満載! デザイナー・プロデューサー・ディレクター必携の一冊。