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

Advice

摂薬サッカー部

URI:http://setsunan.hoops.livedoor.com/ [2002.01.30]

表示速度:

たしかに重いですね。おっしゃる通り、プロバイダがよくないようです。ただし無料だから遅いと短絡してはいけません。tripodやfc2webは、一般的にもう少し速いはずです。

なお、ページのデザインも重さに大きく影響しています。とくに表紙はデザインがページを重くしている主犯です。画像が多すぎます。全般に重いのは、「画像の使いまわしが少ない+画像が多い」ので、当然ではないでしょうか。

軽いページを作る基本は次の通り。

  1. 画像をできる限り減らす(テキストの装飾で可能な限り対応する)
  2. 動きのある要素をできる限り減らす
  3. どのページもデザインをそろえる
  4. HTMLを勉強し、すっきりしたソースを書く(難しい)

視覚効果:

女の私が作ったサイトなので、どうしても可愛い素材ばかり使ってしまい、サッカーとはかけ離れた雰囲気になってしまった

基本的にはそれでよいと思います。なぜなら本来こうしたサイトをまめに見て回るのは、選手よりもマネージャーなどの裏方さんが中心だからです。選手同士よりも、マネージャー同士の交流を目指す方向性は正しいと思います。(ただし現状はあまりそうしたサイトの特性を活かしていないようですが……。)

ただし、サイトの作成意図である「広報」のためには、トップページは硬派な紹介ページとした方がよいでしょう。そして目立つところに「マネージャーの部屋」へのリンクを用意するのです。

重要なアドバイスをいくつか。

サッカーページらしさをどう出すか? これは簡単です。表紙に使っているサッカーボールがカーソルについてくるJavaScriptを全ページに用意してください。同じ物を使うことがポイントです。そうすれば読み込み時間をほぼ0秒にできます。(一度読み込んだファイルはページ移動後もしばらくパソコンの中に保存されているのです)

ページの重さをどう解消するか。

  1. 背景画像を全ページでそろえる
  2. 小物画像も数を絞り全ページでそろえる
  3. 流れ文字(模様)をすべて止める
  4. フォントの種類の指定をすべて解除する
  5. 音楽を止める

とりあえずこのあたり、気をつけてみてください。

私なりの改善案を示します。(表紙のみ)

その他いろいろ気になることはないでもないですが、まずは重要なことから直していけばよいかと。ですから私の改善案も、全面的に作り直すのではなく、デザインを少し洗練させるにとどめています。

操作性:

悪くないと思います。ただ、表紙だけナビゲーションが違いますね。全ページでナビゲーションのつくりは同じにした方がよいです。

内容の充実:

もう世の中にはサイトがあふれていますので、サイトを作っただけでは何の広報にもなりません。まず自分が多くのサイトを回り、多くの方と仲良くなる努力が求められるようになってしまいました。

では一体誰にサイトを宣伝すればよいのでしょうか。他校の選手? 学内の今はサッカーに興味のない人? 女性? 男性? 相手が誰なのかによって、作るべきサイトの形が見えてきます。

逆に、和田谷様がどんなサイトを作れるのか、という観点から、逆に客層を決めていってもいいでしょう。かわいいサイトになってしまうというのは欠点ではないのです。その自分のセンスが通用する相手がどこにいるか、考えてみてください。

私は、他校のサッカー部のマネージャーがターゲットになるのではと思います。かわいいデザインを武器に、多くの人に摂南薬学のサッカー部を知ってもらえたらいいですね。

緑画舎

[2002.02.01]

表示速度:

まったく問題ありません。もともと画像の使用にストイックなデザインですから、おそらくSSI を心配されたのでしょう。しかしそれは杞憂のようです。

視覚効果:

そうとうよく勉強されたか、あるいはよほどセンスのある方とお見受けしました。初級Webデザインの鉄則を忠実に守っていらっしゃるので、安定した美しいデザインとなっています。素晴らしいです。

ご相談のあった文字の読みやすさですが、よく考えられていると感じました。本文と見出しはサイズを固定せず、デザイン上必要な部分(主にナビゲーション)のみサイズを固定する方針はよい効果を上げています。またページの左右に適切な余白を取っており、行間の設定もうまい。読みやすさへの配慮が行き届いています。

強いていえば、文字色はもう少し濃い方がよいかもしれません。a:hover の背景色もコントラストが弱いかもしれません。あるいは、赤系と緑系の組み合わせは色覚障害の方が最も区別に苦しむ配色であり、彩度を落としている現状では一面グレーにしか見えないといった指摘も可能には違いありません。しかしモノトーンでもナビゲーションに困らないデザインとなっていること、そしてその姿勢がサイト全体に浸透していることから考えて、とくに改善すべきこととはいえないでしょう。

なおソースを拝見したところ、外部CSSを導入される一方でHTML上の装飾も少し残っていることが気になりました。総点検はたいへんでしょうから、ときどき目に付く箇所から少しずつHTML上の装飾を排除していかれるとよいでしょう。サイトの内容からみて、おそらくブラウザが次世代に完全に切り替わって以降も、サイト運営を続けられることと拝察しました。先々のことを考えれば、<body> 要素に各種の属性を指定するといった方法は排除しておくべきです。事実、NN6.2では既に、互換モードに標準モードが大きく侵食してきています。IE もIE6 に至って、ついに標準モードの普及に大きく舵をきりました。装飾は外部CSSへ一本化する方向でご検討ください。

ソース関連でもう一点。「**="--"」と書くべきところが、ほとんど「””」抜けになっています。IE6標準モードではこれは危険です。いずれ互換モードは廃止されます。標準モードに対応した記述(正しい記述)に順次改めていってください。

最後にクロスブラウザについて。NN4.7、NN6.2で確認したところ、NN4.7で表紙に余計な線が出る他は、整然と表示されました。表示に問題はありません。背景画像の選択がうまいですね。

それで何が気になったのかと申しますと、「このサイトについて」の中で推奨環境を意外に厳しくとっているのは勿体無いと。実際にはフレームにさえ対応していればブラウザを選ばないサイトです。また画面サイズもVGAにまで対応しているわけです。こんな場合、むしろ対応環境の広さを誇るべきなのです。わざわざお客様を不安にさせる必要はどこにもありません。ブラウザも画面サイズも選ばないサイトなので安心して遊びにきてくださいね、と書いた方が印象はよくなり、またデザインの苦労も報われるだろうと思うのです。

私はこれまで「特定環境意外ではまったく読めない」「デザインがメチャメチャになる」といったサイトをたくさん見てきました。しかしそうした作り手の論理が優先されている状況はおかしいのです。

日暮様が一番きれいに見える環境について書きたい気持はわかるのですが、それが一部の閲覧者を排除することにつながるという意識はもっていただきたいと思います。いまではVGAを使う閲覧者は非常に少ないわけで、ならばなおのこと、わざわざVGAより大きな画面サイズを推奨する必要はありません。なぜならそこに広報としての意味はなく、ただマイノリティーを無意味に排除しているだけの言葉だからです。せっかく物理的には、ほぼ誰でも閲覧できるサイトを作成されたのです。精神的な障壁もできる限り低くして、本当のクロスブラウザ、多環境への対応を実現してほしいと思います。(註:VGA=640×480 かつての標準/テレビは現在もこのサイズ)

操作性:

最初に一点。diaryからMENUに戻れません。拡張子が.html になっています。.shtml に直せば大丈夫でしょう。

日暮様のサイトは操作性についても非常によく考えられています。初級レベルは卒業しています。

操作性向上の鉄則をすべて押さえた上で、フレーム内ページに検索エンジンから直接にやってこられた場合にも完璧に対応している凄まじさ。ここまで仕上げるにはたいへん苦労されたでしょう。脱帽ものです。

その上で、あえて申し上げるとすれば、日記のログには「先」と「前」のリンクを用意されるといいかもしれません。

内容の充実:

立派なものですね。あれもこれもとやっているので、最初、これは初心者にありがちな何でも形自己紹介サイトかと思ったのですが、失礼しました。たいへんなデータ量にくらくらするほどでした。それにしてもリンク切れのないことといったら! これだけ大規模に展開していることを考えると、まさに驚異的。

よろずサイトというのは運営が難しいところだろうと思います。でも運営していて一番楽しいのはそうしたサイトかもしれませんね。ここまで築き上げたサイト、今後一層の発展をお祈りします。

補記:

ご質問に回答いたします。

「HTML上の装飾」の範囲がどこまでなのか

この件ですが、

外部CSSを入れているHTMLページ本文内に <div style="margin-left:30pt">文章</div>

これはOKです。

<font size="2">文章</font> といったHTML記述

こちらは、なるべく避けるべきですね。

<body bgcolor="#ffffff" text="#78535B">
<TABLE border=0  cellpadding=5 cellspacing=2 >

などが気になる記述の代表格でしょうか。とくに<body>に添えた属性は深刻かもしれません。将来、リニューアルを考えた場合に、最もネックとなってくる部分かと思います。(「CSSによる指定が優先」という状況が続く限りはそれほど問題ではないかもしれませんが)

<table>の方では、cellspacing は仕方ないと思うのですが、その他はすべて外部CSSにおさめられます。テーブルによってpadding を変えているので、これを直すにはいちいちclass を指定していかなければならないのが、非常に面倒ではありますが。

以下はアドバイスについての私の返事です。

ありがとうございます。今後の参考とさせていただきます。

モノトーンでも大丈夫なようなのでよかったです。文字色、a:hover の背景色訪問済みリンクの色をもう少し検討してみます。

画像処理ソフトでモノトーンにしてみたのですが、そんなに問題は感じませんでした。たしかに色でリンクを表現するということに関していえば、ほとんどわからなくなってしまうのですが、ちゃんと明度差があったので、いったん覚えれば対処できました。またリンクの配置に一貫性があり、これも一度覚えれば迷うことはなさそうでした。たしかに色盲対策で、リンクに下線があればとは思います。しかしそれは、active の設定(青色下線付き)を hover に適用すれば、大部分、解決できるのではないでしょうか。

推奨環境を書くのは管理人の身勝手だとは分かっているものの

一般に可読環境と推奨環境が混同されているのが問題の根っこなんですよね。推奨はあくまでも推奨なのですが、多くの閲覧者がそれを可読環境と同様に考えてしまうわけです。

可読環境(最低ライン)を示した上で、確認(または推奨)環境を書くのがよいかもしれません。

本当は、ノーフレーム構成が一番人に優しいと思うのですが

日暮様のサイトの場合は、やはりフレームを使うべきサイトだと感じました。フレームなしでは実現できないレベルがあると思います。私が日本最高レベルのナビゲーションだと考えているUFJ銀行のサイトも、素晴らしいフレームの使い方をしています。

もちろん、可読環境を広げるという意味では、ノーフレーム構成が一番よいわけです。視覚障害の方が利用している音声読み上げ方式のブラウザなどとの相性を考えれば。

けれどもやはりフレームは便利なんですよね。私のサイトでは、Windows+IE5以上の方はいろいろCSSを選べますが、その中にwin+IE5専用のCSSを2つ用意してあります。じつはその2つともが擬似フレームでして、私はいつもそのどちらかを使っています。何せ閲覧が楽なんです。目次がいつも画面内にありますから。更新のたびに全部のCSSで不具合を確認しますが、擬似フレーム以外で閲覧されてる方には何となく申し訳なくなります。やはりフレームなしでは読みにくいんですね。縦長のページが嫌われる理由をつくづく実感してげんなりします。

重さをチェックして欲しかった理由としてはSSI というよりフレームを多用していたためです。

Windows98が問題なく動く環境の場合、フレームだから重いということにはなりません。かつてWindows95が全盛だった時代には、フレームの処理だけでCPUが悲鳴をあげていたのですけれども、今では演算処理の問題でフレームが重くなる場合は、ほとんどなくなったといってよいでしょう。

現在いわれるフレームの重さというのは、要するに複数ファイルを同時にダウンロードするので、単純に通信時間が長くなるだろうというものです。でもそれはヘンですよね。肝腎なのはファイル数などではなく、個々のファイルの大きさなのです。日暮様のサイトはほとんど画像がなく、しかも詰め込みすぎたテキストページもありません。したがって、重くなるはずもないというわけです。[2002.02.02]

余録:九州男児誇大文明

URI:http://www5d.biglobe.ne.jp/~kodaibun/ [2002.01.04]

表示速度:

「十分に早いといえます」

贅肉を落としたシンプルなデザインのため、読込速度は非常に速くなっています。またトップページに最新の日記があることもReadMe参加型テキストサイトとして正しい方向性。

視覚効果:

「インパクトに弱いことは否めません」

中心となる色がはっきりしないことがインパクト不足の最大の原因でしょう。白いサイトというにはオレンジが気になり、白とオレンジというには紫が気になるといった具合です。フレームの切り方は非常に手堅く、問題のないものですが、デザインとしてうまく活用できていないように思います。

fc2webのサイトをデザイン改訂の例としてあげさせていただきます。

操作性:

「手堅いナビゲーションですが一部不具合もあります」

お客様はトップページからくるものだと決め付けていませんか? 私が友人のサイトでアクセス解析したデータによれば、お客様の数%はトップページ以外に最初に訪問しています。たとえば小林よしのり「戦争論2」が今夏発売されましたよね。友人は早速、その書評を日記に書きました。検索エンジンに引っかかったのは、日記のログの中の「戦争論2」という単語でした。検索エンジンから来た方は、最初に日記のログを読んだわけです。こういうことはしばしばあります。ですから、フレームの内部のページにも、「トップへ戻る」を入れるべきだと思います。

内容の充実:

「サイトの方向性次第です」

個人サイトを運営する目的は、極言すれば最終的には自己満足です。問題なのは、何が達成されたら満足できるか。最もありがちな目標はアクセスアップです。過去の私文にアクセス伸び悩みに関する文章がありましたので、少しだけアドバイスさせていただきます。

まず現実として知っておいていただきたい数字があります。ReadMeアクセス(RA)の合計は100万強です。上位0.5%のサイトが、全アクセスの半分、50万RAを握っています。さらに上位50%のサイトが97%のRAを独占しておりますから、うぐいすさんのサイトは残り3%の奪い合いをしていることになります。つまりほとんどのサイトはアクセスを得られないのが現実だということです。

私が読んだ感じでは、うぐいすさんのサイトの文章は決してつまらなくはなく、むしろ好感が持てます。けれども、ここでしか読めないといった感じはしません。最近、あちこちでいわれているように、キャラの確立が足りないのではないでしょうか。

サイト開設1年3ヶ月で2万ヒット達成のサイトを示します。

ほのぼの系のボケキャラを定着させ、地道に客層を広げてきたサイトです。派手な成功はともかく、サイトを運営していて楽しい程度のアクセスは、努力次第で可能だろうと思います。

いろいろ書いてみましたが、正直、アクセス狙いはつらいと思います。うぐいすさんに才能がないという意味ではなくて、大手サイトさんがサイト運営を「義務感」でやっている現状を見る限り、趣味は趣味らしくやっていくほうがよいと思うのです。つまり、何か目的を探さないほうがよいだろうと。趣味で油絵を描く人の少なからずが、自分の絵を他人に見せたがりません。サイト運営もそれくらいに自己完結していると、長く続きます。日記をつけるようなサイト運営が気楽なのです。(かといって閲覧者の存在をまったく気にしないサイト運営も、かえって続かないようです……難しい)

常連様さえいれば低アクセスでも案外、楽しくやっていけます。常連さまの作り方なのですが、個人サイトをいろいろ巡り歩いてみてください。いいなあと思ったら掲示板に書き込みをしてみるとよいでしょう。100くらい書き込みをしてまわるうちに、相思相愛というか、フィーリングがばっちりあうサイトも自然とみつかるものです。がっついて宣伝をするというのではなく、メル友を増やすつもりでいい人を探してください。

アクセスアップ参考サイト
一般論
参考3
もっと読みたい場合には
参考4

補記:

メールにてアドバイスを送付した際に、掲載に問題があれば連絡をくださいと頼んでいたのですが……。その後音沙汰が無いので、掲載させていただきました。[2002.02.02]

余録:アドバイス補遺2(匿名)

[2002.01.04]

Webデザインには制約が多い:

企業サイトでページ全体に背景画像を用いるのは危険です。Web製作会社が関わったページではふつう、全面サイズの「背景」画像は採用されません。企業サイトのデザインに素人が口を出すとき、最もありがちな間違いが出版デザインとの混同です。Webデザインには制約が多いのです。出版物のように自由なデザインはできません。まずそれを知らなければなりません。

Webは容量制限のある世界です。インパクトのある画像やイラストを画面いっぱいに展開するなど、夢のまた夢と心得なければなりません。同様に、すべてのテキストを画像処理することも非現実的です。

Webは横書きの世界です。したがって、左から右、上から下、という流れがはっきりと存在します。ですから目次を縦書きにしたり、ページの右側から順番に重要なコンテンツを並べてはいけません。

Webは製作者側が閲覧環境を選べない世界です。雑誌ならば、誰もが同じ縦横比で印刷されたページを読みます。文字サイズも固定です。ところがWebページは違います。閲覧環境が一人一人違うことを前提にしなければなりません。例えば「800×600以外ではきれいに見れないページ」ではまずいということです。

以上3点が、最低限押さえておくべきポイントです。Webページを作成できるということと、デザインができるということとは全く別問題です。多くのWeb製作会社がデザイナーとプログラマーを別々に用意しているのは示唆的です。[2002.02.02]

フレーム作成時の留意点:

フレームの基本は、%でサイズを指定しないことです。

フレームはたいてい、ナビゲーション部分と表示部分に分かれます。ナビゲーション側の幅を固定し、表示側は残りを使うようにします。

<FRAMESET rows="40,*">
  <FRAME src="frame.htm">
  <FRAME src="hiroba.htm" name="down">
</FRAMESET>

上記の例では、上側のフレーム幅は40px固定で、下側のフレームだけが画面サイズによって変化します。当然、ナビゲーションが上側フレームになります。

なお、多くの企業サイトでナビゲーションに画像を使っているのは、文字サイズはブラウザ側で変えられても、画像は大きさが少しも変わらないからです。ですからフレーム幅を一定にする場合、その中に入れるナビゲーションは画像を使いますと、誰が見てもきれいに表示されることになります。[2002.02.03]

余録:アドバイス補遺3(匿名)

[2002.01.06]

表示速度:

「十分に速いのですが……」

参考1というサイトに参考2のような項目があり、しかも黒星マーク5つと最悪の評価がつけられているとおり、ページが読み込まれると同時にmidiが鳴り出すのは行儀がよろしくありません。場合によっては音楽をつけないという選択もありえます。その場合、表示速度が多少速くなることは確実です。

視覚効果:

「テーマカラーがなく統一感がありません」

初心者向けアドバイスの定番ですが、ある程度センスが磨かれるまでは、背景色や壁紙を全ページで統一すると見栄えがよくなります。あわせて文字色、文字サイズも統一した基準で決めていきます。単調と思われるでしょうが、Webページ製作には大いなる「繰り返しのリズム」が重要なポイントなのです。

繰り返しがテーマカラーをはっきりさせ、サイトの印象を鮮明にします。できることならトップページ一枚で、鮮烈な印象を与えたいところですが、それにはセンスを磨く努力と時間が必要です。勉強する手間もかかります。とりあえず楽しくサイト運営をしていく中で、大きな苦労をせずにできることからはじめてみませんか。

印象に残らないサイトは廃れがちです。内容がよほど素晴らしければ見た目は問題になりませんが、それは逆に見た目だけで人をひきつけるのと同様に実現困難なことです。たいていのサイトはそこそこの内容と今ひとつのデザインです。デザインにはもう少し発展の余地があることが多いのです。***様のサイトも同様だと思います。デザインをもう少し、改善していってください。

気になった点をさらにいくつか。

全体的には左寄せでデザインされていますが、各所にセンタリングが顔を出しています。場合によってはそれも「あり」なのですが、かえってデザインを壊している箇所が少なくありません。見出しなどは本文にあわせて左寄せにした方がよいと思います。

文字が基本的に太字になっていますが、私は読みにくいと思います。せめてフォントを指定されているのであれば確信犯なのですが……。環境によって標準のフォントは異なります。MS Pゴシックは比較的、太字でも読めますが、MS P明朝などではかなり読みづらくなってきます。太字はあくまでもアクセントに使ってください。

「雑記」「動物達ではサイト内移動のナビゲーションバーがテーブルで作られていますが、横幅が広過ぎて横方向にスクロールバーが出ています。縦のスクロールはみながなれていますが、横のスクロールはとまどいます。

操作性:

単純明快なナビゲーションはもちろん重要ですが、何より大切なのは、ナビゲーションに統一性があることです。ページごとに用意されるナビゲーションが違えば、閲覧者は混乱します。デザインの統一とあわせて、ナビゲーションの統一も進めていってください。私の友人のサイトを例にあげますね。

内容の充実:

「サイトの方向性次第です」

ここまでいろいろ書いてきましたが、実際のところ、自己紹介、自分史、自分の備忘録としてのサイト運営であれば、現状維持で何も問題ないと私は思います。個人サイトには情報発信系と内部充足系の二方向があり、それぞれサイト運営の思想が違います。

私は見知らぬ人に「見せる」ことを前提にデザインやら操作性やらを批評しているわけなのですが、サイト運営がそういうものでなければならない理由はどこにもありません。私はここで内容の充実について語ろうというわけですが、数サイトを批評しただけでも一番困るのがこの項目です。サイトの方向性がどうなのかによって、評価は全く違ってしまうからです。

「***」が情報発信系のサイトならば、「正直なところ「動物達」は無用のコンテンツです。そして、***での生活について、もっと体系的に、網羅的に、役に立つように書かなければ、多くの人に読んではもらえないでしょう。」といった厳しい評価になります。

けれども内部充足系のサイトならば現状で全く問題ないといえます。日々の生活を切り取りスクラップしていった、自分史サイトとしてみた場合には、サイトの運営期間と情報量を見比べれば十分に目的を達しているといえます。

内部充足系のサイトを楽しく運営するコツは、ネット友達をなるべく多く作ることです。情報発信は難しいにせよ、誰もこないサイトを運営しつづけるのは困難です。ネット友達はお互いにサイト持ちだといいかもしれません。お互いに励ましあいながら、自分史をゆっくりと積み上げていくことができるからです。

本来、日記は自分のためだけにひっそりとつけるものでした。個人サイト運営は、公開で日記をつけるようなものです。ただし注意しなければいけないのは、インターネットは世界に開かれたメディアだというのは、半分ウソだということです。ほとんどの場合、実社会がそうであるように、世の中に数十億人も人間はいるというのに、自分に関心を持ってくれるのは、わずか数人の友人と家族だけなのです。ネット上で何を書いても、興味を傾けてくれるのは、限られた数の人だけだということです。

けれども、そうだからこそいいという面もあるのです。個人サイトは出版物ではなく日記だと書きました。本を出す苦労は***様もよくご存知のとおりです。情報発信系のサイトは毎日たいへんです。取材、執筆の苦労はいうまでもなく、サイトのデザインから掲示板やメールへの対応に至るまで、何から何まで「お客様のため」という思想がついてまわります。

本当にそういうことがしたい人がどれほどいるでしょうか。

何かを書くからには注目を浴びたい、大勢の人に読んでほしいという思いはあるものです。ましてや世界とつながるインターネットで公開しようというのですから。けれども、それはほとんどの場合、「自分が書きたいことを書きたいように書く」限りは実現できないことなのです。

「(友達以外の人は)誰もあなたに興味を持ってはいない」ネットの現実を端的に言い表した言葉だろうと思います。

現状をみる限り、「***」は情報発信系としてはやっていけない内容です。しかしネット友達と交流して楽しむ、内部充足系のサイトとしては、立派なものです。私はだいぶデザイン等について述べましたが、友人の輪を広げる予定がないのであれば、とくに気にする必要はありません。逆に、今よりはもう少し多くの方に見てほしい(=友人を増やしたい)ということであれば、参考にしてみてください。おしゃれな人、気のきく人のまわりに、人は集まるものです。

追記:端的にいって、最も人を集められるのは情報を持っている人です。友人・知人のことだから知りたい、ではなく、誰でも知りたい、そんな情報をもっている人が一番多くの人を集めます。でもそういった人になるのは難しいのです。数人の友人を楽しませることと、見知らぬ百人の聴衆を楽しませることとの間には、大きな開きがあります。