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

Advice

War Pigs

[2002.01.25]

表示速度:

画像をそれなりに使っているわりには非常に速く、驚きました。ロールオーバーを使わないストイックな方針が効いています。より表示が速くならないかとのことですが、画像はトップページですべて読み込んでおり、他のページへ移動した際の読み込みデータは、ほとんどソースのみとなっています。たとえフレームを使用しても、これ以上速くはならないものと思われます。

なお現在は問題ないようですが、HTMLとCSSで同じものに異なる指定をかけますと、ブラウザの処理が重くなります。将来デザインの変更をされる場合には、基本的にCSSをいじることになろうかと思いますが、その際にHTML側の記述が現在のままですと、とくに色の指定がぶつかりますので要注意です。外部CSSファイルを導入した人が一様にHTML側の装飾を排除しているのには、将来のリニューアルを見越した布石という意味合いがあるのです。

参考までに、「WebDesignAdvice」の場合についてご説明します。win+IE5以上の環境でしたら、ページ最下部にあるCSS切替JavaScriptをご利用になれます。「None」を選択されますと、当サイトの本来の姿が現れます。デフォルトの配色、何の装飾も施されない単純なデザインです。「simple」がデフォルトのCSSです。「plain」は最低限のCSS装飾例。「IE5-5.5」を選択されますと、これはけっこう驚かれるのですが、突然フレームが生成されます。「IE6」も地味ながらフレームになっています。CSSによる、擬似フレームという技術です。このようなCSS切替への対応を考慮する上でも、HTML側の装飾は落としておく方がよいのではないでしょうか。

CSS未対応ブラウザ、対応不十分なブラウザが気になるところだろうと思いますが、個人WEBサイトの場合、95%の閲覧者には問題が生じないことにご注意ください。また、その5%の例外はすなわちNN4.7であり、NN4.7専用CSSを用意すれば対処が可能です。ご一考ください。いずれにせよ、現在十分に速く表示されているサイトを、一層速く表示させるのは困難な話です。

視覚効果:

要素の配置、配色ともに安定感があり、初級デザインとしては完成されているといっていいレベルです。一点だけ意見すれば、ベースカラーとテーマカラーに加えて、アクセントカラーをもう一色、要所要所に配置されるとよいでしょう。当サイトでいえばベースが白、テーマが青、アクセントが橙です。

操作性:

私が感動したのは日記のログです。素晴らしいです。これほどよくできた例は滅多に見ることができません。ただし「翌日の日記はありません」が頻発するのはどうかと思いますけれども。毎日ファイルを整理するのが大変でしたら、5日分くらいずつまとめてもいいのではないでしょうか。なお、そうなりますとページが縦に長くなりますから、進む/戻る/メニューというナビゲーションは上下に入れると操作性が大きく向上します。

その他、気になった点を指摘しますと、メニューの数が少々多いようです。基本的にメニューは7個以内にすべきというのが、人間の短期記憶の研究成果からデザインの新常識として提唱されています。そうしますと、ThanxとProf はAbout の拡張で吸収した方がよいかもしれません。

画像にalt属性が指定されていませんが、これはけっこう問題でしょう。NN6への対応も考えれば、title属性も指定すべきです。

いずれにしましても、全ページに総合メニューを入れる姿勢は大変素晴らしいものです。

内容の充実:

このところ日記が長くなってきていまして、なかなかよい傾向のような気がします。楽しく頑張っていってください。

あまり気負わず、淡々と日記をつけていくことが長期間継続させるための秘訣でしょう。ただ、ある程度はカウンターの回りも気にしていくとよいと思います。まったくそうしたことに無関心な人もたまにいらっしゃるのですが、むしろ続かないようです。

補記:

ベースカラーは基本色ということでしょうか。

ごく簡単にいいますと、一番大きな面積を占める色がベースカラーです。一般的には、あまり印象に残らない色を用います。無地の白を使うのが無難な選択です。

ではテーマカラーとアクセントカラーというのは具体的にどのようなもので、どう意識して使えばいいのでしょうか?

テーマカラーは、サイトの印象を決定付ける色です。基本的には、白地+テーマカラーだけでサイトを構築すれば素人然としたデザインを卒業し、かなりカッコよくできます。Nightmareさんのサイトはこの段階です。ですからかなりよいと思います。少なくとも初級としては完成に近い。

なお、ベースカラー=テーマカラーとなる例もあります。「侍魂」の黒などは、その好例です。Nightmareさんのサイトもそうなっていますね。

さて、白地にテーマカラーだけでサイトを構築しますと、基本的にサイトには1色しかないように見えます。なぜなら、白〜灰〜黒は無彩色といい、色としての印象が弱いため、テーマカラーだけが「存在」をはっきり認識されるためです。(テーマカラー=ベースカラーの場合にはその限りではありません)

例えば青がテーマカラーの場合、濃紺、群青、青、水色など様々な青を用いるわけですが、そのようなサイトはいくらか単調に見える場合があります。

そこでアクセントカラーの登場です。テーマカラーの存在がかすむほど多用はせずに、しかしページの雰囲気に新風を吹き込む程度に用いる……。

傑作として名高いUFJ銀行のサイトの場合は素晴らしく洗練されていまして、リンク色の青がアクセントカラーになっています。私のサイトはテーマカラーが青なので、見出しに橙色を用いてアクセントカラーとしています。なお、Nightmareさんのサイトはテーマがグレーなので、アクセントカラーは何色を使ってもよいでしょう。

確かに内容の割にはメニューの数が多いと思います。コンテンツの内容等に関しては再考します。

単純にいって、キリ番のためにコンテンツを作るのはどうかと思います。絶対に発展しないわけですから。私なら、カウンター周りに少し余裕がありそうですから、そこにテキストリンクを張ります。

プロフィールも内容からみてアバウトの中に収めた方がむしろわかりやすいだろう、と。有名人のサイトの場合、プロフィールの中でひっそりと日記をつけている場合があり、それならば別コンテンツにする理由もわかるわけですが。[2002.01.25]

いがらしゆみこウォッチング

URI:http://page.freett.com/watcher/index.html [2002.01.26]

表示速度:

十分に速いです。すっきりとまとめられていますね。

視覚効果:

全体的にセンスよくまとめられています。文字色等、統一された基準にしたがって割り振られており、混乱がありません。渋い赤が画面を引き締めています。

気になる点をいくつか。

最初に表示される画面(ページ最上部)はいささか寂しい感じが。赤帯をページ上部にも用意してはいかがでしょうか。具体的にはページの説明部分を赤帯で挟むなどしてはいかがでしょうか。つまり上の帯には「『イガラシユミコ ウォッチング』とは」と文字を入れ、下の帯には「スレッドジャンル別目次」などとするわけです。また既読リンク色をもう少し濃くしてはいかがでしょうか。

操作性:

ナビゲーションは明解で、とくに問題は感じません。さらに操作性を向上させるには、スレッドジャンル別目次へ戻るリンクを設定してはどうでしょうか。▲などを用いて。

内容の充実:

資格探偵ホームズ

[2002.01.27]

表示速度:

シンプルな構成が貫かれており、どのページも軽く仕上がっています。

視覚効果:

大いに問題あり、です。かなり基礎的な部分で躓いていらっしゃるので、私もあえてつっこんだ意見は申しません。まずは次の3点を修正してください。

  1. 全ページに表紙と同じ背景画像を用いる
  2. 全ページのロゴを同色、同フォントにする
  3. 全ページのレイアウトをそろえる

まず1.ですが、どんな背景画像にしたらよいでしょうか。それを決めるためには、サイトのベースカラー、テーマカラー、アクセントカラーが決まっていなければなりません。

ベースカラー
ページの最大面積を占める基調色
テーマカラー
ページの印象を決める主張色
アクセントカラー
デザインを引き締める補助色

ベースカラーとテーマカラーが同じ、というデザインもあります。ここで最も重要なことは、一度この色と決めたなら、サイト内のどのページもこの3色でレイアウトしなければならないということです。サイトに統一感を持たせることは、Webデザインの基本中の基本と覚えておいてください。

背景画像の担当はテーマカラーまたはベースカラーです。現在、サイト内には数種類の背景画像、背景色が用いられていますが、ホームズ様はどれを選びますか?

次に2.のロゴですが、これはテーマカラーまたはアクセントカラーを担当します。私のサイトでは、テーマカラーの青とアクセントカラーの橙を見出しに用いていますが、これはどちらか片方でもよいのです。

最後に3.のレイアウト……これは修正が大変です。しかし絶対にやらなくてはなりません。修正のポイントは次の通りです。

全ページ同じレイアウト
表紙にテーブル中寄せを用いたのなら、全ページそうする必要があるということです。もし表紙テーブルの横幅が700pxなら、全ページをその幅のテーブルでレイアウトするのです。
全ページ同じ配色、同じフォント
表紙のテーブルの背景が白なら、どのページのテーブルの背景も白にするのです。文字の大きさも全ページでそろえるのです。現在のように掲示板だけ大きいなど話になりません。文字サイズが他のページと同様になる掲示板を探す努力が必要です。
全ページ同じナビゲーション
現在のサイトには、ナビゲーションが存在しません。リンクをクリックしたら、もう戻れません。「進む」リンクを張ったら、「戻る」リンクも設定しましょう。

ホームズ様はまず、ナビゲーションについて勉強なさってください。

続いて、そのナビゲーションを全ページで同じ位置に配置するように心がけてください。

以上、かなりの大工事になるかと思いますが、いずれも基礎的な内容ばかりですので、ぜひ頑張って取り組んでください。

操作性:

現状は、操作性について語る以前の状態です。

内容の充実:

少なくとも現状では、まずいです。人は情報のあるところに集まります。それなのに管理人が情報を募集しているようでは仕方ありません。雑誌を見ればおわかりの通り、募集情報など紙面の10%にも満たないのです。60%は自分で調べた記事で埋めているわけです。(30%は広告です)というわけで、当面は自分で調べて、どんどんニュースを更新していくようにしましょう。受験雑誌も毎号買って、新聞を隅から隅まで読んで、各方面の情報サイトを巡って、ニュースを更新するのです。

情報を募集するのは、サイトがずっと大きくなってからです。今はまだそのような時期ではありません。

掲示板がやたらと多いのも自滅の道です。お客さんの数に見合った掲示板にしなければなりません。アンケートも同様。さして投票もないのに2つも用意したところで意味がありません。

以上のアドバイスをもとに、表紙を修正してみました。添付ファイルをご覧ください。これだけでいいのかと、驚かれることと思います。そして、修正案のほうが使いやすいことにも驚かれるでしょう。シンプルなのが常によいとは申しませんが、まずはシンプルなところからはじめられるべきです。

補記:

リニューアルされたサイトを拝見いたしました。いろいろ気になる点はありますが、とりあえず措きます。ビルダー6.5をご利用になられているようですので、3点ほど留意点を。

  1. 標準モードを利用すること
  2. テーブルは(指定するなら)横幅のみ指定すること
  3. 見出しには見出し要素を使うこと

私の示した例は、単純に見えてじつはCSSを用いたり、見出し要素による正しいマークアップを行ったり、細かいところで相当こだわっています。ただしもちろん基礎的な技術しか用いていません。ホームズ様もぜひスキルを高めていただいて、私の示したサンプルのソースを「この程度のことか」と笑えるようになってください。

ビルダーを使えばHTMLに暗くてもサイトを作成できますが、やはり根本を知っていないとカッコいいものは作れません。参考2を読破されることをお奨めします。少しずつでも勉強していただければと思います。[2002.01.28]

補記2:

これについてですが、標準モードを利用しているのですが

じつはソースを見ていて気になったことがいくつか。テーブルがなぜか縦幅指定されていたりするわけです。基本的に縦は指定しなくてよいわけで、これは珍しい状況です。そこで調べてみると、どこでも配置モードの場合、縦幅の指定が自動的に行われやすいとのこと。そこで注意書きをしました。

これも横幅以外の指定をしているように見えますか?

ソースを見ますと、やはりあちこちで指定されてます。

見出し要素を使用しても機能的にも見栄えにも変わりはない

本来の理屈がまったく違うのですが、難しい話なので割愛します。見た目についていいますと、見出し要素を使うと前後が自動で改行され、非常に見やすくなります。

CSSとはなんでしょうか?

参考2を読破されることをお奨めします。

CSSは大物です。HTMLとデザインの基礎を学んでから、手を出せばよいと思います。上記のサイトにはすべての内容が、読みやすくコンパクトにまとめられています。ただしそれでも、勉強時間には最低20時間を見込んでください。誰でも最初は素人です。勉強する人だけが、進歩します。一緒に楽しく頑張っていきましょう。

追記:

添付ファイルは、現在のデザインをそのまま活かして見た目を改善したものです。参考になさってください。そのまま利用されてかまいません。[2002.01.30]

|||Pocketable Audio|||

[2002.01.28]

表示速度:

やはりロールオーバーの画像を読み込む一瞬の遅れが気になります。画像の先読みというテクニックを利用されるとよいかと思います。JavaScriptを利用してもよいのですが、もっと単純な方法が以下のページに紹介されています。

視覚効果:

非常にセンスよくまとまっています。見た瞬間、ああ、これはカッコいいな、と。強いていえば文字サイズでしょうか。「見出し等は固定でもいいけれど、本文は可変にするべきだ」という通説には、いろいろたしかな理由があります。たとえば今後ますます増えるであろう1600×1200といった超高精細モニターでUEZO様のサイトを見ると、文字がゴマ粒のようになります。モニターのサイズはそのままに解像度だけ上げている以上、当然の結果です。一考の余地はあるかと。

操作性:

ページの最上部のナビゲーションは明解ですし、そこへ戻る▲リンクが適切に配置された親切さには感心するばかり。よく考えられた模範的なナビゲーションですね。

内容の充実:

この項目は私自身の力を越えた意見になるので、読み流してください。

UEZO様のサイトは、サイト単体としてはよくできています。ほとんど文句のつけようがありません。しかし、サイトはふつう、存在するだけでは意味をなしません。閲覧者という要素を抜きには語れないのです。そこで「誰がUEZOさんのサイトを見るのか」という観点から見つめなおしますと、いろいろ疑問が出てくるわけです。正直なところ、UEZOさんのサイトは名刺代わりとしてはよくできていますが、他の使い途がよくわかりません。

たしかに扱っているツールはよいものなのでしょう。MP3のエンコードに関する説明も手際がいい。だったら誰かの役に立つんじゃないのかと思われるかもしれませんが、私はそうは思いません。人がそうした情報を求める場合、一体どのようにするか。検索エンジン、そしてVectorの探索でしょう。UEZO様のサイトは現在、その存在を世間に知らせる意欲に欠けています。検索エンジンにはそのうち載りますが、ごく一般的なキーワードで検索上位にくるのはいろいろ難しそうです。

おそらく、UEZOさんのサイトは、このままでは埋もれてしまうでしょう。それはそれでいいのかもしれませんが、私は少々残念に思ったので、お節介を申し上げました。

補記(2005-03-25)

み組

[2002.01.28]

表示速度/視覚効果/操作性:

略。このアドバイスは例外的な内容です。某所で書いた文章を一部書き直して再掲。

内容の充実:

アクセスが少なくて評価願いを出されたそうですが、私が見たところ、デザインをよくしてもアクセスは増えなさそうですね。と、いいますのは、デザインは一定レベルに達すればほとんどお客様の増減に影響しないからです。クロスブラウザを視野に入れよ、多環境への配慮を怠るな、文字サイズは非固定にせよ、などと私はアドバイスしていますが、別にそんなの直しても直さなくてもアクセス数は5%も変わりません。まあ、圧倒的に素晴らしいデザインにして、作品としてみてもらえるレベルになれば話は違うわけですが、私はそこまで対応していません。

結局、アクセス数に一番影響するのは内容(+運)なんですよ。

とにかく見たところそんなにひどいデザインのサイトではないです。何を直しても、それでアクセスが増えることはありませんね。アクセス目当てならあてが外れるでしょう。

そのうえテキストについて評価してください、と。それは私の手に余る仕事なのですが、あえてご依頼にこたえましょう。……ログを消しているのでなければ、現在読める内容でカウンターにあるとおりのアクセス数を得たわけですね。とすれば、それはむしろ幸運だったといえるでしょう。

「たろたま」のように大受けするには、最低限二つのポイントがあります。

  1. 具体的なエピソードをもとに書く
  2. 常識的な意見を書く

例えば最初期の「性の障害」などはそう書いているつもりなのでしょうが、実際はそうなっていない。話全体は抽象論であり、登場人物はデータを提供するだけで顔が見えてこない。

「その証拠に、彼らはとてもあたたかい。」

そんな結論にしたいなら、彼らのあたたかさをなぜ文中で描かないのか。最後にいきなり「あたたかい」と書いても何の具体性もない。とにかく、書きたいことを書きたいように書くのなら、アクセス数は現状維持で我慢してください。ただ、最近の文章はますます抽象的になりつつあり、現状維持の前途は険しそうです。頑張ってください。