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

Advice

徳保隆夫の発言集13

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

[2002.05.12]

文法が気になるならば

画像の選定がうまい、きれいなサイトですよね。文法の間違いが気になるのであれば、文法チェッカーにかけて、結果をご覧ください。ソフトを使った場合と異なり、基本的なところでミスしてます。ソフトを使うと、ソフトによって特徴のある特定の部分で大量に同じミスをするので、得点自体は大してかわらないことが多いのですが、修正と勉強の苦労は比較になりません。私も最近ではビルダーとうまく付き合っていますが、かつて一度はビルダーと袂を分かち、全面的な手書きへの移行をはかったものでした。経験上、やっぱり手書きでちゃんとしたHTML文書を作成できない人は、ビルダーを使いこなすこともできないと思っています。頑張ってください。

しょっきんぐぴんく

[2002.05.13]

助言

右軸メニュー型レイアウト

表紙のデザインは安定しています。右軸メニュー型のレイアウトには賛否両論ありますが、私はおすすめします。スクロールバーが右側にある以上、マウスカーソルは画面の右側にあることが多く、右軸メニューは操作性がよいからです。(Webユーザビリティーの権威、ヤコブ・ニールセン博士も左軸メニューが標準的になりつつあった時期に、右軸メニューのよさを訴え嘆いていたものでした)

表紙の配色

表紙でふと気になったのは、サイト名との対応でした。画像ともども色合いがよく統一されており、デザイン単体としては明るいモノトーン調でOKなのですが、赤系の色が全然なくてもいいのかな、と。

画像の重さ

サイト内を一通り拝見しましたが、たしかにイラストは軽くはありません。けれども、とくに重いとも感じませんでした。ばかでかいイラストがあるわけでもなく、圧縮方法を明らかに間違っている例もなく……。イラスト、画像の見せ方にはなお研究の余地はあるでしょうが、それはだんだんに向上させていけばよいのではないかと思います。

タイトルを入れましょう

ページのタイトルは、入れておいきましょう。文法的に必須だということはともかく、実際に有用なのです。重いページの場合、とりあえずタイトルが読み込まれることで閲覧者は安心します。

質問

鑑定有難うございました!
イラストの方も段々勉強していきたいと思います。

タイトルタグでタイトルを入れても、
バーに表示されないページがあるのですが…
何か良い方法はありますか?

回答

タグを入れたらそれでいいというわけではありません。タグはそもそも「要素」を明示する道具です。人間なら、生のテキストを見て、ここがタイトル、ここが見出し、ここが本文の段落、と理解できます。でもブラウザには不可能です。そこで生のテキストにタグを書き加え、title要素、h1(見出しレベル1)要素、p(段落)要素などを明示するのです。ブラウザは明示された要素毎に適切な表示方法を選択するようになっています。音声ブラウザなら、見出しは大きな声でゆっくり読む、など。ただ、その「適切な表示方法」はブラウザが勝手に決めていいことになっているので、自分では見出しには下線をつけてほしいと思っていても、ブラウザがそうしてくれる保証はありません。そこで特定の要素をブラウザにどう表現させるか、それをはっきりと命令するために、スタイルシートという技術が用意されています。(少々脱線)

HTMLの仕様では、title要素の置場所が厳密に定められています。タイトルタグで好き勝手な位置にtitle要素を出現させても、ブラウザは無視するようになっています。それでは不便じゃないかと思われるかもしれません。しかし、HTML4.01においてtitle要素だけが必須とされていることからもわかる通り、HTMLではtitle要素こそ最も重要な要素です。ですからtitle要素は、必ず決まった位置に、わかりやすい形で存在しなければならないのです。

さて、正しい位置にtitle要素を出現させていれば、バーにタイトルが表示されないはずはありません。表示されないとすれば、title要素の出現場所が誤っているのです。具体的にどのページでタイトルが表示されないのか教えていただければ、表示されない理由(つまり文法的にどう誤っているか)を説明いたしますので、どうぞお知らせください。

KENTAのなんでも講座

URI:http://www5.ocn.ne.jp/~nande/ [2002.05.14]

閲覧者はいつも同じ人?

宣伝をしているのに、特定の人が閲覧しているとおっしゃるので拝見したのですが、まさか一日200ヒットを実現されていたとは……。私の経験上、1日数十ヒット以上のサイトの場合、同じサイトに半年以上通い続ける閲覧者は呆れるほど少ないものです。数日単位では同じ人ばかりきていても、半年たったらその方々はほとんどいなくなっているはずです。宣伝というのは、効果があるかないかわからないくらいなら、じつは効いていると考えてよいでしょう。宣伝が本当に効果0なら、サイトの閲覧者はだんだん減っていきます。

とはいうものの、実際には宣伝よりも、「内容の充実=現在の閲覧者を大切にする活動」の方が重要です。現在のサイトがくに様にとって初めてのサイトでないとすれば、内容のないサイトを宣伝する虚しさはよくご存知でしょう。

お客様の多いサイトにせよ、少ないサイトにせよ、よくよく調べていくと、日々の閲覧者数に比べてどれほど多くの方が1回2回程度の訪問で去っていったか、というデータにぶち当たって衝撃を受けます。アクセスアップの最大の秘訣は、「いかに人を呼ぶか」ではなく、「いかに人を逃がさないか」ということに尽きます。

♪ちょこれぃと♪

[2002.05.14]

表紙のデザインをすっきりと

メニューの説明文ですが、IE、NN6.2、NN4.7を問わず、文字サイズを大きくすると表示が崩れて、わけがわからなくなります。ビルダーで製作されているようですが、可能なら直接ソースをいじって、

○はじめてコンテンツ
→<span title="はじめての人はまず見てみてね。">○はじめてコンテンツ</span>

<A onclick="中略" href="#">はじめに</A>
→<A onclick="中略" href="#" title="初めての人もかならず見てね">はじめに</A>

というように書き加えますと、マウスを上にもっていったときに説明文が出るようになります。こうすれば、今、いつでも読めるように置いてある説明文は消してもいいんじゃないでしょうか。(私なら定義リストでマークアップしますが……とりあえずtitle属性でいいんじゃないでしょうか)

ブラウザによる表示結果の違い

NNで崩れるか心配されていますが、NN6.2ではIE6と同様に表示されています。NN4.7ではキリ番獲得者の一覧がセレクトメニューではなくべた書きとして表示されます(これはNN4.7の問題。記述は正当)が、問題はそれだけ。全体的な表示には何ら問題ありません。

その他に気になったこと

背景画像の統一

レンタルCGIが多いので、なかなかデザイン的な統一感が取れないのも仕方のないところでしょうが。しかしせめて背景画像だけでも統一されますと、サイトの雰囲気がしっかり固まります。

小窓を避ける

小窓の開く部分がありますね。何となくやりたいことはわかるのですが、なるべく小窓無しのデザインをこころがけた方がよいでしょう。

メインコンテンツのにぎわい

サイトの主なコンテンツが掲示板とチャット……ふつうはうまくいかないのですが、ちょこ@タグ不明さんの人徳のためか、かなり人が入っていますね。この調子で頑張ってください。

それはまずいのでは

じつは下に広告が入るのでちょっと目立たせなくしようとしてるんです

実際に表紙を見てみると広告が削除されてます……。fc2webの場合、広告を外してもいいのは、フレームのナビゲーション部分だけ。ただし、故意でないのかもしれませんが……。

回答

広告は消したのではないのです;;
消したつもりはないです;
特殊なタグも使ってないですし・・・
ただ入るのに時間がかかるようです・・
鑑定ありがとうございます!
壁紙などいろいろなところを変えますねvv
ありがとうございました!(何

sweet*clober

[2002.05.14]

助言

重さ

表紙の画像は重いです。デザイン的には面白いのですが、再考の余地があると思います。

見やすさ

やはり表紙の画像のところですが、文字サイズを変えると吹きだしからメニューの文字が外れます。現在のデザイン手法にこだわる場合は、文字サイズの固定を考える必要があります。なおページが縦長なのは、情報の整理が不十分だという理由もあるでしょう。それでも、私はそんなに悪くないと思います。きれいなサイトだと思いました。ただ「このページの一番上へ」のリンクが反応しなかったのは残念でした。

画像

ちゃんと出ています。(と思っているだけでじつは抜けているのでしょうか……でもとにかく、必要な部分は出ているように見えます)

その後

GIF問題その後

結局、画像処理ソフトのメーカがGIF画像に使われている圧縮方式の使用権を買うことで決着しています。そのソフトをお金を出して買った人は、間接的に使用権も買ったことになり、GIF問題は信頼できるメーカの有料ソフトを使用する限りは解決しています。なお、GIF画像を「見る」のはもともと問題ではなく……。

ところで、GIFよりはPNGの方が何かと都合がいいのは相変わらず。GIFとPNGは同じ色数なら美しさは同等。理屈の上ではGIFよりPNGの方が圧縮率が高い(現状では同等)。またフルカラーで劣化なしの圧縮ができ、フリーソフトでも加工もできるのはPNGだけ。なぜPNGがマイナーなのかと考えてみると、いまだにPNGを知らない人が「ホームページ作成講座」で「Webで使える画像の形式はJPEGとGIF」などと書いて、PNGに触れないから。たとえ記述があっても、PNG対応ブラウザがシェア95%に達した今になっても、「PNGには未対応のブラウザが少なくなく……」などと書いてくれたりしています。困りますね。

配色

色遣いの件ですが、たいていの場合、多くの色を使うとうまくいきません。ご自分のセンスに自信がおありなら、たくさんの色を使ってもよいでしょう。オレンジとか、あるいは他の色でもよいのですが、1色をメインにしてまとめることを私はお勧めします。主張色(メインカラー)、アクセントになる色、基調色の3系統の色でまとめるのが、安心です。なお、1色といっても濃淡はあってよいのです。濃いオレンジ、薄いオレンジを、もっと使っていってもよいのではないかと思います。

文字にもオレンジを使っているのが、それ以外の部分での十分な色幅を制限しているのではないかと思います。文字の少ないデザインなので、文字はアクセントカラーにしてしまってもよいのではないでしょうか。そうすれば、メインカラーのオレンジを現状以上に幅広く自由に使っていくことができますし、単色系デザインの単調さも解消されていくのではないかと思います。[2002.08.21]