大多数の為のWebサイト構築手法
04/11/01
訪問者に優しいWebサイト作りさんをだらだら眺めてたんだが、その丁寧さに少し感動。俺がそういうの書くと問答無用になるだけに、殊更そう思う。
というわけで、、一発ネタコンテンツ。
大多数の訪問者に優しいWebサイトを作ろう 〜問答無用編〜
以下の文章は、Webサイト（注1）を開設する場合に、最低限必要な知識を持っている層を対象としている(注2)。また、文体がいつもと違うが、気にしてはならない。
さて、君がWebサイトを作りたいと考えたとしよう。
CGを描きたいのならばCG系のサイト、創作小説やファンフィクションが書きたいのならば小説系、「俺の歌を聴け」的ナルシストならばテキスト系、赤裸々な日常を曝け出したいナルシストやマゾヒストなら日記系、CGも書けないし物も書けないしそれだけで閲覧者を惹きつける面白い文章も書けないならばニュース系だろう（注3）。
この内、後ろ二つについては、元々殆ど形式が完成していた上に、最近blogという概念が現われた為、わざわざ語る必要も無いと判断し、ここでは省略する。
ここではそれ以外のタイプ、つまり「核となるコンテンツ」があり、それとは別に更新履歴やリンク等のコンテンツが「独立して」存在している場合を想定する（注4）。
作るサイトが決まったら、本当に一番最初にやるべき事にはサーバースペースの確保(注5)やらFTPツールの選定やらがあるが、前述のように最低限の知識を前提としているので省略させていただく。
さて、サイトを作る上で最初にやるべき事はサイト構造の決定である。
これを怠ると、後々の更新時に何が何処にあるのか分からなくなる可能性が高い。
とはいえそれはそれほど難しい事ではなく、下の図のようなものを考えればいい。
これがサイトの基本構造であり、サイト内のリンクはこれを基準に構築する。
また、FTP転送時も同じようにディレクトリを作成すれば、新しいネタを追加する際、非常に分かりやすいという事も覚えておくと良い（閲覧者にとっても、URLの一部を削るだけでトップを見られるというのは非常にあり難い）。
こうして構造が決定したが、ここで言っておかねばならない事は、訪問者に優しいWebサイト作りさんでも書かれていたことだが、スプラッシュページ、つまり
〜のサイト
アクセスカウンタ
Enter
このサイトは〜の画像を使用しています
以下そのリンク
で構成されているようなページは必要無く、閲覧者の時間の無駄であり、更にはサイトスペースの無駄であり、そんなものを作る奴はゴミだ。
そこを経由する意味が無いのならばそれは必要ないと断じて良い。
唯一それに有効な場合があるとすれば、それは18禁コンテンツに対する認証の場合である(注6 target="_self")。
さて、こうして構造が決まった。
では次に各々のコンテンツを作る（注7）。
コンテンツを作る場合に考えておかねばならないのは、文字色と背景の関係である。
最初に言っておこう。
純黒バックに純白抜き文字はクソだ。
同様に、純白バックに純黒文字もクソだ。
というか、原色をバックに使う奴はクソだ。
理由は単純、対立色を使うのは確かに識別に於いて有用だが、完全に対立する色を原色で使うと、目立ちすぎて焼きつくのだな。
ちなみに純黒or純白バックよりも、それ以外の原色バックの方が更に最悪なので、それも覚えておくべきであろう。
具体例
余談だが、黒文字に比して白抜き文字はインパクトが強い傾向にある（その為広告等は白抜きが多い）ので、短文で笑いを取る事に徹底するならば（所謂テキスト系）、白抜きもそれなりに有効であろう。バック純黒で白抜きにフォントいじりを併用するのは勘弁してもらいたいが。
では色の選定はどうすべきだろうか？
正直、この辺は完全に個人の好みだが、
・文字は黒
・背景は薄い色を。この場合のベース色は何でも構わない
を守っていれば問題は無かろう。
逆に
・文字は白
・背景は濃い色
でも構わないが、黒文字に比べてセンスが問われる事に注意。
また、どうしてもそれ以外の文字色を用いたい場合は、未訪問リンクに用いる予定の色と、できるだけ被らない色を使うべきであろう。
時折背景に画像を使う場合についても述べておく。
それ自体は別に構わないが、その背景が派手な場合、つまり様々な色を用いていたり、二色であるがその二色がかけ離れた色だった場合、それは最悪な事例になり得る。
丁度AlertBoxの原文の方に駄目な背景例があったのでリンクを張っておく
ついでにこちらで見つけた例を再現したものも挙げておこう(注8)。
基本的には、少しでも文字色と背景画像に使われている色が被ったらアウト、という事を覚えておくべき。
それから白文字で背景を画像にする場合、bgcolorを指定する事（指定しない場合、デフォルト背景が白がある為、画像を切っている場合文字が表示されなくなる）。
例として上で挙げた例から背景画像を抜いたものを置いておく。
画像を切るとこうなるのだ、という事を覚えていて貰いたい。
それ以外の事としては、文書整形の為にテーブルを用いる場合、その幅は%で指定すべきである。
純粋な数値で指定した場合、文字サイズや解像度によっては横スクロールが要求される不便なデザインに早変わりする可能性が高い。
下のは極端な例だが、見難さを表してはいる。
こうしてコンテンツが出来たら、最後にメニューの作成に入る。
メニューをフレームにするか否かは個人の嗜好次第だが、フレームにする場合、メニューを含むフレームは1ページに入る構造となっている事が望ましい。
これは、マウスのホイールを用いてスクロールする場合、どのフレームがスクロールするのかを、わざわざクリック等で指定してやる必要がある為である。
またそのフレーム幅自体も可変である事が望ましい。
例えば上下分割フレームの場合、より広くコンテンツを見る為にフレーム幅を広げたい、という状況は多々にある（特にCG系など）
そして、フレームにしている場合には、トップページの、メニューではない方のフレームには更新履歴が表示されている事が望ましい。
フレームではないメニューの場合には、出来れば一番上に更新履歴を表示しておく事。
その更新履歴に関してだが、週に一回程度しか来ない閲覧者は当然存在する。
そういった閲覧者の為に、出来れば過去二週間〜一ヶ月程度の更新が記述されている事が望ましい。
但し、その更新履歴が非常に長い（目安はメニューを含めて一画面には収まりきらない程度）ならば、むしろメニューを上に、更新履歴を下に持ってきた方が常連にとって使いやすくなる事も考慮に入れておくべきである。
また、時折テキストボックスを設定して更新履歴を記述している場合があるが、その際にはそのテキストボックスは上下、左右に心持ち広めに取っておく事を推奨する。
少なくとも左右にスクロールせねばならない、という状況は避けるべきだし、上下幅が狭すぎて上下のボタン以外表示されていない場合、スクロールに時間がかかり、非常に使いにくい（下図参照）。
他に言っておかねばならない事として、メニューのリンクとして画像を使うのは避けるべきであり、もし使うにしてもalt属性等で説明文を入れるべきである(注9）。
皆が皆ブロードバンドというわけではなく、ナローバンドであれば同時に読み込むファイルの数が制限されているのが普通であり、特にメニューの数が多い場合、どうしても全てを表示するのに時間がかかってしまう為である。
ここまで出来たら後は管理者の才覚次第。
サイトが大手に化けるも身内しか見ないページ（それが目的ならまた話は別だが）になるも、全ては作り手次第である。
以上これまでとし、以下に流石にアレ過ぎて上には入れられなかった私見を述べておく。
よくIE以外でのスタイルシートに代表される、ブラウザごとの解釈の差異が問題にされるが、個人的にそういった事柄は無視して良いと思われる。
うちのサイトの場合、IE6.0だけで閲覧者の80%を占めている。
ならば、残り20%の為に汗かくよりは、残り80%の為に汗をかく方が当然正しい。
少数派のブラウザを敢えて選んだ人間を省みる必要は無い。
その個人が信念を持ってIE以外のブラウザを使ってるのだから、それに対して見れないからと文句を言われる筋合いはサイト運営者には無い。
言われたならばこう言い返せ
「IEなら見れる。対応してもらいたいなら、そっちでソース書いて来い」
と。
俺はそう思うのだ如何なものか。
注1：日本ではホームページと呼ばれるが、厳密にはWebサイトと呼ぶべきである。呼ぶべきであるのだが、外人の論文でもhomepageと書かれてたりするから、この辺は万国共通らしい。どーでもいい定義論と言ってしまえばそれまでであり、実際どうでもいい。
注2：今まではサイト巡りをしていたが、ふと思い立ってサイトを作ろうと考える、という程度か。
注3：大体そんなもんだと思う。ちなみにニュース系にも羅列系とウチのようなコラム兼用系に分かれるが、前者は更新作業に非常に時間がかかるものの、慣れれば機械的に作業可能であるのに対し、後者はネタが無いと更新すら出来ないという面倒な点を抱える為、どっちもどっち。
注4：トップとリンクと核となるコンテンツと、場合によってはプロフィールまでが統合されているのが日記やニュース系の特徴であると考える
注5：別に最後でも構わんのだが、最初にやらないと途中で萎えて放り出す恐れが。
注6：具体的には18禁のネタを振った高校生（＝馬鹿者）を合法的に私刑に処す為
注7：作ってる間に増える可能性がある以上、コンテンツを先に作ってからメニューを作ったほうが効率が良い。またページデザインを決める場合、色々な要因が入るメニューよりもコンテンツ単体の方が決め易いという理由もある。
注8：流石に直リンクするわけにも行かんし。
注9：altも無く、センスも無い画像メニューを見る度に、そもそも単なるお品書きに何を拘っておるのだ、と思う。意味の無いトップと並んで無駄の極地。それならフォントの選定に拘った方がマシ。
Track Back URL: http://s03.2log.net/editor/tb.php?id=singbrain:blog:133
Track Back
トップに戻る
Posted by rgy at 04:38