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

Advice

徳保隆夫の発言集22

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

GO!GO!パニクルー

[2002.06.16]

困ってしまいました

もともと素晴らしいサイトでしたけれども、しばらく見ない間にまたすごくよくなって……。二度目のアドバイス依頼はOKですか? というご質問ですが、以前、それで1件お断りしておりますので、今回だけOKというわけにもいきません。かわりに掲示板で簡単に。

素晴らしいサイトなので改善点を見つけるのが難しいのです

というわけであらためてサイトを一通り拝見しました。レイアウト、ナビゲーションはかっちりとしていますし、内容も充実しています。安定した日本語を使っていらして文章が読みやすいのもよいですね。800×600の画面で問題なく見れますし、フレームの利用法がうまく、サイト内で道に迷うこともありません。画像の使用を抑えておりページの読み込みも軽い。

……何をアドバイスすればいいのですか(苦笑)

構成がわかり難いとの自己診断ですが、好きなこと、興味あること、嬉しかったこと、あれもこれもみんな詰め込んで、それでいてこれほど整理されていることに、私はむしろ驚かされます。またこのサイトをはじめて以降、多くの小中学生のサイトにアドバイスしてきましたが、ハルさんほどしっかりとサイトを構成することに成功している例は、ほとんどありません。配色やレイアウトなど各ページのデザイン構成も、よく統一をはかっており、また見やすく使いやすく考えられているように思われます。

PageMill3.0というと2年以上前のソフトですよね。それでも要は使いようだということが、ハルさんのサイトを見ているとよくわかります。ぜひこの調子でパニクルーの応援とサイトの運営を楽しく続けていってください。

ケアレスミスを指摘しておきます

私からはあまり「ここをこうしたら」という意見は出せませんでしたが、当サイトのリンク集ではたくさんのサイト批評サイトを紹介していますので、よろしければご活用ください。私が気付かなかった、あるいはどうでもいいと考えて指摘しなかった改善点を、いろいろ教えてもらえるかもしれません。

なお、アドバイスを頼む前に必ず、過去ログを読んでおくことをおすすめします。各サイトの管理人には、正直いってたいへんなレベルの格差があります。つまらないことばかり指摘している方、間違いを教える方、いい加減な改善案を出す方、いろいろいます。信頼できる管理人を見つけたり、逆にどの程度信頼できるかを判断したりするために、過去ログの参照は必須です。

HTMLの知識を深めてみてはいかがでしょうか

ハルさんのサイトは、ソフトを使っていることもあって、単なる文法違反は少ないながらも、HTMLの仕様に照らしてあまりよろしくないソースになっています。テーブルでレイアウトしていることや、せっかく外部CSSファイルを利用しているのに、リンク色をbody要素で指定しているということなど。現在どれほどの知識があるのかわかりませんが、ある程度わかるようでしたら、StrictなHTMLの基礎講座などを一読されると面白いかもしれません。StrictなHTMLの基礎講座のリンク先まで目を通されますと、HTMLやCSSの見方がいろいろ変わってくることと思います。もしよろしければ、いろいろ勉強してみてください。

サイトに関係ないですが中間試験の結果について

平均点が載っていなかったので、いい結果なのか悪い結果なのか判断つきかねますが、元塾講師としては、中学生になったら学校の勉強も(本気で)頑張ろう、と申し上げたい。受験は関係ありません。自分の未来を、安易に狭めないようにしてほしいのです。数学が得意でも文系に進むのは自由です。数学が苦手なら、文系にしか進めません。数学だけは、たとえ一時期30点台までいったとしても諦めないことが大切です。

かむにほん記

URI:http://tekipaki.jp/~kscc/ [2002.06.16]

さあ困った

にしちゃん様には当サイトのリンク集をよくご活用いただいているので、「かむにほん記」へのアドバイスはちょくちょく目にする機会があります。皆さん苦労しつつも何らかのアドバイスをなさっているので、たいしたものだと思っていたのですけれども、さてここで私に順番が回ってくるとは思っていませんでした。さあ困った、と今になって慌てても遅いわけですが……。

とにかくサイトを見て回ることだというわけで、しかつめらしい顔をしてぐるぐる閲覧して回ったわけですが、どうにもここが悪いとはっきりいえるポイントが見当たらないわけです。見る人が見れば何かいろいろとあるのでしょうけれども、私にはどうも……。むむむ、かくなる上は……。

知識は力なり

お茶を濁すような回答になって申し訳ないのですが、「Orabge Paradise」さんのアドバイスの補足として、新メニューの提案をいたします。

ポイント

というわけで、ぜひご参考になさってください。ご希望とあればファイルの解説もいたします。以上、「HTMLとCSSとJSの知識があると、現在のページをさらに軽く使いやすくできますよ」というアドバイスでした。

POKEVity

[2002.06.16]

まず表紙を改善しサイト構造をクリアにしましょう

デザイン、見やすさ、ソース、表示速度、いずれも「問題あり」です。なぜなのかと考えてみると、情報が整理されていないわけです。まずいらない情報を消しましょう。続いて情報をグループに分け、それぞれ階層化しましょう。あまりうまくできていませんが、実際に私がやってみた例を示します。

目次とそれ以外に大きく分け、目次を2階層に整理。大きな画像は消去、雑多な画像も大方消しました。少しはすっきり、わかりやすくなったはずです。表紙をわかりやすく構成しなおすことで、サイト作成者自身の認識もクリアになります。自分のサイトの形について、「じつはよくわかっていない」という作成者は、案外多いものです。それではいけません。

表紙以外についてですが、背景など基本的なレイアウトの統一をはかってください。またソフトをうまく操作して、HTMLの記述も一貫させましょう。統一感のないサイトは野暮ったく見えます。単調に感じるくらいに統一しておくべきです。

新しいお客さんがいないという問題

少しはデザインの影響もあるでしょう。情報が錯綜しており閲覧者が困惑するデザインなのです。様々な情報があちこちに配置されており、配色もアクセントがいささか強すぎます。画像のリンク切れもあります。これでは、とっつきにくいわけです。多くの人が、パッと見て理解できるレイアウトを心がけることです。そうすれば、少なくとも目次くらいは目を通してくれるでしょう。

ただし、サイトをしばらく続けていると、お客様が固定されてきて、しかも客足が鈍ってくるというのは、ほとんどの方が体験することです。何も特別なことではありません。そうなってしまう理由はいろいろ考えられますけれども、ここで詳述することは避けますが、結局は宣伝意欲と宣伝効果の問題に帰します。

電気人形

[2002.06.16]

文字サイズは固定するべきではない

6万ヒットですか……。小さい文字に困らない人だけを相手にしていても、サイトの内容さえよければちゃんとヒットするということですね。でも私はやはり、文字サイズは固定しない方がよいと思います。

ブラウザに何のために文字サイズの調節機能がついているのでしょうか。小さい文字が好きな人は、ブラウザを調整して文字を小さくすればよいのです。大きな文字に固定するのも小さな文字に固定するのもよくありません。Webは見る人優先でルールが作られました。サイトの方で文字サイズを固定するべきではありません。

とはいうものの

じつはIE以外のブラウザでは「固定されているはずの文字サイズも変えられる」ので、本当にこだわる人には関係ない話かもしれません。それにIEでもユーザースタイルシートによって、サイト側で適用しているスタイルシートを無視することができるので、やっぱり本当にこだわる人は文字サイズが固定されたサイトでも困らないわけです。だから何がなんでも絶対に文字サイズ固定がダメだとはいいません。

気になったところ/よいところ

全体的には悪くないサイトだと思いますが、細かいところがいくつか気になりました。

大きなことではデザインの不統一なども気になるのですが、だいたい白背景にピンクのアクセントで統一していることでもあり、これくらいでもまあいいかという気がします。サイトを作る人がどんどん増えて平均値が下がっている昨今では、かなりよいサイトの部類に入るのかもしれません。とにかくイラストは素晴らしいので、一年間描きためてきた成果もあって、コンテンツは充実していると思います。日記もよく更新されていてよいですね。

ところで

鑑定とは関係ありませんが、ユニフォーム交換で「鈴木が脱いだ」といって喜んでいる日記には吹き出してしまいました。そういうところを見ているのか、と。

その後

小窓を開かなくてもフレームで固定サイズ中央表示は実現できますが、5分割を2重にやるとちょっとたいへんかもしれませんね。本体のフレームがインラインフレームなら少しは話が簡単になるわけですが……。それはそれで頭を悩ましそうですし……。以前よりもサイトの伝えたいイメージがはっきり出ていて、全般によくなったと思います。リンクもわかりやすいです。

濃い青の文字が私の環境(液晶です)からだとちょっと読みにくいかもしれません。もう少し濃くした方がいいのか、逆に背景色を薄くするべきなのか……。そのままでもいいような気もしますが。

他に気になったのはターゲットの指定が間違っていて、無駄に新窓が開くとか、せっかく海のイメージで統一しているのだから、ピンク色のページも色をそろえた方がいいんじゃないかとか、そのあたりでしょうか。[02.06.30]

さらにその後

安易な批評を批判し電気人形を擁護する

フォントサイズを固定されているようで、フォントサイズを「最大」などで常に見ている方にはつらいと思いますという批評が出ていますが、フォントサイズ最大をデフォルトに「せざるを得ない」状況の人は、ちゃんと自衛策を取るのが筋だと思います。IEならユーザスタイルシートであらゆる文字サイズを指定できます。NN7やMozillaではもっと簡単に、「最小の文字サイズ」を設定できます。そうした対策をしていれば、どんなサイトを見ても、文字が小さすぎて読めないという事態は回避できるわけです。NN6なども文字サイズ固定を無視するという機能を持っていたわけですが、そうしたブラウザがあるにもかかわらずつかわないというのは閲覧者の怠慢でもあります。

Webでは見る側に自由が大きく与えられているのですから、どんどん勉強して閲覧者の実力を見せ付けてやるのがよいと思います。逆にいうと、賢い閲覧者の手にかかれば、ページ製作者の意図した表現などというものは簡単に破壊されうるということです。結果としての表現はおまけに過ぎないというのがWebの発想ですから、これは仕方ありません。閲覧者は、自分に都合のいいようにHTML文書の見た目を変えられるのですから、文字サイズ固定くらいでうろたえる必要はないのです。

こうして自分の都合でページの見た目を調整する閲覧者が増えれば、製作者も文字サイズ固定の虚しさに気付くようになるのではないですか。[2002.10.14]

猫たちの基地

[2002.06.16]

大きな画面でのデザイン崩れ

デザインの崩れについてですが、実際に見ていただいたほうが話が早いでしょう。1024×768(XVGA)の画面での表示結果です。

問題ないといっていいレベルでしょう。他のページでは左下の角などに問題が生じますが、やはりそれも目新しいデザインのように見えなくもないといったところ。

HTML講座を開くなら

むしろ気になるのは、HTML講座の中身の大間違いの数々です。根本的な部分の間違いはともかくとして、とりあえず<heda>というのはどんな要素を明示するタグでしょうか? <head>の間違いだと思うのですが、この手の凡ミスが山ほどあります。とくに解説ページのソースの中に。

HTML講座を開いているのにGaiaxにトップページと目次を置いたりしている理由が私には理解できませんでしたが、講座を読み、講座のソースを見てみると、なるほどという気もしました。HTML講座を開くからには責任を持って勉強なさってください。とりあえず<heda>はひどすぎるので、すぐに直しましょう。(正直、めちゃくちゃなソースでもふつうに表示するIEはおかしいと思います)

お勉強に向いたサイト(リンク先も参照のこと)

HTML講座を閉鎖するよりも

閉鎖してしまうと、「それっきり」になってしまうような気がします。できれば、続けてください。そしてとりあえず<heda>だけ直して、あとは順次改訂していくというのがよいのではないかと思います。

結局は全面改訂になるかもしれませんから、一時的にコンテンツを閉じようという判断は「あり」ですけれども、閉じたっきりになるサイトが多いんです。私は、白猫さんのお勉強が速く進むことを期待しています。HTML講座がいい形で復活されることを期待してやみません。