Webサイトデザインアドバイス

Advice

徳保隆夫の発言集12

私は方々のサイト批評掲示板でいろいろ書き飛ばしています。その一部を収録。新旧いろいろ入り混じっています。場所もいろいろ。

+りんごりんご+

[2002.05.12]

見やすいページかどうか

少なくともIE6では、これといって気になりません。私は1024×768の画面で見ているので、お気に入りを出していてもテーブルの幅は気になりませんでした。横幅800におさまっているので、ほとんどの方は困らないと思います。

ですからどうでもいいといえばそうなりますが、先の書き込みのアドバイスにしたがってテーブルのセルを縦に並べる場合のソースは以下の通り(略)。 ただまあ、縦にした場合にデザイン的にどうかというと……。とりあえず試してみてください。いずれにせよ、デザインに言及するなら統一感のなさという問題は避けて通れませんが、1ページ毎に見ていった場合には、見にくいページはありません。

なお、元のソースは明らかにカウンターの記述位置を間違っています。gradationの模様のついたテーブルの「中」に記述されていますが、その位置が絶対に変なので、ブラウザが気を利かせてテーブルの上に表示してくれています。でもこれはIEが特別にやってくれているだけのことで、他のブラウザではそうなるとは限りません。ふつうは文法違反ということで表示が崩れます。そんなわけで、ビルダーのような自動補正機能のついたソフトを使用できない場合、記述には十分注意しましょう。

重くないページかどうか

無料サーバーはたいていどこも重いのです。tsukaeru.netも例外ではないと思います。ただ困るのは、無料じゃないサーバーもしばしば重いということでしょうか……。プロバイダのおまけサービスなど、しばしば重くて仕方ありませんね。プロバイダ以外のサーバーでも、やっぱり安いところは重いのです。たまに高くても重いところがあるので困りますが。

さて、デザイン的にどうかということになりますが、とくに重くはなさそうです。貧弱な回線でネットしている私でも、まあ支障なく見られました。画像はなかなか出なくても、とりあえず文字は出ますから。

HTMLの記述が正しいかどうか

タグの間違いなんですが、まあいっぱいありますので、文法チェッカー文法チェッカーでいちいち確認なさってください。表紙だけで95個のエラーがあり、とくに致命的なミスだけで10を越えます。-150点という点数がついています。まともに表示されるほうがおかしい(というかまともに表示しているIEはミス修正の天才)くらいです。

IEというのは文法チェッカーで-300点のサイトも-500点のサイトもふつうに表示します。おかげでいい加減なHTML文書を作る人が増えて、あまつさえ「ネスケは崩れるから嫌い」とかいうわけです。-150点はまだいい方です。正しい説明をしているサイト(一例)で勉強すれば、すぐにきれいなソースを書けるようになりますよ。(といいつつ私のサイトも99点だったりします。100点ではないのが情けないところ)

ふと目にとまったのですが、高校生なのですから、circle(サークル)くらいは正しい英語で書けた方がいいような気がしました。

ピジョンエクスプレス

URI:http://pijyon.schoolbus.jp/ [2002.05.12]

都合により削除(2005-03-14)

ポケモン情報

URI:http://www.geocities.co.jp/Playtown-King/3415/ [2002.05.12]

何をどう見せていくのか

見やすいデザインなのですが、サイトのコンセプトがはっきりしていないことが気になります。更新は途切れぎみですし、サイト運営に行き詰まっている時期なのかもしれません。ただ、そんな時期こそ、改革のチャンスともいえます。自分がサイトでやりたいこと、興味のあることを前面に打ち出して、余計なコンテンツは「昔の更新分」としてしまいこんでしまえばよいのです。

とにかく、コンテンツが13個もあって、どれも同じ文字の大きさで示されている、どれが目立っているということもない、というのは残念な状況です。サイトのコンセプトの見直しを、ぜひやってみてください。その結果、ポケモンのサイトではなくなってしまうかもしれませんし、あるいはサイトの閉鎖という選択肢もないわけではありません(私は閉鎖するよりは更新停止のまま放置する方がよいと思いますが)。

green remeber

[2002.05.12]

NNでの表示結果

Win98環境でNN4.7とNN6.2によって閲覧しましたが、NN4.7がCSSへの対応の弱いことが理由で背景画像の位置が左上になっている以外には問題がありませんでした。背景画像の色が薄いので、位置がずれても文字はちゃんと読めていました。

CSSを利用するとNNでは表示が崩れるという意見が出ていますが、それはNN4.Xの場合です。NN6.2はIE6などよりもずっとCSSへの対応がすすんでおり、NN6.2で表示確認をしているとむしろIEで崩れることがあります。いずれにせよNN4.XやIEのバグは十分に研究されており、あらかじめ予測できるものです。したがって、多少レイアウトが崩れても文字は読めるようにCSSの記述を工夫するか、表示の崩れない範囲に限定してCSSを用いるかすれば、何の心配も要りません。

みどりがめさんのサイトの場合、CSS以前にHTMLの記述にミスが多いため、可能ならばビルダーなどのソフトの使用をおすすめします。ソフトの出力するソースはひどいというのは過去の話で、近年ではむしろ「手書きであれこれやる人の方がヤバイ記述をしがち」というのが現実です。タグ挿入型エディタや、notepadのような純粋なエディタでサイトを製作される場合には、「はじめてのWebドキュメントづくり」などで勉強されてからにしていただきたいと思います。

参考資料

IE6による表示結果(13KB)
NN6.2による表示結果(13KB)
NN4.7による表示結果(13KB)

補記:

本で勉強するのはよいのですが、ほとんどの本がウソと間違いを少なからず載せているので、私は心配です。(もちろん私は本で勉強しています。「HTML&XHTML&CSS辞典」「ユニバーサルHTML/XHTML」「スタイルシートWebデザイン」いずれもいい本ですが、初心者向けなら5月に刊行されたばかりの「ひとりでつくれるホームページHTML入門」成美堂出版が絶対のおすすめです。信頼できる内容とわかりやすさを兼ね備えています)

一部のサイトに、やさしく正しい記事があるので、そちらもお勧めしておきます。書籍に比べれば情報は絞り込まれていますが、読み通すには便利でしょう。
HTML文書の作成法
HTMLの復習からCSSの基礎まで

「なるものはなる!」式にサイトを作るなら、ソフトを買ってしまう方がよいはずです。ちゃんと勉強せずに物理マークアップをして、文法的に正しくするのは困難です。ソフトはその辺、よくできていて、とくにビルダーはHTML4.01 Transitionalを宣言して、その規約をよく守っています。

Vernal Green

[2002.05.12]

Macでの表示結果

もうMac環境から離れてしまったのが残念。Macでも最近はIE5の一人勝ちになっています。MacIE5の特徴は、WinIE6などよりもずっとCSSへの対応がよいかわりに、文法違反に冷たいこと。まあWinIEが甘すぎるのですが。というわけで、MacIEでどう見えているか知りたかったら、正しい記述をするということに尽きます。というわけで文法チェッカーにかけてみると、ほとんど問題がない。点数はひどいのですが、それは特定のミスが頻発しているからで、そこさえ直せばすぐに相当な高得点を狙うことができます。よほど勉強されたのかと思ったところでDreamweaver利用との断り書き。なるほど。

さて、Macでの表示を考えた場合に致命的かもしれないミスがひとつ。それはbordercolor属性の使用です。もともとWinIEの独自仕様なので、ひょっとしたらMacIE5では対応していないかも。もちろんOperaやNNはWin版でも無視します。CSSで指定されたらよいでしょう。

外部CSSファイル導入のススメ

Dreamweaverを持っているというのは、たいへんな強みです。定番ソフトだけに、あまりひどい文法違反はしません。また、違反するとしてもその箇所はわかりきっています。5ページくらい適当に選んで文法チェッカーにかけてみましょう。画像の代替文字とか、idの名前の付け方とか、特定のミスばかりずらずらと指摘されます。そこさえ直せばいい。

で、文法違反の少ないHTML文書は何がいいのかというと、CSSの外部ファイル化が楽勝なんです。今は全ページにいちいちCSSの設定をしていますね? それを1つもファイルにまとめられるとしたら、どんなにか便利だとは思いませんか? どこかのページでミスを発見したとき、全ページの記述を直すのはだるいですよね。1つのファイルにまとまっていれば、1回直すだけで全部直ります。HTMLの文法が正しくできていると、その環境を実現するのが、非常に楽なんです。

センスあふれるデザイン

ふつう、中学生ぐらいがDreamweaverを持っていると「宝の持ち腐れ」といわれるのですが、ううむ、感服しました。何度見てもよくできています。サイト構成もページのレイアウトも細かい画像の使い方もしっかりしていて、そのうえ一部背景画像を無視すれば800×600の画面に完全対応。正直、デザインはこれでいいんじゃないでしょうか。

あとはせいぜい、定期的な更新で内容がどんどん充実していくとよいですね、という決り文句でお茶を濁すくらい。

(テーブルレイアウトはよろしくないというお話は、とりあえず措いておきます。興味がおありでしたらまた解説いたしますが、まともにCSSの勉強をすればすぐにぶち当たる問題ですので今ここで取り上げる必要もないかな、と)