Webデザインに大切なこと

自分はもう３年ほど前からホームページをブログにしているので、さほど気にならなかったのですが、記になる記事を見つけました。

http://web.archive.org/web/20070630200156/http://blogs.itmedia.co.jp/kokoroe/

このブログはvicunaさんの所のSOE対策済みのエライテンプレートをタダで使わせてもらっているんで、全然当てはまらないのですが、前にやっていたHPB使って作っていた頃やっていたなぁっていうことがたくさんあったので、今回過去を振り返るような感じで、このページを見ましたね。

なかなかに面白いです。

以下はアーカイブより抜粋です。自分が特に重要だなと思うところは太字にいしています。

「ページタイトル」
1. 名称未設定
2. 全部のページで同じタイトルを付ける
3. 記述的じゃないタイトル

「metaタグ」
4. 全部のページで同じmeta情報を使う

「サイト構造」
5. ルートディレクトリにindex.htmlを置かない
6. ファイル構造がぐちゃぐちゃ
7. ローカルにあって、サーバに上がっていないファイルがある

「ページ」
8. 「工事中」ページがある
9. フレームを使っている
10. 横スクロールバーが出る
11. 中身がない
12. 賞味期限が過ぎているコンテンツがある
13. 1ページが長すぎる
14. 1ページが短すぎる
15. どこともリンクせずに孤立しているページがある
16. ルックアンドフィールなどがあまりにもかけ離れているページがある

「ナビゲーション」
17. ナビが死んでいる
18. リンクが死んでいる
19. リンクと分かりにくい
20. 間違っている
21. ナビがついて回る
22. 矛盾がある

「見出し」
23.  見出しタグを使わずにスタイルでそう見せているものがある
24.  見出しタグをデザインパーツとして使っちゃってる

「本文」
25. テキストが画像になっている
26. 両端が揃っているテキスト
27. <p>タグの代わりに<br /><br />が使われている
28. 段落の区切りとして<br /を使っている
29. 単語、文法が間違っている
30. 字がちっちゃい
31. 背景色とあまり変わらない文字色
32.  <td align="">とか使ってる
33. フォントサイズ、スタイル、文字色などなどに統一性がない

「画像」
34. altがない
35. 画像がスライスされている
36. ブラウザ側でリサイズしている
37. 写真でGIF、みたいな適当でないフォーマットを使っている
38. IEでのバグ潰しをせずに、透過PNGを使っている

「アニメ」
39. スプラッシュページなどの余計なFlash
40. いつまでたっても終わらない
41. 大量のアニメーション
42. <blink>タグを使っている

「基本的なこと」
43. 紙面サイズ
44. 中身とデザインの区別がつかない

「その他」
45. コンタクトをとる術がない
46. 使えるe-mailアドレスを載せていない
47. 載っていても、送れない
48. 自動で音楽が鳴る
49. ウインドウを開きまくる
50. クロスブラウザチェックでこける

以上ですね。さらに詳しくつっこんで見ようか。

5. ルートディレクトリにindex.htmlを置かない

これはまず「index.**」をトップページにしない時点でそのページは自分は終わったと思っています。
自分がパソコン部部長をしていた頃、部員に文化祭用の展示ホームページを作る上での注意で「index.html」を置くこと強く言い聞かせましたが、さすがゆとり世代って言うんですか？結構なくらいで「top.html」とかが多いんですよ。

それと同じみたいで、Web上でも多いんですね「top.html」なかには「index.html」にわざわざ「トップページはこっちです」みたいな事を書いているページもあったり。
ホームページを構築する上で一番最初に覚えることのうちのひとつなのに何故こういうことが起きるのだろうか。謎である。

8. 「工事中」ページがある
9. フレームを使っている
10. 横スクロールバーが出る
11. 中身がない

Webページを公開している上で「工事中」って作っちゃいけないと思うんですよ。未実装ならそのページを作らなきゃ言いだけなんです。わざわざ工事中ってページを作るなんて、そのページを整形しているタグの分だけ無駄、ファイルもサーバーも無駄なんですよ。
なんか「予告」みたいな感じでなんか描いてくれていればいいけど、どんなコンテンツなんですか？っていうのを表示するぐらいはWebページを公開する身としては義務だと思いますね。

あとフレームはもう時代遅れですね。二重にページを読み込むので重いし、スタイルでフレームバーが固定されてあったら、醜いコンテンツとかも出てくるし。インフレームが一番サイアクなパターンですね。

27. <p>タグの代わりに<br /><br />が使われている
28. 段落の区切りとして<br /を使っている

昔自分も<br />で整形してましたが、<p>が有能なことに気づくと使わなくなりましたね。逆に<p>使いすぎてだめになることもあるけどね。

48. 自動で音楽が鳴る
49. ウインドウを開きまくる

これは長年言われ続けていますね。このブログは外部のページにつなげるときにはウインドウが開くように設定していますが、仲には全部ウインドウが開くように設定しているホームページなんかも昔はありましたね。何をしたかったんだろう。

あと音楽。コレも迷惑。
MySpaceのミュージシャンアカウントを開くと自動で音楽が鳴るのもあれちょっと勘弁して欲しいものがあるな。

まぁ、こういうのもブログツール使えばあんまり考慮しなくてもいいんだけどさ、記になっちゃうことはあるから。

あと個人的に、メイリオフォント使っているページはウザイとか思うけど、自分が変なだけかな？