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

Advice

Yosihikoの大冒険

[2002.03.03]

表示速度:

さすがに軽いですね。まったく問題ありません。

視覚効果:

壁紙と色調が統一され、すっきりした雰囲気作りができています。パッと見て気になるのはセンタリングだけですね。

センタリングしないと右側半分が空っぽになってしまってカッコワルイという発想だろうと思いますけれども、本当にそうなのかどうかは少し考えどころではないかと思います。まずセンタリングされた文章は読みにくいですし、ほとんどの初心者がそうしているので垢抜けない感じもします。

そこで私がお奨めするのは、四角の幅が決まった枠をつくり、センタリングして、その中に文字を入れるという方法です。その四角い枠はテーブルでもCSSで指定したものでもなんでもいいです。私自身は自分のサイトではすべてCSSで装飾していますが(そうでなかったらページの一番下にあるボタンでデザインを選ぶ機能は使えない)、とくに他人には勧めていません。その理由は、やはりCSSの勉強をしていない人に教えるのはつらいからです。テーブルのことなら皆さん知っていますからね。

というわけで、テーブルでデザインする方法については以下のサイトが簡潔にまとめています。また、このサイト自体が、テーブルを使って、読みやすいデザインをしているサイトの例になっています。とりあえずセンタリングを使っていないということをご確認ください。

あるいは、ビルダーなら、Ctrl+Aでページ全体を選択してから、書式ツールバーから「引用文」を選択するのも手です。センタリングしなくとも、とりあえず画面の端に文字や画像がいって見にくくなることは防げます。「とほほのWWW入門」などでも使われているやり方です。

ところで、テーブルを利用する場合には、全部のページで同じデザインになるように気をつけましょう。表紙だけは少し違ってもよいとおもいますが、他のページで、ページごとに違うデザインでは統一感がなく、カッコ悪くなります。

操作性:

とくに問題はないのですが、あえていくつか。基本的に、コンテンツは絞った方がよいのです。写真も数枚程度なら全部同じページに入れた方がよいでしょう。ただ、現在はあまり内容が無いので、にぎやかにするという意味では成功しているかもしれません。

内容の充実:

現状では、よく更新されているのは日記だけで、しかもその日記は本当に自分のための日記というか、赤の他人が楽しく読むような日記ではありませんよね。とすると、どういう人が見にくるサイトなのかな、と思います。

現在のところ、よそのサイトに遊びにいって、そこの管理人さんにきてもらうというパターンのようですが、それはたしかに正解です。正解ですけれども、そのうちに飽きられてしまいます。そしたらまた別のサイトへ遊びにいって……ということになるのでしょうが、やはり自分のサイトに何かお客様を楽しませるものがあるといいですよね。CGIゲームなどはもはやありふれていますので、やはり自分の文章とかになるのでしょうが……。

逆に、純粋に自分のためのサイト運営でもいいと思います。私の友人も、日記をずっと書きつづけるためだけに、サイト運営をしていました。

最後に、IBMホームページビルダーについて少々。私はビルダーの標準モードが好きで、いつもまずビルダーでページのほとんどを作ってしまいます。最後にちょっと修正のためにソースをいじるくらいなんですよ。けっこう使えると思いますよ、私は。Goliveも素晴らしいソフトですから、それはそれで心配要りません。いかに使いこなすかということだろうと思います。

下記は、私が友人のために以前、デザインしたサイトです。バラ職人というのが、私の当時のハンドルネームでした。下記のサイトではテーブルによるレイアウトをバリバリ使っています。ビルダーで作ったサイトです。よかったら見てやってください。

補記:

こちらのサイトは本稿公開時点で既にリニューアルされています。

笑えるPC相談室

[2002.03.03]

表示速度:

さすがに速いですね。

視覚効果:

地味ながら、よく工夫されていると感じます。何よりソースが非常にきれいですよね。正しくマークアップされているので、CSSによる装飾も映えていますし、表示に安定感があり、すっきりとして見えます。

ただ、本文の文字サイズが少し小さいか、とは思いました。

操作性:

目次が整理されており、迷いなく目的の項目へ到達することができます。将来、内容が増えて整理が大変になってきてからが正念場でしょう。

内容の充実:

よくまとまっています。「笑える」という言葉に過剰な期待を抱かなければ、むしろコラムとして楽しめるのではないでしょうか。個人的にはちょっと疑問に思うところもありますが、回答者の視線がわかりやすく書かれていますから、質問系BBSの初心者の方には得るところが多いはずです。分量も軽いことですし……。

オモシロ音楽館

URI:http://omosiro.ddo.jp/ [2002.03.03]

表示速度:

問題ありません。

視覚効果:

現在使用されている背景画像は、直接文字を載せて使うことを想定したものではありません。ほとんどのページでそうされているように、アンケートおよび表紙の一部においても、背景色を指定したテーブルに文字を入れるよう徹底されるとよいでしょう。

デザインの技術は初歩レベルのサイトですが、サイトの目的は十分に果たされているようです。閲覧者はこれといったストレスも不都合もなく、安心して利用できるはず。部分修正の他は、とくにいじる必要を感じません。あとは管理人自身が納得いくかどうかという問題です。

操作性:

各ページともわかりやすい場所に表紙へ戻るリンクが用意されており、サイト内で迷うことはないでしょう。とくにメインコンテンツでは膨大な過去ログをていねいに整理しており、各ページの最下部に他のログページへのリンクが用意されているなど、押さえるべきところをきっちり押さえています。非常に好感が持てました。

内容の充実:

300以上もの音楽ネタを用意しているサイトは非常に珍しいですね。内容はたいへん充実しています。内容で勝負するサイトの典型だろうと思います。

このホームページに掲載されている、すべての画像、文章、情報、音声、等は館長「影」が有する著作権により保護されております。複製、転載、等の行為を固くお断りいたします。

とありますが、「このホームページに掲載されている、すべての画像、文章、情報、音声、等はすべて館長「影」が著作権を有しております。複製、転載、等の行為を固くお断りいたします。」のように修正されるべきです。

F-1GP 〜made by かずと。〜

[2002.03.05]

表示速度:

画像が多く、またロールオーバーを多用しているため、読み込みに時間がかかっています。

視覚効果:

色調、構成、各種画像装飾、いずれも統一感のある仕上がりになっています。ただ、リンクと表紙のみメインフレームの背景が変えてあるのは、各コーナー毎に背景を変えようという意図なのでしょうか。もしそうだとすれば、それは無用の努力です。背景は統一すべきです。

デザイン上最大の問題は、文字サイズを大きくするとまったく読めなくなることです。おそらくCSSの数値設定を変更すれば多くの問題は解決されるでしょう。しかしながら、ホームページビルダーのどこでも配置モードを利用しているのが癌なので、全面的にHTMLを書き直す必要もありそうです。あるいは文字サイズの固定も選択肢のひとつといえるでしょうか。

操作性:

リンクが成立しているのかどうか、マウスカーソルをあてなければわからないのはよろしくありません。ボタン型の画像は一見、リンクと認識されてしまいます。リンクが成立している場合にロールオーバーが発動するというのではなく、リンクになっていないものはそもそもボタン型の画像にするべきではありません。

その一方で、リンクが成立していないのにカーソルの形が変わり、しかも画像のロールオーバーが発動する箇所もあります。これはよくありません。閲覧者が混乱するからです。

内容の充実:

データベース的性格を持つ情報を扱うサイトなので、一通り完成するまでは辛抱が必要です。逆にそれ以降は楽になるでしょう。頑張って下さい。

+ Forte's Kindness +

[2002.03.06]

表示速度:

複数のデザインを用意し、読者に選んでもらうというやり方は現在ではずいぶんと広まってきました。とはいうものの、電子キャラメル様のとられた方法はかなり強引なものでしたので、私は少しく驚かされました。WWWは情報の共有と再利用を念頭において作られた世界ですので、本来ならば、もっとスマートにデザイン選択を実現できるようになっております。

上記サイト群はいずれもCSSによるデザインを徹底することで、CSSの切替のみでサイト全体のデザイン変更を実現しています。つまりHTMLは共通させ、CSSのみを切替ているわけです。

このためにはHTMLによる物理的な装飾を排除する必要がありますから、必然的にStrictなHTMLを書くことになります。そのためソースが簡明になり、表示速度も速くなります。フレームも使えなく(CSSで擬似的に実現可能)なりますし、アクセシビリティーも向上します。

これらのことは決して新しい技術ではなく、WWWが当初より目指してきた姿です。本来、「正しい」HTMLとCSSにはデザイン変更を簡単に実現できる機能が備わっているのです。とくにここ数年来、W3C主導で徐々に一般の認識も深められつつありますから、よろしければ電子キャラメル様も一度、挑戦されてはいかがでしょうか。

参考7に載っているサイト群を適当に回るうちに、何をどのように勉強するかといったことは見えてくるはずです。とりあえず参考8参考9辺りにたどりつけば、多くの参考文献にあたることができます。

視覚効果:

私はカーソルを変えるのはとくに気になりません。リンク上とそれ以外が明確に区別されていればよいでしょう。やはりカーソル変更を「いいなぁ〜」と思う客層が少なからずいて、電子キャラメル様ご自身もそうだったろうと思います。ですから、評価スレの住人のようなすれた人たちの感覚が単純に通用するわけではないのです。

フォルテ2のメニューについても同様で、パッと見て評価する人には面倒なんですが、あのような遊び心(?)が不便さ以上に好感度高いという方もいるわけです。そうした方が対象ならば、現状にはさして問題ないはずです。

同様にフォルテ3のメニューが薄背景に白文字で、ほとんど読めない問題も、カーソルをあてれば説明が出るのだからいいじゃないかという気もします。私などは嫌ですが、そうした閲覧者は対象としておりませんといえばいいだけのことです。

基本的に、パッと見て気になる問題点はほとんど対策がなされており、絶対にここを直すべしと思われる失点を見つけることはできませんでした。じっくり見れば何か見つかりそうな気はしますが、まあ……。デザインは各フォルテごとにうまくまとまっており、きれいに仕上がっています。

操作性:

CSSによるデザイン変更はともかくとして、表紙がデザイン選択ページという構成はそもそも間違いです。ページ内にもカウンターが置いてあるのはフォルテ2だけですし、逆にそのフォルテ2は選択画面に戻れません。無駄にクリック回数を増やしているばかりでなく、カウンターという面からもうまくありません。表紙には一番お奨めのデザインが自動で表示されるようにすべきなのです。その上で、他のデザインで読みたい方はこちらへどうぞ、というリンクを用意する。もちろん表紙へ戻るリンクは忘れないようにしましょう。

サイト内移動に必要なクリック回数が非常に多いのは、どのデザインにも共通しています。例えばフォルテ1のwordですが、あのように小さな四角を何回もクリックさせるのは下手です。自動ですべての小項目が展開するようなアニメーションにされるべきでした。イライラさせない、すぐにお望みの情報にアクセスできるナビゲーション作製を目指してください。

最後にもう一点。デザインによってサイト構造までもが変化していますが、これは混乱の種です。電子キャラメル様ご自身が対応しきれなくなります。例えば「word」の目次は「中項目→小項目:ディレクトリ形式/クリック2回方式」なのか「中項目+小項目:一覧形式/クリック1回方式」なのか、どちらかに統一するべきなのです。フォルテ4が前者、フォルテ3が後者、フォルテ1は大項目のクリックも必要な3回方式、フォルテ2は名言と雑文が別コンテンツ……頭が痛くなってきませんか。せめてサイトの構造は統一されるべきです。CSS切替によるデザイン変更では、HTMLは共通ですから、こういった問題は起きないわけです。そういった意味でもぜひデザイン変更のやり方を変えてほしいと思うわけです。

内容の充実:

内容はたいへん充実していますね。英国放浪記など、楽しく読ませていただきました。内容はよいのですから、そこまでたどりつく苦労を低減して、多くの方が気持ちよく読み進められるようなサイトにしていただきたいと願うばかりです。