あなたのページの訪問アドバイザー


第1回
本文イラスト担当:しまづ★どんき

※上のリンクボタンをクリックすると、しまづ氏のページが表示されます。


山田(Y):「訪問アドバイザー」第1回は、本文内のイラスト担当、しまづ★どんきさんです。しまづさんの本職は「大きいお友達向け漫画(本人談)」で、ホームページの内容も、漫画の仕事の宣伝や、イラストの展示がメインです。とはいっても、いわゆる18禁な絵は掲載されていないので安心(笑)。
 ちなみに、しまづさんのページがあるso-netのサーバーは非常に重いので、とくに深夜にはアクセスが困難になる可能性があります。ご了承ください。

全体をチェック

高田(T): 初回から、非常にレベルの高いページです。タイトルの画像もインパクトあるし、アイコンの図案もセンスが良く、レイアウトも奇麗で見やすいですいです。とくに気に入ったのは下層ページから戻るリンクの「階段」のアイコン。これは新鮮なアイデアだと思いました。
 ページ全体に画像が多く使われていますが、IMGタグのWIDTH、HEIGHTオプションがすべて指定されているので、文字が先に表示されて読み込み待ちのストレスを軽減してくれています(p35参照)。全体の配色も、明るいけどケバケバしくない色遣いで好印象です。
 ぱっと見では、特に難点付けるところは見当たりません。どちらかというと「これをお手本に……」という感じですね。

Y:トップページはタイトル周りの次に更新情報があり、それからメニューがあるというオーソドックスな構成。単行本の宣伝などは上の方に置いていて(Special Contents)、読者の目につきやすくなっています。下層ページもそれぞれ趣向を凝らしてあって、非常に丁寧な作りになっています。
 一点、ちょっと気になったのは、リンクのページに使われている表組み。表組みは、ROWSPANやCOLSPANを駆使して凝りまくったレイアウトを作るときか、もしくはパソコンのスペック表や料金表など、数字や単語がひたすら並ぶ「表」を作るときに威力を発揮するタグでしょう。このページのようにそれぞれのセルに長さがまちまちな文章を入れたものが連なる表組みは、変なところで改行が入ったり、縦横の幅がバラバラになってしまったりして、いまいち格好良くないと思います。
 画像の扱いやデザインは、さすがにプロというか、手慣れた上手さですね。そのかわりと言っては何ですが、トップページに目標を絞って、細かいところをチェックしてみましょう。

骨組みをしっかり

Y:ソースを見ると、TITLEタグがBODYタグの中にあって、ヘッダ部がありません。これは文法違反です。HTMLの骨組みはきちんとしておかないと(p17参照)。

T:いつも調べる必要はないと思いますが、HTMLの文法チェッカを使ってみると、自分の覚え間違いなどが見つかって役に立ちます。ここでは、指定したURLの文法をチェックをしてくれます。

タイトルに表記する情報

T:ページの冒頭に「Japanese only / HTML 3.0」と表示してありますが、実際にはHTML3.0にはないSCRIPTタグやAPPLETタグなども使ってますし、あまり意味のある表示ではないかも知れません。HTML3.0は正式決定しないまま消えてしまいましたし。現状では「NetscapeやMSIEのバージョンいくつ用HTML」と表示したほうが、確実だし有益だと思っています。

Y:たしかに。p151でも書いていますが、「このページはどんなOSのどんなWebブラウザ(パージョンいくつ)で表示確認をしています」といった情報のほうが読者の参考になるでしょう。
 それから、「1996/4/4」という表示が妙に目立つので、これを最終更新日だと勘違いして「4月4日から更新されてないのかー」と思ってしまうそそっかしい人が、(私を含めて)相当数発生するであろうことが想像されます。「SINCE~」の表示を下にひっこめるか、「最終更新日~」の表示をもっと目立たせるべきでしょう。初公開日よりも、最終更新日のほうがだんぜん重要な情報なのですから。

ALT文字列に「"」は使わない

T:IMGタグのALT文字列を指定してあるのは良いことなのですが、タイトル画像のALTでの「"」の使い方がよくないですね。Webブラウザには、「Main」という部分はALT文字列の外であると認識されてしまっています。

フリーソフトを利用して楽しいページに

Y:トップページにある横罫線がアニメーションしていますが、これはアニメーションGIFではなくて、Javaのアプレットです。フリーのアプレットをダウンロードして使っているそうですが、入手元は「忘れました」とのこと(がっかり)。

T:あ、そーだったんですか。Java用のインストールをしてなかったので気付かなかった(笑)(Java非対応のブラウザでは、アプレットが表示されるべき部分は空白になっていました)。  さっそくインストールして見てみましたが、僕の環境では処理が遅すぎて動画のように見えないです(笑)。でも、こういう規則的に動く動画(p173で作っている魚の動画GIFも)をプログラムで描かせるというのは、ある意味理にかなった方法と言えるかもしれませんね。とはいえ、Javaの処理が重いことを考えると、動画GIFのほうが好都合な場合も多そうで、見る環境によってどちらが良いとは一概には言えなさそうですけどね。

Y:ちなみに、FootMarkのコーナーに使われているのも、フリーソフトのCGIプログラム(本書でも紹介しているTAROUDO氏作成のTRCHAT)です。

Javascriptについて

T:JavaScriptを使ってステータスバーにメッセージを表示しています。おそらくは文字列をスクロール表示させたかったのでしょうが、そのようには動いてませんね。プログラムミスでしょうか?(ステータスバーの幅が十分に長いと、メッセージの右端で文字が次々書き替わってるのが見えます。)
 それから、JavaScriptに対応してないブラウザのために、SCRIPTの内側は「」で囲んでコメントにしたほうが良いです(p196参照)
 p296でも触れられていますが、ステータスバーへ文字を表示させるのは、情報が隠されて邪魔だし、うっとうしいと思います。僕の環境ではすごくちらついて表示される上に日本語は文字化けして読めないので、よけい嫌いです。もう目新しさもないですしね。
 Netscape社のマニュアルを読んでの個人的意見ですが、JavaScriptでステータス行にメッセージを表示できる機能は、アンカーにカーソルが入ったときに参照URLが表示されるところを、代わりにそのリンク先の説明を表示するようにするというような使い方を想定してると思います。
 と、いうわけで、ステータス行を使わないでメッセージをスクロールさせる例を作ってみました。(ここ)フォームのウィンドウ内で文字をスクロール表示します。
 ステータス行(window.status)に表示する代わりにフォームの枠(document.forms[0].scrn.value, 「scrn」はで付けた名前)に表示するだけで、プログラムの構造はステータス行に表示するのと全く同じです。短いですし、興味のある人はソースを見て解析して下さい。


[もどる] [トップページへ]
(c)impress 1996