URI：http://f-1gp.s12.xrea.com/ ［2002.05.11］
テーブルは表示速度が遅い、という話をするのが私のいつものアドバイスなのですが、かずと。様のサイトの場合、表示速度という観点からはさしたる問題は生じていません。といいますのは、テーブルの中に一定以上の画像ファイルがある場合、とりあえずテキストのみでテーブルが組まれます。したがってテキスト量の少ない場合、とりあえず画面に何らかの文字が表示されるまでの時間は意外に短いのです。
かずと。様のサイトの場合、テキストの多いページではテーブルを使用されていませんので、表示速度という観点からは、問題ありません。ただ、せっかくCSSを利用されていらっしゃるのですから、たとえば文字の大きさを変えたい場合には、
p,td {font-size:small;}
としておけばいいだろうと思うのです。また、見出しは、その見た目ではなくマークアップによって明示するという考え方に基づけば、
<P><B>エンジン</B></P>
ではなく、
<h1>エンジン</h1>
とマークアップして、CSSで
h1 {font-size:medium; font-weight:bold;}
というように指定しておけば、かずと。さんのサイトでは外部CSSを採用されていますから、全ページのh1（見出しレベル1）要素に対して、文字サイズ標準、太文字という設定が適用されます。こうすれば、見出しをP（段落）要素としてマークアップする必要もないし、毎回、太文字の設定をする必要もありません。1件だけなら現状維持の方がソースは短くなりますが、サイト全体では正しいマークアップとCSSによる見た目の制御の方が容量を減らすことができます。
で、正しいマークアップをしておくとデザイン的にどんないいことがあるかというと、ユーザースタイルシートを利用される方にも、適切な表示で情報を提供することが可能なんです。
カッコいいデザインを実現するためには、3つの段階があります。
第一段階で躓いているのが現状です。テキストのページが白背景になっているのは文字の読みやすさを考えてのことでしょうが、デザインの統一を念頭におけば、明瞭な対策を打ち出すことが可能です。すなわち、黒背景のページの「色違いバージョン」として白背景のページをデザインするのです。
しかしそのためには、まず黒背景のページのデザインが統一されていなければなりませんが、現状はそうなっていません。統一といっても、例えば私のサイトのように、どのページもまったく同じレイアウトにしてしまう必要はないわけです。左右のmarginをどれだけとるか、ページ全体を赤線の枠囲みにするのかしないのか、背景色は黒かグレーか、といったページ全体のレイアウトさえ統一されていればよいのです。その他の細かいこと、例えばF1の各チーム紹介のページは、上から順に「イメージ画像→チーム名→小目次→ドライバー紹介→メニュー」というデザインにするんだ、といった部分は、コーナー毎に統一されていればそれでOKなのです。
現状ではまず、ページの全体的なレイアウトがバラバラで、したがって白背景のページだけでどう工夫しても、黒背景のページとの統一性を表現することができません。
ここで、黒背景のページが、左右のmarginが2emで、見出しと罫線は赤、各ページの最下端にメニューを配置するというデザインで統一されたとしましょう。このとき、白背景のページをどう設計したらよいでしょうか。
左右のmarginは2emにします。最下端のメニューは当然、共通させます。見出しと罫線の赤が問題です。白背景ではどうにも読みにくい。そこで、少し輝度を落としましょう。赤系の色、という共通点は死守します。共通点がたった3点しかなく、細かいレイアウトは基本的に各コーナーの自由ならば、赤を青に変えてしまってはいけません。（逆にページの細かいレイアウトまで共通なら、色を全部変更しても統一感は出ます）
以下、第二段階、第三段階について簡単に触れます。
内容とデザインの統合とは、例えば、なぜF1のサイトの背景が黒でなければならなかったか、考えてみましょう、ということです。デザインにはメッセージ性があります。サイトの内容、自分の伝えたいことと現在のデザインがマッチしているのかどうか、そこを追及していくことは、よいデザインを考える際には欠かせない作業です。
デザインの統一が本当に生きてくるのは、じつはこの段階においてなのです。各ページバラバラのデザインになるのは、多くの場合、自分の興味が散漫で、誰に何を伝えたいのか明確でないことが原因になっています。とりあえずデザインを統一してしまう、というのは順番が逆転しています。しかし、人は自分の思いを全て意識的にコントロールすることができません。まずデザインを統一する、という具体的作業は、自分の無意識を表出させる方法として理にかなっています。
デザインとして目に見える形になった自分の無意識と、ぜひ向きあってください。そして、本当に自分の伝えたいメッセージはこれなのか、考えてみてください。そしてもしOKなのであれば、デザインを元に、今度は内容の統一をはかっていきましょう。目立つ位置に配置されたコンテンツの内容が貧弱なら、ぜひ充実させましょう。逆に目立たない位置に押し込まれたコンテンツが、無駄に多くの文字数を食っているのならば、内容を整理して伝える努力が必要です。クールなデザインで顔文字乱発の文章はおかしいと思えば、やはり修正が必要になります。
内容に見合ったデザインを考え、そしてデザインから内容を修正する。それが第二段階なのです。
第三段階、それはサイト構造の洗練です。
どうやってもサイトの中で違和感を発するコンテンツが存在する場合があります。あるいは、ひとつのコンテンツだけ非常に内容が充実し、他のコンテンツとは比較にならない大きさに膨れ上がっている場合があります。例えば不要なコンテンツを削除する（または下位階層に隠してしまう）、大きなコンテンツの階層をひとつ上げる、そうやってサイト構造を適切なものに組替えていく作業、それがサイト構造の洗練です。
コンテンツの階層をひとつ上げる、という部分がよくわからないだろうと思いますので、補足しておきます。
私のサイトでは、表紙からアドバイスの過去ログに直接いけるようになっています。これ、当初案では、「アドバイス」をクリックすると、アドバイスの申し込みと過去のアドバイス一覧が表示されるというデザインでした。しかしアドバイスを読む人はアドバイスを申込む人の数百倍もいること、アドバイス以外のコーナーに興味のある人がほとんどいないことから、「アドバイス」内にあった小目次の階層をひとつ上げて、表紙に小目次を表示してしまうことにしたわけです。もちろん、その小目次が「アドバイス」という大項目に所属することを明示したデザインになっているのは、いうまでもありません。
問題ありません。しいていえば、デザインの統一を頑張る際に、全ページの最下部に、チーム紹介のページの最下部にある便利なメニューをつけるべきだということです。デザインの統一感を出すよいポイントになりますし、操作性の向上にも大いに貢献するでしょう。
非常によいと思います。解体新書で書くことがなくなったら、その後は定期更新するための「書き捨て型」のコンテンツが必要になるでしょう。そのメインコンテンツ移行さえうまくいけば、サイト運営が軌道に乗って安定するはずです。
書き捨て型コンテンツとは、例えば日記調のF1エッセイやレースの感想のことをいいます。データベース的なコンテンツと異なり、昨年の更新分を今年の読者は読んでくれないかわりに、時事的な内容を好きなだけ盛り込むことが可能です。
アドバイス後に、依頼者の方からいくつか質問を受けました。参考のため、補記として収録します。
CSSの方はまったくと言っていいほどわかりません。
なるほど。しかし実際に勉強してみると、HTMLと同様に理屈は簡単です。まず勉強してしまうことを、おすすめします。
じつは私もビルダーをいつも使っています。ただ、ビルダーの操作を完璧に覚えるのがたいへんで、そもそも「このソフトがやっていることは何なんだろう」と思ってHTMLの勉強を始めました。CSSの勉強はその延長上にあったわけですが……（詳細は割愛）。勉強に向いているサイトを1つご紹介します。
上記サイトのリンクをたどれば、相当量の情報に触れることが可能です。
視覚効果なんですが（略）背景は白でいいということですよね？
その通りです。無理に黒背景で統一する必要はありません。
左右のmarginは2emと書いてあるのですが、どういうことなのか
CSSの記述法はご存知でしょうか。よくわからないということであれば、とりあえずmarginの説明のために強引に実例を示しましょう。
ソースを覗いて</head>を探してください。そしてその直前に以下の通りに記述してみてください。（コピペで構いません）
<style type="text/css">
<!--
body {margin-right:2em; margin-left:2em;}
-->
</style>
</head>←このように、このタグの直前に記述する
これは外部CSSファイルではなく、各ページ内にローカルなCSSを記述するための方法です。
さて、このようにしてから、標準の作成モードにもどって文字を入力してみてください。ちょっと端から文字が離れて表示されませんか? よくわからなければ、プレビューしてみてください。設定無しの際にはほとんど画面の端ギリギリまで表示されていた文字が、画面の左右から約2文字分だけ離れて表示されているはずです。
これがmarginを2emとる、つまり余白を2文字分取るということです。
CSSでは、非常に多くの要素について、余白を自在に設定できます。私のサイトのfor_IE6というCSSでは、h1要素（見出し1）は左右の余白0、上の余白が（見出し1の）1.5文字分、下の余白が（見出し1の）1文字分に設定されています。
関係のない質問になってしまいますが、YAHOOに登録されるにはこれ以外にどうしたらいいと思いますか?
F1という広いテーマでの登録は地獄の道程です。サイト全体としてはF1全体を扱うにせよ、ヤフー登録のためには何か1コーナを設ける必要があるでしょう。そのコーナの内容は、例えばヤフーに登録サイトがない特定チームの情報を徹底的に深く紹介するものであれば結構です。そのコーナが十分に充実したとき、ヤフーに登録されるでしょう。
ちなみに、フェラーリのファンサイトが現在、新着になってます。正直、たいした内容じゃないです。原稿用紙にして100枚の内容もありません。つまり、本1冊に満たない情報量です。だから安心してください。データベース的な本と、評伝・エッセイ風の本を各1冊ずつそろえれば材料としては足ります。図書館へ行ってみましょう。
……ある意味、仕事として捉えるなら、ヤフー登録はそれほど難しくありません。ヤフーの基準に見合うサイトを、セオリー通りに作成するだけだからです。しかし問題は、全て無償の作業だということです。だから自分の好きなこと、興味あることしかできない。するとヤフーは登録を認めてくれない。ここがジレンマなのです。とにかく仕事として考えるならば、ざっと3日あれば上記新着サイトと同様の情報量をもったサイトは建設できます。しかし上記サイトは、ここまでたどり着くのに3年を要しました。恐るべき持続力、そして遅々たる亀の歩みです。そのあたりが、「趣味」の趣味たる所以であり、神秘とさえいえます。
［2002.05.12］
画像の使用が少ない分、さすがに速いです。
白と黒のサイトなんですが、これは案外難しいんです。葉月さんのデザインが抱える最大の問題は、黒と白のバランスが悪いことです。黒は強烈です。アクセントとして使うか、全面を黒のイメージに統一していくか、いずれかにすべきです。黒が3割、4割というのはアクセントとしては多すぎ、逆にベースカラーとしては少なすぎなんです。
さてここで、やはり白と黒を基調にしたとあるサイトを見てください。スマートな解決策が示されています。黒の帯は画面上部のアクセントに使い、他の部分ではメッシュの模様として取り入れています。ソフトに黒を画面に取り込む素晴らしい方法です。黒の帯をどうしても大面積に使用したいのであれば、灰色で我慢しましょう。あるいは白をやめて灰色にします。そうすれば現在のデザインの落ち着かなさは、概ね解消されます。
もちろん、現在黒といっている色も、じつは濃灰色なのですが……。本当に黒が画面に存在しない場合、濃灰色は黒と同じ効果を持ちます。目が慣れてしまって、濃灰色を黒の極致と判断してしまうのです。だからもっと薄い灰色が必要になってきます。
単純な2色で画面を構成するのは難しいのです。しかし濃淡さえ適切につければ、2色でサイトを構成することは可能です。それで成功しているところはたくさんあります。むしろ色が多すぎて失敗するサイトが世の中にはあふれています。ですから葉月さんはいい線いっていると思います。ただ、2色はいいけれど、濃淡まで禁じ手とするとデザイン的にきついかな、ということなんです。濃淡までは「あり」にしませんか?
フレームの切り方もサイトの構成も標準的で、問題はありません。ただ、文字の小さいことには閉口させられます。
私も小さな文字が好きなんですが、それは自分がブラウザの設定で文字を小さく表示すればいいことだと考えています。何も文字サイズ「中」で思い切り小さく表示されなきゃいけないという法はないわけで。小さい字の好きな人は自分で小さくできるのがいい。最初から小さいのは迷惑なんですね。例えば私の場合、いつもIEの設定を「文字のサイズ最小」にしているので、「文字サイズ1」はそのままでは読むことさえできません。
好きな作家に貴志さんと恩田さんの名前があるのを発見して、「おっ」と思いました。発刊ラッシュの恩田さんはともかく、寡作の貴志さんの作品は全部読んでます。「青い炎」も「黒い家」も非常に好きな作品で。それはともかく、サイトの充実のためには、本を読めるくらいの時間を無理してでも作ることです。
ただし最初の一歩には無理も必要ですが、その後もずっとつらいようであれば、「サイトを充実させない」というのもひとつの選択肢です。
例えば最終的な落ち着き先が日記サイトになるとして、それがどうも当初の目論見と違っていたとしても、私は今の自分がつらくなく「更新できる」コンテンツこそ、「更新するべき」コンテンツだと考えます。例えば夏休み（のあるご身分かわかりませんが／ちなみに私はもう卒業しちゃいました）あたりには必ずいくらかの時間ができるわけで、そのときに1時間でも2時間でもいいので、サイトの「これから先」のコンセプトを考えてみてはいかがでしょうか。やっぱりイラストだ、という結論になったとすれば、それは幸せなことだろうと思います。人はなかなか、過去の自分の期待にこたえられないものです。
［2002.05.12］
画像の使いまわしについて考えるようにしましょう。デザインの統一を進める中で解決していくことですが。
日記を拝見したのですが、まじめな方ですね〜。いや、とくにサイト作成と運営関係のところで、けっこう私にも経験のある悩み方をしていたので、なんだか笑えました。さてサイトの現状は、「first」が青文字中寄せ枠なし、「キリ番」「自作小説」「詩」が緑文字左寄せ枠あり、「自作小説」の本文が黒背景白文字左寄せ枠なし、「詩」本文が黒背景白文字左寄せ左インデントあり枠なし、「贈り物」が黒文字左寄せ枠なし、「日記」が青文字左寄せ枠あり、……見事にデザインがバラバラ。これでは本当に「見やすいサイト」までの道程は遠いといわざるをえません。ではどこから手をつけるか。
まずテーブルの中で中寄せになっている文字を左寄せにしましょう。なんだか変、と最初は思われるでしょうが、見やすさ、わかりやすさ、きれいさ、カッコよさ、いずれをとっても左寄せの方がよいのです。半月ほど我慢すればわかります。
続いて、画像と大まかなデザインを全ページで統一していきます。表紙だけはこだわるのだ、ということであれば、表紙は画像のみ統一して、レイアウトは特別版にしてよいでしょう。
目次の英語を日本語にしましょう。つまらないことですが、効きます。
3月スタートだそうですが、それが初めてのサイト作りだったとしたら、たいへん立派な状況だと思います。私はもともと友人のサイトを頼まれて手伝っていく中でいろいろ勉強してきたわけですが、ちょうどサイトが始まったのが3月8日、それから1ヵ月半たった4月20日のサイト全体のログがあるのですが、見るに耐えないデザインです。それと比較すれば、よほどいいと思うのです。かつてのデザインと現在のデザインとの差は、知識と経験によるものです。
今は経験を積む時期です。友人にページが見づらいなどといわれたら、必ず問い返しましょう。どこが、どう、見づらいのか。出発点はそこです。ただ見づらいという話を聞くだけでは、まだスタートラインに立ってさえいません。
デザインの統一となれば、私は当然のように正しいHTMLとCSSのお勉強をおすすめするわけですが、一度は現在の知識で苦労してリニューアルに取り組まれるとよいと思います。それからお勉強をしてみると、自分があんなに苦労したことがこんなに簡単にできるのか、と、いい意味で強烈な印象を受けて勉強がはかどるでしょう。
いきつくところまでいけば、リニューアルなんて造作もなくできるようになります。私は現在、50ページほどのサイトを運営していますが、そのリニューアルにかかる時間は30分もあれば十分です。あらかじめリニューアル用のCSSファイルさえ用意しておけば、30秒でリニューアル完了です。リニューアルのためにHTMLをいじる必要がなくなっているからなんです。そして1つのCSSファイルですべてのデザインを制御するので、デザインの統一感は当然のようにばっちりです。
私も1年前にはメチャメチャなデザインのサイトを運営してました。だから、「そんなの無理」とおっしゃらず、ぜひお勉強を頑張っていただきたいと思います。（もちろんお勉強のために小説がおろそかになるのでは本末転倒です。しかし技術があれば更新は楽になり、デザインがよくなればお客様も少し増えるでしょう。サイト作りと作品の執筆のよい関係を模索してください）
［2002.05.12］
tsukaeru.netはそんなに軽い無料サービスではありませんが、とにかく条件がいい。それでいてトクトクよりは軽いのですから、まあいい選択だとは思います。ただ、私なら3000円を払ってしまいます。正直、広告は重いのです。とくに波間さんのサイトの場合、癒し系を目指すデザインと派手な広告は相性がよろしくありません。3000円はバカ安なので、私はおすすめしておきます。
サイトのデザインは、何となく雰囲気が統一されてはいますが、もう一歩足りない感じがします。左側のフレームがあるからレイアウトが統一されているかのように見えますが、実際にはけっこうバラバラなのです。
テキスト枠で囲むのかどうか、テキストは中寄せか左寄せか、テーマカラーは何色か、スクロールバーは青かピンクか、リンクの色と:hoverの設定……。せっかくCSSをご存知なのですから、まずCSSを外部ファイルに全部入れてしまうことからはじめられてはいかがでしょうか。各ページ毎にデザインを設定するのをやめてしまうわけです。
最初はリンクとスクロールバーの設定しかCSSファイルに入れられないかもしれませんが、それからだんだんに本文の装飾についてもCSSファイルから行っていくようにされるとよいでしょう。デザインは嫌でも統一されてくるはずです。
この方向性を推し進めると、そのうちに、リニューアルもCSSファイルひとつでできるようになります。津波荘などはその極致で、閲覧者が好きなCSSを選択して、サイトの見た目を変更できます。HTML側でデザインを指定している部分が全くないので、CSSを切り替えるだけでサイトのデザインが全部変わるのです。
とくに問題はありません。
下で紹介されている文法チェッカーで確認するまでもなく、ソースの記述には致命的なミスがいくつもあります。手書きなのでしょうか。最近のソフトは非常によくなってきて、ひどいソースはみんな手書きと決まっているのが昨今の状況です。いわゆるタグ屋さんや本屋で売ってる本などがいい加減な情報をたれ流しているのでしょうがないのですが、どんなにひどいソースでも解釈してきたIEが、とうとうソースの自動補正機能を縮小し始めたことはご存知でしょうか? 今後数年は目立った問題はないかもしれませんが、いつまでもいい加減なソースを書いていると、そのうちに自分のサイトをまともに見られなくなります。いつか、正当な解説をしているサイト（一例）で勉強されることを望みます。
全般に、よいデザインのサイトだと思います。センスがいい。それだけに、技術的な部分での躓きが残念です。デザインと内容が比較的関連するサイトだけに、デザインをよくすることも内容充実の一環だろうと思います。
URI：http://www.milkt.to/~mypace/ ［2002.05.16］
派手なデザインの表紙にもかかわらず、案外軽いですね。ぎりぎり40KBを切るということで、よくできています。他のページはシンプルな見た目通りに表示は速く、サクサク閲覧できました。
表紙は単純な構図でありながら、表示領域が800×600に収まりません。縦はともかく横方向にまでスクロールバーが出ますね。画像をもっと小さくまとめて、幅広い閲覧環境でよい見た目を実現できるようこころがけた方がよいでしょう。
なお、表紙の目次一覧は縦一直線にそろえて並べた方がすっきりします。現在はわざと微妙にずらしてあるのでしょうが、単調さを避ける効果を狙うのであれば、もっともっと大胆に配置する必要があります。現状では「雑然」とした印象をぬぐえません。
表紙以外のページはだいたい印象が統一されていますが、もう一歩その方向性を推し進めて「デザインの統一」を目指すとよいでしょう。積極的に各ページに共通点を設けるのです。
例えばフォントを統一されてはいかがでしょうか。現在は、表紙の目次と各コンテンツの見出しのフォントがバラバラですよね。これを統一します。あるいはフォントの大きさ。各コンテンツのタイトルの文字サイズ、本文の文字サイズをそろえます。さらに発展させてレイアウトなど。各コンテンツのタイトルは左寄せ、小見出しは中寄せ、本文は左寄せ。そしてアクセシビリティーの確保。画像にはすべて代替文字を指定する。
外部CSSファイルを利用されると、こうしたデザインの統一を容易に実現できます。ただし、HTMLによるマークアップが正しく行われていなければなりません。そのあたりの敷居が高いかもしれません。
さして問題はありませんが、表紙に戻るリンクがページ内のどこに配置されるか、より一層、統一的基準の徹底を図るべきでしょう。上にあったり下にあったりでは、少し困ります。
それなりの期間、続いてきただけのことはあり、ログは充実しています。しかし、ご心配の通り、万人に訴える力のある文章でありません。あえて厳しく指摘すれば、まるで自分自身のための備忘録のようです。閲覧者を愉しませることに十分配慮された文章とはいいがたいのです。
長崎旅行記を読み返してください。わざわざあの文章をWebに公開した意図は何でしょうか? 閲覧者に愉しんでいただくためだったはずです。しかし実際はどうでしょう。旅の思い出を呼び覚ますキーワードが埋め込まれているだけの、備忘録そのものになっています。
ここしばらくの日記は、さすがにそれほどひどくはありません。だんだん手馴れてきて、自分のための文章が「何となく」よそいきの服を着ることが常態化しています。こうして無意識の配慮が現実の形になるのは悪いことではありませんが、しかし、それに頼っていてはテキストサイトとしての成功はないでしょう。根本的な配慮が足りないからです。
友人に話し掛ける場合と同じです。相手を愉しませるために、どれほど多くの策を弄しているか、ちょっと思い起こしてみてください。半ば無意識の行動の中に、いくつもの知恵がつまっていることに気付かれるでしょう。Web日記では声の強弱も話し掛けるタイミングも、相手の趣味を先読みしたネタ振りもできません。しかしそれは逆に、「語り口」に意識を集中できるということでもあります。
自分の書きたいことを書きたいように書くことが何より大切だ、という意見も世の中にはあります。しかし私は賛成しません。独り言でも満足できるならよいでしょうが、実際にはそうではないはずです。聞き手がいなければ、話すかいもなく、自己実現も達成されないのです。そうであれば、相手を愉しませようとする意識を、常に持っていなければならない道理です。
とはいうものの、その意識さえあれば万人に受ける文章が書ける、というものではありません。それはよくご存知のことでしょう。
そこで私からは最後に、「努力しても成功するとは限らない。しかし努力なしに成功することはありえない」と、お茶を濁して締めといたします。
1日100や200程度のアクセス数を目指す限りは、デザイン（の装飾的な部分）とアクセス数にはほとんど関係がありません。これは明らかな事実なのに、あまりにも知らない人が多いことなので、念のため書添えておきます。