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

Advice

徳保隆夫の発言集19

私は方々のサイト批評掲示板でいろいろ書き飛ばしています。その一部を収録。新旧いろいろ入り混じっています。場所もいろいろ。

ホシノシティ

[2002.06.02]

デザインの不統一を排除しよう

マークアップはメモ帳などのエディタかタグ挿入型エディタをご利用になっていらっしゃるのでしょうか? もしそうでしたら、将来的にはテーブルによるレイアウトをやめて、全面的にCSSによる装飾を行う方向で検討されるとよいのではないでしょうか。最初は「またお勉強するのか」ということでがっくりくるかもしれませんが、結局は何をするにも楽になって得することと思います。

お勉強に向いているサイト:

さて、現在はCSSをスクロールバーの色変更とリンクの下線消去のためだけに利用されているわけですが、たったそれだけの記述でも、ページによってスクロールバーの色が変わるという状況になっていますね。各ページにいちいちCSSを書いていると、そういうことになってしまいます。やはり外部CSSファイルを利用されるべきでしょう。

<LINK rel=stylesheet href="星野浅香.css" type="text/css">
せっかく上記のように外部CSSファイル読み出しの一行を付け加えているわけですから、星野浅香.css(このファイル名はまずいと思います/半角英数字のファイル名に変えましょう)の中にCSSの記述を全部入れてしまいましょう。

サイトのデザインは、相当程度まで統一しておくと洗練された印象になります。外部CSSファイルには、せっかくですからスクロールバーの色変更とリンクの下線消去だけでなく、文字色、リンク職各種、背景色、背景画像の指定をするとよいでしょう。ただしここで注意するべきことは、CSSで設定したものはHTML側では設定しないことです。CSSとHTMLとで異なる指定をした場合、優先されるのはHTML側の設定(であることが多い)です。ですから、CSSで背景色や文字色を設定した場合には、HTMLで記述されているそれらの指定を消しておく必要があります。面倒といえばそうですが、いったんこうしてHTML側の装飾を排除してしまえば、今後は外部CSSファイルをいじるだけで全ページの背景や文字色などを変更できるわけです。また、背景や文字色などの不統一もすべてなくなります。

行き止まりを作らないように

他のページへ移動するリンクがないページは作らないようにしましょう。閲覧者は困ってしまいます。サイト内移動の結果としてたどり着いたページなら、ブラウザの「戻る」ボタンで移動できますが、例えば検索エンジン経由で直接そのページにアクセスした人はどうしたらよいのでしょうか? URIを適当に短くすれば表紙にたどり着けるだろうという「読み」はありますが、そんな面倒なことをしてくれる人がそうそういるとも思われません。やはり表紙と一階層上のページへのリンクは用意しておくべきです。

CSSのお勉強の進め方について

font要素、center要素、b要素がお勧めできないという意見が出ていますが、なぜなのか、についてはよくわからないだろうと思います。使うなといわれたって、じゃあ文字サイズを大きくしたりしたいときはどうすればいいの? と疑問に思われるでしょう。その答えをここにずらずら書くことは差し控えますが(ご希望とあればメールにて)、その代わりにひとつお話を。

私のサイトは訪問者の好みに合わせてデザインを変えられるようにしていますが、「いったいどうやったらそんなことができるのだろう?」と疑問に思ったことはありませんか。じつは私のサイトでは装飾をすべて外部CSSファイルから行っています。なので読み込む外部CSSファイルをJavaScriptで選ぶことでデザインを変えられるのです。もしfont要素で見出しに文字色「黄色」を指定していたなら、どのCSSによるデザインでも見出しは黄色になってしまいます。デザインに制限ができてしまうわけですね。それではつまらない。だからfont要素はよろしくないといえます。ここで省略した部分も含め詳しくは拙文をご覧いただけるとありがたいです。

じゅうまんぼると

[2002.06.02]

デザインの統一を

すっきりきれいに、そしてていねいに作られていて、いいデザインのサイトですね。ただ、背景画像を統一されたのに合わせて、基本的なデザインも統一なさったらよろしいのではないでしょうか。掲示板は現在そうされているように背景画像をそろえる以上のことはできないとしても、自己紹介などいくつかの自作(という表現が適切かどうかはともかく)のページは改善可能です。具体的には、表紙と同様に表の中に文章を入れるデザインを採用してその背景色を白に設定なさるとよいでしょう。

その後

基本的には以前と同じアドバイスをしたいですね。全体としてはいいんじゃないかと思います。

タグがわからないということですが、それはそれでよいのではないですか。ただ、知らなくて損していることはあります。ありますけれども、現在よりよいサイトを作れるまで勉強するのはたいへんです。私が思うに、10年後も問題なく見られるサイトを作りたいのであれば、勉強なさった方がよろしいかと。今年、来年、再来年くらいまで普通に見えていればいいや、ということなら、サイトの運営に集中なさればよいと思います。

掲示板は減らすべきなのか?

掲示板を減らそうという意見が出ていますが、ひかるピカ1号さんのサイトは掲示板が最大のコンテンツという「コミュニティーサイトのミニバージョン」なので、掲示板の数を安易に減らすとまずいと思います。各掲示板ごとに常連さんがいるので。あちこち顔を出す人も少なくないのですが、あまりそこに目を奪われないほうがいいのではないでしょうか。[02.07.06]

くりすたる〜む

[2002.06.02]

FrontPage 4.0というハンデ

FrontPage 4.0というハンデを考えますと、ソースがどうこうということはいっても仕方ないような気がします。なお、lintのオンライン版によれば30点ということになっています。マイナスではありません。多くの素人手書きよりはずっとよい点数です。また減点箇所をよく見れば、画像への代替文字の指定が最大要因であり、続いてテーブルへの高さ指定、そしてサーバー側で自動挿入される広告と文書型宣言欠落などが続くものの、ほとんどの減点は第一要因にあることが明白です。したがって、ソースの記述は文法的にはそんなにおかしくないんです。

無駄を削ぎ落とす

サイトの構造、レイアウト、色使い、いずれも無駄が多いことが気になります。無駄を削ぎ落としていくことで、かなり洗練されてくることでしょう。

構造の無駄

構造の無駄とは例えば、表紙のメニューに掲示板やチャットなどの交流コンテンツを5つも並べていながら、ゲーム攻略の小目次を開くとそこにも専用の掲示板があるといったことです。表紙はサイトの一番のアピールポイントなのに、まるで掲示板ばかりのサイトに見えてしまいます。しかも掲示板の置き方も適当であり、じつに無駄が多いといえます。掲示板が多いと、チェックするのもレスをつけるのも面倒です。人気も分散され、掲示板に閑古鳥がなく原因ともなります。

逆にメインコンテンツの小目次は階層を上げて表紙に移動してしまう方がよいでしょう。「ゲーム」をクリックするとゲームの一覧が出ますが、ゲームの一覧を表紙においてはどうですか、ということです。ほとんどの閲覧者がゲームに興味があるのだとしたら、閲覧者にわざわざ「ゲーム」をクリックさせるのはよくありません。最初から小目次の内容を表紙に表示しておくべきなのです。

単にメニューを減らせばよいのというのではなく、何を目立たせるか、何をアピールしていくか、という考え方が大切ではないでしょうか。とにかく現状では掲示板が一番アピールされています。それでよいのでしょうか。(よいのなら、じつはそれなりに成功しています)

レイアウトの無駄

レイアウトの無駄とは例えば、エンターページの縦長なことなどは特筆に価します。エンターページなどというのは読み飛ばされることがわかりきっているわけで、なるべく1画面に収まるように留意すべきです。また、いったんスクロールして下まで読んだ人が、また上に戻らなければサイトに入れないというのは不都合ですよね。画面の下の方にもサイトに入るリンクを用意するべきでしょう。しかしそもそも1ページでおさまっていれば不要なのですから、すべてはレイアウトの無駄に責任があるといえましょう。

色使いの無駄

色使いの無駄とは例えば、未読リンク色を緑、既読リンク色を青、選択されたリンク色を薄赤にした結果、「リンク」の色彩イメージが分散されてしまっていることなどが典型的でしょう。未読リンクを緑色にしたのなら、既読リンクはせめて青緑にするべきでした。できれば濃緑などが望ましいでしょう。リンクは緑系の配色と決めてしまえば、背景色に緑系を用いないと決めることができ、同様に文字色を黒にしたのなら背景色は薄い色に決められる(素人はそうやって単純に決めないと失敗しやすい)はずです。

何となく気に入った色を配置してしまうからバラバラの配色になり、しかも十分な効果をあげられないのです。「○○は××色にする。したがって△△は□□色にすればよい」というように理屈で色を決めてしまってください。そして配色はサイト内で統一しましょう。それだけのことで色使いの無駄は激減します。

また、サイトのデザインを「修正」するのではなく、全面リニューアルをお考えでしたら、テーマカラー、ベースカラー、アクセントカラーの3色でサイトを構成するという考え方を勉強されるとよいかと思います。くわしくはアドバイスNo.11をご覧ください。「補記」で取り扱っております。

補記:

Front Page 4.0 が画像に代替文字を指定できないという話は聞いたことがありません。きっとできるのでしょう。だから、代替文字の指定がされていないために大減点を喰らっているのはソフトが悪いのではなくて、使い方を十分に理解していない利用者の問題なのではないかと思います。

ただ、私が「仕方ない」というのは、HTMLのお勉強というのは段階を踏む必要があるので、いきなりalt属性を記述せよとか非推奨の要素がどうのこうのといっても、意味がないということです。center要素が使われているのは、単にソフトで中寄せを指示したらソフトがソースにそう記述したに過ぎないのであって、利用者はそもそもcenter要素の存在どころか、開始タグと終了タグによって要素を明示するというHTMLの仕組みすら知らなかったりするわけです。サイトの様子を見て、画像の代替文字は入れたほうがいいと私は感じました。だからそのことは申し上げたのですが、ではどうやるのかについてはソフトのHelpで調べていただけきたいというのが私の意図です。もともと手書きでやっていらっしゃる方なら、既に一定の知識があるでしょうから、img要素にalt属性は必ず記述しなければならないんですよ、とお教えすればよいわけですが、相手がFront Page 4.0 をご利用になっていると知りながら、HTMLの解説をするのはどうかと思うのです。

いずれにしてもHTMLについて勉強しない場合、高級なソフトでサイトを作成すればlintでプラスの得点はほぼ確保できますが100点を取るのは逆に困難ですし、StrictなHTML+CSSによるサイト作成は、まず無理です。しかし勉強無しで手書きは不可能ですし、にわか勉強で手書きの場合もlintでマイナスの得点になるのがふつうです。HTMLの勉強はいずれするべきですが、よくわかってくるまではソフトで何でもやっておくほうが文法的には無難です。Front Page 4.0 は多機能なソフトです。当面はいろいろな機能を探っていくのがよいと私は思います。文法上の問題も、ほとんどそれで解決できます。

Peridot Dream-幼稚園情報-

[2002.06.04]

本当の初心者が相手なら

本当の初心者を相手にするのなら、推奨環境なんて記述するのは無意味です。自分の使ってるブラウザの名前はもちろん、そもそもブラウザという言葉さえも知らない人が案外いるものです。

余計な情報はページの隅っこに小さく書いておけばよいでしょう。そもそも推奨環境が書かれていたところで幸せになれる人はいないわけで、所詮は製作者の「言い訳」に過ぎません。

サイトの表紙にどーんと載せるべきなのは、入園費用比較表でしょう。

GANBYA!!

[2002.06.05]

アドバイス

ふつう、Enterという文字があればリンクになっているんだろうなと思いますでしょう。しかも文字色まで変えてあるわけで。けれども実際にはサイトに入るリンクはその上の画像「だけ」に用意されている。これは不便だと思いました。

なお、開きすぎている余白の改善策として、内容を囲む枠の幅を狭くし、中央に配置することでバランスを取ってみてはいかがでしょうか。