備忘録

趣味のWebデザイン＞2004年12月
←Prev／Next→

平成16年12月31日

今年はあまり備忘録を書かなかったような気がします。というか、実際、書いてないのですが。でも備忘録以外の文章は、あちこちでいろいろ書きました。

今年はなんといっても、Amazon でのカスタマーレビューを頑張りました。あれだけ本を読むのは、やっぱり生半可なことではなくて。時々勘違いされている方がいらっしゃるのですが、読まずにレビューした本はひとつもありません。ただし、買わずにレビューした本はたくさんあります。購入前の内容チェック用に机と椅子を用意してくださっているジュンク堂書店池袋店には感謝しています。でも、5万円以上買い物しているから、許してくれると思う。何はともあれ、Book Guide というコンテンツが増えて、Web デザイン解説系のサイトとしては、かなり充実したんじゃないかな。来年もペースダウンしつつ継続予定。
Folio の連載は地味に継続中。また途中から編集にも一枚噛むようになり、またまた仕事を増やしてしまった!　みたいな。地味に楽しいので、来年も続けます。
遅々とした歩みではあるけれど、Web デザインアドバイスも再開し、約2年ぶりにサイトにログを追加できました。しばらく細々とメールでアドバイスしていたのですが、これを HTML 文書化するのが億劫で、更新が止まっていたのでした。結局、メール時代のログは封印して、備忘録でアドバイスしていくことに。
この備忘録以外で一定量の記事を書いたブログが2つあるのですが、いずれもリンクしません。つまらないことしか書いていないつもりです。
その他、あちこちでレンタルブログを借りては1ヶ月くらいで放置するという迷惑なことをやってました。最初はいろんなブログの使用体験を記事にまとめるつもりでいたのですが、すぐに面倒くさくなって、逃避行動の一環に堕してしまいました。いずれにせよ、これも内容は屑です。リンクしません。

その他、あまり目立たないところを、たくさん修正・改訂・削除（!）などしました。Lecture と Note のディレクトリ構造は大幅に変更され、転載リソース集もさくらインターネットのサーバへ移しています。備忘録のナビゲーションも地味に変更（年別アーカイブへのリンクを追加）、トラックバックもコッソリ受け付ける設定に（暫定）。

読者の印象とは裏腹に、作者は何だかとっても頑張って更新してきたような気がします。来年はウェブでの活動を縮小しよう、と思っているくらい。

今年観た DVD ソフトのタイトル一覧

チャーリーズ・エンジェル
チャーリーズ・エンジェル　フルスロットル
ロード・オブ・ザ・リング　旅の仲間
ロード・オブ・ザ・リング　2つの塔
ロード・オブ・ザ・リング　王の帰還
パニックルーム
ジョン・マルコビッチの穴
マーヴェリック
マイノリティ・レポート
キャッチ・ミー・イフ・ユー・キャン
A.I
マトリックス
マトリックス・リローデッド
マトリックス・レボリューションズ
MIB
MIB2
ロスト・ワールド／ジュラシック・パーク
ジュラシック・パークⅢ
T.R.Y.
パイレーツ・オブ・カリビアン
ターミネーター3
モンスターズ・インク
ナイトメア・ビフォア・クリスマス
シザーハンズ
TRICK　Vol.1
刑務所の中
アダプテーション
ドリームキャッチャー
ラスト・サムライ
キューブ
キューブ2
ブルース・ブラザーズ
ブルース・ブラザーズ2000
シュレック
ジョニー・イングリッシュ
依頼人
グラディエーター
オーシャンズ11
ギャング・オブ・ニューヨーク
カッコーの巣の上で
トラフィック
ブレイブハート
エリン・ブロコビッチ
サイン
シックス・センス
ソラリス
スモーク
少林サッカー
ハムナプトラ　失われた砂漠の都
ハムナプトラ2　黄金のピラミッド
トゥームレイダー
トゥームレイダー2
スターシップトゥルーパーズ
エックスメン
エックスメン2
ハリー・ポッターと賢者の石
ハリー・ポッターと秘密の部屋
ビューティフル・マインド
スコーピオン・キング
スチュワート・リトル
バックドラフト
座頭市
ショーシャンクの空に
レナードの朝
恋に落ちたシェイクスピア
HERO
デーヴ
真実の行方
プロフェシー
ビートルジュース
PLANET OF THE APES　猿の惑星
デッドマン・ウォーキング
スペース・カウボーイ
許されざる者
ロード・トゥ・パーディション
ストレイト・ストーリー
ジャック・サマースビー
将軍の娘
ダンサー・イン・ザ・ダーク
アイス・エイジ
ポカホンタス
アンツ
フォレスト・ガンプ　一期一会
ビーン
オースティン・パワーズ・ゴールドメンバー
パルプ・フィクション
アメリ
クリスティーナの好きなこと
トゥルーマン・ショー
ペイ・フォワード
愛しのローズマリー
素顔のままで
セブン
ムーラン・ルージュ
踊る大捜査線 THE MOVIE
踊る大捜査線 THE MOVIE 2 レインボーブリッジを封鎖せよ!
ドラゴンヘッド
ファインディング・ニモ
木更津キャッツアイ　日本シリーズ
舞台も踊る大捜査線　ザッツ!!スリーアミーゴス
深夜も踊る大捜査線2
GOOD LUCK!! Vol.1
GOOD LUCK!! Vol.2
GOOD LUCK!! Vol.3
GOOD LUCK!! Vol.4
GOOD LUCK!! Vol.5
スペース・トラベラーズ
あずみ
サラマンダー
プライド　Vol.1
プライド　Vol.2
プライド　Vol.3
プライド　Vol.4
アマデウス
スカイハイ
太陽を盗んだ男
砂の器　1
砂の器　2
砂の器　3
砂の器　4
砂の器　5
たそがれ清兵衛
花と蛇
BAD BOYS
BAD BOYS 2
TRICK Vol.1
TRICK Vol.2
TRICK Vol.3
TRICK Vol.4
TRICK Vol.5
極楽とんぼのテレビ不適合者　上巻
極楽とんぼのテレビ不適合者　下巻
スパイダーマン
壬生義士伝
薔薇の名前
僕と彼女と彼女の生きる道　1
僕と彼女と彼女の生きる道　2
僕と彼女と彼女の生きる道　3
僕と彼女と彼女の生きる道　4
スピード2
花
フロム・ダスク・ティル・ドーン
アウト・オブ・サイト
タワーリング・インフェルノ
フォー・ルームス
デスペラード
ジャッキー・ブラウン
SWAT
解夏
ティアーズ・オブ・ザ・サン
game
スミス都へ行く
テイラー・オブ・パナマ
カサブランカ
鳥
裏窓
紳士協定
太陽がいっぱい
模倣犯
泥棒成金
コンクリート
サイダー・ハウス・ルール
イングリッシュ・ペイシェント
着信アリ
ヴァイブレータ
油断大敵
ミシェル・ヴァイヨン
黄泉がえり
キル・ビル　Vol.1
キル・ビル　Vol.2
ブラックホーク・ダウン
ハリウッド的殺人事件
見知らぬ乗客
戦場のピアニスト
ライト・スタッフ
北北西に進路を取れ
ミスティック・リバー
ドッペルゲンガー
マスター・アンド・コマンダー
東京ゴッドファーザーズ
ビッグ・フィッシュ
十二人の怒れる男
007　ダイ・アナザー・デイ
メメント
ナチュラル・ボーン・キラーズ
シービスケット
マルホランド・ドライブ
シュレック2
JAWS
シービスケット
フルメタル・ジャケット
オール・アバウト・マイ・マザー
ザ・コア
博士の異常な愛情
ザ・ペーパー
スパイ・キッズ
ファイナル・ファンタジー
クイール
殺人の追憶
ゼブラーマン
時計じかけのオレンジ
精霊流し
天国と地獄
ア・フュー・グッドメン
バリー・リンドン
2001年宇宙の旅
トゥルー・ロマンス
乱
羅生門

今年もたくさんの本を読んだけれど、本はタイトル数が多すぎて、読んでも読んでも、共通の話題にならない。たまに運よく同じ本の読者に出会うのだけれど、そのときにはもう、内容を忘れてしまっている。自分一人で楽しんでいるだけならそれでもいいのだけれど、やっぱりもう少し、自分の好きなものについて人と話もしてみたい、と思ったり。

そう考えてみると気になるのが、音楽と映画とテレビ。いずれも縁遠く生きてきたので、何の知識もない状態。新しく趣味を増やすなら、どれがいいだろう?

テレビが王道なのでしょうが、テレビ本体と HDD レコーダとテレビアンテナを全部買い揃えなければ視聴できないのがネック。どれも所有していない私には、最初の敷居が高過ぎました。パソコンで聞ける音楽は、一人で楽しむ分には手軽なんだけれども、人と話をできるレベルに到達するまでの道のりは険しいみたい。狭く深く、というハマり方をしている人が多いようなのです。だから音楽は読書に近いと思う。というわけで、消去法で残ったのが映画。

話題の映画は、多く見積もっても年100本程度。興行収入トップ20作品くらい押さえておけば、入門レベルの会話ネタには十分。過去の資産は膨大ですが、それでも、ざっと1000本観ればそれなりに語れるようになりそう。……とまあ、そんな目論見で GW に鑑賞開始。映画ってこんなに面白かったのか!　すっかりハマって、半年で200本以上観ました。かなりハイペースじゃないかな。備忘録が滞ったのも当たり前というか、そうじゃなかったらむしろヤバイ。

あと、私は食べ物の好き嫌いがほとんどないのですが、映画の好き嫌いもほとんどないみたいです。「くだらない」という世評の定着している映画も、私にとってはそこそこ面白かったりしました。それから、DVD ソフトの選び方はフィーリングというか、無計画。レンタル屋さんへ行ってみて、何となく面白そうだと思ったものを借りてくるだけ。結果的に、ハリウッド製くだらない系映画が多くラインアップされたので、多分そういうのが私の趣味なんだろうと思いました。

で、酷使されたノートパソコンの DVD ドライブが12月上旬に破損。3年保障に加入しててよかったなあ、と思いました。ちなみに、12月に突然、読了本が激増しているのは、映画を観れなくなったから（＋出張があり長時間電車に乗る機会があったから）。

平成16年12月31日

完治の見込みが立たない難病、「何をアドバイスしたらいいのかわからない病」が再発したため、しばらくアドバイスできない日々が続きました。サボっていたわけじゃなくて、何度も何度も相手方のサイトを訪問して眺めていたのですが……。絶対にこうした方がいい、というアドバイスが浮かんでこないのです。少なくとも、私の中には。他の方にアドバイスをご依頼されたなら、きっといろいろ断定的な意見が聞けるのでしょうが、私にはどうしても無理です。

散々お待たせして、私もいろいろ考えたのですが、淡々と感想を書き留めただけのアドバイスになりました。

ご依頼人と Web サイトのご紹介

KISSJAPAN WEB LINE

CGイラスト・ファンアートを発表されている Web サイトです。管理人は東京出身の時永マサタカさん。[KISS JAPAN]は時永さんの個人サークルで、今年10周年。残念ながら、オフラインでの活動は休止中とのこと。

トライガンの二次創作がイラストのメインとなっているわけですが、オリジナルキャラのレントくんの存在が、このサイトの面白いところ。レントくんは3次元にもなっていて、そのあたりの様子は「スーパードルフィー日記」に紹介されています。スーパードルフィーというのは、あの金食い虫で有名な人形のことです。ハマると大変らしい。私は実物を見たことがありませんが……。

レントくん（じっと見つめていると、瞬きします）
サヨナラ。（トライガンのファンアート／デッサンの狂いに目をつぶれば、とても美しいイラストで、私は好きです）

ご相談の内容

はじめまして。「KISSJAPAN WEB LINE」というサイトを運営しております。漫画のファンアートやオリジナルのCGイラストの展示や、CGイラストの描き方などを公開しているサイトです。

なるべく見やすく分かりやすいサイトにしよう…と思っているのですが、自分ではどうにも見やすく分かりやすいサイトになっているのかよく分かりません。また、趣味のサイトとはいえ独りよがりな雰囲気のサイトの様な気もするのです。が、どこをどう直せばよいのか、よく分からないのです。そこで、色々なサイトを見ていらっしゃるプロの方からのアドバイスを頂きたく、書き込みさせていただきました。その他にも何か問題点があれば、お願いいたします。

大変お忙しいことと思いますが、いつになっても構いませんので、どうぞ宜しくお願いいたします。

まさか3ヶ月も待たされるとは思っていらっしゃらなかったろうと思います。ごめんなさい。

また、私はプロではなくて、趣味でお勉強している人間です。「趣味のWebデザイン」というタイトルは、私自身のスタンスを現すものです。というわけで、以下は話半分に読んでいただければと思います。

アドバイスいろいろ

英語版について

KISSJAPAN WEB LINE には日本語版と英語版が用意されています。大学の研究室などを除けば非常に珍しい試みで、興味深く拝見しました。英語版の更新が滞っているのはご愛嬌なのでしょうが、目次だけでなく、コンテンツまで作りこまれていることには感心しました。ところどころ英語に違和感があるのですが、私も英語は不得意なので、具体的に指摘することは避けます。

英語版を閲覧していて気になったのは、ギャラリーからリンクされている文書が日本語版と共通になっていることです。画像へ直リンクしているものと混じっており、アレ?　と思いました。英語版の目次では日本語版と共通のコンテンツ（日本語が使われているコンテンツ）について事前にアナウンスしているだけに、不徹底な印象です。目次と同様の注記をするか、画像への直リンクに変更するべきでしょう。

その他の問題については、日本語版とセットで意見いたします。

HTML の使い方について

日本語版がフレームを多用しているのに対し、英語版はシンプルな作り。じつは日本語版もフレームによる画面分割でにぎやかさを演出しているのであって、ひとつひとつの文書はシンプルなレイアウトを採用しています。

テーブルレイアウトを基本としている場合、こうしたデザイン手法に到達することは珍しくありません。画面全体は派手に見えても、本文は改行と太字と記号だけで整形する、など。Strict HTML＋CSS という手法に思い入れのある方の作成する文書の多くが、全体としてはアッサリした印象なのに、本文の装飾がけっこうにぎやか（きちんと見出しやリストや強調などを使っていくと、自然とそうなってしまう）なことと対照的です。（→余談）

charset=x-sjis といった昔懐かしい（現在は基本的に使われない）文字コード指定や、いくつかの文書のソースに登場している Adobe という文字列、ていねいにインデントされたソースなどから考えて、時永さんは Adobe 製の WYSIWYG 系 Web サイト作成ソフト（Page Mill または Golive の古いバージョン?）をご使用になっているのかな。CSS など一部は直接ソースに記述されているようですが、全体としては WYSIWYG で作っているのだろうと思います。

私は、WYSIWYG 型ソフトの使用者には、とくに HTML の勉強を勧めていません。どうも思い通りにならない、面倒なことが多い、そういった悩みが生じてからで十分だろうと思っているからです。中途半端に勉強しても、むしろひどいことになりがちなのであって、勉強されるのであれば、きちんと勉強なさってほしい。ただ、例えば当サイトのソースを KISSJAPAN WEB LINE のソースと見比べたなら、素人目にも「けっこう違うなあ」とわかるくらいの差異があることに気付かれるでしょう。そういったことを知るのは、悪いことではないと思います。

例えばトップページの最上部にグリーンの帯があります。幅100％のテーブルに背景画像を指定して実現しているのですが、私なら body 要素に CSS で背景画像を指定します。そうすれば、帯のためのテーブルは不要となります。CSS を外部ファイルにして、サイト内の多くの文書で再利用すれば、「最上部に帯をつける」というデザインでサイト内を統一できます。この方法なら、CSS ファイルを書き換えるだけで全文書の帯の色をグリーンからオレンジに変えることができ、グリーンの帯とオレンジの帯が混在する現在のデザインの問題点を原理的に解消できます。

……という説明では全く要領を得ないでしょうが、とりあえず CSS の外部ファイル化について、次の記事を参照されることを勧めます。今、各文書にいちいち CSS を記述している非効率を一挙に解消するための知識が手に入るはずです。HTML の勉強はさておき、CSS の外部ファイル化だけは知って損しません。

入門：CSS2　HTML への適用

余談

CSS だけ勉強した人が div 病に罹るのは、単に不勉強だからというよりも、「画面のレイアウト以外に興味がない」「本文なんて改行と太字と記号で十分だと思っている」といったあたりに根本的な原因があるのだと思います。そもそも、本文をきちんとマークアップすることに意義を感じていない、という。大半のブログツールが記事本文について貧弱なマークアップ支援機能しか持っていないのも、この文脈で理解できます。需要がないから、機能が用意されない。

ただ、blockquote 要素だけは例外的に市民権を得つつあり、一歩前進、といったところでしょうか。ブログ以前は引用に blockquote 要素を使わない人が大半で、ユーザスタイルシートなどを用いていると、斜め読みしたときに引用部分を筆者の文章と勘違いすることがしばしばでした。（→本文）

デザインの改善について

以下、いくつかの切り口を提示します。

ご相談の中でなるべく見やすく分かりやすいサイトにしよう…と思っていると書いていらっしゃいましたが、たしかに、致命的な問題はひとつも見つけられませんでした。英語版の目次でリンクを探すのにちょっと手間取ったのが、少し気になったくらいです。ただ、こうすればもっとカッコよくなるのにと思う箇所はたくさんありました。そういったことについて、書いていきます。

テーマカラー

グリーンとオレンジがテーマカラーなのでしょうが、使い分けが不明瞭なのが残念なところ。トップページは上下の帯が緑ですが、現在の日本語版では、基本的に画面上部の帯はオレンジですよね。英語版を見ると、上下のグリーンの帯は以前のデザインの名残なのでしょう。こういったデザインの基本的な枠組みには、一定の制限を設けるべきです。あっちのページとこっちのページで、レイアウトの基本設計が異なるのは、見栄えがよくありません。

非常に大規模なサイトの場合、コンテンツ毎にデザインを変えることはあります。しかし基本的には、きれいに整って見える Web サイトを作りたい場合、デザインルールの設定は必須です。コンテンツの背景色はホワイト、と決めたら、全部の文書でそうするのです。「ダウンロード」では左端にオレンジの帯、「オリキャラ」では全面オレンジ、「CG講座」では上端にグリーンの帯、「日記」は帯なしの全面ホワイト、「牧師絵板」では全面グレー、「リンク」ではグレーの背景＋上端にオレンジの帯……見事にバラバラ。それでも何とかまとまりを失っていないのは、2つの工夫があるからです。

フレームによりコンテンツを移動しても変化しない部分を画面内に配置していること
全部には共通しないけれど、いくつかのコンテンツで共通しているモチーフがどのページにも用意されていること

偶然なのか、狙い通りなのかわかりませんが、綱渡りに失敗してはいません。ただ、本来であれば、やはりもっと安定した路線を選択するべきでしょう。つまらないと思われるでしょうが、共通化していいデザイン要素は、どんどん共通させていくのです。

英語版のデザインよりは日本語版のデザインの方が面白いし、配色も落ち着いていると私は思います。ですから、私なら、トップページからオレンジを中心とした配色でまとめていくでしょう。また、オレンジは帯状にして映える色ですから、背景色はホワイトまたはグレーにします。無難なのはホワイト、グレーの場合は難易度が上がります。

帯のデザイン

基本は濃いオレンジと明るいオレンジのストライプなのですが、ベースとなる画像を使い回して加工しているのではないらしく、コンテンツ毎に似て非なる画像が用いられています。繰り返しになりますが、とくに理由がないのであれば、帯のデザインは統一してしまった方がよいでしょう。

もちろん、完全に統一してしまう必要はないわけです。例えば、オレンジの帯の下に、もう1本、コンテンツ毎に色を変えた帯を引くのは、問題ありません。大切なことは、デザインルールがちゃんと存在して、その中でバリエーションを作っていくことです。思いつきでいろいろな帯を作ってみたのだけれど、結果的に似た雰囲気でまとまりました、というのでは、なかなかうまくいかない。時永さんはセンスで一定のラインを死守されていますが、危ない橋を渡っているのです。

さて、いろいろなデザインの帯がある中で、私が最もお勧めするのが、壁紙配布ページの帯です。単純なストライプではなく、ちょっとした「動き」がありますので。Web デザインは、ややもすると水平垂直ばかりになってしまい、斜めの線が出てきません。曲線や斜線は、Web でちょっと人目を引くには、便利なデザイン要素です。どうしようかな、と迷ったら、「どこかに曲線や斜線をいれられないかな?」と考えると、面白いアイデアが浮かんでくるかもしれません。

ただし、壁紙配布ページの帯をそのまま使うのはもったいない。上下を反転した方がいいと思います。ナビゲーションフレームと帯を連続的に表示し、フレーム分割が持っているバラバラ感を抑え、一体感を演出するわけです。上下を反転しない場合、右上の白い部分がナビゲーションフレームとコンテンツフレームを分断する谷間となってしまいますし、せっかくの斜線も帯の中に取り込まれて開放感がありません。

また、壁紙配布ページの帯は、タイトルを画像文字にしていないのが災いして、文字サイズを変更するとヘンな表示結果となります。IE のユーザ補助機能を用いると、CSS で固定された文字サイズも、可変に戻ってしまうのです。もちろんそんな機能を使う方は多くないことが予想されますが、コンテンツのタイトル部分は、帯と一体化した画像文字を使った方がバランスがよいと思います。（Strict HTML＋CSS なら、h1 の背景画像を工夫して云々、という話になりますが、今回は割愛）

日記や掲示板のデザイン

何でもかんでも統一しなきゃいけない、というわけでもなくて、日記や掲示板は、やはりそれなりに独自のデザインでよいのです。日付やスレッド毎に、何らかの枠囲いのような装飾がないと読みにくいでしょうから。

とはいえ、例えば上端に帯を入れるとか、背景色はホワイトだとか、そういったデザインルールは、きちんと押さえるのが望ましいといえます。基本に忠実に、その上で追加すべき装飾を追加する。レンタル CGI の場合、あまり自由度がなく、どうしようもないのかもしれませんが、可能な範囲で頑張ってみることをお勧めします。現状はちょっと残念で、もう少し何とかなるんじゃないのかと思います。

ギャラリーのナビゲーション

日本語版のコンテンツの中で、なぜかギャラリーだけナビゲーションフレームが外れます。この理由がよくわからない。

私なら、ナビゲーションフレームを残します。左端の青銅色っぽい細い帯も残す。とくにフレームを外す理由が思い当たらないのです。

また、考えどころなのが、ギャラリーのナビゲーションです。メインコンテンツであるトライガンのファンアートのサムネール表示が初期状態として設定されているのは正解だと思いますが、他のコンテンツへの目次が微妙に目立たないように見えるのは、私だけでしょうか?

なるほど、流れとしてはあっているのです。トライガンを一通り見終わると、その下のコンテンツに気付く、というのは自然です。自然ですが、本当にそれでいいのかな、と。

ナビゲーションには、主に2つの方向性があります。

1．閲覧してほしい順にコンテンツを並べる: 例えば、最新の日記を目立つところに置くのは、閲覧順を重視したナビゲーションの考え方によるものです。日記を読むのに、いちいち年を選び、月を選び、日付を選んで記事にたどり着くのでは疲れてしまいます。
2．情報の構造とコンテンツの階層を表示する: 一方、古い日記を整理・分類して一覧表示する場合には、情報の構造をコンテンツの階層がきちんとわかるようなナビゲーションが必要です。最新の日記から、「前日の日記」といったリンクを押し続けるナビゲーションしか存在しない場合、1年前、2年前の日記にたどり着くころには嫌になっているでしょう。

ギャラリーのナビゲーションを考える場合にも、この2つの流れを考えなければなりません。まずお見せしたいのがトライガンのファンアートだから、それが目立つようなナビゲーションにした……それはよいのです。ただ、情報の構造は以下のようになっているわけです。

ギャラリー
- トライガン
  1. その1
  2. その2
- 漫画
- オリジナル
- 絵日記ログ

それほどコンテンツが複雑多岐にわたっているわけではありません。だから私なら、「トライガン＞その1」のサムネールを並べる前に、他にこんなコンテンツがあるよ、ということを示します。あるいは、サムネールの前と後の両方に、他のジャンルへのリンクを用意します。スペースを有効活用すれば、ほとんど邪魔にならないはずです。

ブログの場合、最近の記事が表紙にずらずら並ぶ一方で、画面の上の方にカレンダーも表示するのが一般的ですよね。私の備忘録でも、月別ログへのリンクをはじめの方に用意しています。フィーチャーしたいコンテンツを目立たせることは大切なのですが、邪魔にならない範囲であれば、情報の構造や階層を先に提示した方が、全体の見通しがよくなります。

左寄せ・中寄せ

構成要素の配置にブレがあるのが気になります。基本的には左寄せだと思うのです。ただ、一部目立たせたいものだけ、ブロック単位で中寄せしている。それはいいのですが、AGHCTBMCLT のタイトル画像群はみな中央に配置されているわけです。グリーンの三角マークをうまく使った凝った画像で、それ自体はいいのですが、どうもページの中で浮いている感じがするわけです。それは何故か?

いろいろ説明はありうるわけですけれども、ひとつの大きな要因は配置です。

帯のデザインについて、改善案を示しました。そちらをご覧いただければおわかりの通り、私はコンテンツのタイトルを左寄せにすべきだと考えています。「文字は左寄せ」というデザインルールを設定し、みな左寄せにした方がいい、と。

意外に思われるかもしれませんが、文字の配置方向は左が一番安定し、次が右、中央寄せは最も不安定です。ブロック単位であれば中央寄せもアリなのですが、文字は左右いずれかに寄せるのが定石です。画像文字のような重くて目立つデザイン要素が中央にあると、デザインは不安定になりやすいのです。下に大きなテーブルなどがあって、ど真ん中に重石があると安定する、というケースは例外です。ふつう、そういうのはサイトの表紙くらいでしかお目にかかりません。

サイトマップがあるといいかも?

コミックのコーナや、同人活動のコーナなど、「あまりアクセスがないから」なのかどうか、いささか予測のつきづらいところからしかリンクされていないコンテンツがあります。ナビゲーションは単純明快な方が見やすいわけで、マイナーコンテンツは主要なナビゲーションの外に置く、という方針も一概に否定はできません。ただ、やっぱりそれならそれで、「その他」みたいなコーナを作るか、さもなければサイトマップのようなものを用意した方がいいのではないかと思いました。

とはいえ、せっかくそういうものを作ってもほとんど利用者がいないのが、マイナーコンテンツのマイナーたるゆえんなのですが、作者自身が忘れ去ってしまわないために、という理由付けもアリではないでしょうか。また、実際にサイトマップを作らないまでも、手元にあるチラシの裏か何かに現状を書き記すだけでも、サイトの構成をよりわかりやすく、見やすく改善していくためのヒントが得られます。

ディレクトリ構造とサイトのメンテナンス

余計なお世話、ではありますが、サイトの構造とファイルのディレクトリ構造は、ある程度一致していた方が、管理が楽になります。とくにギャラリーは大変なことになっているので、例えば「トライガン」でディレクトリを作り、その中に「01」「02」……とディレクトリを作って、順番にファイルを入れていくと、非常にファイルの管理が楽になるはずです。

といっても、最初から将来の発展について予測が立つことは滅多になく、また一度決めた構造を修正するのは、なかなか面倒なものです。だからこれは、もし可能であれば、という留保付での提案になります。

思いつくままにだらだらと書いていったら、こんなに長くなってしまいました。ひとつかふたつでも、参考になる話があれば幸いです。

関連記事一覧

趣味のWebデザイン＞Advice

平成16年12月31日

ご依頼人と Web サイトのご紹介

Heart Shaped Box

映画の感想を中心に据え、その他、日記・掲示板・リンク集など揃えて典型的な個人サイトの形に仕上げています。掲示板まできちんとデザインを調整されており、「丹精込めて作りました」という感じがあって、たいへん好感を持ちました。

管理人の yuki さんは神奈川在住の高校生。陸上に打ち込む傍ら、趣味でたくさんの映画を鑑賞され、感想を記録したものに限っても250本超というから、ちょっとしたものです。高校生というと、好きな映画は最近のものがメインなのかな?　と予想される方が多いでしょうが、これが意外に渋い。いや、より正確に（?）いえば「バランスがいい」ように思いました。……なんていうほど、私は映画を知っているわけではないのですけれども、フランク・キャプラ監督の作品が大好きな高校生というのは貴重ではないでしょうか。

yuki さんの選ぶ映画オールタイムベスト30

同時代の映画ばかり追いかけていますと、せっかくたくさん観ても、同世代の人としか話ができず、つまらない思いをすることがあります。それでは意味がない、などと極端なことをいうつもりはありません。まず自分が楽しいことが大切だ、というあたりも異論が少ないでしょうからさておき、テレビも映画も本も、人と語り合う話題としての価値も馬鹿にできたものではないと思うのです。

日本史上最もレコード（CD 含む）が売れたのは、バブル崩壊後のカラオケブームの時代でした。コミュニケーションの力が音楽需要を牽引したのです。映画の場合、それほど強力なエンジンはありませんが、ウィリアム・ワイラーやヒッチコックのヒット作を観ていると、幅広い世代の方と会話できます。映画が取り持つ人の縁はたしかにあって、私もこれまで、ひょんなことから意気投合して（とまで書くと嘘になりますが）、すんなり話が通ったことも一度や二度ではありません。

2004年10月29日にテレビ放映された「ローマの休日」が視聴率16.1％を記録して話題になりましたが、1953年の映画が今も愛され続けているあたり、映画文化の懐の深さを感じさせます。

ご相談の内容

サイト名は『Heart Shaped Box』で、簡単な映画の感想を載せたサイトです。映画の感想の本文のページに色々と問題があることを自覚しているのですが、どのように直せば良いか試行錯誤している途中なので、その辺のアドバイスを中心にお願いします。勿論、その他のページや文章の内容についてでも何かあればお願いします。それでは、いつになっても構いませんので、よろしくお願い致します。

いくらいつになっても構いませんといっても、更新停止後にアドバイスするのでは、さすがに遅過ぎますね……。

アドバイスいろいろ

ご依頼には映画の感想の本文のページに色々と問題があることを自覚しているのですが、どのように直せば良いか試行錯誤している途中とあるのですが、じつは10月にリニューアルされまして、最近の感想ページではデザインが一新されています。今までのページがdiv要素依存で文字サイズ固定というひどいものだったので、これでかなり改善されたと思います。ということで、yuki さんが気にされていた問題は、既に解決したといってよいのではないでしょうか。

私がさっさとアドバイスしていれば、お手間を取らせることもなかったわけで、役立たずで申し訳ありません。

参考までに、映画感想の本文等はCSSでがっちりとレイアウトされている状態なので、直すのには手間がかかりそうです。という試行錯誤中の記述を活かしつつリニューアルに取り組んだテストケースを示します。

幅固定・文字サイズ固定の利点

幅固定・文字サイズ固定は、アクセシビリティやユーザビリティの観点から批判されることが多いのですが、単純には否定しきれません。

SVG 以外の画像を文字サイズの拡大縮小に追従してきれいに拡大縮小表示できるブラウザはありません（Opera の機能も不完全／ラスター画像の原理から考えて不可能ともいえます）。したがって、画像と文字サイズの適切なサイズ比に依存した視覚効果を実現したい場合、文字サイズの固定が必要になります。
1行字数について、こだわりを持っているデザイナーは少なくありません。となると、文字サイズに対して文字領域の幅を決める必要があり、文字サイズが固定されているならば、当然のように幅も固定されることになります。
画面全体のレイアウトを考えるとき、写真やイラストなどの非循環紋様の画像を上下の枠囲み（のようなもの）に使用する場合、SVG の利用がまだまだ現実的でないこともあって、画像の大きさに合わせて幅が固定せざるを得なくなることは少なくありません。
大半の閲覧者が 1024×768 または 1280×1024 の画面いっぱいにブラウザを開いて閲覧していることから、コンテンツ領域を横幅 760px 程度に固定すると、大半の閲覧者にとってちょうど見やすい幅となります。コンテンツ領域の幅固定の主な難点は、「表示領域が固定幅より小さい場合に読みにくいこと」「高解像度のモニタを使用する場合、コンテンツ領域が小さくなり過ぎること」です。しかしデファクトスタンダードが存在する現状においては、大半の閲覧者が納得できるならそれでいい、という考え方も現実的には通用するのであって、CSS による幅固定は一概に否定できないと私は思います。
表示領域に対する % 値でコンテンツ領域の幅を指定すると、表示領域が非常に小さい場合、たいへん読みにくくなります。逆に表示領域が非常に大きい場合には、1行字数がどんどん増えていくことになります。別にそんなことは問題ではない、と考える人ばかりではないはずです。結局のところ、極端なケースを持ち出せば、どんなデザイン手法も問題を抱えており、一般的に想定される範囲において問題なく表示できるのであれば、幅固定をとくに否定する理由はありません。
同様に文字サイズも、14～18px あるいは 12～16pt の範囲であれば、固定しても大勢が困ることはありません。どうしても困るという方には、IE の利用者であれば、「ツール→インターネットオプション→ユーザ補助→Web ページで指定されたフォントサイズを使用しないにチェックを入れる」という手順により CSS による文字サイズ指定を解除できることを教えることで問題を回避できます。

作業方針

マークアップになるべく div 要素を使わないようにしたい、という希望もありましたので、「映画感想No.34」を原本とし、まずはマークアップを私流に変更してみます。
幅固定・文字サイズ固定のデザインを再現します。
原本の雰囲気を活かした、私なりの幅固定・文字サイズ固定の排除案を示します。

1．マークアップの変更

原本

原本から抽出したサンプル

HTML 概要

<h1>文書タイトル</h1>
<h2>作品名</h2>
<div class="gazou">ジャケット写真</div>
<div class="databox"><p class="data">ナビゲーション</p></div>
<div class="movie-honbun">感想</div>

HTML ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
（中略）
<body>
<h1>映画感想No.34</h1>
<h2><a name="1">Shall we ダンス？ ★★★★★★★★★（９）</a></h2><br>
<div class="gazou">
<A HREF="http://www.amazon.co.jp/dp/B0001JZHHG/heartshapedbo-22"><IMG SRC="shallwe.jpg" border="0" alt="イメージ画像" hspace="3" vspace="3"></A>
</div>
<div class="databox"><p class="data"><a href="./movie.html">戻る</a> <a href="./index.html">トップ</a><br>9.15.2004（ビデオ)</p></div>
<div class="movie-honbun"> １９９６年、日本。周防正行監督作品。ごく平均的でつまらない生活を送っている役所公司演ずるサラリーマンが、社交ダンスとの出会いをきっかけに人生が変わる様子をユーモラスに描いた作品。ダンス教室に入会する際に一万円・三万円・五万円のどのコースが良いか訊かれ「じゃあ一万円で。すみません―」と何故か謝っていたような情けない男が、「ダンスを馬鹿にするな」と職場で怒鳴るようになるまでに変貌する様子が何とも爽快で面白かったです。脇を固める個性溢れる俳優陣もそれぞれにはまり役で、中でも竹中直人のアクの強い演技は最高に魅力的。</div>
</body>
</html>

CSS

movie.css

原本のスクリーンショット

原本のスクリーンショット

目標はシンプルです。

構成要素を枠線で明確化

文書の構成要素を明示した様子

文書タイトル
作品名
- ジャケット写真＋ナビゲーション
- 感想

ナビゲーションの位置が妙ですが、気にしないことにします。

適当な要素を割り振る

要素の割り振りを行った様子

<h1>文書タイトル</h1>
<dl>
<dt>作品名</dt>
<dd class="gazou">ジャケット写真＋ナビゲーション</dd>
<dt class="movie-honbun">感想</dt>
<dd></dd>
</dl>

変更案の HTML ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
（中略）
<body>
<h1>映画感想No.34</h1>
<dl>
<dt><a name="1">Shall we ダンス？ ★★★★★★★★★（９）</a></dt>
<dd class="gazou"><p><a href="http://www.amazon.co.jp/dp/B0001JZHHG/heartshapedbo-22"><img src="shallwe.jpg" alt="Shall we ダンス？" width="103" height="145"></a></p>
<p><a href="#">戻る</a> <a href="#">トップ</a></p>
<p>9.15.2004（ビデオ)</p></dd>
<dd class="movie-honbun"> １９９６年、日本。周防正行監督作品。ごく平均的でつまらない生活を送っている役所公司演ずるサラリーマンが、社交ダンスとの出会いをきっかけに人生が変わる様子をユーモラスに描いた作品。ダンス教室に入会する際に一万円・三万円・五万円のどのコースが良いか訊かれ「じゃあ一万円で。すみません―」と何故か謝っていたような情けない男が、「ダンスを馬鹿にするな」と職場で怒鳴るようになるまでに変貌する様子が何とも爽快で面白かったです。脇を固める個性溢れる俳優陣もそれぞれにはまり役で、中でも竹中直人のアクの強い演技は最高に魅力的。</dd>
</dl>
</body>
</html>

というわけで、無事に（?） div 要素の排除に成功しました。

2．デザインの再現

CSS を書く

これは簡単。dd 要素を float:left; として2段組を作るだけです。原本の CSS は position:relative; を駆使して段組を実現しているため、段組するブロックの内容量によって面倒な条件分岐をしていました。float:left; なら、複雑な計算は無用です。その他、簡略な記法を使って全体に記述をコンパクトにまとめています。

*
{margin:0; padding:0;}
body
{padding:1em; background:#fefefe url(hikei.jpg) fixed no-repeat 100% 100%;}
h1,dl,dt,dd,p
{margin-bottom:11pt;}
h1
{color:#339900; font-family:Verdana,cursive; border-bottom:3px solid #390;}
dt
{line-height:18pt; font-size:15pt; font-weight:bold;}
dd.gazou
{width:120px; float:left; font-size:9pt;}
dd.movie-honbun
{width:300px; float:left; background:#fefefe; font-size:11pt; line-height:18pt;}
img
{border:none;}
a:link,a:visited,a:hover,a:active
{color:#333; text-decoration:underline;}

再現案スクリーンショット

3．幅固定・文字サイズ固定の排除案

難題、だと思います。結局、ジャケット写真は拡大・縮小できないわけです。どう頭を悩ませても、文字サイズとのバランスは、一定になりません。1行字数にこだわるとします。この場合、画面を小さくし、文字を大きくすると、悪名高き横スクロールバーが簡単に生じます。幅を表示領域に対する % 値にした場合の問題は前述の通り。

よくある閲覧環境において、そこそこ問題なく表示され、原本の雰囲気を残すには……という線で妥協点を探った結果を以下に示します。

スクリーンショット

何となく騙されているように感じる方も多いかもしれませんが、ぜひ3つのサンプルについて、文字サイズをいろいろ変更してみてください。

CSS

* {margin:0; padding:0;}
body
{padding:1em; background:#fefefe url(hikei.jpg) fixed no-repeat 100% 100%;}
h1,dl,dt,dd,p
{margin-bottom:11pt;}
h1
{color:#339900; font-family:Verdana,cursive; border-bottom:3px solid #390;}
dt
{line-height:1.2; font-size:150%; font-weight:bold;}
dd.gazou
{width:120px; float:left; font-size:90%;}
dd.movie-honbun
{width:21em; float:left; background:#fefefe; font-size:100%; line-height:1.5;}
img
{border:none;}
a:link,a:visited,a:hover,a:active
{color:#333; text-decoration:underline;}

yuki さんの解決策

「幅固定・文字サイズ固定の排除」という課題には、過去、何度か取り組んできました。可能な場合も不可能な場合もあって、結果は一様でないのですが、yuki さんご自身の回答を拝見して、「やっぱりそうきたか」と思いました。

デザインを変更されているのです。

ちょっと寂しい感じもあった画面に華が生まれ、たいへんよくなっています。私の回答より、ずっといいと思う（とくにナビゲーションの配置など）。やはり、ひとつのデザインに固執せず、思考を柔軟に切り替えていくことが大切なのでしょう。

幅固定・文字サイズ固定の排除は、確実に、いくつかのデザインの放棄につながります。それは我慢できない、というのもひとつの見識でしょうけれども、個人サイトの場合、そこまでこだわる意味が果たしてあるのかどうか。逆に「幅固定・文字サイズ固定の排除」というテーマにこだわる意味も小さく、「どうでもいい」という答えが導かれそうな雰囲気もありますが、今、悩んでいる方にとっては「デザインを変えてもいい」という発見は、大きなヒントになるかもしれません。

私は yuki さんの決断は非常に評価できると思っています。新しい記事から新デザインにすればいい、過去ログは、そのままでいいんじゃない?　というスタンスは、個人サイトのリニューアルの王道です。

関連記事一覧

趣味のWebデザイン＞Advice

平成16年12月29日

クレーマーの恐怖

母から送られた手作りジャムのビンが到着時に割れていたことに気付いた平野一成さんがヤマト運輸に抗議した。ヤマト運輸は発送依頼人である平野さんの母親に連絡したが、精神的ショックを不安視し、母には問題の発生を黙っているつもりでいた平野さんは激怒、恐怖のクレーマーと化す。

発送依頼人は平野さんの母親であって、ヤマト運輸が謝罪・弁償すべき相手は平野さんではない。だから、「謝れ、弁償しろ」という話になったら、母親へ連絡する他ない。この基本的な問題の構造を理解できない平野さんは、渡世に苦労しそう。多分、ヤマト運輸の社員も散々説明して、それでもわかってもらえなくて諦めたのだろう。

……とはいえ、こうして弁償を求める権利を有さない声が大きいだけのクレーマーに30000円もの慰謝料を支払うのは、総会屋への利益供与と（ある意味で）同じだ。遵法精神を謳うなら、ヤマト運輸は平野さんへの弁償など提案してはならなかった。

ヤマト運輸は人の心を慮る会社だから、理不尽な要求を突きつけるクレーマーにも誠心誠意対応する。それは「問題をこじらせて嫌がらせに対応しなければならなくなったり、裁判だのかんだのといって、無駄な費用が発生することを思えばこの方がマシだから」かもしれない。けれども、平野さんのコンプライアンス。それは、おもいやりなのだ。人をおもう気持ちなのだ。という主張には合致している。

「平野さんには何の権利もない」といって門前払いしていたら、きっと「大企業の官僚的対応」などと批判されたろう。それにしても、「思いやり」といえば聞こえはいいが、現実に「思いやり」が問題となるとき、私はしばしば、つかみどころのない怪物のおぞましい一面に触れて戦慄する。

余談：名前を出して仕事する、ということ

記事に多数寄せられている読者のコメントも参照のこと。

ただし私は、読者の意見にも異論がある。例えばヤマト運輸の担当者名が公開されている件については、プライバシーの侵害とは考えない。名前を出して仕事する以上、当然の結果だろう。新聞の署名記事の誤謬を指摘するケースと同様に扱うべき。

だから逆に、個々の社員を免責し、常に組織として対応することを社是として、クレーム対応担当者が決して個人名を明かさない会社も存在する。批判の敷居が高くなることを期待しているのだろう。しかし組織相手の方が気軽に批判できる風潮もある昨今、僅かな DQN 社員の行動のために組織全体がダメージを負うリスクの方が大きいのではないか。

余談：受取人が私だったら

ケチな性分なので、ビンが割れていても、ふつうに詰め替えて食べていたろうと思う。何せ中身は保存食の代表というべきジャムなのだ。だから、もしも受取人が私だったら、ビンが割れていたからといって、ジャムの全てが失われたかのような発想はしない。

そういった意味でも、遠い世界の話だな、と思った。

余談：いいたくてもいえないこと

ヤマト運輸は結局、ビンが割れた理由を公式にはきちんと説明できなかった。「平野さんの母親がワレモノ注意のサービスを過信し簡易包装で発送したこと」が本当の理由なのだから、当然である。

ポイントは、それが「過信」か「当然の期待」か、ということだろう。私はコメント欄の意見に賛成で、平野さんの母親に常識が足りなかったのだ、と思う。けれども、ヤマト運輸として、それを口にすることはできない。何せ平野さんはブチ切れており、これを宥めるだけで大変（そうしないとクレーム処理が延々と長引いて人件費の大損害）という状況なのだから。理より利を優先するのは、営利企業の価値観に照らして、正しい。その意味では、理に適っている。

理の通った行動、といっても、それは拠って立つ価値観次第によっていろいろありうるわけであって……と、「いつもの話」へ持っていったところで筆を置く。

平成16年12月14日

気に入らない意見を叩く一番簡単な方法のひとつは、「そんなに簡単じゃないよ」といって、相手が単純化した部分について反例をどんどん挙げていくことです。けれども、実験計画法を勉強された方はよくよくお分かりの通り、自然をありのままに捉えたら議論はできないわけです。バタフライ効果なんて言葉が一人歩きしているのがいけないのですけれども、基本的には影響の大きな主効果を分散分析などして見つけていけばいい。自然科学の世界では、影響の微小な因子は無視できます。そのための分析なのです。

けれども、社会科学の話になると、まず数値化で躓きます。自然科学を支える価値観のような、共通基盤がない。そもそも誰もが認める公理が何一つない。だから価値観の対立する者同士は前提条件を共有できない。「自殺してはいけない」「なぜ?」「周りの人が悲しむ」「周りの人を悲しませるのは悪いことではない」「自分が悲しむのは嫌でしょう?」「はい」「だったら」「自分がされて嫌なことを他人にするのは悪いことではない」となると、説得なんて無理です。

平成16年12月8日

固有IDのシンプル・シナリオ雑感
void GraphicWizardsLair( void ); //（2004-12-05）

徳保さんは、ひろみちゅが指摘している「RFIDは車ナンバー読み取りNシステムなどと違い、読取装置がケタ違いに安価になったり、機器自体がNシステムよりも簡単に市場に出回る可能性が高い」という要素をあえて無視している？

「読み取られていることに気がつかないようにスキャンできる」という能力も、車のナンバーや郵便物と比較してもケタ違いにアップすると思う。

無視しているわけじゃなくて、それがどうしたの?　ということ。

高木浩光＠自宅の日記（2004-10-10）

タグには2種類あります。読み取り機にかざして使うタイプと、アンテナが勝手に読み取ってくれるタイプです。

かざして使うタイプでは、読み取り機からの電波を受け取ると、返事をする仕組みですが、かざさないタイプでは、タグが電池を内蔵していて、常時電波を発信し続けます。学校の門に来たときだけ電波を出すわけではなく、街中を歩いているときも、電車に乗っているときも、家の中にいるときも、電波を出し続けます。

電池内蔵型では電波の届く距離は10メートルから数十メートルにおよびますから、少しはなれたところにいる第三者でも読むことができます。電波の受信機さえあれば誰でも読めるわけです。もし裕福な家庭が通う学校だけがランドセルにタグをつけていたら、悪い人が、受信機を使って、どっちの方向に子供がいるかを探知するかもしれません。

番号だけだから個人情報ではないと言いますが、常に同じ番号を出しているわけですから、たとえば、この家の子供を狙おうと思った悪い人は、夜のうちに家の外から電波を受信して番号を確認しておいて、あとは、登下校の時間に、同じ番号を発信する子供が数十メートル以内に入るのを待つということもできてしまいます。

そういうことができないように、暗号化する対策が必要です。昨今の実験で使われているタグに暗号機能があるかどうか、説明されていません。

父兄の方々は、こうしたリスクもあることを知った上で、本当に便利かどうか検討する必要があります。

警鐘を鳴らす立場の高木さんは危機感をあおるような書き方をしているのだけれど、例えばこの事例、私の感想はいささか異なります。

数十メートルまで近づかなければ電波を感知できないわけです。ふつうに考えると、それなら顔とか服を目で確認できるわけでしょう。人間を配置せず、機械を置くだけで足りるのが違うところなのかもしれませんが、道なりに数十メートル間隔で機械を設置するのでは、小学生の行動範囲を押さえるだけでもただごとでない。車に乗った犯人が、微妙に離れた位置からターゲットを追跡する、といったことを想定されているのでしょうか。

でも、それって、従来からできたこととほとんど違わないと思いませんか?

興信所に浮気調査を頼むと、顔と服装で個人を特定し、行動を追跡してくれるわけです。タグの電波を読み取るにしても、犯人は家でテレビを見ながらというわけにはいきません。電波を受信できる距離が数十メートルにせよ、300メートルにせよ、人を追跡するためには、犯人はターゲットについて回るしかない。顔と服装以外に、個人を特定する手段がひとつ増えたからといって、圧倒的に危険が増大しますか?　そんなことはないでしょう。

仮に、その辺を歩いている子どもが身に着けているタグの番号だけから親の財産や電話番号がばれるとなると、確かに下調べ無しで営利誘拐できる、という話にもなります。しかしながら、そうしたクリティカルな問題には、対策がなされているわけです。不正アクセスをブロックし、そもそもデータベースには氏名さえ記載しない（学籍番号など、書類管理の番号に関連付けるだけにする）、など。

平成16年12月8日

固有IDのシンプル・シナリオ雑感
void GraphicWizardsLair( void ); //（2004-12-05）

徳保さんは、ひろみちゅが指摘している「RFIDは車ナンバー読み取りNシステムなどと違い、読取装置がケタ違いに安価になったり、機器自体がNシステムよりも簡単に市場に出回る可能性が高い」という要素をあえて無視している？

「読み取られていることに気がつかないようにスキャンできる」という能力も、車のナンバーや郵便物と比較してもケタ違いにアップすると思う。

ケタ違いにアップというところに、賛同しないということです。ある種の田舎で昼間に街中を移動すると、行動の軌跡が公知の情報となります。目撃情報を辿れば、簡単に、ある人物の一日の行動を把握できるわけ。それで何か困っているのかというと、別に問題ないだろう、と。田舎の目と同等の監視システムを、個人の情報を収集するために犯罪組織が設営するだろうか?　そんなことはありえないとすれば、現在以上にプライバシーが漏れる危険なんてないということになりませんか。隣の家の晩御飯の献立が平気でバレているのが日本のムラなんですよ。

何かと秘密を持ちたがる人にとっては大問題なのかもしれないけれど、「実は公開しても問題ない情報」というのは少なくないと思っています。例えば住所、例えば電話番号。現に公開している人がいて（私とか、あるいは全ての個人ネットショップオーナー）、ほとんど問題になっていません。私はレシートをふつうに半透明とか透明のゴミ袋に入れて捨てているから、誰だってゴミ漁りすれば私の買い物履歴を把握できます。カードの使用履歴も同様。誰でも調べられる。で、それで何が問題なのか、ということ。

気にする人がいるのはいいですよ、それはそれで。けれども、私が思うに、そんなことは、基本的にこれまでの出来事の延長上の話でしかないだろう、と。みなさん、レシートとかカードの使用履歴の通知書とか、きちんと裁断してきたのでしょうか?　家計簿、どうやって処分してきましたか?　ふつうに捨ててきたんじゃないですか。廃品回収のボランティアを手伝うと、家計簿が時々出てきます。名前とか、いろんな情報が詰まっているのに、ポンと捨ててしまう人がたくさんいるんです。セキュリティに厳しい人だったら、家計簿を古新聞や週刊少年ジャンプを一緒に縛ってしまうなんて信じられないでしょう。でも、そういう信じられないことをやっているのが、日本人です。

たとえ話で出ているような物と比較したら。スキャニングと追跡を「安価に総なめ方式」で出来るというのが「便利な道具」であるところのRFIDの特徴だと。

それはそうでしょうが、でも結局、楽して入手できる情報は高が知れている、という点には変化ない。

「MIWA製のキーシリンダーは、プロの窃盗団に狙われたら5分ともたずに開けられてしまいますよ」という事を知っていて、それでも「まぁ自宅には現金も通帳とハンコもパスポートもパソコンもテレビも置いていないし」という選択をすることは誰も批判していないと。

そうじゃないんですね。現金も通帳も判子もパスポートも置いてある家の玄関に鍵をかけない田舎の実態というのがあるわけです。というか、私の暮らす社員寮の鍵なんて非常にちゃちなものですし。東京でさえ、そういう部屋になんでも大切なものを置いている人がたくさんいるのです。そういう選択もアリなんですよ。

もっと書くと、じつは社員寮の裏口には鍵がかかっていません。これは一部の部屋へのアクセスの利便を図るためで、そのためにセキュリティを崩壊させている。一応、部屋の鍵はあるのですが、この鍵は玄関の鍵以上に貧弱です。さらに書くと、窓の鍵はサッシをガタガタさせるだけで開きます。それでも誰も修理しようとかいわない。

そういう生活をしている人間がたくさんいることを無視して、さあ大変だ!　といっても、どうなのか。フィッシング詐欺にせよ何にせよ、庶民の理解と関心は高木さんらの話とは比較にならない低次元ですし、それで案外、気にも留めていない。漠然と、「怖いねえ」といっているだけなんです。最近の日本は治安が悪くなったね、といいながら、裏口の鍵も開けっ放しで生活している人にとって、レシートを裁断せずにゴミに出している人にとって、RFID タグくらい何なのか、と思うわけですよ。

所詮、調べようと思えば調べられる、という類の危険が増大するだけなんです。泥棒対策と一緒。敵さんが本気になれば、プライバシーなんて丸裸にできるのです。私は病院で貰った薬の一覧もそのままゴミに出していますしね。会社で受けた健康診断のコピー（年1回配布）も、新しいものが配られるたびに古いものを捨てています。こういうのを収集すれば、私の健康状態だって、みんな入手できるわけ。

私がどうしてそういう危険を放置しているのかというと、どうせ私の情報なんてろくな価値がなくて、情報収集の手間隙を考えたら割に合わないと思っているからです。あるいは、ゴミ漁りしてまで知りたいというなら、その程度の情報、適当な金額で売ってやってもいいと思っているからです。私は既住症を隠して保険に入るつもりもないし、根本的に、重要な情報だと認識していません。買い物履歴だって何だってそう。別に、隠そうとも思ってない。積極的に開示する理由はないけれど、凄く知りたいというなら、どうぞ勝手に調べてください、と。

個人情報が漏れても、気持ち悪いという以上の不都合は、まずなさそうです。カードの番号とか保険証とか盗まれない限り。いや、それだって、私は金持ちじゃないので、財産全部とられても100万円にもならない。カードの限度額も20万円か30万円だったはずで。1年で取り戻せる金額ですよ。だから盗られてももいいということじゃなくて、仮に不幸に遭遇しても、高が知れているという発想。

平成16年12月4日

空港には一種と二種があって……というお話。

論理的思考

「余談」としてありみかさんの意見を批判しましたが、本人は「正しい HTML 信奉者」を自称しておられる。ゆえに思考においても論理的であろうと推測されるのですが、実際の意見は政治問題を感覚的に捉えています。これは大変危険なことです。誤った HTML ぐらいなら誰の迷惑にもなりませんが、政治は直接誰かの生活を脅かすこともあります。

私が政治問題をあまり扱わない理由は、自分の「論理的思考」に自信がないためです。（をいをい）

^※政治は必ず少数者を残す

当たり前の「政治原理」で、個人としての国民全員の利益になる政治はあり得ません。政治家が「国民」と言う場合は、総体を指しています。バランスなので切り捨てられる部分があります。 JIS で「アクセシビリティ」を言うことの胡散臭さは、原理的に政治とは背反する概念だからです。

そうかもしれない、と思いつつ、以下は関係ない話。

なぜ成田に空港が作られたのか

私は成田出身で、父が空港で機内食メーカに勤務していることもあり、成田空港については多少の意見を持っています。成田では犠牲者を出してまで国は開港しました。という一文から、少し話を広げたいと思います。なぜ、成田に空港が作られたのか?

空港を作るには平坦で広大な土地が必要で、ちょうど成田には御料牧場があって、新規買収地が少なくて住む算段があった……というのは、もちろんひとつの理由です。けれども、どうして羽田を拡張しなかったのか、せめて東京湾に作らなかったのか、という疑問は残ります。今からだって遅くない、大拡張された羽田に全部集中しよう、という声もあります。

ところが、なかなかそれは難しいわけです。なぜか?　横田基地があるからです。私はこの話を、最初は父から聞きました。航空管制の都合なのだというのです。横田基地と成田空港を関連付ける、航空管制の問題については、帝京大学教授・高山正之さんのわかりやすい解説があるので、以下ご紹介します。

首都新空港の条件　なぜ今、横田なのか

記事中に登場する通称、横田コリドーや、羽田空港への離発着が知恵の輪のように窮屈で大変なことになっていることは、成田空港の見学ルートに用意されている図解や、航空科学博物館の展示物を見れば一目瞭然でした。過去形なのは、現在も往時と同じ展示物が用意されているかどうか、はっきりしないからです。たぶん、今でも確認できると思います。興味のある方は、ぜひ足を運んでみてください。

なお、高山さんの記事は1999年に書かれたもの。その後の展開は皆さんもご存知の通りで、横田基地返還は遠い夢の話となり、サッカー日韓 W 杯にかこつけて暫定の第2滑走路が建設・供用されました。ちなみに横風用滑走路は、ここでは「滑走路の本数」に数えていません。他の2本と同時には使えず、そもそも緊急用の設備に過ぎないからです。

高山さんの解説について

リンク先は無断転載された文書なので、書籍版をお買い求めいただくのが正道だとは思います。PHP出版から刊行され既に絶版となった旧「異見自在」は選集だったのが残念でしたが、新しい高木書店版の「異見自在」は全話を収録した完全版。これでようやく新聞の切り抜きを処分できました。昔、私はこの連載が大好きで、土曜日の夕刊を毎週楽しみにしていたものです。高山さんはいつも決まって社論を無視した持論を展開、よくこれで編集委員に推挙されたものだと驚き呆れたこともしばしば。辛口のコラムニストというだけなら珍しくもないのでしょうが、この記事は新聞記者の肩書きで1面に堂々と掲載されていました。そういう目で見れば、「異見自在」がいかに型破りな存在だったか、ご理解いただけるでしょう。

時事問題が中心のエッセイ集なので、たしかにひとつひとつの事象は旧聞に属します。しかし、本書に通底するテーマは現在も有効です。新聞の国際面、社会面を好んで読まれる方なら、とても楽しめる一冊ではないでしょうか。

平成16年12月3日

まんぷく::日記（2004-11-26）

「HTMLとスタイルシートによる最新Webサイト作成術」が3刷になったそうです。嬉しいですね。

私は今でも、最高の Web サイト作成入門書は「HTMLとスタイルシートによる最新Webサイト作成術」だと考えています。Amazon のレビューで大勢の方が証言されている通り、正しく効率的な方法を、初心者にもこれほどわかりやすく説明し、理解させることができたのか!　と驚嘆する内容です。

しかし残念なことに、入門書としては2色刷の紙面が致命的です。しかも噛んで含めるような読み物風の解説スタイルですから、一見、文字が多い。初心者、初級者に最適の1冊なのに、フルカラーの画面写真ばかりで構成された本をほしがる彼らには、あまり売れそうにない。それは単なる食わず嫌い、読んでみれば不安は吹き飛ぶはずなのだけれど、やっぱり1年間は売れなかったそうです。ところが何と今年になってグングン売れ行きが伸び、先月末には2回目の増刷がかかりました。

私が本書に出会ったのは2003年1月3日、新横浜プリンスホテルの傍にある電器屋の書籍コーナでした。入門書然とした表紙でありながら、タイトルが「ホームページ」ではなく「Webサイト」で、しかも「HTMLとスタイルシートによる」というのです。否が応にも期待が高まりましたが、内容はその期待のはるか上を行きました。これは素晴らしい、たいへんな傑作だと思い、すぐに購入して確保したものです。

私がたくさんの解説書をレビューし始めるのは2004年3月のことで、2003年1月当時には、まだそういった趣味はありませんでした。HTML も CSS も、自分のやりたいこと（難しいことは希望していないので、勉強もそれほど必要ない）を実現するには十分な知識がありましたし、解説書なんて、買う予定はなかったのでした。だから、書籍コーナに立ち寄ったのは、全くの偶然だったように思います。その私が一種の天啓を受けた、その衝撃が皆さんにご理解いただけるかどうか……。

以降、私は時折この備忘録で奨めたり、サイトの表紙から某通販サイト（忘れました）の書籍紹介ページへリンクしたりしました。書店で売れないなら通販で売るしかない。レビューと書影と値段だけなら、いけそうだと思いました。幸い、表紙のイラストは非常によいものだったので。

編集者の方が頑張られたようで、Amazon 以外のいくつかの通販サイトでは、たいへん訴求力のある紹介文が掲載されていました。しかし、よりによって最大手の Amazon では、紹介文が途中で切られてしまっています。そこで、初めて徳保隆夫の名でカスタマーレビューを書くことにしました。人生2度目のレビューだったので、時間をかけた割に精彩に欠けるレビューとなってしまいました。でも、燦然と輝く5つ星が、この傑作が本の海に沈んでいくことを少しでも防いでくれるものと信じました。

数ヶ月たち、ポツポツと、いくつかの常連読者さんのサイトに本書の感想が載りました。いずれも好意的な内容。Amazon のレビューにも、「参考になった」票がじわじわと増えていました。でも、じりじりと売り上げ順位は下がっていきました。通勤途上の書店からも消えてしまいました。売れたならいいですよ。でも、それなら補充されるはず。そして入れ替わりに書棚へ入った本の内容がひどくて……悔しかったです。でも、資本主義社会は売った者勝ち。何とかしたい、でも何をしたらいい?

Amazon カスタマーレビューで戦うという発想は、かなり早い段階で生まれたものです。けれども、時間とお金に相当の余裕がないと、意味のあるレベルに達しないと考え、選択肢から外してきたのでした。しかし、他に妙案はありませんでした。

その後の展開はご存知の通り。検索ワード「HTML」「スタイルシート」で首位に立った「HTMLとスタイルシートによる最新Webサイト作成術」は、さらに激戦区の検索ワード「ホームページ」でもたびたび首位に立つベストセラーとなりました（ただし Amazon のみ）。これはもちろん、私の力などではなく、本の力です。私のレビューは切っ掛けに過ぎません。11人中10人のレビュアーが5つ星をつけています。私一人が高く評価しても、2人目以降のレビュアーが辛い評価を下していたら、その後の展開はまったく異なっていたはずです。

人に勧めてこれほど喜ばれた本は他にありません。メールでもよい感想をいただきました。興味のある方は、立ち読みでもけっこうなので、ぜひご一読を。お気に召しましたら、「いい入門書ない?」と訊ねられたときに思い出していただけるとありがたいと思います。

関連

平成16年12月3日

Book Guide／趣味のWebデザイン

約100日ぶりに更新しました。レビューの推薦順リストが長大になったので、ジャンル別に再構成し、簡単な手引きを添えました。これでようやく、お勧め本をきちんと紹介する形ができました。

ここしばらくレビューを書いたり、書店でたくさんの本を手に取りつつ感じたことですが、最近、いい入門書が増えました。何より、ダメな本が刊行されなくなってきたのでは?　ノマドワークスの新刊「これ一冊でわかる!!HTML+スタイルシート」は期待に違わず HTML を正しく使い CSS で装飾していく内容でした。そして、できるシリーズから「できるホームページHTML入門」が刊行されてから約半年で速効!図解シリーズから「速効!図解ホームページ作成 HTML&CSS編」が刊行されたのはビッグニュースでしょう。ようやく、時代が変わろうとしているのです。

「速効!図解ホームページ作成 HTML&CSS編」についてちょっと補足しますと、この本は「HTML&CSSマスターブック―for Windows&Macintosh」の増補改訂版です（逆に削られたページもありますが……）。マスターブックのレビューに、私はこう書きました。

インプレスは「できる」シリーズで正統派の入門書を刊行しました。毎日コミュニケーションズは本書の「速効！図解」シリーズからの刊行を見送りましたが、これはプレテストでしょう。HTML も CSS も最初からきちんと学ぶ方が理解しやすい、という初級解説書の新常識を決定付ける1冊として、私は本書をお勧めします。

幸い、マスターブックは好評を博しました。売れているかどうかはわからないのですが、Amazon でたくさんの書評がつき、しかも平均値が高いのですから、少なくともネットではよく売れているのではないかと思います。見事に予想が当たり、とても嬉しかったです。書店で見つけたときには「やった～!」と心の中でバンザイしました。Amazon で売れているだけでは、やっぱりダメでしょう。「できるホームページHTML入門」はネットでは概ね評判がいいと思いますが、他の会社がこれに続くのかどうか、祈るような思いでした。だから、「速効!図解ホームページ作成 HTML&CSS編」の発売には感激しました。

ちなみに著者の森理浩さんは毎日コミュニケーションズの編集者です。リスクを一人で背負ってマスターブックを出版し、さらにこうして看板シリーズからよい解説書を刊行された快挙に、惜しみない賛辞を送りたいと思います。今後のご活躍にも期待しております。

平成16年12月3日

Note／趣味のWebデザイン

過去ログを整理しようと思い、古い記事をいくつか選んで MT に放り込みました。最初は全部放り込むつもりだったのですが、面倒に耐えられなくなったので、すぐに路線を変更しました。その結果、読めなくなってしまった記事がたくさんあります。ただし古い記事の大半は転載リソース集から辿れますので、興味のある方はそちらからどうぞ。

今後も当サイトではリソースの URI を予告なく変更していきますし、情報自体の削除もないとはいえません。当サイトが消えると困る方は、適宜バックアップを取るようにしてください。

作業のついでに、最近の記事と追加した過去ログについて、試験的にトラックバックを受付けるようにしました。トラックバックの送信先や、各記事へ寄せられたトラックバックの一覧は月別ログに記載しています。ただし、私は基本的に、トラックバックを歓迎しておりません。ご注意ください。また気に入らないトラックバックは、どんどん削除していきます。読者にとって有用な内容かどうか、といったことは判断基準に含めません。

基本的に、リンクしたい記事があれば、私が自主的にリンクします。