ホームページ作成上の注意

• トップ
• ホームページ作成上の注意

• 概要
• 内容
• リンク
• よく間違える構文
• 汎用性
• Netscape ブラウザへの配慮
• 操作性
• 目に優しい
• 著作権など

概要

私がホームページを作る際に気を付けていることについて述べます。私個人の好みがかなりあるので、全員が全員、これに従ったホームページを作ってしまうと面白味にかけてしまうかもしれません。あくまで、参考程度に読んでみてください。

内容

ライト（軽い）がいいな

軽い（転送量の少ない）ページを目指しましょう。自分のハードディスクで見ているページは割合と早く表示されるものです。これをサーバーにアップロードして見ると遅くなります。自分のプロバイダから見る時はまだいいですが、遠い経路のプロバイダから見るともっと遅くなります。会社の中からプロキシサーバー経由で見たりするときはもっともっと遅くなります。今自分が見ている時間よりも、１０倍くらいの時間がかかるかもしれないことを覚悟しておいてください。

コンテンツ（中身）が大事

作るのを楽しむホームページと、見てもらうのを楽しむホームページがあります。見てもらうのを楽しむからには、絵でも音楽でも文章でもサービスでもいいですが、それなりのコンテンツが大事です。

「シンプルイズベスト」か「こいつぁすげぇぜ！」か

中途半端に、画像、動画、Java、音などを貼り付けるのはやめましょう。「ここでもこんなことやってる。重いだけだなぁ。」と思われるものを貼り付けるのはかえってマイナス。「シンプルイズベスト」を目指すか、どうせ貼り付けるなら「こいつぁすげぇぜ！」とか「いいデザインだなぁ」と感動してもらうものを目指しましょう。

自己満足のページでもいいじゃない

よく「自己紹介や日記などのくだらんホームページなんか作るな」という文章を見かけますが、私はこの意見には反対です。ホームページは自由な表現のスペースです。ペットや子供の写真を貼りまくっても、仲間内で見るぶんには楽しいし、見ず知らずの人と意外な共通点を見つけたりすることも楽しいじゃないですか。

ホームページの宣伝

しかし、内容は自由で構いませんが、宣伝には注意が必要です。作ったホームページを皆に見てもらいたいのはわかりますが、まだ内容が不十分のままいろいろな検索エンジンに登録したり、自分のホームページと関係の無いカテゴリにまで登録したりするのは考え物。「せっかく見に来たのに、ロクなものが無いじゃん」と思われてしまっては、せっかくの登録＆宣伝がマイナスになってしまいます。

リンク

工事中ページにはリンクを張るな

結構嫌われるのがこれ。せっかくリンクをクリックしたのに、「このページは工事中です。」なんて表示される。最初からリンクを張らなければよいですね。

リンクは定期的にチェック

リンク先のページが廃止や移動になっていないか、定期的にチェックしましょう。・・・とか言いながら、これは私もサボりがちです。なんとかしなくちゃ。

ディレクトリの後ろにはスラッシュをつける

http://～/userid で終わってしまうURLをよく見掛けますが、useridがディレクトリ（フォルダ）であれば、http://～/userid/ のように最後にスラッシュ( / )をつけましょう。(その方が読込みが早い。本当。)

よく間違える構文

<h1>や<p>

<h1>をフォントの大きさを変えるためだけに使用したり、<p>を改行の代わりに使用したりするのは、行儀の悪い書き方だそうです。それぞれ、章のタイトル、段落という意味を考えて使いましょうということかな。

< と > と &

< や > や & などは、そのまま記述してもちゃんと表示されることがありますが、ちゃんと &lt; や &gt; や &amp; と記述しましょう。<pre>の中身は特に忘れがち。

閉じない<a name="...">

<a href="...">の閉じ忘れはすぐ気付くのですが、<a name="...">の閉じ忘れは意外と気付きません。<a name="..."></a>のように、閉じてはいるけど中身の無い使い方もまずい場合があるようです。<font>タグを閉じていない人も時たま見かけます。

size="+1" width="80%"

size属性やwidth属性で単なる数値を指定する場合には必要ないのですが、+1 や 80% などの英数以外の文字を指定する際には、ダブルクォーテーション( " )で囲むようにしましょう。

HTML構文チェッカーを利用しよう

HTMLの構文チェックを行ってくれるツールがいくつかあります。これらで一度チェックしてみるのも良いかも。

• Another HTML-lint
• HTML Validation Service(W3C)

汎用性

みんなに読んでほしいよね

「このページはInternet Explorer 4.0以上で....」というのをよくみかけます。その機能を使用することがそのページの主な特徴であるならよいのですが、必要も無いのに利用者を制限するのはやめたいものです。

表示テスト

Internet Explorer ではうまく表示できても Netscape や Opera だとうまく表示できなかったり。できることなら、可能な限り多くのブラウザ、多くのバージョンで表示できることを確認したいものです。ただし、新しい技術を利用することと、古いブラウザへの対応はトレードオフの関係にあり、どちらを優先するかは難しいところですが。

半角カナは使わない

基本的には半角カナは使用すべきではありません。半角カナを読めないブラウザもあります。ただし、i-mode 用のページであれば、通信料も表示面積も少ない半角カナは結構好まれています。

マシン固有の文字は使わない

一部のマシンでしか表示できない文字があります。これを使用すると、自分は読めるが人は読めないということになります。○付き数字や、ローマ数字などはマシン固有文字です。

ファイル名に使用できる文字

ファイル名には無難な文字のみを使用しましょう。半角英数文字とハイフン( - )、アンダーバー( _ )くらいに留めておくのが無難です。日本語を使用したファイル名は正常に表示されないことがあります。

Netscape ブラウザへの配慮

Netscape ブラウザでのチェック

以前に比べればずいぶん減ってしまいましたが、Netscape ブラウザの利用者もまだまだ沢山居ます。自分のページが Netscape Communicator 4.* や Netscape 6.0/7.0 などでどのように見えるのかチェックしておきましょう。

スクリプトの互換性も気を付けて

JavaScriptやVBScriptなどを使用する場合は、ブラウザの互換性にも気を付けて。例えば、Netscapeでサポートされていない機能を使用したりすると、エラーダイアログが表示されて、とても鬱陶しくなります。

終了タグは省略しない方が無難かも

特に、スタイルシートを使用している場合、<li> や <p> の終了タグを省略すると、たまに、妙な表示になってしまうことがあります。

操作性

１ページの長さについて

「スクロールバーを操作するのは面倒なので、１ページの記述量は少ない方がよい」という意見と「ページの読み込みは時間がかかるので、１ページにまとめて記述するほうがよい」という意見があります。私はどちらかというと後者です。ただし、ローカルディスクから読み込んでさえ、数秒待たされるのは長すぎと思い、適度に分割するようにしています。イントラネットなど、利用者が近場のみで速い環境なら前者でしょう。

文章はできるだけ短く

ホームページの目的によって異なりますが、私は文章が極力短くなるようにしたいと思っています。「あなたがホームページを作る時にはできるだけ軽いページを目指すようにしたほうが良いでしょう。」と「軽いページを目指しましょう。」は、言ってることは同じ。

[戻る]リンク

私は常にブラウザのツールバーの[戻る]ボタンを使う派なので、ついつい忘れがちなのですが、ツールバーのボタンをほとんど押さない人も多いようです。適切な箇所に[戻る]リンクをつけてあげましょう。

フレームの中のリンク

フレームを利用している場合はリンクの書き方に注意しましょう。TARGET="_top" という属性を記述しておかないと、フレームの中身だけがリンク先のページに変わってしまいます。

全体の構成を分かり易く

ハイパーテキストのリンクは便利ですが、無節操に使用すると自分がいまどの階層にいるのか、わからなくなってしまいます。リンクが複雑になる場合は、各ページの頭に「とほほのホームページ / とほほのWWW入門 / ホームページ作成の注意」など、トップページからの階層名を書いたりすると解りやすいかな。

階層が深すぎるのも考え物

ページの階層構成が、あまり深くなりすぎるのも考え物。クリックして表示されるまでの時間は待たされるし、待たされた挙げ句、５行程度しか内容が無かったり・・・適度なページ長と適度な階層度のバランスを身につけましょう。

ウィンドウの大きさ

広いディスプレイを使用している人は、一度、ブラウザの大きさを狭くして自分のホームページを見てみましょう。1024×768や800×600や640×480では少々見ずらいという場合もあります。私は1024×768で、ウィンドウを左右に２枚表示するのを基準に、横幅は500程度を目安に作成しています。

横スクロールは許せない

横スクロールは縦スクロールに比べて何倍も人をイライラさせます。PageUp/PageDownキーを使えない。最近だとインテリマウスもつかえない(？) １行毎にスクロールさせなくちゃ読めない。スクロールが左右で一方向でなく、方向を変える度にマウスを移動させなくてはならない。ウィンドウをリサイズしなくちゃいけない。

目に優しい

WIDTHとHEIGHT

<img src="...">タグでイメージを表示する際には、width=n と height=n 属性を必ず指定するようにしましょう。これを指定しないと、画像を読み込む度に画面が再描画されてしまうため、体感的な読み込み時間が長くなってしまいます。

ALT="....."

画像なんかいらない。と、テキストのみでブラウザを使用している人がかなりいます。画像無しでもちゃんとページの内容を理解できるよう、<img>タグにはalt="..."属性をつけておいたり、クリッカブルマップの下にはテキストリンクをつけたりしておきましょう。

フォントサイズを指定することの弊害

デザインを重視して、自分の好みのフォントサイズでページのデザインを決めてしまうことがありますが、他のブラウザで見るとフォントが小さすぎて読めなかったり、年配の方がフォントを大きくして見ようと思っても大きくできなかったりします。何も指定しない時のフォントの大きさが、読む側にとって一番読みやすい大きさになっているはずです。

あまり多くのフォントを使用しない

「ここは目立たせたい」「ここはもっと目立たせたい」「ここはもっともっと目立たせたい」と、ついつい、いろいろな大きさのフォントを多用しがちですが、読む方は目が疲れてしまいます。自分が好きな雑誌や書籍のレイアウトを見習ってみるのもよい手ですね。

改行は「。」や「、」のあとで

ご存知の通り、テキストファイル中に改行をいれると妙なスペースが表示されてしまうので、スペースが目立たないように「。」や「、」の後ろにいれるようにしましょう。

私、ブリンク嫌いなんです

私はブリンクする文字（<blink>）が嫌いなんです。目がちらつくので疲れる・・・マーキーも嫌いですね。マーキーを使っているページをみたらつい、[戻る]ボタンを押してしまいます。

私、テロップ嫌いなんです

よく、ステータス行に文字が流れるのを見かけますが、私は、これも嫌いです。リンクポイントの上にカーソルを持っていってもリンク先のURLが読めないし、やっぱし目がちらつくし・・・・・

私、フレーム嫌いなんです

実は私はフレームも嫌いなんです。HTMLの勉強するためにページをファイル保存するのが面倒くさかったというのもあるのだろうけれど、内容を表示する領域が狭くなるし、ウィンドウの大きさをフレームの作者の意図に合わせてリサイズしなくてはならないこともあるし・・・・・とにかく、あまり好きじゃないんです。（とは言っても便利なこともありますけれどね。）

背景は貼らないことにしました

文字が中心のページでは背景は貼らないことにしました。どんなに控えめにしてもやはり、文字が見づらくなりますね。文字よりも、全体のイメージを優先させる場合はこの限りではありませんが・・・

黒い背景の注意

黒っぽい背景画像を使用している場合は文字は白系になるでしょう。画像を読み込まないモードで読む場合のことを考えて、BGCOLORで黒系の背景色にしておいてあげましょう。

色数のことも考えて

これもつい先日までの私のホームページ(今でも?)のことなのですが、32bitカラーモードだと奇麗に表示できるのですが、256色カラーモードだと印象が全然変わってしまい、とても見ずらいというのがありました。(特に背景)

著作権など

著作権に注意しましょう

著作権で保護されている文章、画像、音楽を勝手に使用するのは問題です。詳細は「とほほの著作権入門」を参照してください。