3.配置のワザ
【連絡】 橋本です。会社辞めちゃいました!



ではまず配置について考えて見ましょう。
一言に配置と言っても色々ありますね。
全体のバランス(ホームページそのものの配置)、文字の配置(大きさなど)・・・
ではまず、一番大枠の縦と横について書いて見ます。


縦のサイズはそれほど気にしなくていいと思います。なぜならば、パソコンでは横書きですから、下に文章が続くのは多くの場合気にならないからです。僕も気にしません。
ただし、あまりにも長いのは、読む方も「まだ続くのか?」と不安になるので、その場合は半分で切って次ページにまわした方がいいかもしれませんね。
しかし、
トップページだけは長くなりすぐないように気をつけましょう。文章のあちこちからリンクが張ってあるとまず文章を読めばいいのか、それともリンクをたどればいいのか分かりません。トップページはいわば目次です。できるだけトップページは簡潔にしましょう。

■横
これが問題です。横幅に気を使っていないページは意外と多いものです。
<ディスプレイのサイズ>
実はディスプレイのサイズでホームページデザインはいろいろと規制されてきました。
大きく分けると2種類になります。
この『ネットワークビジネスコミュニケーション』に訪れる人のディスプレイの大きさのデータを見てみると

横×縦 割合 グラフ サイズ
1024 x 768  45% 36 17インチ
800 x 600  41% 33 15インチ
640 x 480 7% 6 14インチ?
不明 7% 4

これを見て、「え?何でこんなこと分かるの?」と驚かれる方もいるかもしれませんね。
今やアクセス解析は当然です。インターネットの戦略的なマーケティングのために、こういうデータは必須です。もちろんあなたの個人情報までは分かりませんのでご安心を。

上のデータを見ると、
ほとんどの人が800×600ピクセル以上の15インチディスプレイを使っています。
最低は横幅640ピクセル(14インチ)ですが、わずか7%です。最低レベルに合わせてもいいのですが、今どんどんディスプレイの大型化が進んでいますので、すぐに640ピクセルのサイズはなくなるでしょう。
時々、やけに横幅が狭いホームページがありますね。左に全体が寄っていて、右側が大きく空いているものです。あれは7%のユーザーを考えて640 x 480用にデザインしているんですね。
と言うことで、
横幅は800ピクセルを規準に作ればいいと言うことになります。
このときに、僕は800ピクセルよりも少し小さくデザインします。なぜならば、800ピクセルピッタリだと、下にスクロールバーが出てしまうことがあるからです。

これは790ピクセルの表です。
特にディスプレイからはみ出していませんね?


■文字数
さて、横幅が決まったところで、文字の横幅です。
時々ディスプレイいっぱいに文字が広がっている場合がありますが、あれは読みにくいですね。僕は17インチディスプレイで横幅1024ピクセルにしてあるので、改行がないと本当に読みにくいのです。作った本人はもしかしたら小さなディスプレイで、改行してなくても全然気にならないのかもしれません。
多くの人に読んでもらうには、読む人のことを考えないといけません。
雑誌を見てください。意外と一行は狭いでしょう?
20文字から30文字程度ですね。
実はこのページの
この文章は横幅550ピクセルの表に入っています。一行に50文字くらいあります。ちょっと多いくらいですね。でも、これを30文字程度にするとページの左右が空きすぎてしまい不恰好です。

これが25文字程度です。どうでしょうか?左右が空きすぎですね。
雑誌なら段落を作って横に広げたりしています。ホームページではそれはちょっと見かけません。下に読み流せないとストレスがたまります。


文字の横幅の決め方は色々とありますが、一番ポピュラーなのは表(テーブル)を使うことです。
自分で改行してもいいのですが、どうしてもきれいには揃いませんね。
この表と言うのはとても便利でいろいろな用途につかえます。
文章を載せるための枠と考えた場合、いろいろと設定を変えることでデザインも変わります。

表のデザイン参考
{表の枠}を表示させたものです。

{表の枠}を表示させたもの+セルに色をつけたもの

{表の枠}を表示させたもの+セルに色をつけたもの+表の背景に黒を入れたもの

{表の枠}を非表示+セルに色をつけたもの

表の枠}を非表示+セルに色をつけたもの+セルの余白を10にした場合

{表の枠}を非表示+表の背景に黒+セルに色をつけ+セルの余白を10
なお、ネットスケープをブラウザで使うと、表の背景は色をつけることが出来ません。

このように、設定を変えると色々な効果を出すことができます。
いちいち画像を使わなくてもきれいに見せることができるのです。
僕のお気に入りは■をいれてこんな風にタイトルを作ることです。
タイトル
■に色をつけるとちょっとおしゃれになりますね。画像じゃないから軽くて済みます。ちなみに■は「しかく」と打って変換すると出るはずです●でも★でもいいですね。
あとは、表でこんなことも出来ます。
タイトル
.
やはりネスケでは不恰好ですけど。
ソース
<TABLE cellspacing="0">
<TBODY><TR><TD bgcolor="#0033ff"><FONT color="#0033FF">■</FONT></TD>
<TD bgcolor="#ffffcc" width="225"><B>タイトル</B></TD></TR>
<TR><TD colspan="2" bgcolor="#0033FF" height="1" style="font-size : 1px;line-height : 1px;"><FONT color="#0000ff" size="1">.</FONT></TD></TR></TBODY></TABLE>



ちなみにこんなワザもあります。このページのタイトルにも使っています。
■タイトル
表じゃないところがミソですね。でも表の中に入れて横幅を調節してます。
ソース:
<DIV style="border-style:outset;background-color:#ffffcc;"><B>■タイトル</B></DIV>
これもネスケでは上手く表示されません。
【連絡】 橋本です。会社辞めちゃいました!


HOME広告募集お問合せ