趣味Web 小説 2005-02-28

Advice325 Neo’s World

お待たせしました。「お待たせする→何だか申し訳ないのでたくさん書く→時間がかかる割に内容がない→次の人をますます待たせる→書きにくくなる」……たいへん悪循環なので、なるべく簡潔に書きたいと思います。長々と書いているアドバイスも、そうでないアドバイスも、本当にお伝えしたいことは僅かしかないので。

ご依頼人と Web サイトのご紹介

ポケモンフリークマリオランドWeb サイト作成支援のコンテンツからなる1日約2000ページビューの人気サイト。端正な構成・デザインなので、管理人の Neo さんが中学生と知ってビックリしました。2002年10月27日開始だそうですから、もう3年目。若い人の Web サイトはあっという間に消えてしまうものが大半なので、これはちょっとした快挙だと思います。この調子で4年、5年と続いてほしいですね。

ご相談の内容

サイトを作り初めて2年が経ちます。未だに勉強不足な点が多く、ブラウザやOSが違うと、表示結果が異なるデザインが多いです。

見て欲しい点は、

  • デザインと文章の読み易さ
  • 駄目な所をどう改善したら良くなるか

です。

何が良いのか、何が悪いのかもイマイチ分かっていないので、しっかりとした方の意見を聞きたいと思って投稿しました。よろしくおねがいします。

アドバイスいろいろ
お断り

私は小学校6年間絵画教室に通っていて中高6年間美術部にいましたが、別に何も専門教育は受けていないし、Web デザインでお金をもらったことは一度もない、趣味でやっているだけの人間です。しっかりとした方の定義は不明ですが、以下のアドバイスは一個人の主観に基づく意見に過ぎません。念のため。

CSS デザインとクロスブラウザ

『CSSバグ辞典スレッド』の要約を読めば、たいてい解決するのですけれども、いささか内容が膨大で気が遠くなりますね。私はどうしているかというと、まず一通り作ってしまってから、実際の表示と見比べて問題を回避していく手順を踏んでいます。あらかじめブラウザの癖を全部チェックして、一発で問題ない記述をするのは困難なので。

とはいえ、最近は以下の項目に気をつけることで、最初からほとんど問題のない表示結果を得られるようになりました(IE6, Firefox1, Opera7)。

  • NN4 には CSS を読み込ませない(定石)
  • ブラウザのデフォルトスタイルを殺す(定石)

    * /* 全指定 */
    {margin:0; padding:0; font-size:100%; font-weight:normal; font-style:normal; text-decoration:none; color:#適当; background:transparent;}

  • img 要素に vertical-align:bottom; と border:none; を指定(定石)
  • line-height は数値のみを指定(定石/em や % で指定するのは問題の元)
  • width を指定した要素に padding と border を指定しない(旧 IE と互換モードへの対策)
  • height を指定した要素に padding と border を指定しない(旧 IE と互換モードへの対策)
  • float を指定した要素に width を必ず指定する(文法規則)
  • float を指定した要素に margin を指定しない(IE が2倍値で描画する)
  • float で回り込む要素の内容が少ないとき、回り込む側にも float を指定するか、高さを指定(IE6 対策)
  • float した要素の下に隙間を作りたい場合、float した要素に margin-bottom を指定+親要素に padding-bottom を指定(注:検証不十分)
  • position:absolute; を指定した要素には margin を指定しない(注:検証不十分)
  • position:absolute; を指定した要素にはなるべく width も指定する(定石)
  • position:absolute; の基準として right と bottom は避ける(Opera6 を無視しない場合)
  • position:relative; を多用しない(定石/たいていスクロールが重くなる)
  • z-index を指定する要素には position プロパティで static 以外の値を指定(文法規則)
  • マイナスの margin を指定した要素と背景画像を重ねない(IE で背景画像が切れる)
  • background-attachment:fixed; を多用しない(定石/スクロールが重くなったり表示が乱れたり)
  • overflow プロパティを使う場合 MacIE5 は諦める(特殊なケース以外では内容が消える)

私の経験上、主にこれらに気をつければいいんじゃないか、と。これはかなりアバウトなガイドラインであり、また私が無意識に回避している問題などもあると思うので、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 だそうです。標準サイズのバナー画像も用意されることを勧めます。

以上です。

余談・アフターサービス

Information