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

Advice

BeatleZ

［2002.03.16］

表示速度：

問題ありません。CSSを本格的に導入しているサイトを巡っていていつも感心するのが表示速度。テーブルレイアウトでは絶対に実現不可能な軽さ。しかも、テーブルでは不可能なカッコいいデザイン……私自身は結局、面倒になって適当にやっていますが。

視覚効果：

MacIE5.1による表示くずれについてお伝えします。

Default

表紙の目次のみ、リスト画像が行の左端へ飛んでしまっています。

Green

テキストログ以外の全ページで横スクロールバーが発生しています。とくに日記とテキストの目次ページがひどいです。日記ログなどでは右端の2文字分くらいが横スクロール無しには読めません。

Border

問題ありません。

Delta

スタイルシートセレクターと(S)tyle Selevt: の枠囲みが画面の左側に表示され、文字に重なって読みにくくなっています。枠囲みの幅はかなり広がっており、どうにもよろしくありません。

操作性：

ちょっと問題が。「Return to top」という記述があるわけですが、ほとんどのページにおいては、ページの一番上へいっても何もいいことがありません。むしろ一番下へ行ったほうがいいわけです。ナビゲーションの第一原則は、行き止まりを作らないことです。「Return to top」は、その原則に反しています。とくに日記ログから表紙へ戻るのはたいへん面倒です。日記の目次から戻るのが一番楽だというのでは、あまりうまくありません。

私が昔、友人を手伝ってデザインしたサイト（1月19日閉鎖）のログを示します。テーブルレイアウトになっているのは勘弁して下さい。

この中の例えば参考5などは、操作性という観点からは参考になるかと思います。

内容の充実：

3月11日の日記に「今日から HTML とか CSS 系のネタは少し控えます。他の人がこういうの書いてると、（僕は興味あるけど）大抵の人はつまんないでしょう。」とあります。おっしゃっていること自体は正しいのですが、サイト運営に対する認識としては大きな間違いがあります。

例えば、FF10の実売本数は250万強ですから、日本人の2.5%しかFF10のことはわかりません。けれどもFF10関係の超大手サイトは累計アクセスが数千万にも達しました。同様に、井上雄彦の公式サイトは100万PV/weekにも達していますが、彼の漫画を買う人は日本人の5%未満に過ぎません。さらに面白いところでは、味の素公式サイトが180万PV/dayですが、味の素に興味がある人がそれ程多いとご存知でしたか?

これらの例が何を示しているかといいますと、全体に対する割合は小さくとも、実数はたいへん巨大な数字であるということです。100人に一人しか興味を持ってくれない話題でも、日本全体では100万人が興味を持っているわけです。一日100ヒットするためには、100万人のうちの0.01% を読者にすればよいということになります。

ですから、日記の話題はなんだっていいのです。オフの知り合い数十人を仮想読者層と想定するから勘違いしがちですが、ネット上での知り合いというのは、空間の障壁を乗り越えて作るものですから、純粋に趣味が同じ人ばかりを想定することができるわけです。

ではどうして、不人気サイトと人気サイトがあるのか。それは簡単なことですよね。試しに宣伝をしてみればわかることですが、例え数百人の訪問が一時的にあったとしても、半月後には効果がすっかり切れます。見限られるのです。数千人が来ても同じです。数千人のうち、ただの一人も常連になってくれなくて、愕然とすることになります。

テーマが問題なのではありません。そのテーマに興味のある方々にどれほどアピールできるか、内容のあるコンテンツを用意できるか、ということなんです。

というわけで、日記は書きたいことをお書きになられたらよいはずです。オフの友人・知人を楽しませようというサイトであれば話は異なりますが、ネット上で獲得した閲覧者を楽しませるということであれば、テーマなんて気にする必要はありません。臆することなく、わが道を突き進んで下さい。

絵心

［2002.03.16］

表示速度：

問題ありません。

視覚効果：

表紙が物足りない感じがするのは、広告のためです。本来ならば、背景画像を右下あたりに固定表示しさえすれば、なかなかカッコいいデザインなのですが、現状ではシンプルなデザインが広告に完全に負けています。

広告をもっと下の方へ追いやることができないのであれば、ページのデザインをもう少し華やかにするか、もっと小さくこじんまりとしたデザインにして、広告とコンテンツを画面上で全く別の部分のように見せるとよいでしょう。例えば、テーブルでコンテンツを囲んでしまい、そのテーブルに色をつけたり画像を貼り込んだり……素材屋のサイトに、そうしたデザインはよくありますので、いろいろ参考になさるとよいのではないでしょうか。

操作性：

小説のページから表紙へ戻れないのは重大問題です。これはすぐに直しましょう。（掲示板などへのリンクが切れているのはサイトがまだ建設途上だからでしょうか……）

内容の充実：

小説の充実ぶりに驚かされました。うまくサイトを構築されますと、将来的に大化けするコンテンツかもしれません。ただしやはりこれもデザイン的に弱いのは事実で、参考2などで、もう少し見栄えのするレイアウトを研究なさって下さい。広告がとにかく目立ちますので、いくらか画像などもご利用になることをお奨めする次第です。

Gamanima

［2002.03.17］

表示速度：

見た目の華やかさの割に画像の使用が押さえられており、表示速度が速いのがよいですね。infoseekの広告の多さも、うまくにぎやかな雰囲気作りに活かすことに成功しているようです。

視覚効果：

かぼちゃ配色をていねいに使っていらっしゃいますね。オレンジなどはとくに薄くしがちなところを、ぐっと堪えて濃い色を選択されたのが成功しています。白い文字が液晶パネルでも問題なく読めます。

気になるのはフレームでしょうか。フレーム無し版がせっかく800×600に対応しているのですから、フレーム版もフレーム内に含めるコンテンツを整理するか、表記を一部変更して幅を狭くされるとよいのではないでしょうか。

肝腎のイラストの見せ方ですが、私はなかなかよくできていると思いました。JavaScriptの利用法がスマートです。ただ、少し表示が重くなってもよいのであれば、四角をクリックさせるのではなく、サムネールをクリックさせる方が雰囲気が出てよいのではないでしょうか。

操作性：

ていねいにナビゲーションが配置されていますね。フレーム無し版に「行き止まりのページ」がないのは素晴らしいことです。

「でーたべーす」でアレッと思ったのですが、リンクできるものとできないものを、マウスをその上に持っていかなくても見た目で判断できるようになっていたら便利なのになあ、と。たぶんそういう問題があるのはでーたべーすのページだけだろうと思いますが……。

内容の充実：

たしかに現状ではそれほどコンテンツが揃っているわけではありませんが、しっかりとした受け皿ができているのは強みだろうと思います。サイトは少しずつ充実させていけばよいのではないでしょうか。

ばあどの館

http://www.geocities.jp/kottgon/　［2002.03.17］

表示速度：

シンプルなページ構成なので、遅いということはありません。ただ、テーブルの多用が気になります。テーブルは読込中の逐次表示ができないため、体感の表示速度が遅くなります。

ある程度テーブルが細分化されているので、現状ではそれほどイライラさせられることはありませんが、CSS対応ブラウザが主流になったことでもありますし、いっそのことCSSへ移行されてはいかがでしょうか。（ビルダーなのでテーブルの方が簡単なのだろうと思いますが）

なお、表紙はほとんど画像で構成されていますが、文字の読みやすさを考えますと、主要コンテンツへの目次は色付テーブルに文字を入れたものの方がよかったのではないかという気がします。同様に長野のコンテンツの目次も、画像の圧縮で文字周辺が汚くなっていますから、修正するとカッコよくなります。画像をスライスしてテーブルに貼り込み、リンクはセルに入力したテキストに張るわけです。

視覚効果：

もともと別々のサイトだったものを一つにしたということで、各コーナーのデザインがかなり異なっているのは仕方ないのかもしれませんが、そろそろデザインの統一をはかる時期かもしれません。

各コーナー毎に色を変えるという方針をとりつつ、統一感のあるデザインを実現するにはどうするか。

これは割と簡単です。お気に入りの背景画像をひとつ選び、アートデザイナーなどのソフトで色味の異なるバージョンを必要数だけ作成します。後はそれを使うだけ。現在のように、柄も色も異なる背景画像では統一感が出ませんが、柄が同じなら雰囲気を揃えられます。また、ページのレイアウトや、表の組み方などもできる限り共通させていきましょう。

たったこれだけのことで（というほど簡単でもないような気がしますが）、ずいぶんとサイトが見やすく、カッコよくなります。

以下、細かい点など。

鳥の画像が使われていますが、あれは白背景専用のものです。ですから青背景で使っている現在、画像の周囲に白い細線が残ってしまっています。他によい画像があれば、差し替えるべきではないでしょうか。

表紙を見て一番目立つのがGIFアニメです。けれども、クリックしてみるとそれは重要なコンテンツではないという罠。コンテンツの内容に見合った画像にするべきではないでしょうか。

操作性：

コーナー毎にデザインが違うというのが最大の問題点。閲覧者に無用の混乱を強いるのはやめるべきです。結局、クールデザインを目指してデザインを統一させることで、操作性の問題も大幅に改善されるはずです。

なお、日記を読むために2クリックは面倒ではないでしょうか。最新月の日記は日記コーナーの表紙に置くのが便利です。

内容の充実：

3コーナーがyahoo登録済みというのは伊達ではありませんね。たいへん面白く読ませていただきました。ところで、書き忘れたことがひとつ。どのページにもタイトルがないというのはどうしたことでしょうか。タイトルは絶対につけるべきです。それだけでブックマークに入れてくれる人数が変わるというのも重要ですが、何よりタイトル無しはカッコワルイです。

ともぼうの部屋

URI：http://f11.aaa.livedoor.jp/~tomobou/　［2002.03.17］

表示速度：

もともと重いページではありませんが、にもかかわらず、なんだか余計なものがいっぱいページに入っていますね。全部とったなら、断然シンプルで軽いページになるでしょう。

まず音楽が余計です。音楽を自動で鳴らすサイトはマナーがよろしくありません。ただ、ゲーム系サイトでは自動で音楽がかかるところが少なくないんで、ひょっとするとジャンル的にOKなのかもしれませんが……。次に時刻の表示が余計です。そしてハーボットが余計です。とくにハーボットは無駄に重いことで有名です。

視覚効果：

背景画像を使うなら使う、使わないなら使わないということで、サイト全体で統一しましょう。なお背景画像を使う場合、かなりはでな柄なので、文字を直接乗せないようにしましょう。

操作性：

現状をみるに、表紙の戻るリンクさえあれば、とりあえずよいのかもしれません。

内容の充実：

参考3を見てのとおり、デザインに優れるか否かはアクセス数に直結しておりません。結論から書けば、内容の充実と効果的な宣伝がすべてといえます。現状ではいずれも少し厳しいのかな、と。ゲームはオリジナルなのでしょうか？　とするとなかなか素晴らしい出来のようですから、ゲームを他サイトへ「配布」するという方向性が成功するのではないかと思います。始めて数ヶ月程度は誰だって苦労するものです。しばらくは地味な更新が続くでしょうが、少しずつサイトの知名度は上がってくると思いますよ。