今回のご依頼者もお若いですね。中学2年生の Mr.SITH さん。リンクのされ方や検索キーワードから考えても、それほど当サイトの読者に中高生が多いとは思えない。「アドバイスを依頼される層」に一定の偏りがあるのでしょうね。
それはともかく、またもやアドバイスがずるずると遅れていく間にリニューアル決行。そうか、リニューアルを予定していたからアドバイスの依頼をなさったのか……って、感心している場合じゃない! 従来、3ヶ月待ちのところを1ヶ月でアドバイスしているのだからまだマシなのですが、待たされる方はつまらないよね。
ところで、アドバイスのために掲示板などを読んでいて吃驚したというか、非常に感心したことがひとつ。Mr.SITH さん、アメリカ版のハリポタ最新作を頑張って読んでいらっしゃるのです。その奮闘記録が混血のプリンスメモ！です。これはすごい。感動もの。
英語ができるというのもそうですけど、1冊の小説を2ヶ月以上もコツコツと読んでいくという姿勢がね、泣けます。集英社の「ユリシーズ」と河出書房新社の「フィネガンズ・ウェイク」（当然どちらも翻訳版）が私の一番苦労した小説ですけど、読んだそばから忘れるというひどい読み方。読了することだけを目標に頑張ったという有様で、その……。
で、掲示板を見ると、第6巻に挑戦中のお仲間が集まっていらっしゃる。なんだか、感動的。
特殊な単語などが解説されているので、これで原作を読むのが非常に楽になるよ、という魔の書。いや、便利な本なんですけど。毎回、原作が発売されてから数ヶ月で刊行されるので、英語力に不安のある方はいつもこのシリーズが出るのを首を長くして待っているのだそうな。
小説「ハリー・ポッター」シリーズに関する事柄を"誰にでもわかる記事"ということを目標に紹介しています。全体的なレイアウトのバランス、配色は如何でしょうか。後、BBSへの書き込みがほとんどなく、寂しい状態です。この状態を改善するにはどういったことをすればいいのでしょうか。
- 1．改善案の提示
アドバイス依頼後、2度のリニューアル。また書いている間にリニューアルされる可能性がないとは言い切れませんが、最新のデザインについてアドバイスいたします。
いきなりですが、表紙について改善案を提示します。
改善案が全てにおいて素晴らしいというつもりは毛頭ありません。いくつかの改善点について、大雑把な回答を示したものとお考えください。
原本で最も気になるのは、広告周りの処理でしょうか。ひとつは文法的な観点、もうひとつはデザイン的な観点から、問題点を指摘することができます。
- 2．文法ミスの指摘
まず文法について。StyleNote を使用されており、スタイルシートによる装飾をほぼ貫徹していることから、HTML について一定以上の理解を持つ方と推察いたします。広告は自動挿入なので、ブラウザでサイトを開いてソースを見てください。ページ下端の広告は、恐るべき位置に挿入されていることに気付きます。即ち、</body> を検知してその直前に挿入するという常識的な手段を採用せず、文書の末尾に強制挿入されているのです。愕然とさせられますが、実際、</body> のない文書を作成される方も多いわけで、苦肉の策と考えることもできます。
無料サーバでありながら大アクセスに強く、また CGI も使えるのですから、中学生にとって infoseek はありがたいサーバです。私は通常、CGI さえ使っていないのであれば、プロバイダが用意している（ことが多い）無料スペースの利用を勧めています。広告無しで無料だからです。家族に秘密にしているのでなければ、基本的にはこれが一番いいのです。しかし Mr.SITH さんは CGI を積極的に活用されていますから、広告が多いこと自体は受け入れていく他ないでしょう（プロバイダが用意しているサーバはふつう CGI が使えない）。
そこでどう考えていくかといいますと、広告の中に iframe 要素がありますので、まず文書型を HTML4.01Transitional にしましょう。このとき、body 要素と html 要素は開始タグも終了タグも文法上省略できることを活用します。</body></html> と文書を終了した後に広告が挿入されるから問題になるのであって、それならば終了タグを書かなければいいのですね。
主な修正点を列挙します。
- 文書型宣言を HTML4.01Transitional とする。
- body 要素と html 要素の終了タグを書かない。
- img 要素には alt 属性を書く。<img src="newtitle.jpg" alt="THE LIBRARY OF HOGWARTS" width="760" height="142">
- script 要素には type 属性を書く。<script type="text/javascript" 以下略>（逆に language="javascript" という記述は削除してよい）
その他、細かいミスは Another HTML-lint やHTMLクイックチェッカで確認してください。
- 3．広告をデザインに取り込む
続いてデザイン面の問題について。
文書の冒頭と末尾に広告が入ってしまうという仕様は、なかなかつらいものがあります。div 要素で囲まれているとはいうものの、class 属性も id 属性も与えられていませんから、スタイル設定に悩みます。文書中の全ての div 要素に同じスタイルが設定されてしまうわけですし、また上の広告と下の広告とに別のスタイルを与えることも（基本的に）できないからです。
通常、この手の広告との付き合い方は2パターンあります。ひとつは、完全に無視するものです。文書の上端と下端は「見ないことにする」と決めてしまう。Mr.SITH さんの回答もまさにこれだったわけですが、残念ながら、あまり成功しているとは思えません。
広告を無視してデザインするならば、閲覧者にとっても広告が目立たない、その存在が気にならないような処理をする必要がありましょう。じつは、その最も簡単な方法は、背景を無地とすることです。逆説的ですが、バナー広告は注目すれば派手な存在ですが、じつは目立つようで目立っていません。それは、あまりにもバナー広告を多く目にしてきたために、たいていの閲覧者が脳内で自然と無視しているためです。したがって、そこにバナー広告があるよ、ということを特別に強調することさえ避ければよいのです。
そんなの簡単? いやいや、それがなかなかどうして。
原本を見ますと、バナーの周囲は白地であり、コンテンツの開始を伝えるタイトル画像の部分から黒背景が登場しております。これはよくありません。本来であれば画面上端にタイトル画像があるべきところ、強引に広告が割り込んでいる事実を強調するデザインだからです。
私はリニューアル前の表紙デザインの方が収まりはよかったと考えています。全面黒背景、ネオンサインのように浮かび上がる画像群。たしかに不便な点も多々あって、リニューアルに取り組まれたこと自体は誤りではなかったと思います。しかし最新のデザインには改善の余地があります。
改善案では、ある程度、原本の意図を汲むよう配慮しました。ですから、タイトル画像の周辺は黒、メインの本文領域の背景は白です。この制約下で、広告とうまく折り合いをつける方法はいくつか考えられますが、改善案では最もシンプルな回答を採用しました。
画面をヘッダー、本文、フッターの3領域に分け、上下を黒背景としたのです。ただし前述の通り、広告は body 要素直下に class 属性や id 属性無しで配置されています。直感的には「上下を黒背景とする」わけですが、その実現手段としては、「メイン領域を白背景とする」ことで目的を達成しています。
html,body
{background:#000;}
h1
{padding:0 0 10px; background:#000 url(header.png) repeat-x left bottom;}
#contents
{padding:10px 30px 30px 260px; background:#fff url(footer.png) repeat-x left bottom;}#fff と #000 を隣接させるのはあまりお勧めできません。どぎついデザインになってしまいます。そこで今回の改善案では、h1 要素と div#contents の下端にグラデーション画像を配置しています。
- 4．夜の色は #000 か？
今回の作例とは逆に、本文領域を黒背景とし、ヘッダーとフッターを白背景とする手もあります。あまりお勧めはできませんが。
お勧めできない理由は、動画GIFを用いた派手な広告の画像にあります。この手の（いうなれば）下品な画像は、夜の街のモチーフの中に落とし込むのがベターです。装飾過多の電飾も、夜の街ではそれなりにきれいに見えます。そして、微妙に周囲と溶け込んでいきます。実際のところ、これは見る側が過去の体験から「そのように見てしまう」だけなのかもしれませんが、それでも広告周りを白に近づけるか黒に近づけるかで悩む場合、黒に近づけるのが無難です。
ちなみに、title 画像との兼ね合いで背景色を #000 としていますが、「夜」を表現したい場合、じつは #111～#333 あたりの、濃い灰色を採用するのがベストです。都会の夜はもちろんのこと、通常、自然界においても真っ暗闇は夜の色ではなく、洞窟の中などの閉所や、深海などの色です。ご参考まで。
- 5．変則的な段組と文字サイズ
段組の再現方法には、しばし悩みました。
原本では文字サイズが固定され、幅固定の float 指定で3段組を実現されています。それほどデザイン的に凝ったことをしているわけではないのですから、常識的には％指定でよさそうなところですが、実際にやってみて問題に気づきました。メニューカラムの見出しに用いられている画像の横幅がかなり広いのですね。800×600 程度の画面で段組が崩れないよう配慮しますと、メニューカラムに相当大きな割合を設定する必要があり、1280×1024 ではメニューが目立ち過ぎます。
改善案ではメニューカラムの見出し画像を廃止することも考えましたが、デザイン上、重要なアクセントとなっている部分でもあり、あえて残すことにしました。そしてメニューカラムは position で実現して幅固定、メインカラムとサブカラムを横幅％指定の float で段組しています。その結果、幅広いウィンドウサイズと文字サイズ可変の要求に対応した柔軟なデザインを実現することができました。
いろはの先のCSS第8回で簡潔にまとめた通り、CSS による段組は画像によって破壊されやすい欠点を持っています。これは原理的な欠点なので、抜本的な解決策はありません。width を指定し、overflow:hidden; あるいは overflow:auto; などとすれば、たしかに段組自体は壊さずに済むかもしれませんが、いくつかの悪条件が重なった場合、多くの閲覧者にとって許容しがたい表示結果となってしまいます。
W3C の方々の予想と異なり、多くの閲覧者は横スクロールバーを許容してきました。複数カラムのデザインにおいて、自分の読みたいカラムが表示領域内に収まれば、概ね納得してきたのです。常に全てのカラムを表示領域内に収める必要はないのです。ところが CSS は、そのような要望の存在を半ば無視して仕様が策定されています。そのため、カラムを維持することよりも、横スクロールバーを出さないことを優先してしまうのです。
画像をテーブルレイアウトを組み合わせた場合、表示領域をどんどん狭くしていくと、たとえセルの横幅を％で指定していても、セル中の画像がつっかえ棒の役割を果たしてテーブル全体の横幅が100％を突破し、横スクロールバーを生じます。ところが CSS による段組みの場合、position を用いていれば要素が重なってしまいますし、float を用いていれば段組がキャンセルされる（次の要素が横に回り込まずに下に表示される）ことになります。
よかれと思って策定された仕様ですが、多くの閲覧者、そして多くの製作者も、この仕様には不都合を感じてきました。横スクロールバーが出たっていいから、段組こそ維持してほしいと思っているわけです。しかし W3C が考え方を変える兆候はありません。CSS レイアウトのサイトが px 単位で幅固定する事例が非常に多いのは、ブラウザの表示領域の大きさに依存しない幅指定は、横スクロールバーをなるべく出さないというルールよりも優先度が高く設定されていることによります。
もちろん横幅 200px と指定したカラムに横幅 300px の画像を放り込めば、あっさり壊れます。テーブルと違い、そのようなイレギュラーに対する柔軟性はない。だから中途半端といえばその通りなのですが、とりあえずいくつかの注意点さえ守れば、代表的ないくつかのウィンドウサイズに対して、概ね閲覧者が満足できる表示結果を得られます。
ところが幅固定のデザインの場合、しばしば文字サイズがあまり大きくなると見た目に難が生じてくることが多い。画像と文字サイズのバランスという問題もあります。そこで、想定読者層の大多数が問題なく読めるサイズで文字を固定してしまう、といったこともよく行われます。そんなわけで、Mr.SITH さんが文字サイズ固定・幅固定で段組を実現されたことについて、一定の理解は示したい。
ただ、現在のデザインの場合、工夫次第でカラムの幅も文字サイズも固定しなくて済むだろうと思うのです。私の改善案に納得していただけるかどうかはわかりませんが、参考にはなるのではないでしょうか。
なお、改善案の作成にあたり、title.jpg を newtitle.jpg に作り変えました。ほとんど違いはないのに 131KB から 76KB へ大幅減量に成功しています。JPEG 画像は適切な圧縮率を選択することにより、ほとんど画質の劣化を伴わずにサイズを半減できる場合があります。ぜひ参考になさってください。
- 6．デザインの統一
せっかくスタイルシートを使っているのに、なぜかサイト内でデザインが統一されていませんね。これでは趣味のウェブサイトでスタイルシートを使ってデザインする意義の過半が失われているといっても過言ではありません。サイト内の全文書に単一のスタイルシートを読み込ませることを考えるべきです。
サイト内の全文書を単一のスタイルシートでデザイン指定するようになると、自然と文書間のデザインのばらつきが解消されます。そして新しく文書を作成することも簡単になります。するとどんどんコンテンツを更新できるようになり、サイトがますます充実していき、作者も閲覧者も嬉しいことになります。閲覧者も増え、掲示板への書き込みも増える可能性があります。
スタイルシートを効果的に用いるためには、まずスタイルシートの書き方から改革していく必要があるでしょう。見出し、段落、箇条書き、引用など、主要かつ基本的な要素だけでシンプルに組み立てた HTML 文書のスタイルをまず設定し、サイトの表紙など複雑なレイアウトを実現するための設定情報はオマケとして末尾に付すのです。せっかくスタイルシートを使っているのに場当たり的な装飾指定をしてしまいがちな方は、文書全体のレイアウト指定から書き始めるケースが多いようです。
仮に私が表紙の改善案をサイト全体に波及させていくならば、ヘッダーとフッターを黒地とする装飾はそのままに、白背景の本文領域を1段組にする方向で検討を進めるでしょうね。
ところで原本では HTML 文書内に class="12" といった記述がたくさん見られますが、じつはこれ、文字サイズなどをあらわしているのですね。こうした HTML 文書の作り方をしている間は、なかなかスタイルシートを使った意味が現れてきません。
div#main p,div#main ul,div#main ol
{font-size:12px;}これは id 属性値が main である div 要素の中にある p 要素と ul 要素と ol 要素について、文字サイズを 12px に指定する記述です。親子セレクタなどと呼びますけれども、例えばこのような手法を使えば、いちいち class 属性を設定する必要はほとんどなくなるはずです。
前述のように、まず基本のスタイルを一通り書いておくことにより、特定の div 要素の中にある h2 要素だけ枠線をつけるとか、文字の大きさを変えるとか、背景色をつけるといった、特別なオマケ装飾を簡単に設定することができます。表紙の改善案でもメニューカラム、メインカラム、サブカラムで h2 要素の見た目を変えていますが、各 h2 要素に私は class 属性を付していません。各 h2 要素がどんな div 要素の中にあるのか、ということを利用してスタイルを指定しています。
スタイルシートの書き方を改革して、HTML 文書もスッキリ簡単な構造に変えていくと、お勉強の成果が出てきます。
- 7．掲示板
「書き込みが少ない」とお嘆きのようですが、多くの掲示板を見てきた経験から申しますと、決して書き込みは少なくありません。多いところにやたらと集中しているので、単純に平均値を取ったなら平均を大きく下回る可能性はありますが、世の中の8割以上のウェブサイトは、もっともっと閲覧者に冷たくされています。
つまり、ウェブは実際には明示的な人と人との交流をほとんど生み出しません。黙々とコンテンツを作成する作者と、静かな閲覧者を増やすばかりなのです。
1日数千人が訪問するサイトであっても書き込みが1日1件にも満たないケースはしばしばあり、逆に1日30人程度の訪問でも毎日何らかの書き込みがあるサイトもあります。書き込みの多寡は、管理人のキャラ設定や場の雰囲気に左右されます。ここにも当然のごとく才能のある人ない人がいまして、才能のない人に残された手段は多くありません。例えば、自分自身がまずあちこちの掲示板でよく発言する、など。その際、収支が赤字になることは甘受せざるをえません。
まあ、可能なら、多くを望むよりも現状に満足されるべきだと思いますけれども。
- 8．簡単なまとめ
- 文法ミスは修正しよう。
- 広告をうまく取り込んだデザインを考えよう。
- スタイルシートはサイト内で共用しよう。
- スタイルシートと HTML 文書を作成する基本方針を見直そう。
- 掲示板は十分にぎわっていると思います。
以上でアドバイスを終わります。
