Webサイトデザインアドバイス

Advice

徳保隆夫の発言集31

私は方々のサイト批評掲示板でいろいろ書き飛ばしています。その一部を収録。新旧いろいろ入り混じっています。場所もいろいろ。

りょっぺーじ

URI:http://www.h2.dion.ne.jp/~ryoppe-z/ [2002.08.04]

初歩的な留意点

初心者のようなので、デザインについて初歩的なアドバイスを3点。

  1. 初心者のほぼ全員が陥るミスは、各ページばらばらのデザインにしてしまうことです。文字色、背景色、背景画像、そしてレイアウト、すべて同じにしてしまいましょう。それからおもむろに、表紙のレイアウトだけ少し凝ってみるのです。これでだいたいうまくいきます。
  2. 配色の基本は、テーマ色、ベース色、アクセント色の3色でデザインすることです。テーマ色は、サイトの印象を支配する色です。「みゅうはぁと」ならピンクですね。ベース色は一番大きな面積を占める色です。「みゅうはぁと」ではこれもピンクを使っています。そういう場合もありえます。アクセント色は、テーマ色を引き立てるために、少しだけ使う色です。「みゅうはぁと」では文字色の黒、そして既読リンク色の紫(今回は濃色が使われているので黒の仲間といってよい)です。3色といっても、「みゅうはぁと」のように同じ色の濃淡はどんどん使って結構です。そうした広い意味での3色を使っていこうということです。
  3. WWWは様々な環境で利用されます。パソコン、携帯電話、PDA……。WWWを利用するソフトも多様です。IEなどの視覚系ブラウザ、音声読み上げブラウザ、検索エンジンの検索ロボット、アンテナのチェッカー……。従来よりいわれてきた「画面サイズに依存しないデザインをしましょう」の範囲を越えて、ユニバーサルデザインを意識の片隅に置いていくとよいでしょう。じゃあどうしたらいいの、ということについては私のサイトにも短い記事(HTML講座)がありますが、以下のサイトが有名です。
補記

ところで、タイトルのないページがありますね。すぐに改善しましょう。

POKEMON ETERNAL

[2002.08.04]

アドバイス4点

  1. 文字サイズ固定だからデザインは崩れませんといわれても困るのですが、できることなら文字サイズ可変でデザインが崩れないようにしていただきたいものです。
  2. 日本人以外の方へ、という一文が注意書きにありますが、削除した方がよろしいでしょう。そもそもなぜ英語で書かれているのかが疑問ですが、在日韓国人の方、その他、日本語しか話せない外国人の方は多勢います。日本にある日本語のサイトですから、英語圏の外国人よりも、在日韓国人の方の訪問の方が多いことは十分に考えられます。安易に国際化対応など考えると、墓穴を掘ることになります。外国人がみな英語を理解すると思ったら大間違いです。世界で最も多くの人が使う言語は中国語だという事実とあわせて、ぜひ再考なさってください。(たしかに「現在」WWWを利用する人の中では英語を理解する人が一番多いでしょうけれども)
  3. 注意書きは「HP概要」か「メール」とセットにした方がよいのではないでしょうか。あるいは表紙ですね。とにかくコンテンツからリンクされているべきでしょう。
  4. テキストがほとんど文中改行+センタリングとなっているのは読みにくいですね。サイトマップが重いのもそうなんですが、HTMLとCSSについてはもう少し勉強していただければと思います。正しいHTMLとCSSによる装飾には、表示の軽いページ、読みやすいテキストを実現するための方法が用意されています。しかも(ちゃんと外部CSSファイルを使えば)リニューアルも楽になります。大きなサイトを運営されているので、とくに勉強してみる価値があると思います。以下のサイトをおすすめしておきます。
追記[2004.7.24]

アドバイス後、POKEMON ETERNAL は大幅にリニューアルされています。私が指摘した問題は解消または大幅に改善されていることを注記しておきます。

asami's room

[2002.08.05]

アクセスアップは地道に

人がこない、とのことですが、人を呼べるコンテンツがないので仕方ありません。デザイン的にもいろいろよろしくないところはありますが、それを改善してもアクセスアップにはほとんど影響ないでしょうね。

現状のコンテンツで人を呼ぶために努力するとすれば、あちこちの掲示板に決して宣伝ではない、感想の書き込みをたくさんすることでしょう。「はじめまして。きれいなサイトですね! **のコーナ、読みました。とくに△△が面白かったです。」こういうの。嘘を書いても仕方ないので、つまらなかったサイトには何も書かずに帰ってくるとよいでしょう。こういう地道な努力を続けていると、そのうちにいいことがあると思います。(ふつうは、あるのです)

どういうコンテンツを作ったらいいのかわからない、どんなデザインがいいのかわからない、人が自分のサイトにきてくれない、最初はみんなそうです。ちょっと悩んだら解決できるほど簡単な問題ではありません。まずは自分がよくあちこちのサイトを見て、世界を広げることです。たくさん見ることで、経験値をためましょう。いいアイデアやヒントは、少しずつわいてきます。焦らずに。

tableに関する薀蓄

表は英語でtableと書き、テーブルと読みます。食卓のテーブルも、このtableです。ちなみにtableには他にも、食べ物、料理、食卓を囲む人々、平らな面、高台、高地などの意味があり、さらに動詞として(テーブルの)上に置く、表にまとめる、棚上げ(延期)する、(法案などを)上程するといった意味でも用いられます。

にぎやかなデザイン

デザインというのは、派手だからいけない、という単純な世界ではありません。プロがにぎやかなデザインを仕掛けることはよくあります。素人がまず意識するべきなのは、にぎやかな中にも一定のまとまりを作り出すことです。サイトの表紙について申し上げるならば、模様だけでも丸、星、四角と3種類ありますね。壁紙を青系でまとめたのはよいとしても、背景色は必ずしも統一されてはいないなど、適当な感じがします。

考えてみたのですが、ちょっと手直しするだけでかなりよくなるのではないでしょうか。例えば、一番大きなテーブルの背景が小さな星ばかりですよね。大きな星の画像、丸の画像を書き書き系と見る見る系それぞれの周囲に配置してコントラストを出す一方、更新情報とバナー回りは小さな星の背景にしましょう。それだけで、ページ全体の統一感と、コンテンツ同士のコントラストを表現できます。

表紙のレイアウトをコンパクトに

なお、表紙のレイアウトは、私ならもっと縦に短く、コンパクトにまとめます。Yahooほどぎゅうぎゅうでなくてもよいのですが、現在のデザインは無駄が多いと思います。また、各種見出し関係の色がバラバラなので、何らかの系統でまとめた方がよいでしょう。サイトのタイトル、(見出しに多く使われている)リンクの色、「書き書き系」などの文字回り、ざっとこの辺りの色が同一系統なら、かなり雰囲気も変わるでしょう。

マッシュ村

[2002.08.05]

言葉に注意

まるで「鑑定する人って暇人ですね」とでもおっしゃりたいようで……。あまり派手に言葉を振り回す必要はないと思うのですよ。誰だって「いきなり」の依頼なのだし、自サイトが完璧だと思って鑑定依頼する人も珍しいでしょう。

「**のサイトです。**が気になって鑑定をお願いしようと思いました。**にはじめたサイトです。自身があるのは**で、不安なのは**です。そこで**などの努力をしてきました。よろしくお願いします」

例えば、こんな感じで依頼していただけると私たちは助かります。一番助かるのは、今後、マッシュさんも鑑定人の定連さんになっていただいて、今の常連とは一味違った意見を書いてくれるようになることなのですが……。

驚くべきデザイン

というのは、マッシュさんのサイトを見て、「あ〜! このデザインは盲点だった」と驚かされたからです。サイト作りをはじめた頃に考えたことはあっても、非常に挫折しやすいデザインなんですよね。何せ相当、魅力的なイラストを描かなければいけませんから。しかもサイト全体で統一された世界観を形作らなければならない。これは至難の業ですよ。イラスト系サイトは数多くあれど、サイト全体を自作のイラストでまとめ上げた例は決して多くないのです。

多くの欠点も……

マッシュさんのサイトのデザインにも多くの欠点があります。

まずどこでも配置モードを使っているのは根本的によくありません。HTML文書として正体不明の論理構造になること、文字サイズや視覚系ブラウザ表示領域の変更に耐えないものになることなど、どこでも配置モードは重大な欠陥を抱えています。とはいえ、どこでも配置モードがあったからこのデザインを思いついたのでしょうが……。標準モードで同様のデザインを実現するよう努力なさるとよいと思います。(難しいはずです)

ナビゲーションの問題もひとつ指摘しておきます。進むリンクを作ったら、戻るリンクも作りましょう。村の入り口へ帰るリンクを、全ページに用意すべきです。

今後に期待

これ以上の指摘は他の方にお任せするとして、とにかく私は面白いデザインだと思いました。とくにイラストがいいですね。よい方向へ発展されることを期待します。

ふんばり堂

[2002.08.08]

エンターページは不要

エンターページに大きな画像を置くのはおすすめできません。そもそもエンターページが必要かどうかは大いに疑問です。個人サイトレベルでは、実際のところエンターページをなくしたからといって人気が急に出てくるなどということはありません。しかし一日10万人以上が利用するサイトでエンターページを設けている例が非常に少ないのは、理由のないことではありません。エンターページがない方が、訪問客の大半を占めるだろうリピーターにとっては便利なのです。

説明書きのためのエンターページなんて

サイトの内容の説明や、作者が見やすいと信じている文字サイズなどは、一度伝えてもらえば済む内容です。何度も何度も見せられても困ります。とすれば、サイトの目次の端っこに「初めての方はこちらへ」といった誘導を設ければよい話でしょう。もちろんそれを読まない人も多勢出るでしょうけれども、その人たちはつまりサイトの概要や推奨文字サイズに興味がないのですから、どうせエンターページがあってもさっさと読み飛ばすことでしょう。エンターページは所詮、気休めに過ぎません。

サーバの選択は慎重に

ところで、広告が派手な代わりにCGIやSSIが使えるのがiswebの利点だったはず。掲示板がレンタルなら、もっと広告のおとなしいサーバへ移転した方がいいのではないかと思います。

移転するとお客さんが減ると思われるかもしれませんが、移転告知を半月ほど前から出しておき、また移転後もちゃんと新サイトへの誘導をすれば、驚くほどダメージは小さいものです(経験済み)。移転は、長期的な視点からいえば必ずプラスになるはずです。(ただしiswebは比較的サーバが安定しており、これと同等の安定性を持ったサーバへ移転しなければならないことには注意してください。いくら広告がおとなしくても、サーバが落ちっぱなし、あるいは回線が激重では意味がありません)

センタリングはお勧めできません

レイアウトについて少々。背景の統一、センタリングを用いたレイアウトの徹底により一定のレベルをクリアしています。しかしセンタリングはおすすめいたしかねます。全体的なデザインとしてはよいのですけれども、文章のセンタリングはどうしても読みづらいのです。例えばこの掲示板のように、枠はセンタリングしつつ、文章は左寄せにするのがよいのではないでしょうか。