2000/05/09
前回紹介したのは、階層構造の見直しや統一など、どちらかと言えば見た目にはほとんど表われない「陰」の部分の見直しである。今回はそれに加えて、見た目にもわかる「陽」の部分の見直しの話である。
もともと私のページは「極力軽く、リベラルに」をモットーに作ってきた。最近でこそ巷のブラウザは、JavaだのShockwaveだのFlashだのの最新技術があたりまえに使えるようになったが、その一方で、依然昔のバージョンのブラウザで見ている人も少なからず居ることは事実だ。当然のことながら、最新技術を駆使したページは、それらに対応していない古いバージョンのブラウザで見たのでは何の効果も得られないばかりか、下手をすると見ることすらできなくなってしまう。
たとえ最新技術対応のブラウザで見てくれたとしても、それらの技術を使ったページは大抵の場合重い（表示が遅い）ページになってしまうことが多い。通信速度や処理能力が充分でない環境で見ている人達に対して、表示に時間のかかるページを見せていたのでは、中身を見て評価してもらう前に別のページに逃げられてしまう。従って、どんな環境でも参照が可能になるように、なるべく基本的な技術のみで軽いページを作るように心掛けている。
極力軽いページを心掛けようとすると、ファイルサイズが大きくなりがちな画像ファイルについてもなるべく使わないですませようということになる。タイトルやボタンなど、文字で表現すればせいぜい数10byteで済むものを、理由も無く数kbyteの画像ファイルにする必要はない。従って、できたページは文字が多いシンプルなページになっていくのである。
だがこれについては考え方を少し改めることにした。例えば、2kbyteのロゴがついたところで、56kbpsのモデムであれば0.4秒、9600bpsのモデムだったとしても2秒もあればロードされてしまう。プラス2秒で視覚的に興味を引いてもらえるのならば、そのくらいの代償は払うに値するのではないだろうかとも言える。軽くするのも大事だが、劇団のページに関する限りは、軽くするあまり見栄えが貧相になってしまうのも宣伝効果の上であまりよろしいことではない。
そこで、中身をあまりいじることなく見栄えをよくするという安易な手法として、それまでに掲載していた写真画像をすべて影付処理することにした。影付処理とは、画像からややずらした方向に薄ぼんやりとした黒い「影」を入れることによって、写真が浮き上がったように見えると言う視覚的効果を出す画像処理である。
処理そのものは結構面倒な手順があるのだが、定型的な処理であるので、フォトレタッチソフトのバッチ機能を使って一気に片付けてしまった。元の画像のまわりに「影」を入れる関係上、画像そのもののサイズは一まわり大きくなり、ファイルの大きさも若干嵩ばってしまうのだが、差し替えてみると、今まで平面的だったページが立体的に見えてなかなか良い。さらに、文章との間に適当なマージンが入り、文章が読みやすくなると言う副次的な効果もある。
HTMLに画像を含める時のエチケットというか暗黙のルールの一つに、IMGタグの中に必ずwidthとheightの属性を記入するということが挙げられる。そうしないと、画像を表示するブラウザは画像をすべて読み込むまで画像のサイズを知ることができず、ページ全体のレイアウトが決定できないため、画像以降の部分がいつまでも表示されないという問題が起こる。しかし今回のように大量の画像のサイズを変更した時には、それらを含むHTMLファイルに書かれているそれぞれの属性値をいちいち変更するのは膨大な作業になる。
このような時に役にたつのが「縦横幅」というフリーソフトである。これを用いると、ローカルな環境に保存されているHTMLファイル中のIMGタグについて、画像のサイズを計測しそのサイズに合ったwidthとheight属性に書き換えてくれる。処理も速いので、ファイルが何百もあっても結構すばやく処理してくれるのがうれしい。
その他、各トピックの先頭ページが文字ばかりで少しばかり淋しかったので、ロゴマークをあしらったサブタイトルのロゴを作成してみた。もちろん、ファイルサイズが大きくならないよう、色数を極力落としたGIFファイルにすることは忘れない。おかげで低解像度のブラウザで参照すると影の部分があまり綺麗に見えないのだが、まあ仕方が無い。
ということで、結局画像とHTMLの両方を変更したので、今度はほとんど全ファイルのアップロードを行った。再び結構な大仕事である。しかし、ページの大幅見直しはまだ終わらない。