売れてるホームページの横幅・・・その後
書きましたが、
早速試してみた！
という嬉しいメールを頂きましたのでご紹介しますね。
───────────────────────────
> 売れるHPの横幅のメルマガ、とても参考になりました。
> どのくらいの幅がいいんでしょう？ってずっと思っていたんです。
> さすが菅さん、こういう知りたい情報をくださるなんて！
中略
> それと、ブログ、カスタマイズしてかなり変わりました。（・・・と自分では思う。）
───────────────────────────
では、見てみましょう！↓
http://wind-plus.chu.jp/bio.html
どうですか？
スッと読めるページになっているのが分かるでしょうか？
ちなみに、前回書いた売れるページの横幅とはこれ↓です。
△ 画面を左右に分割しない場合→幅510～560ピクセル
△ 画面を左右２分割する場合→
メイン480～520ピクセル サブ150～240ピクセル
メイン+サブ＝530～760ピクセル
どかん！と反応が有るノウハウでは無いですが、確実に
効果の有るノウハウですから是非試して見て下さいね！
■ ホームページではこれも嫌われる！
さて、先ほど紹介した「水鉢ビオトープ」のページを
運営している「さっち」さんとのやり取りで、思い出した
のですが、ホームページの表現で嫌われる表現の一つに、
「センター合わせ」があります。
ついなんとなく、やってしまう場合が多いのですが、
このセンター合わせも、「読みにくくする要素」ですから、
やめておいた方がいいんですよね。
それは、これ↓を見てもらえれば一目瞭然ではないでしょうか？
こんな風に
文頭の位置がかわ
ると
行が変わるごとに、
文頭の位置を探すので
読みづらく
なるんですね。
こんな風に
文頭の位置がかわ
ると
行が変わるごとに、
文頭の位置を探すので
読みづらく
なるんですね。
普段はあまり意識しないと思いますが、センター合わせに
することで、行ごとに文頭の位置が変わりますよね？
という事は、行が変わる毎に文頭の位置を探して目玉を、
不必要に動かさなくてはならず、負担が掛かるんですね。
ビジュアル的なイメージはいいかもしれませんが、
やっぱり読みにくいと読んでもらえる確率が減りますので
それだけでも勿体無いと思いませんか？
売れてるホームページの横幅について・・補足
前回、売れているホームページの横幅についての話を書きま
したがおぼえてますか？
それを読んでくれた方と、メールのやり取りをしてたのですが、
少し補足が必要だと気付いたので、きょうのメルマガはその補足
です！
ちなみに、ホームページの作り方が解らない方には、さっぱり、
解らない呪文のような話になってしまいますので、そんな方は、
「▼ ここからよんでね！」
と書いてあるところまで飛ばしちゃっても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ピクセル程度取り、
文字同士の間に適度に空間が生まれるようにする事。
なども、読ませるページにするには大切です。
う～ん、どうしても文字だと説明し辛いですねぇ。
▼ ここからよんでね！
チラシも、ホームページも一緒ですが、
「見る人に苦痛を強いるレイアウト」
というのは、基本的に嫌われます。
「強い興味を持って見ている」
という人は、多少の苦痛は乗り越えて最後まで見てくれますが、
そのチラシやホームページを見ている、多くの、
「あまり興味を持っていない」
人は、「見にくい」というだけで読むのをやめてしまいます
から、読みやすいように、幅を調整したり、余白をつけたり、
する事が大切なんですね。
売れてるホームページの横幅について
「売れてるセールスページのレイアウト」について調べていて、
真っ先に気付いたのが、ページの横幅について。
私がチェックしたサイト全てページの横幅が、
510ピクセル～560ピクセル
でした。
サイドにメニューや、お客様の感想が付いている場合はこの
サイズを超えているページもありましたが、メインのセールス文
が書かれている部分は、全てこの範囲内の幅ですね。
これ、Webデザインを少し勉強している方なら知っていることだと
思いますが、「ホームページの横幅は600ピクセル程度に納める。」
と良いと言われています。
と、言うのも現在一般的に使われているモニターの表示領域が、
最小で幅640ピクセルですから、それ以上ホームページの横幅が
広くなってしまうと、見る人が横スクロールをしなくては、
いけなくなってしまうのです。
ちなみに、この、「横スクロール」というのは非常に嫌われる
要素なんですよ。
また、基本的に人間というのは非常に横着な生き物ですから、
目玉を左から右へ（縦書きなら上から下へ）大きく動かすのは、
じつは、「面倒くさい」のでキライです。
だから、横方向に、だらだらと長い文章を書くと、タダそれだけで読んでもらえる可能性が減ってしまうものなのです。
ちょっと、難しい話になりましたが、
「目玉を一杯動かさなくてはいけないレイアウトは嫌われる！」
と覚えておけばいいのでは無いでしょうか？
その証拠に、大判の新聞や雑誌などでは、そのページの幅を
目一杯使った文章というのは、無く、必ず数段に分割されて
ますよね？
あれは、分割する事で目玉の移動量を減らし、読みやすく
しているわけです。
あ、これはホームページに限った話ではなく、チラシや、
DMにもそっくり言える話ですから、覚えておいてくださいね！