ページ横幅のベストサイズは？
Webページの横幅は、サイト制作のたびに迷う人が多いようだ。
もちろんユーザー環境を考えるのは当然だが、コンテンツの性質も意識して決めた方がよい。
一般的に大きく分けて、760px前後にするか900px前後にするかの２択になる。古いＰＣで全体を閲覧できるようにするには760px前後が適切だが、それほど古いＰＣが少ないことを考えると、ユーザーサイドからすれば実際は900px程度で問題ない場合が多い。
意外に辛い900px
ユーザー環境としては事実上問題ない900pxだが、コンテンツの内容次第では制作が辛くなることも多い。
横組みの文章の場合、読みやすい文字数の基準は最大で40文字ほど。
13pxで1行40文字の場合、文字の段組横幅は520pxとなる。
ユーザーが文字を小さくすることも考えると、余白を考えても300px以上をサイドメニューなどに使わないと間が持たないが、それには３段組でないと厳しい。
さらに、ビジュアル要素に乏しいと、スペースが広い分だけ逆に貧弱に見えてしまう。
結論として、現状ではユーザー環境を意識するよりもコンテンツの内容と充実度を優先して決定するのがよいだろう。
文字中心のコンテンツであれば、無理に横幅を広げず、従来どおりの760pxにとどめておくのが、ユーザーにも制作者にも優しいサイトとなる。
行長と行間を比例させて読みやすく
また、横幅が変わると１行の文字数に影響があるが、行間とのバランスもきちんと調整していきたい。
行長に対して、読みやすい行間はおよそ比例関係にある。
行長が長いほど、行間を空けたほうが読みやすい。
そのため、CSSでline-heightを指定する際、行長のことを考えて設定することが大切だ。
1行15文字のブロックと、1行40文字のブロックが同じ行間では読みづらくなってしまうおそれがあるので、それぞれの文字組を目で確認して最適な設定を作っていくことが必要だ。
さらに詳しく見るなら
Webページ閲覧時における視線の動き
人間の視線の動きには規則性がある。
文字が横組みであれば、左上から右下へ視線が流れていくが、Webページも大きくはこのパターンに該当すると考えてよい。
Web特有の動き方
近年の研究においてWeb特有の視線の動きについて報告されており、
①視線はF字型をたどり、右サイドのコンテンツはほぼ見られない。
②画像よりテキストに視線が集まりやすい。
などの特徴があるようだ。
つまり、右サイドにあるコンテンツは見られない可能性が高く、特に右サイド下部はほぼ視線がいかないと考えてよいだろう。
画像についても、よほど意味があるもの以外は注意が集まりくい。
通信販売サイトの商品画像などは商品説明の役割を担っているため、視線んは集中するが、イメージ画像のようなものはムダなスクロールを招くことにもつながるため、敬遠される傾向が強い。
ユーザーが求める情報を与える
Webサイトに訪れるユーザーは、多くが目的を持っており、、さらにその目的が「情報」である場合が多いと考えられる。
従来の紙媒体では、特に広告においては「興味を引く」という役割も大きいが、Webサイトを訪れた時点で、ユーザーは既に興味を持ち、能動的に訪問しているため、画像や派手な広告には目を向けない蛍光になるのではないだろうか。
バナー広告もそれとわかる場合には視線を集めないようだ。
最終的には、ユーザーに必要な情報を左上に近い場所から、順序立ててレイアウトすることが望ましいといえる。
その意味で、コンテンツにごまかしが効かないことも認識しておいた方がよいと考えられる。
さらに詳しく見るなら
レイアウトを細かく調整する方法
レイアウトの微調整などをしたいとき、比較的簡単に使えるのがpositionプロパティを使う方法だ。
positionプロパティは通常それほど頻繁には使われないが、周囲の要素にほとんど影響を与えないため、微調整などには便利に使える。
positionプロパティとは、「元の位置からどれくらい移動する」という設定ができるプロパティで、移動距離によってはブロック要素どうしを重ねることも可能だ。
*absoluteとrelativeがある
このpositionプロパティだが、absolute(絶対配置)とrelative(相対配置)がある。
>それぞれの使いどころ
absoluteで配置すると、レイアウトがかなり自由に、しかも簡単にできるので、精細なレイアウトをする際には便利だ。
その反面、後続の要素が重なってしまったり、フッターが上に上がってしまったりという恐れがある。
relativeの場合、他の要素には影響がないので、ブロックどうしが意図せず重なったりすることは少ないが、移動する距離を大きくしすぎると無用な空白ができることもある。
absoluteは必要最低限にとどめ、relativeはレイアウトの微調整に使うのがおすすめだ。
さらに詳しく見るなら