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

Advice

徳保隆夫の発言集28

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

風の集う街

URI:http://isweb44.infoseek.co.jp/novel/windkaze/ [2002.07.27]

表示速度:

Web用の画像形式は事実上、PNG、GIF、JPEGの3種類に絞られています。BMPはもともとWindowsでしか扱うことができない形式ですし、とにかく重いので絶対に使ってはいけません。私の環境では川上さんのサイトの壁紙は3分経っても表示されませんでした。

664KBあったsky.bmpを256色ディザなしでpng画像に変換したところ、12KBになりました。ご自由にお使いください。ただしsky.pngは横幅が十分ではないので、改良版のsky2.pngをCSSで画面の左側に並べるのがよいでしょう。

その後

「川上由衣佳」はハンドルネームですが、本名と誤認されやすいものなので、「本名を出すのは危ないのでは?」とのレスが私とは別の批評者から寄せられました。以下は、そのレスへの反論です。

本名でやってる人はいくらでもいるので……。知られて困ることは書かない、という一点さえ気をつけていれば、本名を名乗っていても何の問題もありません。名前で検索をかける人は世の中にけっこういるので、本名でやっていると、意外な知人にウォッチされている場合があります。知り合いに読まれたくない内容を書くならば、本名や自分のあだ名は避けておきましょう。

とはいうものの、そもそも、もしネットショップなどを開く場合には、法律で本名、住所、電話番号を公開しなければならないことになっています。そしてみんな、その通りにしていますけれども、それで問題が生じたという話はありません。私も電話番号を公開していますが、変な電話はありません。

何か問題があれば警察に相談するだけのことです。それが犯罪ならば、対処してくれます。必要以上に、実態のない怪談に怯える必要はありませんよ。[2002.11.02]

桜木雄貴の個人的なHP

[2002.07.27]

時期尚早

慌てて鑑定を依頼するような状況でもないような気がします。つまり、まだまだ勉強することが山ほどある状況ではないかと。しばらくサイト作成のお勉強をなさって、「自分では結構いいと思っているんだけれども、ひょっとしたらとんでもない見落としがあるかもしれない」といった状況になってから、あらためて鑑定を依頼されてはいかがでしょうか。

私はときどき長々と鑑定レスをつけますが、それでもサイト作成を解説するサイトの文章量と比較したら微々たるものです。あれもこれも解説するには、掲示板は向かないと思います。Yahooのディレクトリを「コンピュータとインターネット > インターネット > WWW > ホームページ作成」とたどっていくと、たくさんの解説サイトに出会えます。よろしければ、ぜひ。

ところで、もしデザインのアイデアが浮かばないといったことがあれば、自分の好きなサイトを真似してみるとよいでしょう。マネをするのはよくないことだと教わってきたかもしれませんが、初心者には絶対に「真似をする段階」が必要です。最初から独創的なデザインを作り出そうとしても、時間の無駄です。人類が0という概念を獲得するのに数千年かかったように、すべてを自分で思いつこうとしたって一歩も先へ進めません。先人の知恵をたくさん学ぶことが上達の近道です。[02.07.13]

たしかに改善されていますが……

表紙の画像が大きく、重すぎます。小さく、軽くした方がよいでしょう。また、掲示板の数が多すぎます。書き込みが少ないのであれば、掲示板の数は限界まで減らすべきです。なお、サイトに有為な情報がない状況は以前と変わりません。どんな人が、何のために桜木さんのサイトを訪問することを想定していらっしゃいますか。デザインもさることながら、もっと根本のところに問題があるといえます。

日記に「書き込みが少ない」旨が書かれていますが、桜木さんのサイトを見て、一体何を書き込めばよいのでしょうか。私には全然わかりません。何もないサイトに書き込みを誘導するには、自分があちこちのサイトにたくさん書き込みをする他ありません。せめて日記だけでも、もっとちゃんと人に読ませるような内容にして、毎日書き続けていれば、自分が10回書込みすると1回くらいはお返しの書き込みがもらえるでしょう。

ただ、方針を転換して、反響など気にしないことにするならば、現状維持でもよいと思います。[02.07.27]

じんもけ ぺぇじ

[2002.07.27]

道具は使いよう

私はホームページビルダーを便利に使わせていただいてます。それで十分に軽いサイトを作っています。ソースを見た感想ですが、じんもけさんの作成されたHTML文書の記述に無駄が多く、余計に重くなっている原因は、ツールではなくて利用者にあると思います。

軽いサイトを作る方法は簡単です。見出しと段落とリスト以外、使わなければいいのです。そうすれば、どんなソフトを使っても軽くできます。問題はその後ですよね。見出しと段落とリストだけでは見た目が寂しいので、何かしたくなる。そこでHTMLとCSSの勉強を正しい教材にしたがってやり直せば、ツールをちゃんと使えるようになります。けれども、ぶっつけ本番でツールを適当にいじったり、おかしな説明をする教材にならってしまうと、どんどんソースが重くなります。

少なくともじんもけさんのサイトのソースを見る限り、ツールを責めるような状況ではないと思います。明らかにツールを無駄に動かしています。

17KBの文書を私がリライトして2KBにした改善案です。デザインはもとのものに似せてあります。テーブルも使っておきました。Mozilla1.0、IE6などなら私の意図通りに表示されます。IE5.5以前のバージョンでも、まあ問題なく読めます。ただ、ソースはきれいになりましたが、相変わらず表示は速くありません。画像が54KBもあって、ソースの軽量化など焼け石に水だからです。画像を軽くしましょう。

再論、道具は使いよう

言葉足らずで申し訳ない。私のリライト版はCSS以外のほとんどが、ホームページビルダーで作成されているのです。しかも非常に簡単な機能だけしか使っていません。

  1. 見出し1を書く。
  2. 横に2つセルが並んだテーブルを書き、中寄せする。
  3. 左側のセルにアイキャッチ、更新日、メニューを書き込む。
  4. 右側のセルに今月の扉絵、今週の言葉を書き込む。
  5. 最後に作者情報を書く。

いずれも絶対にじんもけさんが使っている(らしい)Ninjaの機能で実現できる記述です。ツールの問題というのは、どう使いこなしても実現できない部分、あるいはせめて、使いこなすのが非常に難しい機能を用いなければ実現できない部分についてだけいうべきことだと思います。軽いHTML文書の作成は、Ninjaなら簡単に実現できる、ということを私は申し上げたいわけです。HTMLフィルターにかけてさえ、ソースをすっきりさせきれないWordや、HTML文書作成専用モードでさえよほど慎重にやらない限り無駄タグを乱発するStarSuiteなどとは違うのです。(つまり、基本的に命令なしには無駄タグがほとんど生じない)

少なくとも今回の例でいえば、明らかにじんもけさんの操作がまずいのです。私はかれこれ新旧20冊程度、ビルダーの解説書に目を通してきましたが、じんもけさんのサイトの表紙のようなサンプルにはお目にかかったことがありません。空のtd要素が連発しているのは、さとんさんがおっしゃる通り、簡単にそれを作成できてしまうからでしょう。しかし、「操作が楽=無駄な記述が必ず起きる=必ずソースが重くなる」という公式が成立しないことは明らかです。私が示したホームページビルダーによる軽量化例のように、ソフトを用いてすっきりしたHTML文書を作成することは可能ですし、むしろそのような作成法が解説書には示されています。

昔のツールが攻撃されたのは、勝手に無駄タグを吐いたからです。最近のまともなツールは、適切に用いる限り無駄タグをほとんど出しません。無駄な指示をすれば無駄なタグを吐きますが、それもツールの責任でしょうか。大いに疑問です。

W3C勧告は常識外れか?

なおW3Cの仕様はよくできていると思います。Web標準化のためには、些細なことが重要なのです。健常者が個人レベルで神は細部に宿ることを実感する機会はあまりありませんが、それは逆にWebの標準化が進んでいないためでもあります。鶏が先か、たまごが先か、という議論に似ていますが、ここでは明らかに些細なことの徹底が先です。TeXによる一連の文書処理システムは、Webと逆に標準化が十分に進んだ世界です。TeXが標準化に成功したのは、些細なことを厳格に守らせるシステムがあったからです。

ツールを使いこなすにもHTMLの知識は必要

ツールの使い方よりもHTMLの知識の方が、学習の優先度は高いですね。HTMLの知識なしにツールの操作方法だけ学んでも、ちゃんと使うのは無理でしょうから。

WYSIWYGツールで行間を空けて段落を表す場合に、「段落」を設定する、「改行」を2回する、「テーブル」に入れる、とかいろいろやり方があるのですが、文法を知らなければどれが正しいかわかりません。解説書には「段落」を設定しなさいと書いてあるけれども、なぜそれだけが正解なのか理解できないわけです。しかもたいていの解説書は、正解だけ書かれていて、他の間違った方法には何も触れられていないわけです。だから、たまたま解説書にない方法で「うまくいった」場合に、何の疑問も感じない。

ツール自体は便利なものですが、ツールがあればHTMLの勉強がいらないのかというと、決してそうではないですね。

FLOWER ROBIN

[2002.07.28]

BMPは勘弁してください

画像サイズが1013KBもありました。AirH"32K環境では、ふつう、見るのは不可能です。画像をPNG形式にして、約10KBにしたものをさしあげますから、すぐに差し替えてください。

それにしても、画像が無駄に大きいとは思いませんか。PNG形式にすれば軽くはなりますが、大きいということでは何も改善されていません。

メニューの文字も見づらいとは思いませんか。濃い背景色に濃い文字色では、読みにくくて当たり前です。

常識的なところで躓いています。他人に意見を求めるまでもなく、自分でもいろいろ気付くような段階ではないでしょうか。

改善案を作成しました

早速デザインを手直しされたようですね。この調子で頑張っていきましょう。

実は私も改善案をを作ってみたりしたのですが、タイミングが悪かったかも……。でも参考にはなると思います。

改善案は複製自由です。また、ご希望があれば、画像含めてデータ一式をさしあげますが、少々勉強していただかないと何がなんだかわからないかもしれません。とりあえず、レイアウトの雰囲気をつかんでいただければと思います。

縦に長いのはあまりよくないので、画像を横においてコンパクトにまとめてみました。また、文字の色を揃えてすっきりさせています。これが「正解」というわけではありません。ひとつのアイデアとして参考にしてください。

神保史

[2002.07.29]

文章が読みやすいデザイン

歴史を扱うサイトということですが、見たところ完全にテキスト系のサイトですよね。とすると、見易さというのは文字の読みやすさをいっているわけでしょう。書籍を考えていただければお分かりのとおり、デザイン的に特殊な効果を狙わない限りは、白地に黒文字を少しずらした配色にした方がよいでしょう。多くの書籍や新聞は、純白の紙は使いませんし、純黒のインクも用いません。ましてや黒地に白文字はありえませんよね。せいぜい見出し程度でしょう。

見出しを使いましょう

ところで、フォントサイズの変更で見出しなどを表現していらっしゃいますが、ちゃんと見出しの設定を使った方がよいですよ。検索エンジンは見出しをちゃんと重視してくれます。見出しに神保長職といったキーワードが含まれるように注意すると、検索結果が少しよくなるでしょう。

神保氏こぼれ話1

神保氏は徳川の幕臣として生き延びますが、神保氏の江戸の武家屋敷があったのが現在の神保町(神田)です。古書店街として有名ですよね。東京へくることがあったら、一度遊びにいってみるとよいでしょう。電脳タウン秋葉原の隣町です。

神保氏こぼれ話2

神保氏張は畠山氏の出です。神保氏の傍系に養子として入ったんですね。神保氏本家が消えてしまったので、たまたま出世頭だった彼が、神保氏本家を継ぐ者のような扱いになったのかもしれません。