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

Advice

徳保隆夫の発言集17

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

-SSP- Shining Star Plus

[2002.05.25]

カッコいいですね〜

カッコよくなっていますね〜。軽量化も成功しています。あとは全ページを同様のデザインに統一されたらよいのではないでしょうか。

JavaScriptとJavaは異なります

隠しコメントの中でJavaScriptをJavaと呼んでいる部分があるのですが、両者は全然違うものです。JavaScriptを略すなら、JSの方がbetterです。

画像には代替文字を指定しよう

文法的な間違いは少ないのですが、HPBでサイトを作成する場合、ふつうにやっていると抜け落ちてしまうのが画像への代替文字の指定。HPBのHELPのキーワード検索で「画像に説明を付ける」を入力してください。やり方が出ます。ここを直せば「Another HTML-lint」で50点に到達するかも。ぜひ頑張ってほしいと思います。

なお、代替文字はあくまでも画像が表示されない場合に表示されるものです。タイトル画像だからタイトルに決まっている、というのは、画像が表示されればそうでしょうけれども……。また、添えられたテキストと同じ内容なので代替文字をていねいに指定すると帰って情報が煩雑になるという場合には、「alt=""」でよいのではないでしょうか。なお、マウスオーバーに対してポップアップ形式でalt属性の内容が表示されるのは、一部の視覚系ブラウザの勝手な挙動です。本来それはtitle属性の役割で、実際に、仕様に忠実なNN6.2などではalt属性の内容をポップアップ表示することはありません。WinIEも次第にそうなっていくでしょう。

外部CSSファイル読込に関するバグ情報

外部CSSファイル読込に関するバグ情報については、「注意点,ブラウザ振り分け」が詳しいのでご覧ください。記載されている大量の情報を読み解くと、各種属性などを指定せず、手抜きの記述をすればほとんどのブラウザで問題が生じないことがわかります。(無論、手抜きゆえに本質的な問題が生じるのですが、ふつうはそれで困ることはないでしょう)

おさかなプロジェクト

現・しーさいど☆ぱられる [2002.06.01]

いくつかのアドバイス

色指定の記述を囲む「""」はHTMLでは必要ですが、CSSでは逆に「なし」が正解。

メニューは整理し階層を明示すべきです。23(26)項目の並列表記は理不尽です。

表紙のデザインに凝るのは構いませんが、各コンテンツのデザインと乖離してはいけません。背景画像が色違いの共通柄で、フォントもそろえていますからデザインの統一性は十分ではありますが、せっかくならもう少しレイアウトの共通項も取り入れておくとよいでしょう。

内容のあるサイトなので、情報を整理して、何をどう伝えていくかについて再考されると、かなりよくなるのではないでしょうか。メニューの再構築やレイアウトの改善は、見た目よりもまず「何をしたいのか」が重要です。正しいHTML記述は、もととなるテキストが何をしたくて記述されたものかを明示するものですが、実際のサイト製作の場面では正しいHTMLの仕様(または勧告)に関する知識が逆に「どのようなテキストを用意したらよいか」考える指針を与えてくれます。

HTMLの記述とテキストの内容(論理構造/構成)は対応します。したがってあおいさんのサイトの表紙は妙なマークアップがなされており論理構造が不明瞭ですから、もとのテキストも同様の問題を抱えていると推測できます。情報の整理に行き詰まったら、理屈の通ったマークアップができるようなテキストを逆に考えていくという手が使えますので、よろしかったらどうぞ。[02.05.25]

ともに謙虚に学んでいきましょう

あおいさんがよく勉強なさっているのは素晴らしいことですが、まだまだ付け焼刃である現状をよく認識されていらっしゃらないことに危惧を感じます。くしくも飛翼さんは「lintで点が取れればいい方式のマークアップ」と評されていますが、あおいさんはlintの罠に陥っていると思います。lintはマークアップに用いられたタグの記述と、明示された要素の順番と入れ子構造しか見ていません。それらよりよほど重要な「内容とマークアップの対応」や、「トータルデザインの一環としてのマークアップ」については、ほとんどチェックすることができないのです。つまり私が何を申し上げたいか……どうかお察しください。

ところで私は、文法的なミスをメインにサイトを「鑑定」することにはそもそも否定的です。鑑定依頼の内容を鑑みて、「依頼人に受けのよさそうな話題に絞って」文法的なことを意見したいと考えています。一気にあれもこれもというわけにはいかないわけですから、最初は依頼人に具体的な利益のある部分、依頼人が興味を持っている部分から、新しい世界への一歩を踏み出していただければいいだろう、と。

今回、あおいさんにぜひ勉強してほしいのが「外部CSSファイルの利用」です。もし「表紙だけ特別なリンク色にしたい」のなら、ページ内にCSSの記述をしても構わないでしょう。しかしあおいさんはもし今回のリンク色がOKであれば全ページに同じリンク色を適用なさりたいとのこと。数十もファイルのあるサイトです。全ページのCSS記述を書き換えるのはうんざりですよね。こんな場合、外部CSSを導入して1つのCSSファイルで全ページのデザインを制御するようにしていると非常に便利です。(私がかねて指摘していた表紙とコンテンツとのデザインの乖離が強制的に制限され、サイトの統一感が強固になる、というおまけの効果もあります)

なお肝腎のリンク色ですけれども、地の文にも一部で青を利用していることなどを考えると、あまりよろしくありません。表紙のリンクは最も重要なナビゲーションなのですから、リンクを目立たせる工夫が必要でしょう。下線を復活させるわけにはいかないのでしょうか……。私のサイトでは例えば、全体が青系で統一されているのでリンクは逆に補色のオレンジに設定(for_me.cssの場合)してあります。しかも下線付きです。[02.06.01]

言葉遣いは慎重に

しかも、今はリンク色のみであって全体を鑑定しろとは言ってません。」ではなく「リンク色についてご意見をいただきたかったのですが……他の話題に埋もれてしまって残念です」などとやわらかい表現を心がけて、無用のトラブルを回避しましょう。売り言葉を買ってはいけません。

なお、これはCSS解説サイトの罪なのですが、CSSは「絶対に外部CSSの形で使用せよ」と強くいわないのはおかしいと思います。みんな勉強が進めば結局は外部CSSを導入するわけです。しかも説明は外部CSSに絞った方がずっとすっきりして簡単なんですよね。CSSは「HTMLよりずっと記述が楽」というのも外部CSSを導入していればこその話。CSS解説サイト関係者には猛省を促したいところです。[02.06.01]

その後

HTML4.01Strictへ移行されたわけですが

StrictはTransitionalと比較して理屈にかなっているため、いくつか規制が厳しくなっています。とりあえず表紙についていえば、lint的には以下の問題点があります。文書型宣言にStrictを使うことは可能でしょう。

ただし、以前にも申し上げたように思いますが、リストはリストとしてマークアップするべきですし、単に見た目を調節するためだけにbr要素を用いるのは本末転倒です。文法違反ではないかもしれませんが、あおいさんのマークアップには理解し難い部分が多々あります。リストにするとあの「点」が入ってしまって邪魔だとか、勝手にインデントされてしまうのが気に食わないとか、いろいろご意見はあるでしょうけれども、実際、そのあたりはCSSで全部どうにかできます。

私の結論は、たしかに文法チェッカのレベルではStrictの文書型宣言をしても不正ではないが、本質的には仕様そっちのけになっており、Strict宣言は必ずしもおすすめはできない、となります。[02.06.17]

明星

[2002.06.02]

表示速度:

広告が画面の下の方にありますけれども、規約では画面の最上部に表示しなければなりません。ガイドラインをご覧ください。

メニューをわかりやすく

メニューがわかりにくいのは、メニュー周辺が一見、バナー広告のように見えてしまうことによるのではないでしょうか。例えばメニューと他サイトへのリンク画像をテーブルに入れず、単純に横一列に並べるといったシンプルな表示にすれば、問題は解決します。またメニューの文字を少し大きくしたり、各項目の間を少し広げるのも効果的かもしれません。

蛇足のページ

さて、「Welcome」というページがありますが、蛇足としかいいようがありません。ないほうがよいと思います。無断転載禁止と書かなくても無断転載は著作権の侵害です。荒らし禁止と書かなくても「荒らし」はいけないに決まっています。企業の公認サイトではないこともまた書く必要のないことです。せめて文章を改める(補記)か、あるいは削除されることをおすすめします。ここはポケ&デジのファンサイトですというだけなら、表紙に書くほうが親切でしょう。

補記:改善案

1.当サイトでは荒し行為を禁じます。また当サイトの内容を無断で転載することも禁じます。
2.当サイトは企業とは無関係の非公認「ポケ&デジ」ファンサイトです。ときどき他のジャンルも扱います。

ポケモン100%

URI:http://www.border.jp/poke100/ [2002.06.02]

気になったことをいろいろと

画像なんですが、AirH"32kで閲覧している私は重たく感じました。表紙の画像はそれでもたった25KBですから、まあいいんじゃないかと思います。

見やすさについていえば、文字サイズ「最小」でいつも閲覧している私にとっては、文字サイズ「中」でなければ崩れてしまう表紙のデザインはどうかと思われました。表紙以外はどんな文字サイズでもそれなりに見えるのですから、表紙のデザインを工夫なさって、文字サイズの指定をしないですむようにされるとよいでしょう。

表紙の改善方法ですが、例えば改行を20も入れるなんていう方法でメニューの文字を下寄せするのではなくて、ご利用になっている「NEC ホームページデザイナー」の機能でテーブルのセル内の文字を下に寄せることができるでしょう。その変更だけで、ほとんどの文字サイズに対応できるようになるはずです。(文字サイズ「大」「最大」でも少なくとも現状よりはマシに見えるはずです)

CSSはソースに直接記述されているようなので、文字の下寄せの方法を直接記述する方法について簡単に。まずは
<TD width="500" height="500" background="TOP1.gif">
という記述を探しましょう。改行を示す<br>がたくさん並んでいる直前にあります。これを次のように書き足します。
<TD width="500" height="500" background="TOP1.gif" valign="bottom">

気になったこと/その2

ところで、エンターページで画面の最大化を指定していますが、別にそんなことをしなくても問題なく閲覧できるデザインなのですから、アクセシビリティーを低下させるような注意書きをわざわざつけることには賛成できません。

いずれにしましても、よいデザインのサイトを多く見て、いろいろお勉強もしていくといった経験の蓄積が、先々効いてくるでしょう。初心者向けのソフトとはいいつつも、ホームページデザイナーだって使いこなせば相当よいデザインのサイトを作れます。だんだんに改善していかれたらよいのではないでしょうか。

セレクトメニューについて

「本来は選択のための〜」とはよくいわれることですが、別にそれは気にしないでよいでしょう。なぜなら、仕様書では「コントロールを作成する要素は、一般的には FORM要素内に出現するが、ユーザインターフェイス構築目的の場合には、 FORM要素宣言の外部にも出現し得る」(HTML 4仕様書邦訳計画より)と述べられておりセレクトメニューは単なるユーザーインターフェースとして利用可能とされているからです。同様のことはテキストエリア、チェックボックスやラジオボタンについてもいえます。

その後

久しぶりに拝見したのですが、いろいろよくなっていますね。昔の縦長のデザインが懐かしいです。短期間で何度もリニューアルを繰り返してきた甲斐もあったのではないでしょうか。よく勉強されたと思います。

リンクをCSSで本文と同じ見た目にしているのですが、たしかにすっきりして見えますが、ちょっと引っかかります。サイトの案内ページなど、ていねいにリンクが用意されて非常に使いやすくなっているのですが、リンクに気付かない人がいるともったいないかなと思いました。(私自身はユーザスタイルシートで強制的に下線を出してしまうので、とくに困らないわけですが)[2002.10.14]

ざ・氣

URI:http://www.h3.dion.ne.jp/~seriston/ [2002.06.02]

ソース軽量化のサンプル

ビルダーの操作への理解が不十分なようです。ソースに無駄が多すぎます。ソース軽量化のサンプルを示します。いずれもファイルサイズはHTML文書単独で計測。画像ファイルの容量は含みません。

40KBのファイルは、単にビルダーで「全体をドラッグ→書式→書式の解除」と操作したものです。容量はほぼ半分に減ったにもかかわらず、見た目はほとんど変わっていません。無駄な装飾がいかに多かったかがよくわかります。

12KBのファイルは、全面的にソースを見直したものです。無駄なリンクを排除した他、レイアウトのためのテーブルを廃止、定義リストを用いたマークアップの全面改訂(単純化)などを施しています。ここまでソースを軽くしてもサイトの外観はレベルダウンしていないことにご注目ください。

サイト軽量化の指針

以下2点をご留意ください。

1.無用のリンクはやめる(とくに重複が目立つので注意)
2.文字色、文字サイズなどの設定は1回で決める

2.の補足説明ですが、ビルダーでは文字色などの設定はどんどんソースの記述が積み重なる仕組みになっています。新しい設定によって古い設定が消されることはないのです。まず黄色を指定し、続いて赤を指定した例を示します。

<font color="red"><font color="yellow">sample</font></font>

ですから、サイトのリニューアルのたびに文字色などの設定をしなおすと、どんどんソースが膨れ上がります。設定しなおす場合には、古い書式を解除してからにしましょう。