備忘録

平成19年2月28日

IE7 のズーム機能は CSS 使い泣かせ(2006-02-01)の補足記事です。

各所で話題沸騰中の IE7ベータ2 ですが、個人的に一番心配していた IE らしい描画の風合いがきちんと護持されていたので、ちょっと安心しました。

以前の僕なら、ブラウザー間に差があることを容認するようなこの言葉に猛反対していたでしょう。僕には「IE らしい描画の風合い」が具体的に何を意味するのかわかりませんが、今は少なくとも反対はしません。

私はそれほど CSS に精通しているわけではないのだけれど、仕様書の日本語訳などを読む限り、この通りにウェブブラウザを設計すれば、同一のスタイル指定からは完全に同一の表示結果が得られるであろう、とはいえそうにありません。

その一例がリストマークの処理です。例えば square は四角形のマークだとされていますが、具体的にどんな四角形にせよとは書かれていない。

グリフは disc, circle, 及び squareを用いて指定される。グリフの正確なレンダリングは利用者エージェントに依存する。

案外こうしたところで個性が出るものなのです。この他にも仕様書には「この機能に対応できない場合は次のように処理していいよ」みたいな指示が結構たくさんあって、それらを守っていれば、CSS の全プロパティに対応しなくても仕様通りに動作するソフトウェアだといっていいはずです。

というわけで、私はブラウザ間に表示の差異があっていいという立場ですが、それは別に仕様から外れていいとか、そういった主張ではないのです。Acid2 Browser Test について私はよく知りませんが、それが仕様の特異な解釈を押し付けるようなものでない限り、クリアを目指す意味はあると思います。

とはいうものの、IE7 も Firefox2 も float の実装が(ちょっと)仕様と異なるからといって、float に全く対応できない場合と同様の動作をしたら大勢が困りそう。でもこういうことは仕様通りの方がいいと私は思いますよ。

ところで Acid2 への批判として私が首肯するのは中野さんのご意見です。ご参考まで。

float は難しい!

平成19年2月28日

ブログの炎上などに眉をひそめるマスコミ関係者が「彼らはワイドショーの真似をしているだけでしょ」みたいな反応(参考)に不快感を覚えるのは、わかる感じがする。「似たようなもの」という意見もわからないではないけれど、記者さんたちには「自分たちは倫理観を持って仕事をしている」という自負があって、実際いろいろそれで配慮をしているんだ、と。

ここ数日ではインフルエンザ治療薬タミフルの問題ですかね。

また中学生がタミフル服用後に自殺して、親が非常に怒っているという。第一報は怒る遺族に寄り添った報道だったんだけど、次第にトーンダウンしつつある様子。なぜかと思っていたら今朝の Sankei Express にこんな記事が。

厚労省研究班の横田俊平主任研究者の話
昨年公表した調査でもタミフルを服用した子供と服用していない子供で異常行動をする確率は変わらず、タミフルと異常行動には直接的な関係はないと考えられる。基本的にインフルエンザは48時間以内に高熱が出る。タミフルの服用にかかわらず、48時間以内はインフルエンザによる神経症状が出やすいので注意が必要だ。今回のケースも異常行動を起こす前に男子生徒には異変があったのではないか。
国立病院機構三重病院の神谷斉名誉院長の話
インフルエンザに伴う異常行動の例はタミフル登場前にもあったが、これだけ事例が増えると、因果関係を再検討すべき時期に来たのではないか。インフルエンザに特有の脳症など異常な神経症状を増強する作用がタミフルにあるのかもしれないが、有効な治療薬でもあり処方をやめるべきだとは思わない。医師は処方の差異に保護者に異常行動などのリスクを説明し、服用後は子供の様子を見守るよう助言すべきだ。

ようするに、異常行動の真因はインフルエンザだというのだ。ところがインフルエンザの症状として高熱は知られていても、異常行動の誘発は一般に知られていなかった。だから子を失った親は薬のせいだと決め付け、医師が説明を怠ったといって怒った。

ちなみに薬害に詳しい医薬ビジランスセンター理事長の浜六郎医師は「研究班はデータの取り方に問題がある。服用直後に限定すれば、異常行動を起こす割合は約4倍になる」と指摘しているそうだ。タミフルはいずれ起きる異常行動を早期発現させる効果を持つのだろうか。

研究班は現在、服用からの経過時間を明確にした上で、新たに1万人を対象とする調査を実施している。「タミフルとの因果関係をしっかり見極めたい」と主任研究者の横田俊平・横浜市立大大学院教授。結果は秋にもまとまる予定だ。

マスコミがこうした事例において、怒る人々を説得しようとせず、単に報道をフェードアウトしていくのは「ひとつの知恵かもしれない」と私は思うようになった。遺族の主張を全否定するに足る情報が揃うまでは、軽々には扱えない。さりとて医師と製薬会社を責めるのも理不尽だ。いきおい口をつぐむ他ない。

新聞は小さな記事まできちんと読みたい

先日、日銀が政策金利を上げた。早速、上昇したのが銀行株。利上げで利益が増大すると予想されているためだ、と産経新聞は伝えていた。経済面の隅っこの小さな記事だった。ゼロ金利で銀行はボロ儲けしているという話はどこへいった? それは嘘だよ、と経済学者はいい続けていた。

新聞は庶民感情を大切にする。そのために経済記者の良心さえ曲げることもあろう。それでも記者さんらは少しでも正しいことを伝えようと努力されているのだと思う。こんな小さな記事まで読んでくれる読者ならわかってくれるはずだ、そんな心の声を聞いたような気がした。新聞は小さな記事まできちんと読みたい。

平成19年2月28日

テレビ朝日が早朝に放送している情報番組。政治と社会問題のニュースに重点を置き、旅やグルメの情報からは距離を置いているのが特徴。

社員寮にいた頃はフジテレビの「めざましテレビ」が好きで、大塚に移ってからもしばらくはそうだったのですが、ここしばらくは「やじうまプラス」の面白さにハマってる感じ。ちなみに私が視聴しているのは朝6時50分からの40分間のみ。

何が面白いのかというと、庶民感情の代弁者を自任する局アナが大上段に振りかぶって政治家・官僚・大企業をぶった切るのに対し、コメンテーターがザバザバ冷水を浴びせかける掛け合い漫才が高頻度で発生するのですね。

最近では東国原宮崎県知事の女性問題報道についてのやり取りが興味深いものでした。週刊誌が女性2人の知事宅宿泊を知事との男女関係を連想させるような書き方で報じたところから始まったスキャンダルですが、コメンテーターはその1人が知事を取材中の記者だったとし、取材対象に接近し過ぎてはいないか、と記者を批判。また別のコメンテーターは、報道された内容だけでは非難すべきことかどうか判断できない、これで騒動になるならマスコミの報じ方にこそ問題がある、と。対して「しかし県民はどう判断するのでしょうか」と引き取って次のニュースへ移った局アナもきっちり仕事をしましたね。

三反園訓さんはテレビ朝日の解説委員なのに、局アナの味方をしないことが多い注目株。同職の川村晃司さんとは対照的です。岩見隆夫さんは政治家にもいろいろ事情があるんですよという話が得意。二木啓孝さんは単純すぎる物言いに苛立ちを見せる。デーブ・スペクターさんは芸能人を擁護する発言が記憶に残る。

もちろん大谷昭宏さんや吉永みち子さんのように局アナとほぼ同傾向の発言をする人もいます。勝谷さんは何でも怒ってるのが面白い。江川招子さんは時々そもそも論に踏み込んで1分以上も喋り続け番組の進行を妨げる困ったさん。

テレビ朝日は朝のワイドショーでもしばしば自社の報道姿勢と真っ向から対立するようなコメンテーターを呼ぶので面白いです。いつぞやのバスジャック事件で犯人との交渉に臨む警察のやり方をコメンテーターが「間違いだ」と断じたので局アナが「ではどうすべきだと?」すると間髪入れず「射殺です!」これには唖然とした。私は射殺に賛成だったけれども、テレビ朝日的にこれでいいのかと……。お節介ですけど。

そういえば保守色の強い「TVタックル」もテレビ朝日でしたね。面白いテレビ局だと思います。どんな視聴者層に向けて番組を作っているのかな。

平成19年2月28日

PCのド素人からいきなり中級者に叩き上げるページだという。私は DeepBurner の説明を参照した。ついでにサイト内をざっと見て回ったのだけれど、私は中級者には一生なれそうにないな、と思った。

自分が必要としない内容は頭に入らない。必要でも頭に入らないことがしばしばあるくらいだし。初心者に苛立つ感覚は私にもあるけれど、我が身を顧みて、お節介に過ぎないということだろうなあ……と。でもこうしたお節介のエネルギーが充実した解説を生み出していくのだから、馬鹿にしてはいけない。

平成19年2月28日

あちこち探してみたけど、よくわからなくて困っているのが Windows XP で CD から Windows Media Player 11 へ取り込んだデータのバックアップ方法。WMV ファイルはマイミュージックフォルダにあるのだけれど、ジャケット画像とかはどうしたらいいのだろう。

アルバムデータをウェブから検索すると、アーティスト名がカタカナ表記となっている作品とアルファベット表記になっている作品があり、そのままでは別のアーティストの作品として扱われてしまって不愉快なので、自分でいずれかに統一したりしている。でもマイミュージックフォルダの中のファイルには何も変化がない。ということは、別の場所にそうした情報が保存されているのだと思う。

WMP10 の頃はジャケット画像なんてどうでもいいと思っていたのだが、WMP11 になったら、それがないとさびしく見える。でもマイクロソフト提供(なのか?)のデータベースへアクセスしても、ジャケット画像が手に入る作品は驚くほど少ない。そこで自作の適当な画像をでっち上げて画像設定などしているのだが、このデータもどこに保存されているのだろうか。

CD から取り込んだ時点ではオンラインデータベースに曲名のデータがなかったので、1年くらい経ってから再びアクセスして曲名を設定したものもあるのだけれど、マイミュージックフォルダを見てみたら、ファイル名は取り込み時のままだった。トラック1.wmv といった暫定的な名前になってる。

最近、PC の調子が悪い。修理に出している間はサブ PC を使うつもりなのだけれど、メイン PC とは別機種だから、メイン PC のシステムバックアップデータ(Acronis True Imege 10 home を用い週1ペースで外付け HDD に保存している)をそのまま復元したらシステム構成とかドライバーとかに問題が生じてしまう。

試しにマイミュージックフォルダだけサブ PC にコピーしてみたのだけれど、やっぱりそれでは最初に CD からデータを取り込んだときの状態にしかならないのだった。

ウェブでは PC 買い替え時に iTunes で買ったデータをどうするかとか、Mora で買った曲はどうなるんだとか、そういった DRM 関連の話題ばかりが見つかる。でも現状、オンラインでの音楽販売より CD 販売の方がずっと市場規模が大きいし、レンタル CD からのコピーをやってる人の方が多いわけでしょう。

どうして多数派向けの情報がウェブに少ないのか、よくわからない。マイミュージックフォルダのデータをコピーするだけでみんな満足してるのかな?

というわけで、情報募集中です。

追記(2007-03-05)

ヘルプファイルをよく読んだら、ライブラリはコピーできないと書いてありました。でも下記の手順で、いくつかのデータはコピーできたので、参考になれば幸いです。

  1. 「オプション→ライブラリ」と進み、「ファイルのメディア情報の自動更新」の枠内は全部チェックを入れる。
  2. アルバム情報を全部ネットから再取得し、表記揺れの解消も同時に行った。

    表記揺れの解消にはオンラインデータベースの編集機能を使う。

    よくわからないけど1人か2人が書き換えを行ってもオンラインデータベースがすぐに更新されてしまうことはないようなので、自分のローカル環境で浜崎あゆみは「浜崎あゆみ」とすると決めているなら、「Ayumi Hamasaki」を「浜崎あゆみ」に勝手に書き換えてしまって構わない。

    オンラインデータベースからの情報取得の段階で編集作業する理由は、後でローカルでアーティスト名を変更してもフォルダ構造に反映されないことがあるから。

  3. データベースにジャケット画像がないアルバムの画像は、自分でどこかから調達してドラッグアンドドロップする。「フォルダの画像」となるのでエクスプローラーの表示を「縮小版」にすると確認できる。
  4. 新しいパソコンの WMP 監視対象フォルダにフォルダごとコピーする。
  5. 「評価」とか「再生リスト」はコピーできないけど、楽曲とアーティスト名とアルバム画像はコピーできた。

ポイントはライブラリを編集した際に、それが実データのフォルダ構造やファイル名に反映されるようにすること、みたいです。だからオプションの設定さえきちんとしていれば、たいていの人は何も悩むことなさそう。再生リストが消えちゃうのは痛いかもしれないけど。

平成19年2月28日

嫌なことを嫌だという法的権利は尊重されるべき。でも、別に嫌だと思っていない人に、嫌だと思うのが当然だと教え込むのが正しいかというと、それは疑問。職務質問については、そもそもそれを嫌だと思わない人を社会に増やしていくべきだ、というのが私の考え。

「市民が快く職務質問に協力することが犯罪減少につながると思うので、私は職務質問への協力を拒んだことがありません」みたいなメールを送ってみたら、返信が来ました。門前払いのような内容でしたが、きちんと私のメールを読んで書かれたように見え、マメな方だなあと思いました。

ちなみに私が職務質問されたのは酔っ払った知人を送る途中でした。深夜1時頃の住宅街。やり取りは1分くらいだったかな。身分証を見せて、このフラフラの知人の家は近いのか、大丈夫か、みたいな話をしました。

ついでに書くと、私は日本人は中学卒業時点でみな指紋データを登録するべきだとも思ってる。指紋があるのに犯人にたどり着けない事件なんて、もうなくなってほしい。国勢調査への協力拒否もだいぶ問題になったけど、私はこういう風潮、気に入らない。検挙率を気にするなら自分も協力すべき。

平成19年2月28日

一部のネット文化と一般社会の断絶を切り取った記事……なんだけど、これが異文化コミュニケーションの一助となるのかと思いきや、世の中にはワケわかんないこと考えてる奴がいるんだな、みたいな反響も呼んでいたりして、なんともはや。

問題の画像はテレビ報道のキャプチャ写真なのだから悪いのはマスコミ、という呆れた意見がチラホラ。情報の切り出し方、見せ方と大勢のコメントによる暴力的な空気の力をゼロ査定する鈍感さは恐ろしい。悪いのはみんな他人。もちろん一部の発言だけど、誰も反論していないのがどうにも……。

すべての社会運動は、『社会規範からの抑圧に対する抵抗』じゃね?

だから仲良くすればいいのに、と。それは違うのではないか。

多くの人はそれほど急進的な考え方を持っていない。自分があまり関心を持っていない分野については、概ね現状維持を望んでいるのだと思う。私たちは安全です、だから抑圧は不当だ。あいつらは安全かどうか疑問、だから野放しにはできないぞ。つまりは信頼の問題。

あなたの希望は、ありとあらゆる社会規範の緩和との取引になりますよ、と迫られた場合、日和る人が多いと私は予想。そうだからこそ、社会の変化はゆっくり、ゆっくりなのではないか。

不幸にも反目しあう勢力の断絶を埋める試み。お説ごもっとも、とは思う。しかし最初のリンク先にあるとおり、大多数の人間にとってはやはり「何それ?」な話題、他人事。だから積極的に対策すべき問題とはみなされず、状況は放置され続けるに違いない。

平成19年2月28日

こういうサイトを作ろうかな、と私も考えていた。でも私は何せ面倒くさがりだし、何より致命的なのは「リスト作成」が非常に苦手なのだった。誰かが目次を作ってくれたなら書きたい、なんて思っていたのだけれど、それって事実上、死ぬまで書きませんといっているのと同じこと。

HTML 講座みたいなものを自分なりに書いてみようかと思いつつ何も書けなかったのも、このため。体系立てて大きな話を書き進めていくことができない。目次は他人に作ってもらわないと駄目なんだ。

夏休みの宿題」は我ながら頑張ったと思うけど、サイトのタイトルと内容はうまく対応していない。自分のいいたいことを語り尽くして、適当に分割しただけ。だから入門レベルの作文の書き方ばかり詳しい、変な解説になっている。

質問されれば算数の教え方とか絵の描き方とか何でも書けるのだけれど、自分一人でバランスのいいコンテンツリストを作れない、淡々と書き進める意欲を保てない。編集者・ライターと組んで語り下ろすというスタイルで本を出す人を、自分で文章を書いていないという理由で批判する人がいるけれど、私はおかしいと思うな。分業体制を組むことによって、バラバラの3人では決して生み出せなかった本が誕生する、そして社会に役立つ。それって素晴らしいことなんじゃないか。

Folio で CSS について連載記事を書けたのは、非常に幸運なことだったと思う。私に与えられたのはモチベーションだけだから、内容のほうは相変わらず、言いたいことを言いたい順番に書いただけ。だから読み物としては面白くても、後から参照するのには全然向かない。それでも、Folio がなかったら私は何も書けなかった。

そんなこんなで、私は本を書いた人のことは、少なくとも1冊まとまった内容を書き上げたという点で尊敬している。Amazon でいろいろな本を酷評したけれど、自分が著者に成り代わって本を書くことは決してできないのだということを、いつも心の片隅に留めおいていた。

補記

日銀はだれのものか」とか「結婚ってどうよ!?」のようにライターの名前を表紙に入れるような本がもっと増えるといいな、と思う。

平成19年2月27日

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

異世界ファンタジー系オリジナル小説をメインコンテンツとする、日向葵さんのウェブサイトです。小説を書き始めたのは99年頃だそうですから、もう8年目。快速ペースでサイトを更新中なので、この事実は意外でした。なかなか続かないものなのです。

閲覧者数は1日200〜300人、もちろん上を見ればキリがありませんが、成功しているケースといってよいでしょう。ウェブ拍手や掲示板への書き込みは決して多いとはいえませんが、少なくとも全くの無反応ではありません。応答が面倒にならないペース、と肯定的に見ることも可能です。

いくつもの100の質問への回答がきちんと(?)保管されており、こうしたことのひとつひとつが日向さんの人柄を伝えているように感じられました。

ご相談の内容

小説の雰囲気重視のため、小説の目次ページは、その小説によって変えています。

(中略)

最近HPのデザインについて考えるようになったのですが、本や講座のサイトを見て修正しても、自分のところがそれらを実践できているのかよくわかりません。

などの点について、アドバイスをいただければと思います。どうぞよろしくお願いします。

各ページの外観、サイトの構造やナビゲーションといったあたりに不安がある、ということでしょうか。

アドバイスいろいろ

1.

小説の雰囲気重視のため、小説の目次ページは、その小説によって変えています。

興味深いテーマなので、ここから話を始めます。

定石に従うなら「デザインは揃えておいた方がよい」わけです。けれども現実問題としては、それほど神経質になる必要はありません。微妙な話になりますけれども、私の判断基準を書くならば、少なくとも趣味レベルにおいては、「統一された基本デザインを元に各文書群に合わせてカスタマイズしていく」という方針を守る限り不都合はないであろう、と考えています。

具体的な作業手順は、1.基本となるデザインを作る 2.全ページを基本デザインに準拠して作成する 3.基本デザインでは不満のある文書をピックアップ 4.カスタマイズしたいポイントをリストアップ 5.一部文書群のデザインを一部変更する といった感じになるでしょう。ポイントはハッキリしています。ゼロからの新設計を行わない、これです。

わかりやすくするために、いったん全ページを基本デザインに準拠して製作する、としましたが、実際にはそうまでする必要はありません。最初の1ページだけは、基本デザイン準拠で作り、そこからカスタマイズを始める、それで十分です。ただしそこに例外があってはいけない。自己紹介でもリンク集でも100の質問でも同じように、基本デザインから出発しなければなりません。

いくつか実践例を示します。

2.

「にゃごろう村」は私が初めて本格的に関わったウェブサイトです。転載リソース集にその変遷をまとめてありますが、8ヶ月の間に2回も全文書のソース書き直しを行っています。最終的にはかなり整理されたとはいえ、一時期、文書数は200を越えていたわけで、全部手作業でよくやったものだと思う。山田大佐が文章を書き、私がサイトのデザインを決める、という分業だったからこそ可能だったのではないか。

最終的に、苦労が報われたとはいい難いのですが、デザイン思想の変化はここから読み取れるかと思います。次第に「テンプレート志向」が強くなっていったわけです。

当初は全ての文書がオーダーメイドでした。それぞれの文書の内容に合わせて、山田大佐が考えに考えてリンクアイコンを決め、背景画像を設定していました。私がサイト製作のスタッフとなっても、しばらくそれらの判断に口を挟むことはできなかった。サイトの端から端まで熟慮の末に設計されていたのであって、私が自説を通すためには、その全てに反論していかねばなりませんでした。無論、それは不可能です。

原形をとどめないほどの全面リニューアルが行われたのは10月、それまでにかかった半年という月日は、山田大佐が私の攻勢にうんざりしてデザインへのこだわりを捨てるまでの時間だったといえます。しかしこの時間的猶予があればこそ、私は自由な改変が許されていたトップページのデザインを幾度となく作り直し、そのときの自分としてはまずまず納得のできるデザインに到達できたのでした。

当時、私は山田大佐謹製のデザインに何か不満があったからこそ、その改訂に闘志を燃やしていたのですが、具体的にそれが何であるかということは、長らく自覚できませんでした。私のテンプレート志向は試行錯誤の中で見出された回答だったのですが、後に様々なデザイン指南書を読んで「そういうことだったのか」と思ったことがありました。

それは、「ウェブサイトは一貫したナビゲーションを提供するべき」という原則です。さらにいくつか付け加えるなら、「閲覧者の希望を最短距離で実現せよ」「シンプルにわかりやすく」などの標語も有用かもしれません。

こうした目標を掲げて作業すると、「ゼロから組み立てられた多様なデザインに後付けで統一感のあるナビゲーションを付加してデザインの整合性に悩まされるのは無駄が大きい。基本的なナビゲーションが用意されたテンプレートを用意し、最初からその枠内で自由にやる方がよい」という考え方が出てくるのは自然です。

「趣味のWebデザイン」では全ページがほぼ同じデザインで、これはまた極端かもしれない。じつのところ単に私の面倒くさがりが発揮されているだけだったりしますしね。だからこれを真似する必要はないのですが、ともあれ日向さんにはですね、「テンプレート志向」をご検討いただきたいと思うわけです。

よろしいですか、「自由に作成された文書に後から共通部品を入れる」のではなくて、「共通部品全部入りの基本デザインを用意し、自由にやっていいと決めた部分で自由にやる」のです。ひとつふたつの文書を作る分には、さして違いはない。けれどもサイト全体をきちっと構成していけるのは、おそらく後者の方法であろう、と私は経験的にそう思います。

3.

Advice332 で作成したものです。原本の表紙のデザインを CSS で再現し、それを他のページにも適用していきました。CSS を使ったこと自体にさしたる意味はない。ただ、それが私にとっては最も簡単な方法だった、ということですね。

このときのアドバイスは、最重点のテーマが今回と一緒なので、ぜひご一読いただきたい。

改善案では、大見出しの下に画面を貫く線を用意すること、背景画像を統一すること、この2点に留意することで、とっ散らかった印象が払拭されるのではないか、と提案しています。しかし表紙だけは原本に似せようとしたところでネジレが発生し、前記2点と配色を除けば表紙とそれ以外でかなりデザインが異なる結果となり、CSS も2種類用意する無駄があります。

アドバイス本文にも混乱があって、デザインの統一ということに関していえば表紙以外のページについて言葉を割くべきところ、原本を CSS でいかに再現したかという話を延々とやっている。しょうがないので、ここで少し補足解説します。

最近では CSS もすっかりプロの道具となってしまって、プロというのは何だかんだいって結局のところ儲かるところに注力するわけで、今ならそれは見た目と検索エンジン対策の世界である、と。そういうレベルで CSS を使いましょうということだから、デザイン屋の作った完成図を何とか HTML+CSS で再現しようと頑張る。class だの id だのをガンガン使って長大なスタイル設定をする。

趣味レベルでも、ブログのテンプレートなんてことになると、やっぱり class と id が乱舞するすごいスタイル設定が平気で使われたりする。

私を含めて一般人が CSS を使おうというときに、こうした最近の動向みたいなものに目を奪われても、あまりいいことはない。たいてい、話を見誤ってしまうからです。

なぜプロの作ったサイトで class と id が多用されるのか。ブログのテンプレートでもそうなのか。答えは簡単で、HTML の仕様が非常にシンプルであることにその原因がある。シンプルなものをそのままスタイル設定すると、例えば順不同リストの見た目は1種類だけになってしまう。順不同リストをマークアップするために用意されているのは ul ようそだけですからね。でもそれじゃ困るわけでしょう。

標準的なブログにはいくつぐらい、見た目をちょっと変えて別のものだと示したいリストがあるでしょうね? 少なくともリストは1種類でいいということにはならない。「リストはリストでもコメントリストです」となれば comment とかいう class 属性を付しておかなきゃまずい、みたいな話になる。

完成図が先にあるプロの場合も同じで、完成図の中に見た目の違うリスト(っぽいもの)が5種類あれば、単純には5種類の class 属性値の設定がそれぞれに必要なんですね。

こういう完成図を実現するんだとか、ブログってのはとにかくこういうもので、みたいな先に条件が定められてしまっている中で、HTML と CSS に負担がくるという仕組みなんです。行き当たりばったりで class が増えちゃってるのではない。ここを勘違いしてはいけないと思います。

日向さんのサイトでは、ほぼ全文書に外部スタイルシートが読み込まれています。でも残念なことに、それが十分活用されているとはいいがたい。各文書内の装飾の多くが、インラインスタイルシートや bgcolor 属性のような「毎度々々同じような記述を繰り返す必要がある」手法でなされているのが実情です。

するとどうなるか。とくにデザインを変える必要がないところで、どんどんバリエーションが増えていってしまう。前に別のところでどんな装飾をしたのか、忘れてしまう。その場の思いつきでベストのデザインを考えていくと、同じ人間の発想だから何となく似た雰囲気にはなるけれど、やっぱり同じにはならない。人間はそれほどカッチリした生き物ではない。

とりあえずサイドバーに話を限定しますけど、上記3文書のサイドバーのデザインがそれぞれ異なっている意味は何でしょう? もちろん各々に理由はあると思う。少しでも見やすく分かりやすく、そういうことを考えてデザインが決まったのには違いない。どれも悪くない選択だと思う。でも、デザインの不統一は謎です。

サイドバーのデザインは一例であって、全般にデザインのバリエーションが豊富過ぎる、と私には思われます。見出しの背景が白・黒・灰色・モノクロのグラデーション・背景なしの太字だけと多様だったりするのもそうだし、情報をまとめた表の組み方や背景色、幅などに法則性が見出せないこともそう。

日向さんのレベルが低いのではありません。誰でもこうなるんです。むしろ日向さんは、構成のしっかりした小説や、きれいにまとまったイラストをお描きになるだけあって、かなり頑張っていると思う。

ポイントは「ルールは先に用意しなくちゃいけない」ということです。でもプロみたいに先に完成図を用意するなんて、まず無理でしょう。汎用性のある完成図を作るのはかなり難題です。その場の思いつきで何枚も完成図を描いていくなら、単に作業量が増えただけとなってしまいますよね。そもそも、これから何を始めるか分からない、そういう可能性の曖昧さに個人サイトの魅力があったりもするのではないですか。

ではどのようなルール設定をしたらいいのか。

それは「HTML と CSS をストイックに使うこと」ではなかろうか、というのが私の回答です。「市場へ行こう」の原本と改善案のソースを見比べていただければ、おわかりいただけると思う。見出し、リスト、段落といった基本的な要素を、なるべく class 属性や id 属性を付さずに用いるようにする。この制約がデザインの中に繰り返しのリズムを、一貫性を作り出していく。

ちょっと待った、小説毎にデザインを変えたいんだ、と。

ええ、そういうお話でした。私なら、次のようにします。

ヘッダー

<div id="小説のタイトルなど">
class 属性値やインラインのスタイル設定のない見出し、段落、リスト
</div>

フッター

テンプレート志向とは、例えばこういうことだろう、と思うわけです。基本デザインを最大限活かす、個別の状況への対応は最小限の改変の手間で済ませてしまう。そうした原則を持って、さあどうしようかと考えるのです。

たった一つのスタイルシートで全部の装飾についてスタイル設定してみた事例。特定の HTML 文書だけに出てくる背景などをどう処理しているかというと、例えば <body id="cover"> などとやって、CSS に body#cover{略} という記述を追加してあるだけです。

html,body,h1,h2,p,ul,li,dl,dt,dd,div,a,em
{margin:0; padding:0; font-size:12px; line-height:1.4; font-style:normal; font-weight:herit; text-decoration:none; background:transparent; color:#333;}
body
{width:85%; padding:5%; background:#fff;}
h1,h2,p,ul,dl
{margin:1em 0;}
h1
{padding:0.2em 0.5em; border-bottom:1px solid #333; font-weight:bold;}
li
{margin:0.3em 0; list-style:none;}
li ul
{margin:0;}
li li
{display:inline; magin:0.2em;}
dt,#cover p
{padding:0.2em 0.5em; border:1px dashed #eca;}
a
{color:#f93; border-bottom:1px solid #fdb;}
a:visited
{color:#c60;}
a:hover
{color:#000;}
em
{font-weight:bold;}
img
{border:none; vertical-align:text-bottom;}
hr
{clear:left;}

/* menu */

body#menu
{padding:10px 0 0 20px;}
#menu h1
{padding:0 0 1em; border:none;}
#menu dt
{margin-top:2em; width:5em; border-width:1px 0 0 1px;}

/* cover */

body#cover
{background:#fff url("kikirara.jpg") no-repeat fixed 100% 100%;}
#cover div
{position:absolute; top:80%; left:5%;}

/* bookmark */

#bookmark div
{width:48%; float:left;}

4.

ここまでに書いてきた話をどう読むべきか、という話を(アドバイスのたびに書いていることですが今回もまた)します。

こうしたほうがいいという意見を聞いて、そうかなるほどと思ってサイト全体のリニューアルを始めてしまうのは、お勧めできません。既にこれほどの規模に成長しているサイトです。いったいどれほどの労力がかかるかわからない。それでいて、効果の方は微々たるものでしょう。

見やすいデザインになっているのか?

訪問された方がUターンしてしまうような構成になっていないか?

正直なところ、問題というほどの問題はないと思います。とくに閲覧を邪魔するような要素はないし、人が逃げるようなデザインでもない。

最近はめっきり廃れてしまいましたけど、以前はそこかしこに「HP評価掲示板」みたいなものがあって、評価依頼者のサイトを掲示板の住人が見に行って意見をするという文化がありました。そうしたところで意見を聞くと、「また訪問したいとは思わない」とか「すぐにUターンした」といった酷評がガンガン出てくるわけです。でも、私はそういうの、あまり参考にならないと思いますね。

日向さんご自身の閲覧行動を振り返ってみてほしいわけです。世の中には無数のウェブサイトがあるけど、その中のごくわずかしか見ようとしない、読もうとしない。デザインも内容も素晴らしい! と感激しながら、それっきりになっているサイトなんて、たくさんあるでしょう。いま日向さんが好きでよく行くサイトが10個あるとして、それは日向さんにとってウェブで出会った最高に素晴らしいサイトBEST10なのでしょうか?

違う、でしょう。

ウェブリングとか同人系のサーチエンジンなどを経由して自分の知らないサイトをどんどん見ていくと、とてつもなく下手な絵しかないサイトや、こんなの誰が読むんだろうと不思議に思うような小説しか置いていないサイトがいくらでもあることを、あらためて実感させられます。サイトの見た目だって、やろうと思ってもここまでひどいのはそうそう作れまい、と苦笑するレベルの事例がある。

ではそれらのサイトに閲覧者はいるのか。たしかに悲惨なレベルになると本当に著者以外に見る人がいないのですが、真ん中くらいのレベルなら、誰かが好きでその絵を見にきている、お話を読みにきている。トップクラスのサイトと比較すれば、100分の1、1000分の1の人数かもしれませんよ。でもゼロじゃない。

トップだって無料で作品を公開しているのだから、常識的には平均レベルのサイトなんか見るだけ時間の無駄じゃないか、と第三者は思う。それがHP評価掲示板住人の意見です。でもそれはおかしいですよね。

平均的なレベルのサイトの読者は、自分の訪問しているサイトが客観的に最高のサイトじゃないことをよくわかっています。わかっていて、時間と多少の手間を注ぎ込んでいるのです。

主観の力は強い。サイトの人気なんてのは格差社会の最たるものですが、そんな世界でもありふれた人々はみな世界でただ一人の存在としても認識されています。よっぽどひどくない限り、誰からも見捨てられてしまうことはない。

なんといいますか、サイトの見た目をどうこうしようというのは、モテるための努力に似ているのです。みんなにちやほやされるほどの存在には、並大抵の努力ではなれやしない(あるいはどんなに頑張っても無理)。でもよく考えてみると、別に大勢に愛されなくたっていいわけですよね。

幸せに生きるための条件は、じつのところよくわからないのです。なんであの人が、みたいな事例はいくらでもあって。上(とあなたが考える人)から順番に幸せになっていくわけじゃない。

平凡な一般人のファッションなんて、半ば自己満足の世界で、あるいは社会で生きるための「たしなみ」程度のもの、文化というか慣習みたいなものに従って、ちょっと気をつけておけば「必要」は満たされる。でも自分にとっては、かなり気になることだったりする。いい服を着たら気分もよくなったりして。けっこう主観的な幸福感と関係は深いのではないか。

サイトのデザインなんて、そんなものだということです。好きでサイトいじりをやっている分には何も問題はない。徹夜して取り組んだっていいですよ。きっと楽しいと思う。でも強迫観念にとらわれて没入していくのはよくない。やってもやっても目に見える成果なんて全然なくて悲しくなっちゃう。

とりあえず、どこからはじめよう?

新しくページを増やすとき、私のアドバイスを参考にしていただければ十分だと思うのです。

ファッション誌を読んでいろいろ感銘を受けても、古い服を全部捨てて買い直したり、しませんよね。これから買う服、これからの自分の髪型、そういうものを変えていけばいいんじゃないでしょうか。もちろん雑誌もいろいろあります。読むたび影響を受ける必要なんか全然ない。「こんなダサいの、信じられない」と放り出したっていいのです。

数百人の読者がいるサイトです。自信を持って運営していただければよいと思います。

5.

総論ばかりでは話が漠然とし過ぎているので、最後は各論を少々。

具体的に何をすべきか、というのは難しい話で、別にどうやったっていいと思う。なのでこれから書くことも、あくまで一例として読んでいただければ。

とりあえず手をつけてみるといいのは、サイトの表紙から直接リンクされているページのチェックです。それらのページにはみな共通のデザインのヘッダーとフッターがありますが、よく見るとそのデザインに統一性がない。全角スペースが1つなのか2つなのか、Web拍手はヘッダーの中なのか、フッターにも入れるのか、それとも本文領域に置くのか? こうした不整合をまず消す。

意図的にやっているなら、いいのです。でも、私にはそうは見えない。場当たり的にやってきた結果、心ならずも現状のようになってしまったのではないか。こうしたガタつきは、直した方がいいと思う。

作業の過程で、サイト内の様々な文書のパターンを認識することになります。そして試行錯誤の末に、何らかの形が定まり、サイト全部ではないけれど主要ページ全てに共通のデザイン要素が入ります。そのとき、これからの「基本デザイン」について構想が固まることでしょう。

続いて、スタイルシートの整理を行います。

表紙のリンク先(1段階のみ)から、インラインの装飾指定を排除し、それでいて CSS の数は2つに限定します。1つはヘッダーとフッターのみ、もう1つはそれ以外全部のスタイル設定を担当します。そして全体のシートにヘッダーとフッターのシートを @import で読み込むのです。

小説本文の装飾は、作品毎に変えると決まっていて、サイトの目次などとは全く別の見た目となっているわけですが、これはこれでありだと私は思う。だから各作品に固有のスタイルシートがあるのは構わない。

この設計にはいいところがあって、例えばサイトのリニューアルをする際に、最も多くのページ数を抱える小説本文はデザインを変更しないでいい。サイトの表紙のデザインと小説本文のデザインは対応させないというのがもともとの方針だし、そのことは読者にも一目瞭然だからです。

しかしひとつ困るのが、共通のヘッダーとフッターが小説の本文にも導入されているケースがあること。一部であれ共通のデザイン部品が入り込んでいるならば、その部分だけサイトのリニューアルから取り残されてしまうことは避けるべきです。

そこで、基本デザインの CSS からヘッダーとフッターの部分だけ取り出し、一部の小説本文の装飾用の CSS からも @import で読み込めるようにしておく、というわけ。

補足説明

実態がどうなっているかは別として、同人系サイト界隈では Google などの一般向けの検索エンジンで同好の士を見つけたりはしないという文化があります。他文化の人はどうせ常連読者になどなりはしない、と考えるならば、同人系サイトは主要な読者層はみな表紙からくると仮定して設計できます。またそうした設計は、望まない読者層を静かに排除する機能も有します。

したがって、SEO を重視するような、幅広い層から流しの客をつかまえようとするタイプのサイトにおけるデザインの定石は、同人系サイトに当てはめる必要がない。小説本文とサイトの基幹部とで全く見た目が異なっていてもかまわないとしているのは、そのため。

では全てのページのデザインが異なっていてもよいだろうか? そういうことじゃないのですね。小説の多くは複数のページにまたがる長大な作品。前後のページへのナビゲーションリンクをどこかに用意すべきですが、その配置やデザインがバラバラだったら興を削がれてしまいます。それに配色や画像選択のセンスがハチャメチャであれば、作者のセンスが疑われることにもなります。

では着地点はどのあたりか。私は、雑誌の紙面デザインが参考になると思っています。文庫や単行本ほどのデザイン統一を行わなくとも、雑誌の色は十分に作り出せるし、逆にそれができていない雑誌は、素人目にも野暮ったく見えるものです。

デザイン統一の度合いは編集長の方針次第。私にはその領域まで口を出すだけの経験も見識もありませんから、今回のアドバイスでもそこは突っ込まない。ただ、現状から最低限の手直しをしていくとすれば……というアプローチは、デザインを考えるヒントを提供する上では有用なんじゃないかな、と思っています。

また「ひまわり畑」は表紙・目次・本文の構成となっており、私は表紙と目次をサイトの基幹部分としてデザインの共通性を高めることを勧めています。圧倒的にページ数が多いのが本文であり、目次まで作品別デザインとしてしまうと、サイトとしての一体感があまりに希薄になってしまうだろう、また日向さんも目次までは共通のナビゲーションを提供しようと努力されている、といった理由によります。

目次についてある程度の自由度を持たせてよいといっているのは、逆に表紙と目次が全く同一のデザインだとすると、今度は目次と本文のつながりがデザイン上、遠くなりすぎてしまうだろう、と。だから例えば本文と同じ背景画像やイラストなどを目次に配置できるよう、一定の自由度がほしいと思うのです。

さて、文書内での場当たり的な装飾指定を廃止しつつ、外部スタイルシートも2つきりとするのは、実際にやってみると大変な重労働となります。だから表紙+リンク先1段階だけでも全部は無理かもしれない。でも2〜3ページだけでも、やってみてはいかがでしょうか。

今後、新しくページを作るときから新しい更新スタイルに移っていけばいい、ということを書いたけれども、その練習は古いページのリニューアルが最適だと思います。

アドバイスは以上です。

関連記事一覧