魅力的な小説サイトをつくろう！--[2]人に見てもらうためのちょっとした努力

[2]人に見てもらうためのちょっとした努力

サイトポリシーを決めよう

　さて、嫌われるサイトの傾向が分かってきたら、あとは極力これらのような要素を省いていく努力をすればいいだけです。ところがこの省くという作業はけっこう難しく、ある一定のお約束を作っておかないとどんどん崩れていくもんです。これくらいならいいだろうっつーことで、最初に考えていたポリシーからどんどんはずれていきます。
　というわけで、自分だけのポリシー、お約束を作っておきましょう。例えば、横幅は○○ピクセル以内にする、1ページのHTMLファイルは○○KBまでにする、画像は最大でもここまでの大きさ、○○KBまでにする、といった「こだわり」に相当するところですね。ちなみに私は以下のようなサイトポリシーを作って極力これに沿うようにしています。ここまでくると病気かもしれませんが(^ ^;;。

テーブル要素の横幅は最大600ピクセルまで
　私は横幅を設定したテーブルに本文を流し込むレイアウトを好んで使いますが、このとき、横幅は最大でも600ピクセル以内、だいたい580ピクセルくらいにすることが多いです。これは解像度の小さいユーザーを考慮したものですが、（もうほとんどいないとは思いますが）640×480ピクセルの解像度でも問題なく見られるようにしています。実は私は長年640×480ピクセル、800×600ピクセルの解像度で苦しんできたものですから、どうしても小さい解像度を切って捨てることができないんですね。この横幅なら、800×600ピクセルの解像度で見ても、テーブルの両脇にちょうどいいくらいのマージンが出るのです。

リンクはボールド指定
　サイト全体の文書に対してスタイルシートを定義していますが、中でも重要なのがテキストリンクに対する指定。私はスタイルシートの中でA要素に対してボールド（太字）を適用しています。

テキストで済むものは極力テキストで
　ADSLになって快適ウハウハ状態の私で、以前よりずっと画像を使う頻度が多くなってきたのですが、それでも必要以外の画像は極力避けるようにしています。特に、テキストで事足りる場合はテキストで済ませます。例えばこのサイトのトップにある目次メニューなど、更新やリニューアルの際に頻繁に書き変わるようなものは画像にしません。そのかわり、小説タイトル、章タイトル、コーナータイトルなど、ちょっと目立たせたくて見栄えをよくしたい、ほとんど更新されることのないものに関しては、画像にします。文字を画像にするメリットは、後々画像の扱いのところでもお話する予定ですが、ベタ打ちのテキストで表現できないフォントの持つ雰囲気を大切にしたい場合がほとんど。ベタ打ちテキストに対してスタイルシートで文字間を調整できますが、まだ悪さをすることも多いし、ちょっとドロップシャドウなんかをひいて見目麗しくしたいので、画像にしてしまいます。ただし、画像にしたら鬼のように減色、圧縮してファイルサイズは極力小さくします。

画像は鬼のように小さく
　ImageReady、FireworksなどのWebグラフィックに特化した機能を持つグラフィックソフトでは、元画像と書きだし画像のプレビューを見ながら減色、圧縮できるので便利。GIFの場合はそれこそ2色とか4色くらいまで落としてもさほど見栄えが汚くない場合、そこまで減色します。平均的に16色から8色くらいまでをメドにしています。JPEGもブロックノイズで埋め尽くされる直前まで圧縮、平均的に40％くらいの圧縮をかけますが、絵柄によっては10％くらいまで圧縮しても問題ないものがあるので、ガッツン圧縮してファイルサイズを軽減します。

背景画像は使わない
　個人的にBODY内で背景画像を使うのはあまり好きではないので、使いません。見やすい色については後述しますが、テキストが見やすく、目が疲れないように熟考しています。

リンクカラーのこだわり
　HTML文書では、背景色（BGCOLOR）、文字色（TEXT）、リンク色（LINK）、アクティブリンク（ALINK＝リンクをクリックしたときの色）、ヴィジティッドリンク（VLINK＝すでに訪れたことのあるリンク色）を定義できます。当たり前のことですが、背景色に対して文字色がきちんと読めるか、読めるだけでなく見やすいかどうかを考慮し、さらにリンク色、アクティブリンク、ヴィジティッドリンクがきちんと認識できるようにしています。
　私はだいたい、リンク色とヴィジティッドリンクを先に決めます。リンク色はサイト全体であまり使われておらず、なおかつ背景色の中でも目立つ色、ヴィジティッドリンクはリンク色よりも若干彩度や明度の低い、でも背景色に載せてもリンクだとわかる色にします。最後にアクティブリンクを決めますが、リンク色の彩度あるいは明度をあげた色といった感じにすることが多いです。

署名のためにADDRESS要素を
　ADDRESS要素なんてもうすぐなくなってしまうようなモンをどうして使うんだと言われてしまいそうですが(^ ^;;。意外に知られていないこのADDRESS要素、元来HTML文書の文責を示すために使われるものですが、私はページ下のコピーライトと名前、メールアドレスのリンクに適用しています。見た目はI要素（イタリック）と同じですが、「ここから署名になりますよ」と文書構造を定義する意味で、いまでも使っています。渋すぎか……？

他サイトへの外部リンクはすべて別ウィンドウ
　自サイト内のリンクはふつうにメインウィンドウ内に開かれるようにしていますが、他サイトへのリンクはすべてA要素のTARGET属性を用いて別ウィンドウが開くようにしています。別ウィンドウが開くことに関しては賛否両論あるのですが、私はWebブラウザであちこちを見て回る際、必ずリンクを別ウィンドウで開くようにしています。主に仕事で調べモノをすることなどが多かったため、元のウィンドウを残しておきたいというのがあったためです。

要素と属性はすべて大文字で
　HTMLは大文字で記述しようが小文字で記述しようが、まったく動作に支障はありませんが、私は個人的に要素、属性を大文字で、値を小文字で書くといったように統一しています。つまり、
<FONT COLOR="#663300" SIZE="+1">
↑こんな感じです。
　提唱されたもののまったく流行ってないXHTMLでは、要素も属性もすべて小文字で記述することが定められていますが、ふつうにHTMLならどっちかに統一したほうが、後々ソースを編集するときに役に立つでしょうし、更新のときに一括置換をかけやすいと思います。
　ちなみに、属性の値に「"（ダブルコーテーション）」をつけないで記述している人もいるようですが、動作になんの支障がないものの、これから増えてくる要素や属性のこと、JavaScriptなどのスクリプトを併用することを考えて、めんどうでも「"」を記述したほうがいいと思います。

　このポリシーは、誰にどんな環境で見てもらいたいのかということを考える重要な決め手になります。すべての人にまんべんなく見てもらいたいなら、HTMLの記述はIE、NNともに3.0くらいから見られるものにしようとか、640×480のモニタ解像度で見て問題ないように作ろうとか、ターゲットユーザーを想定しておくことです。
　ちなみに、小説サイトを見ている人たちは、一般的なパソコンユーザーとは少し違うということを覚えておくといいかもしれません。統計的には小説サイトを訪れる人のモニタ解像度は、1,024×768ピクセルか800×600ピクセルが主流ということで、一般的なパソコンユーザーの環境アンケートと比べると、やや小さい傾向にあると思います。よく某PC/IT系出版社が行っている同社のサイトを訪れるユーザーのアンケートでは、1,280×1,024がダントツ。ユーザー層の違いは一目瞭然です。少なくともパソコンの知識はパワーユーザー並みではないし、1,600×1,200なんてスーパーハイレゾリューションで楽しんでいる人も少ないです。VRAMやいいグラフィックボードを載せ替えて解像度を上げるというマニアックなことはせずに、買ったままの状態で使っている「ふつうの人である」ということが考えられるからです。あるいは最高まで上げればもっと解像度が上がるのに、設定していないだけなのかもしれませんし、ノートパソコンユーザーが多いのかも知れません。
　また、最新のプラグインやWebブラウザにこまめにアップデートしているわけでもないでしょう。購入したときのままにIE6など最新のものを使っているとは思いますが、わざわざNetscape 7　PR1をダウンロードしてインストールするようなことはしないでしょう。また古いパソコンを使っている人なら、いまだにIE3を使っている人も少なくありませんし、大学などの環境ではNN3もまだまだ現役です。特にPC-UNIX系なら、NNはデフォルトブラウザであることのほうが多いです。
　さらに、テキストサイトの特徴として、ザウルスやPalm、ポケットPCなどのPDAでアクセスして読む人もいるのではなかろうかと思います。こうしたことを考えると、どのブラウザでも見られるように、ブラウザ依存のない、正しい基本的なHTMLだけで表示できるように記述すべきではと私は考えています。
　こうしたポリシーは、各企業Webサイトでも細かく決められている場合があります。例えば横幅はすべて社内で同じにし、社内にすべてのページには同じナビゲーションバーがファイルの頭につくようになっている、とか、自社内のHTMLへのリンクは同窓だが、他社への外部リンクはすべて新しいウィンドウで開く、とか、もっと言えば画像を圧縮・減色するときのカラーパレットまで決まっているところもあります。後にお話しするテーマカラーやテイストなどの見た目も含めて、徹底したクオリティ管理を行っているというわけです。

Back<< | トップページへ | >>Next