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

Advice

FLASH ENERGY

[2002.03.12]

表示速度:

全面的に画像を使用されていることを考えますと、なかなか早いといえそうです。効果的に画像を使いまわしており、見た目の派手さと比較して高速の表示を実現しています。

ただし、ソースを見ますと、かなりとんでもないことになっており、IE以外のブラウザでの表示は不安定です。例えばbody要素はひとつの文書につきひとつだけと決まっています。<body>はbody要素の開始を宣言するタグですから、当然、ひとつの文書に一度しか登場できない決まりです。ところがbig-s様のソースでは何度も何度も出てきています。HTML4.01では<body>は省略可能なタグなので、たくさん書くよりはむしろ消してしまった方がよいでしょう。

IEはソースの補正にたいへん優れているのですが、将来的には厳格にソースを解釈させる方針です。今のうちから正しいソースを書くようにされてはいかがでしょうか。いくら表示が速くても、ソースのエラーでブラウザが落ちては意味がありません。

視覚効果:

以前のサイトデザインコーナーでFireworksをご利用になられていると読んだような気がします。それだけの価値があるカッコいいデザインのサイトに仕上がっているのではないでしょうか。

現状、気になるのはコンテンツの中身のページです。ナビゲーションなどの枠はよくできているのですが、本文が寂しいわけです。まず周囲に余白を取ること、次に行間を空けることです。そして本文に適宜小見出しなどを用意して、その部分の文字サイズや文字色などを変更してみましょう。枠の画像が効いているので、本文にも色や変化があるとバランスが取れます。

最後に、画像の代替文字列について。これはあくまで「代替」文字列ですから、画像が出ない場合に、画像の代わりの役目を果たす文字でなければなりません。「〜ロゴ」というのは画像の「説明」ですよね。つまり、見出しの代わりに使われている画像の代替文字列は、「インフォメーションロゴ」ではなく「インフォメーション」とすべきだということなんです。このことはテキストブラウザで閲覧した場合に、よく理解できるはずです。(そんな機会はないと思いますが……)

操作性:

オーソドックスで迷いのない構成です。ゲームのコンテンツは、もう少し充実してきたら、表紙から直接、各ゲームのページへいけるようにした方がよいかもしれません。とくにFFなどの新作が出る際には、その新作のページだけでも、表紙からいけるようにしておくとよいでしょう。

また、あまり内容のないページはまとめておきましょう。MusicとLinkは、各コーナー内を1ページにした方が親切です。

内容の充実:

掲示板への書き込みが少ないのは、サイト構成の問題です。ゲーム系サイト運営の基本は、まず一定量のデータを用意し、以降は掲示板の盛り上がりでつなぐというものです。情報収集にせよ雑談にせよ、掲示板はサイトの一番に重要なコンテンツと考えるべきです。

まず掲示板の名前を「FF掲示板」のように、テーマがはっきりわかるものとし、最初の半月から2ヶ月程度、掲示板にどんどん情報を書き込みます。公式サイトに載っていることで十分です。案外、ファンなのに公式サイトを見ていない方は多いのです。ニュース性のある情報ほどよいでしょう。ZDnetというサイトも情報源になります。最近ですと、ゲームキューブでFFが出るというニュースはZDnetが一番早かったのではないでしょうか。しばらく頑張りますと、常連様が定着して掲示板が独り立ちできるようになるはずです。以降、ニュースはふつうにサイト内のコンテンツで発表していけばよいわけです。掲示板を盛り上げるのに使うのは最初だけでいいのです。

なお、掲示板は一番上に置きましょう。ゲーム系サイトの常識です。逆にインフォメーションは一番下でOKです。更新情報は現在のように表紙に置きましょう。ただし表紙にはゲーム系サイトらしい画像がひとつでよいので、あるとよいのではないでしょうか。

なお、先ほどよりゲーム系にこだわっている理由は、掲示板が一番簡単ににぎわうやり方だからです。何でも屋のサイトは、なかなか掲示板がにぎわいません。そこでなにかテーマを決めるわけですが、ゲームとホームページと音楽なら、ゲームが一番いいということです。

アドバイスは以上ですが、納得のいったところだけ取り入れられたらよいと思います。FF11がもうしばらくすると製品版になるのだろうと思いますが、楽しみですね。そのときまでにどれだけ準備できるかが、サイトの成功如何につながるのではないかと思います。

ゲーム系というのは、「まさか!」の多い分野です。参考1上記サイトはその好例でしょう。とてつもなくひどいデザインで、正直、たいしたコンテンツもありません。けれども、やはり掲示板が躍進の鍵だったんです。スマブラDXの発売前に思い切り頑張って掲示板を盛り上げていました。googleの検索でかなり上位に表示されるまでにしていました。ゲームが実際に出たときには、
とっくに決着がついています。事前にどこまでやれるかなんです。

で、ゲームのコンテンツが成功すれば、他のコンテンツも自然と人気が出てくるはずです。もし「やる気」であれば、今はちょうどいい時期ではないかと思います。

ガンガンいこうぜ?

URI:http://www.geocities.jp/gan2ikouze/ [2002.03.13]

表示速度:

最近ではブロードバンドの広まりによってサイトの1ページあたりデータ量が80KB以内までならOKといわれています。自動でmidi がかかるのはサイトを重くするからダメ、という1ページ30KB以内といわれた時代の話は、もう通用しないのかもしれません。

しかし、midi が自動で鳴り出すのは便利といえば便利ですが、あまりお勧めできないということは書き添えておきます。ほぼあらゆる人気サイトが自動midiを採用していない理由はいろいろあります。

視覚効果:

表紙の文字が読みにくいことは明らかです。そもそもスクロールを前提としていない背景画像がよくありません。あの背景画像は他のものに変更されるべきです。

サイト全体の雰囲気は緩やかに統一されており、なかなかよくまとまっていますが、まだログも少ない今のうちに、できる限りきれいに整えておくとよいでしょう。まだまだよくなります。

まず、文字色と背景画像はサイト全体で統一しましょう。文字は背景画像の上に直接置くのか、それともテーブルに入れるのかといった、基本的なページのデザインも統一します。また、日記が読みにくいのは文字がテーブルの端まで入っているからなので、左右に余白を取って見やすくしましょう。

以上3点に気をつけられるだけで、だいぶ読みやすくなります。

操作性:

11元ポケットが行き止まりページになっていることが気にかかりました。表紙へ戻るリンクを用意しましょう。

サイトの構成は、多くのサイトを読むようになれば、だんだん見えてくるでしょう。現在はまだまだ技術的にも経験的にも不足している部分が多いように見受けられますので、まずは行き止まりのページを作らないという一点だけを徹底して下さい。

内容の充実:

日記は面白いと思いますし、11元ポケットの充実ぶりには驚くばかりです。メインコンテンツはしっかりしています。

気になるのは掲示板でしょうか。お客様の人数から逆算して、ひとつに絞るのが適当かと思います。掲示板をいくつも作るのはよほど大きなサイトになってからで十分です。寂れた掲示板をいくつもおいておくよりは、こじんまりとした掲示板をひとつ置く方がお客様の印象はよいはずです。

バイバイゲーム

[2002.03.14]

表示速度:

とくに問題ない速度ですが、タイトル画像はデータ量に見合ったデザインにされた方がよいでしょう。現在と同程度の装飾であれば、わずかなデータ量のテキスト+CSSで表現できますので。

視覚効果:

レイアウトはなかなか整理されていますが、色使いがバラバラなのでデザインに落ち着きがありません。色も統一されるとよいでしょう。

日記ログは使われている3色がすべて主張の強い色のため、読みづらくなっています。ご挨拶は薄くて読みづらいですね。

比較的読みやすいのは指ぱっちんと口笛のページです。本文の文字色をもう少し落ち着いた色(例えば#339999)にされると、よりよいでしょう。そしてこの配色を、ナビゲーション以外の全ページで共通して用いることをお奨めします。

ゲームのページもよいのですが、オレンジのように強い背景色で全画面をまとめるよりも、本文の背景を白系にして引き締まった画面構成を選択する方が悩みが少ないでしょう。

またナビゲーション部分の文字色は、黒でも構いませんが、#330066などの青紫系の濃色にされますと、補色の関係が決まって、落ち着いた雰囲気になります。

最後に表紙のデザインですが、他のページでセンタリングを使用していないので、表紙もそれにあわせた方がよいでしょう。日記のセンタリングは明らかに読みにくいので、センタリングするならば、日記は一定幅のテーブルに入れるなどしましょう。テーブルはセンタリングしても、テーブルの中の日記本文はセンタリングしないようにするわけです。

操作性:

左フレームのナビゲーションはなかなか面白いのですが、もう少し工夫されますと、もっと使いやすくなるでしょう。

まず各項目の行間を開けましょう。続いて、文字部分にも当り判定をつけましょう。あの小さな画像の上にマウスを持っていかねばならないのは、少々面倒です。

なお、通常の表紙からリンクをたどれない方のために別の表紙が用意されていますが、セレクトメニューからのジャンプにはやはりJavaScriptを利用するしかありません。別表紙ではすべて通常のテキストリンクでナビゲーションを構築するべきです。そしてそのために、左フレームも、必要なときにはスクロールバーが出る設定に変えておいた方が無難です。

また、画面左上のタイトルロゴに表紙へのリンクを設定するのはデザインの定石です。表紙へ戻るリンクは目立たせましょう。

内容の充実:

テキストの数がそろっているのはよいことです。ただし、よほどの内容でない限りは、有用な情報を扱わない個人テキストサイトは最新の更新が命です。つまり……人気が出るかどうかは日記にかかっているといえます。

私の見たところ、読物としてではなく、単に備忘録として書かれた日記があまりに多いようです。大々的に公開して、人気を得たいとなれば、更新頻度よりも内容が大切になります。私の意見を書けば、公開すること自体は賛成ですが、人気はあまり気にしない方がよいのではないかと思います。

宣伝活動といっても「ぜひ見にきてね」というのはやめて、好きなサイトの掲示板にURI付で感想を書き込みするといった、地味なやり方がよいでしょう。淡々と知名度を上げていくのがよい方法です。

不謹慎な恋

URI:http://homepage2.nifty.com/fukinshinnakoi/ [2002.03.14]

表示速度:

表紙の表示速度に不安があるそうですが、最近では回線のいい方が増えてきましたから、全体で50KB以内ですから、問題はないでしょう。私のサイトの表紙が25KB程度ですが、回線の込み具合によっては、私のサイトの方が表示に時間がかかるかもしれません。

むしろ問題はコンテンツの方でしょうか。全面的にテーブルレイアウトが使われており、データが読み込み完了するまで何も表示されないので、「待たされている」という実感があります。テーブルは細切れにして、少しずつ表示されるようにするとよいでしょう。(あまり区切りすぎるのも問題がありますので注意しましょう)

視覚効果:

インラインフレームは、サイトの統一感を出すのには得ですね。フレーム内がどんなページでも、周囲が安定していますから、雰囲気があまり変わりません。これは逆にいえば、フレーム内でいろいろやっても、周囲の雰囲気が印象を決めてしまうので、周囲の背景画像が非常に重要だということを意味しています。

基本的にコンテンツの背景色は黒に統一された方がカッコいいだろうとは思います。しかしながら、こだわりがあるのであれば、絶対にそうするべきとはいえません。雰囲気作りはよくできているように思います。

修正すべき点をひとつだけ。テキストのセンタリングは避けましょう。テキストには見出し、本文、補足といった階層があります。一般に、それは文字の大きさなどで表現されますが、じつはレイアウトによっても情報の階層は明示されます。センタリングはすべてを中心に寄せてしまう方法なので、情報がごちゃごちゃと混乱して見えます。その結果、文章が読みにくくなってしまうのです。

操作性:

わざわざインラインフレームを使用されるのであれば、すべてその中で済ませるべきです。フレームの中に表示されないページの存在は、いささか閲覧者を困惑させますし、フレームの中に表示されないページに限って、レイアウトが他のページと異なっているものですから、操作性がまた低下するわけです。

内容の充実:

素材を多くの方に使ってもらいたいというお話なので、その一点に絞ってアドバイスさせていただきます。

規約の表示の仕方はかなりスマートになっていますが、内容には気になる部分があります。基本的に、「必ずリンクして下さい」という注意書きはやめましょう。「〜するのは禁止」という注意書きは必要なものなので仕方ありませんが、それ以外のことは「できたら〜してほしい」とすべきです。まずは気軽に利用してもらうことが重要です。同じような素材なら、お客様は規約の少ない方を選ぶものです。

また、メニューで素材が目立っていないので、メニューを減らすか、素材が目立つような工夫があるとよいでしょう。太字にする、色を変える、背景色をつける、「はじめに」のすぐ下に置く、など。ただし、これはあくまでもおまけ程度のこと。たいした効果は期待できません。やはり内容の充実とターゲットの明確化、効果的な宣伝といった王道を押さえていく必要があるでしょう。

宣伝について最後に。素材屋にとっては、サイト自体が宣伝広告です。インラインフレームで表示する限り、ページの雰囲気は周囲に影響されます。暗色でまとめられた落ち着いた雰囲気に影響されるのです。素材を見渡したところ、背景色が白でなければならなかった理由がよくわかったのですが、これは逆にいえば、黒背景が基本のサイトで公開するには少々つらいと。常連様向けのサービスであれば構いませんが、素材で人を呼ぶとなるとたいへんかもしれません。私なら、現在のサイトで自分自身が使いたい素材をどんどん作って、それを公開するという方法を採用します。ご一考下さい。

SavileRow3番地

[2002.03.16]

表示速度:

画像を使いすぎないよう工夫されており、表示速度は十分に速いです。女の子の画像の使い方がうまく、最小限の画像で見事にサイトの雰囲気をまとめているのが印象的です。

視覚効果:

サイトのデザインが透明感あふれる配色で統一されており、爽やかな雰囲気をかもし出しています。センスのよさをうかがうことができます。

一方、気になるのは文字の色です。ページによって文字色が異なっていますが、掲示板の色は薄すぎてノートパソコンの液晶パネルでは読みにくいです。文字が小さいので、黒か濃いピンクなどが読みやすいのですが……。

全体的なことをいくつか。文字が中心のサイトなので、文章を読みやすくすることが大切です。

そのためにまず、文字色が薄すぎるところを直しましょう。

次に、改行幅をCSSで適当に設定しましょう。IEで文字サイズを変更したときに文字と文字が重なってしまいますが、これはCSSで修正できます。

最後に、センタリングをやめましょう。CSSで左右に余白を取り、文章そのものは左寄せにすると、読みやすくなります。

操作性:

メニューが1項目1文字しかないので、クリックするのが一苦労でした。もう少しクリックしやすくしていただけるとありがたいです。(例えばメニューだけ文字を大きくするとか)

内容の充実:

メイクの話を、なかなか面白く読ませていただきました。メインコンテンツというだけのことはあり、多くの方の参考になる内容となっているようです。実際にネットでメイクのやり方を調べる人がどれくらいいるのかわかりませんが、一点だけアドバイスできることがあります。

検索エンジンでメイクについて調べたとき、現状ですと、見つかるページはインラインフレームの中のページです。おそらくそれはあり様の希望に反することでしょう。検索エンジンは、実際にページの中に書いてある文字に反応するので、表紙のどこかに「メイクのやり方」といった言葉を入れておくとよいでしょう。