お待たせしました。「お待たせする→何だか申し訳ないのでたくさん書く→時間がかかる割に内容がない→次の人をますます待たせる→書きにくくなる」……たいへん悪循環なので、なるべく簡潔に書きたいと思います。長々と書いているアドバイスも、そうでないアドバイスも、本当にお伝えしたいことは僅かしかないので。
ポケモンフリーク、マリオランド、Web サイト作成支援のコンテンツからなる1日約2000ページビューの人気サイト。端正な構成・デザインなので、管理人の Neo さんが中学生と知ってビックリしました。2002年10月27日開始だそうですから、もう3年目。若い人の Web サイトはあっという間に消えてしまうものが大半なので、これはちょっとした快挙だと思います。この調子で4年、5年と続いてほしいですね。
サイトを作り初めて2年が経ちます。未だに勉強不足な点が多く、ブラウザやOSが違うと、表示結果が異なるデザインが多いです。
見て欲しい点は、
- デザインと文章の読み易さ
- 駄目な所をどう改善したら良くなるか
です。
何が良いのか、何が悪いのかもイマイチ分かっていないので、しっかりとした方の意見を聞きたいと思って投稿しました。よろしくおねがいします。
私は小学校6年間絵画教室に通っていて中高6年間美術部にいましたが、別に何も専門教育は受けていないし、Web デザインでお金をもらったことは一度もない、趣味でやっているだけの人間です。しっかりとした方
の定義は不明ですが、以下のアドバイスは一個人の主観に基づく意見に過ぎません。念のため。
『CSSバグ辞典スレッド』の要約を読めば、たいてい解決するのですけれども、いささか内容が膨大で気が遠くなりますね。私はどうしているかというと、まず一通り作ってしまってから、実際の表示と見比べて問題を回避していく手順を踏んでいます。あらかじめブラウザの癖を全部チェックして、一発で問題ない記述をするのは困難なので。
とはいえ、最近は以下の項目に気をつけることで、最初からほとんど問題のない表示結果を得られるようになりました（IE6, Firefox1, Opera7）。
* /* 全指定 */
{margin:0; padding:0; font-size:100%; font-weight:normal; font-style:normal; text-decoration:none; color:#適当; background:transparent;}
私の経験上、主にこれらに気をつければいいんじゃないか、と。これはかなりアバウトなガイドラインであり、また私が無意識に回避している問題などもあると思うので、Alternative Design Project by Momomo の記事も参照されることを勧めます。Momomo さんは私と違ってクロスブラウザを頑張っていらっしゃるので、参考になる記事がたくさんあります。
HTML と CSS をまともに使うと、デザインは事務的になります。HTML というのは、社報とか学校からの連絡、あるいは論文のような文書を落とし込むのに都合がよいフォーマットであって、保健便りとか学級新聞、あるいは会社のパンフレットなどを落とし込むには不向きなフォーマットです。ところが現在のウェブサイトというのは、どちらかといえば後者のような役割を期待されている。本文だけきちんと整理するだけだと、何か足りない感じがしてしまう閲覧者は少なくない。
大企業のウェブサイトがリッチなナビゲーションとか、いろいろな関連情報へのリンクを豊富に用意して、きれいな画像もたくさん詰め込んでいるのはなぜか? 端的には、それが望まれているからです。全員が全てのオマケを欲するわけではないものの、オマケを不要と考える人にとって、じつはそれらは邪魔にならない。オマケがあって喜ぶ人はいても、怒る人はいない（僅かにいても、所詮、例外です）。
けれども、です。オマケはやはりオマケに過ぎない、ともいえます。なくても、怒る人はいない。あれば喜ぶ、なくても平気。あって悲しむ人は例外。
私は、現在のデザインはたいへんよいと思います。シンプルな1段組レイアウト、配色もストイック、ケレンの無さは個性の薄さにもつながっているものの、マリオとポケモンのサイト群の中にあって、この事務的な仕上がりは（逆説的ながら）非常に個性的。私はこの路線を支持します。
徹底した1段組路線はたいへん結構なのではありますが、表紙と3大コンテンツ各々の目次ページについては、段組を導入した方がよいかもしれません。
情報の整理という観点からいうと、とくに段組に利点があるとはいえません。"いろは"の先のCSS 第8回に書いた通り、そもそも HTML 文書はソースレベルでは唯一の流れしかなく、複線的な情報の流れは存在しえません。したがって、HTML 文書を順当に装飾すれば必然的に1段組となります。段組なんて邪道です。けれども、この理屈だけでウェブデザインは説明できません。
Neo さんのウェブサイトは PC 用の視覚系ウェブブラウザにしか表示されないだろうと思います。少なく見積もっても99％の閲覧者はそうであるといってよい。であるならば、CSS に media="screen" などと指定（＝パソコンなどの画面向けの CSS であることを明記）した上で、目次ページでは段組を活用することも視野に入ってきます。
更新履歴の一部に overflow 属性を指定して高さを圧縮したり、リスト項目を横に並べる工夫と同様に、段組もそれが多くの閲覧者の利益になりそうなら導入した方がよいでしょう。
現在のデザインに致命的な問題はありませんが、「目次が目次らしくない」ことに、私は少し戸惑いました。サイト内を移動していれば、なるほど、目次と各コンテンツの雰囲気の違いはつかめました。本当に迷ってしまう閲覧者はまずいないだろうと思います。だから具体的な問題があるわけではないのですけれども、違和感はずっとつきまといました。絶対にというわけではないのですが、どちらかといえば、もう少し目次は目次らしくした方がよいのでは……と思います。
リストの行高さが詰まっていますね。対症療法としては li 要素に padding か margin を指定すればよいのでしょうけれども、行高さは全称指定の * で指定してしまうことを勧めます。文書全体の行高さに統一感が生まれますので。なるべく広範囲への指定を先に行い、その上で例外について記述していくのが CSS を書く際の定石です。「全体から部分へ」ということです。
画面いっぱいにコンテンツ領域が広がるデザインには賛否両論があります。私は1行字数が多い方が好きなのですが、どちらかというと、1行30～40字以内のレイアウトの方が支持者が多いようです。今の閲覧者は、現在のデザインにそれほど不満がないから、素直に閲覧しているのだと思います。そして1日2000ページビューというのは十分に成功している数字。なので、じつは行高さも1行字数も、そのままでも全然かまわないと思います。
最後に文章そのものについてですが、長文を避け、リストを多用したスタイルは、情報整理の定石を踏まえており、たいへん結構ではないでしょうか。
私自身も排除し切れずにいる問題なのですが、異なるリンクテキストが同じ文書へのリンクになっている箇所がいくつかありますね。とくに目次の「エボリューション」の項はよくない。「初級編」「中級編」「上級編」と書いてありながら、全部、「エボリューション」の総目次へのリンク。中級と上級は未完成。私なら、「エボリューション」だけにリンクを張ります。あるいは、「初級編」のリンク先は、初級編の文書への直リンクにします。未完成の「中級編」「上級編」はリンクなし。
PHP を駆使してヘッダーとフッターを挿入されているのでしょうが、きちんと全ページにナビゲーションが用意されているのは、多くの閲覧者にとって安心できますね。CGI もよくカスタマイズされており、違和感や迷いなく利用できます。全体的には、よく整備されたナビゲーションであり、私は感心しました。
欲をいえば、最上位の分類しかナビゲーションに用意されていないので、例えば「アブソル同盟会員リストNo001～No100」から「アブゾル同盟」に1手順で戻る手段がない。そしてこれは基本的に心配無用のことなのかもしれませんけれども、「アブゾル同盟」へ戻るためには「ポケモン」へ行けばいいのか、「マリオ」へ行けばいいのかわからなくなる、ということはありませんか? いわゆる「パンくずリスト」が多くの企業サイトなどに導入されているのは、故なきことではありません。現在地を示し、各段階の上位階層へのリンクをまとめたナビゲーションは、もし用意できるなら、あると便利だと思います。
仮にそれは無理だとしても、少なくとも同盟の会員リストに同盟へのリンクを用意することは不可能ではないはず。とりあえず大分類に戻る、というナビゲーションだけでなしに、緊密な関係のある文書同士を結ぶリンクは、もう少しだけ多くてもいいのではないでしょうか。
最後はちょっとしたアドバイス。日本で最も標準的なサイズは 88×31 だそうです。標準サイズのバナー画像も用意されることを勧めます。
以上です。