レイアウト&ページデザイン全般

このページではレイアウトとページデザイン全般に関するTipsを紹介します.[例]というボタンを押すと,新しいWindowが現れて約1/2のサイズのサンプルを示します.


コンテンツが同じでも,レイアウトが違うとまったく別のページに見えてしまうのがホームページです.簡単なTipを使って,見やすいページを作りましょう.

・Tip1:1ページに内容を詰めすぎない.1画面に収まればベスト.

僕は縦長のページが基本的には嫌いです.だって,見づらい.スクロールバーをマウスでいじるのも面倒.あんな縦長の雑誌,ないでしょ? ということでなるべく1画面に収めましょう.特に「目次ページ」は1画面に収めた方が有効.全体が見えるから.
クリッカマブルマップを使ってもいいんだけど,一番よく来る「目次ページ」におっきな画像があるって言うのはお勧めできません.で,使うのは<DTABLE>です. [HEIGHT]オプションを使って段組みをします.
・Tip2:リンクのアンダーラインを消して見やすいページにする.
スタイルシートというものを使って,リンクのアンダーラインを消すことができます.ブラウザの設定で消してる人もいるかもしれませんが,これをやるとページがすっきりします.このHP制作ページはほぼすべてのリンクにこのTipを使用しています.
以下のHTMLの赤い部分が必要事項.ページのはじめの方の<HEAD>タグ内に以下を挿入してください.

<HEAD>
<style type="text/css">
<!--
A:link, A:visited, A:active { text-decoration:none }
-->
</style>

<HEAD>


・Tip3:IEでは<HR>に色を付けられる.
IEでは<HR>(罫線)に色を付けられます.これはレイアウトデザインにはすごく役に立つのですが,IEのみです.ということは色をつけてもネスケでは見えないということ.多用している人は注意して下さい.HTMLは以下.

<HR COLOR=WHITE>


・Tip4:重いページと軽いページを明確に分けて作る.
これはTipというより気配りの問題.仮に,テキスト中心の日記と,自分で取った写真のギャラリーがあったとしましょう.この場合,ギャラリーを見に来てくれる人は写真の重さをある程度覚悟して見に来ているので,ページが多少重くても問題ありません.
しかし,日記を見に来ている人はこのページはサクサクみれると思って見に来ています.それなのに「〜の日記」というタイトルや,背景などが重い画像になってたりすると,がっかりします.
「私は日記が読みたいだけで,あなたのcoolなデザインは,ちゃんとギャラリーで見ますから!!」って心の中で叫びたくなります.
結論:それぞれのページは,見に来た人の目的を考えてメリハリのあるレイアウトにする.


・Tip5:更新をしない一発ページは<PRE>を使ってレイアウト.
使い方次第では,便利なんだけどなかなか使い方が難しい<PRE>.<PRE>とは,本来半角以上の空白は空白とみなさないHTMLにおいて,HTML通りに表示するためのタグです.つまり,通常のHTMLで,
a  b

a b
と表示されますが,
<PRE>a  b</PRE>
a  b
と表示されます.

<PRE>の有効な使い方の一つは,更新しないようなページのレイアウト.例えば自己紹介.左側に名前・年齢・趣味などの項目を書き,右側にそれらを書く場合,通常は<TABLE>を駆使します.でも,<PRE>なら簡単です.書いたそのものが表示されるわけですから.
ただしあまりコンテンツが多いと,小さいブラウザでは画面をはみ出す可能性があるので,そこを気を付けて下さい.


・Tip6:更新履歴(What's new)のページを作る.
これも気配りの問題.ある程度HPのコンテンツが増えたら,更新履歴は必ず作りましょう.ページ製作者はどこを更新したか分かっても,HPを見に来てくれる人には分かりません.
一つ一つの項目に「new」などの画像を貼ってもいいのですが,外すタイミングが難しいのでお薦めではありません.三日で外したら,一週間毎に来る人には分からないし,二週間で外すとなると3日毎に来る人が毎回見てしまいます.
ということで,更新日を記入した更新履歴を作るのが良いでしょう.このページは凝らずに軽くするのが良いと思います.ページはメリハリが大事ですから.


・Tip7:ステータスバーを利用してページをすっきりさせる.
ここでは<A></A>で囲まれたところ(リンク)をマウスが通過すると,ステータスバーに文字が出るというTipを紹介します.
以前に,ステータスバーに文字を流すというTipが流行った時がありました.しかし,必要な情報が見えなくなるなどの理由で,あまり歓迎されずに今ではすっかり見なくなりました.代わって,このTipが頻繁に見られるようになりました.このHPでもよく使われています.
利点は,ページの中の文字を減らせるということ.僕自身,ページは1画面に収めるのが良いと思っていますので,リンクページなどはリンクごとにコメントを書くとどうしても縦長のページになってしまいます.その時,コメントをステータスバーに書くと,ページがとてもすっきりします.とても効果的なTipですが,馴れない人は少し戸惑うかもしれないので,「ステータスバーに注目」など,一言記しておくと良いでしょう.
使用上の注意点は,長い文章ははみ出るということ.ブラウザの大きさにもよりますが全角で30文字くらいに収めましょう.以下,HTML.

<A HREF="sample.html" onMouseOver=window.status="この中に文字を入れる";return true >sample</A>


・Tip8:読み物中心のページは,より見ていて疲れない配色にする.
ページを軽くするには画像を使わないのが簡単な方法です.しかし,すべてのページが,「画像ナシで背景が白,文字が黒」では見栄えがしません.そうすると背景色・文字色が重要になります.
この時に,日記などの読み物ページの配色が見づらいと,読む気がなくなります.いくらcoolな配色でも,そのようなページは控えた方が良いでしょう.
これは配色だけでなく,画像も同じです.いくら自分の好きな画像でも,コンテンツが読めなくては意味がありません.そういうものは目次のページや自己紹介,ギャラリーなどのページで使いましょう.