売れてるホームページの横幅について・・補足
前回、売れているホームページの横幅についての話を書きま
したがおぼえてますか？
それを読んでくれた方と、メールのやり取りをしてたのですが、
少し補足が必要だと気付いたので、きょうのメルマガはその補足
です！
ちなみに、ホームページの作り方が解らない方には、さっぱり、
解らない呪文のような話になってしまいますので、そんな方は、
「▼ ここからよんでね！」
と書いてあるところまで飛ばしちゃってもOKですよ（笑）
さて、前回
> 「売れてるセールスページのレイアウト」について調べていて、
> 真っ先に気付いたのが、ページの横幅について。
>
>
> 私がチェックしたサイト全てページの横幅が、
>
> 510ピクセル～560ピクセル
>
> でした。
>
> サイドにメニューや、お客様の感想が付いている場合はこの
> サイズを超えているページもありましたが、メインのセールス文
> が書かれている部分は、全てこの範囲内の幅ですね。
>
と、書きましたが、ちょっと解りにくいようなので補足説明を・・
まずはyahoo!のTOPページをご覧ください。
このページを見ると左右に2分割されているのがわかりますよね？
で、メインとなる左側の各カテゴリーへの入り口が480ピクセル、
右側のトピックスのメニューが224ピクセルです。
これを踏まえて説明します。
>メインのセールス文
> が書かれている部分は、全てこの範囲内の幅ですね。
↑これが、yahoo!で言うと左側のメイン部分、
メインとなる左側の各カテゴリーへの入り口部分です。
「売れてるセールスページのレイアウト」だと、510ピクセル～560ピクセル
yahoo!は480ピクセルですので微妙に小さいですね。
> サイドにメニューや、お客様の感想が付いている場合はこの
> サイズを超えているページもありました
↑これが、yahoo!で言うと右側のサイド部分、
右側のトピックスのメニュー部分
です。yahoo!では224ピクセルです。
左と右、合計すると
480ピクセル+224ピクセル＝704ピクセル
（実際には真ん中に6ピクセルの空白セルが入ってますので、
合計は、710ピクセルです）
yahoo!のページはサイドにメニューが入っているので、
> 510ピクセル～560ピクセル
を超えているケースですね。
えーと、なんだか逆に解りづらくなってしまった気もするの
で、整理すると、
△ 画面を左右に分割しない場合→幅510～560ピクセル
△ 画面を左右２分割する場合→
メイン480～520ピクセル サブ150～240ピクセル
メイン+サブ＝530～760ピクセル
が見やすいと言う事ですね。
また、合計のページ幅に関して、前回は
> これ、Webデザインを少し勉強している方なら知っていることだと
> 思いますが、「ホームページの横幅は600ピクセル程度に納める。」
> と良いと言われています。
>
> と、言うのも現在一般的に使われているモニターの表示領域が、
> 最小で幅640ピクセルですから、それ以上ホームページの横幅が
> 広くなってしまうと、見る人が横スクロールをしなくては、
> いけなくなってしまうのです。
と書きましたが、実際にアクセスログを取ってみれば解りますが、
幅640で見ている人というのは1％未満になってきていますので、
その次に小さな、幅800ピクセルを最小と考え、最大760ピクセル
程度まで幅を取るページも多くなってきています。
ただし、その場合にもテーブルタグで左右に分割し、メインのページ
の幅が、520ピクセルを超えない事をお勧めします。
【 ※ 追記 】
検索エンジン対策や、ユーザビリティーの問題から、
現在ではテーブルはお勧めできません。
スタイルシートでの段組みを取り入れることを強くお勧めします。
あとは、
△細かい事ですが、テーブルの枠線が有ると、
かなり鬱陶しいので、基本的に枠は0ピクセル指定する事。
△セル内の余白は5～15ピクセル程度取り、
文字同士の間に適度に空間が生まれるようにする事。
なども、読ませるページにするには大切です。
う～ん、どうしても文字だと説明し辛いですねぇ。
▼ ここからよんでね！
チラシも、ホームページも一緒ですが、
「見る人に苦痛を強いるレイアウト」
というのは、基本的に嫌われます。
「強い興味を持って見ている」
という人は、多少の苦痛は乗り越えて最後まで見てくれますが、
そのチラシやホームページを見ている、多くの、
「あまり興味を持っていない」
人は、「見にくい」というだけで読むのをやめてしまいます
から、読みやすいように、幅を調整したり、余白をつけたり、
する事が大切なんですね。