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

Advice

佐野電子レコード

[2002.03.21]

表示速度:

問題ありません。最近では回線のいい方が増えまして、多少のデータ量ならばOKということになってきました。トップに大きな画像を置くべからずという旧来の原則は、崩壊しつつあります。ちなみに私のサイトの背景画像は6KB程度。

視覚効果:

i-mode 対応となりますと、デザインの制限が厳しくなりますね。UAを自動判別して、それぞれに対応した結果を表示する仕組み、あるいは適当なCGIを利用して一度の入力で各環境に対応したファイルが生成される仕組みを使うなどされてはいかがでしょうか。

やはり少々デザインが寂しいように思います。掲示板のデザインに印象が引きずられてしまうのは残念です。掲示板のデザインをもっとシンプルなものにするか、逆に日記などのデザインを派手にするかということではないでしょうか。

少し勉強してみてもいいということであれば、最もよい解決法はCSSの導入です。シンプルなHTMLほど、CSSは適切に用いることができます。私のサイトもCSSで装飾をしています。各頁最下部のCSS切替スクリプトでCSS装飾のないバージョンを選択できますから、ぜひ一度ご覧になってみてください。見出しと段落、目次のリストの他はほとんど何も指定されていないことがおわかりいただけるかと思います。たったそれだけのHTMLが、CSS装飾でそれなりにきれいなデザインに生まれ変わるのです。

携帯電話にはHTMLだけを読込ませ、パソコンにはCSSとHTMLを読込ませることにより、パソコンによる視覚効果を確保しつつ、携帯からのアクセスも保証することが可能になります。

操作性:

業務日誌から「戻」をクリックしても全然戻れないので、何がおかしいのかと思って調べてみますと、正しい戻り先はmain.html ではなく、main2.html でした。修正されることを望みます。

フレームは地味ながら使いやすいです。アイコンがよく考えられたものになっています。

内容の充実:

淡々としたサイトですね。99年からですから、もうサイト運営暦も長いわけですが、いい意味で枯れているように見受けられました。少し色気を出すならば、僅かずつでも「積みあがる」コンテンツを構築していかれるとよいのではないかと思いますが、もうそんなことはどうでもいいのかもしれません。いかにも趣味らしく、好きなペースで日誌を書き綴っていかれるのが一番なのかもしれません。

できることなら、末永く続いてほしいと思います。

補記:

私なりのちっぽけなこだわりなんですが、トップ画像の横幅を500pixにする事により、低解像度のモニタでも横スクロール無しに表示できるようになってるんですよ。

解像度耐性を調べた際に気付きました。なかなか最近はみつからなくなってきましたよね、VGA対応のサイト。佐野様のサイトがばっちりOKだったのには感心しました。

画像はフォトショップの「Web用に保存」で圧縮してあります。

たしかに、重い画像というわけでもありませんでしたね。

i-mode版は当初しゃれで作ってたのですが、いざ始めてみると、意外にも反響があり固定の読者までつくようになったんですよ。

意外と携帯電話に対応していないサイトが多いというか、現状、ほとんどがそうですからね。http://www.sorekika.com/などは非常に珍しいひとつ。もうすぐ100万ヒットというサイトで、佐野様にとってもたいへん参考になるのではないでしょうか。私はCSSによる装飾といってもあまり派手なことを想定しているわけではなくて、上記サイト程度を考えておりました。

その辺、UA振り分け出来るCGIを自作できればいいのですがプログラムに関してはサッパリなので、フリーのモノを探してみるとします。

まったくそれで構わないと思います。

CSSについても、もう少し勉強してみる価値はありそうですね。

うまくすれば、UA振り分け技術が不要になりますからね。同じページを読ませて、パソコンだけがCSSを認識するという。

まあ正直いって、デザインをよくすることとアクセス数には関係があまりありません。けれども、常連の読者様の快適な閲覧をサポートするという意味では、決して無意味なことではないと思います。お互い、楽しくサイト運営をしていけるとよいですね。

中流ランナーズ

[2002.03.21]

表示速度:

表示速度をとくに遅くするような要素は見当たりません。テーブルの多用は将来的に問題となるでしょうけれども、現状程度ならば、各テーブルの内容量が少ないので、気になりません。

視覚効果:

たいへん問題があります。

フレームの切り方が%指定になっていますが、これはどうにもよろしくありません。デザインの定石として、ナビゲーションのフレームは決め打ち、本文のフレームを可変幅にするというものがあります。画面の解像度によってナビゲーションが見えなくなってしまうのでは困りますから、ナビゲーションの幅だけは最低限確保してしまうわけです。また文字サイズもあまり小さすぎなければナビ側は固定してもよいでしょう。

続いて背景画像ですが、ナビゲーションと本文の2種類に限定しましょう。それ以上は禁止です。目が肥えてくれば、異なる壁紙を使いつつ統一感を出すことも可能になってきます。しかし現在の実力では、壁紙を無条件で統一すべきです。まとまりのあるサイトを作ることが、いかにも初心者然としたサイトから脱却する第一歩です。

そして最大の問題が、ホームページビルダーのどこでも配置モードの利用です。正直申し上げて、どこでも配置モードは発展途上の技術です。標準モードで全ページを作り変えることをお奨め致します。その結果、レイアウトが変わってしまう部分も多々あるでしょうが、現在よりよほど多くの環境で、問題なく読めるようになるはずです。少なくとも現状では、文字サイズを大きくしただけで表示がぐちゃぐちゃになります。

どこでも配置モードは最もわかりやすいサイト作成法であるだけに、いったんそれに慣れてしまうと、後々たいへんです。私の予想では、結局技術的課題を解決できずに廃れてしまうであろう技術です。先を見越して、従来通りの標準モードに慣れておくことをお奨めします。

操作性:

ページのレイアウトがコーナー毎にバラバラであるため、操作性はあまりよくありません。サイトを作り始めたときは、あれもこれもと考えて、いろんな要素の寄せ集めでサイトを構築してしまうものですが、だんだんに一番よいと思った方向でサイト全体を統一していくようにしましょう。私の見たところ、どのコーナーの目次も一長一短です。とくにこれがいいとか悪いとかはありません。ただ、コーナー毎にデザインが違うことが一番の問題です。どれかに揃えましょう。

ところで、フレーム定義ファイルにしっかりサイトのタイトルをいれておきましょう。アドレスが表示されているのは、あまりカッコいいものではありませんし、ブックマークに入れてもらう際に大きな障害ともなります。

内容の充実:

さて、実をいえば、上記のアドバイスをすべて実践したとしてもアクセス数は全然変わらないかもしれませんし、掲示板への書き込みもちっとも増えないかもしれません。それはある意味、当然のことです。なぜなら、人は情報を求めてサイトへアクセスするのであって、デザインを求めているわけではないからです。私がここまで述べてきたのは、お客様をもてなすという意味で、よりきれいなデザインを実現するには、というお話なのでした。

というわけで、ここからが本題です。

一日60ヒット前後のサイトだそうですから、実際の訪問者の実数は40人前後でしょう。掲示板の書き込みは、たしかにそれに比べて少ないように思われます。

対策は2通りあります。ひとつは、あくまでも情報提供サイトの掲示板として盛り上げるやり方、もうひとつは交流用の掲示板として盛り上げるやり方です。

ある意味楽なのは前者です。まず各ページに「質問、ご相談は掲示板へどうぞ」という文言を、目立つ位置に配置します。掲示板の題名も「質問・ご相談掲示板」といったものにします。これでターゲットが明確になり、むしろ書込みしやすくなります。

ちゃんとやれば確実に結果が出るという意味で楽なのが後者です。とにかくあちこちの掲示板へ行って、宣伝ではなく、純粋な感想をURIとメールアドレス付で残してくるわけです。毎日10サイトほど回っていますと、そのうちに自分のところの掲示板にも、一日1つくらいは書込みされるようになります。これを効率が悪いと思うのであれば、お奨めいたしませんが、これぞ王道というか「正しい」方法だと思います。

その後

テーブルでフレームのような効果を実現していて、「こりゃ手間がかかってるなあ」とびっくりしました。以前のデザインを知っているだけに、本当に驚きました。ここまでサイトを作りこむのはたいへんだったでしょう。お疲れ様です。

さて、ふつうはテーブルであれこれやると重くなるのですが、情報をよく絞り込んでいますから重くないですね。見やすさも十分に考えられたレイアウトです。枠線をつけたりつけなかったりも、情報の階層を表現する絶妙の効果を発揮しています。決してベストではないので、私なら全然違うレイアウトにしますが、さりとて現在のレイアウトは捨てたものではありません。(CSSによるレイアウトと異なり簡単には直せませんし……)

以下は改善点。割とすぐにできるところから。

全ページにほぼ共通する部分についてご指摘させていただきました。これを直すのはなかなかたいへんかもしれません。とくに気になる部分をまず改善されてはいかがでしょうか。ところで、正しいHTMLとCSSの「しっかりとした」お勉強をなさると、いろいろな意味で「これまでリニューアルのたびに無駄な苦労をしてきた」ことがわかってきて愕然とするだろうと思います。慌ててサイトを改善する前に、落ち着いて勉強してみるとよいかもしれません。移転が目前で無理かもしれませんが……。[02.06.09]

このアドバイスは無駄になっても

今回の無駄になってもいいと思いますよ。ある意味、直すとすれば全部なおした方がいいんじゃないかと思うのです。もしそうなれば、私のアドバイスは無意味になりますよね。ただ、現状はそんなに悪くない。むしろよくできたデザインの部類に入ると思います。だから全面改訂なしの微調整についてご意見さしあげたわけです。

重大な問題といえるのは、アクセシビリティーと仕様に沿ったサイト作成からかけ離れていること。でもこれは、ほとんどのサイトが対応できていない問題だから、「赤信号、みんなでわたれば怖くない」という状態になっているわけです。参照用にサイト作成時の様々な注意点がまとめられたページをご紹介します。最下部の「参考資料」からいろいろな情報へ飛んでみてください。やっぱり仕様通りにサイトを作ろうという方は真面目な人が多くて、ふつーの人にはとっつきにくい情報になっています。それでも、もしよかったらちょっと読んでいただけるとありがたいですね。[02.06.14]

漂流新聞

URI:http://homepage1.nifty.com/masatown/ [2002.03.21]

表示速度:

シンプルサイトだけに、さすがに速いですね。しかしこのデザインなら、装飾をテーブルからCSSに切り替えるのは簡単なはず。もしそれを実現すれば、さらに軽快なサイトになるのですが……。しかもHTMLの記述は断然簡単なものになりますし。ぜひご検討ください。

CSSは本来、視覚的装飾のおまけ技ではありません。もっと強力なデザイン能力を有しています。

視覚効果:

たいへん素晴らしいと思います。簡にして要を得ています。99年に始まったサイトだそうですが、なるほどと思わされます。

10の質問の最下部のみ、バーが画面いっぱいに広がっているので修正されるとよいでしょう。

操作性:

問題点がひとつ。「TOP」をクリックするとページの最上部へ移動するわけですが、移動した先に何もないという罠。ナビゲーションの第一原則は、行き止まりを作らないことです。「TOP」は、その原則に反しています。むしろ、あるページに訪れた人が、「あ、間違った」という場合にすぐ移動できるよう、ページの上部に「BOTTOM」というリンクを設定する方が理に適っています。ちなみに私のサイトの場合は、ナビゲーションは上部に設定し、各ページ最下部に「▲」印でページ最上部へ戻るリンクを用意しています。

内容の充実:

テキストサイトは流行らないという伝説がすっかり崩壊したとはいえ、アクセスアップ講座系サイトをあざ笑うかのようなシンプルな構成での「ReadMeカウントで一日40前後」というのはけっこうな数字。ReadMe独自ランキングによれば最高値は95だそうですが、たいしたものです。内容は十分あると思います。

何せ掲示板の人気がすごいですね。私はあまり興味がないのですが、アドバイス依頼で最も多いのが「掲示板を盛り上げるにはどうしたらいいんですか」というもの。「ホームページ論」に書かれている内容がほとんどすべてだろうと思うわけですが、なかなか簡単なことに思い至らない方が多いんですよね。将門さんは基礎がしっかりしていらして、たいへんよいと思いました。

ようこそ まゆたんのお部屋へ

URI:http://www.geocities.jp/poirot_007/ [2002.04.03]

表示速度:

とくに問題はないかもしれませんが、AirH”の32K通信では画像が非常に重く感じられました。極力、画像を軽くされたらよいでしょう。具体的には例えば、画像処理ソフトをお持ちのようですから、特定範囲のみ高精度画像とし、背景部分は高圧縮処理を行うという方法があります。うまくすると、データ量が半分ほどになります。また、レイアウトに用いているテーブルを順次CSSによる配置に置き換えますと、これも表示の高速化につながります。

視覚効果:

各コンテンツのデザインがきれいなので、表紙もぜひ同様にされてはいかがでしょうか。つまり、内容を縦にどんどん並べるのではなくて、横方向にも適宜配置していくということです。

また、様々な閲覧環境が想定されるのがWebの特徴です。私の1024×768でIEの文字最小という環境ではきれいに見えるページであっても、例えば800×600程度の画面サイズでは読みにくくなることがあります。イカナゴは面白いコンテンツですけれども、デザイン的にはやはり問題があります。雑誌や新聞のレシピのように縦に4分割されていますが、ブラウザの幅を狭くしてみると文字表示部分がどんどんつぶれて読みにくくなります。画像が大きすぎるという見方もありますが、この場合は説明の文章は画像の下でよかったのではないか、説明文は横3分割で表示したらよかったのではないか、と思われます。またそうであれば、テーブルを使わずにデザインすることも十分に可能いなるわけで、表示を早くすることにもつながっていくわけです。

操作性:

まず表紙へ戻るリンクが各ページにありますので、基本的にはこれでよいでしょう。サイトがより大型に、複雑になってきたら、コンテンツを整理してナビゲーションに悩むことになりますが、今はまだそれほどの段階ではないように思われます。淡々とした更新ペースですし、サイトの方向性もはっきりしていないものですから、早急に大項目をはっきりさせる必要もないでしょう。

内容の充実:

いわゆる個人サイトですが、私はとくに構わないと考えます。売れない自分史を数百万円かけて自費出版するというブームがバブル期にはありましたが、現在ではWebサイトという形で、ずっと安価に同様の満足感を得られるようになりました。基本的に自分と家族などが見るサイトですが、私はそうしたサイトにも十分に存在価値があると思います。例えばイカナゴのページなど、将来、お子様に教える際に役立つかもしれません。

Webサイトがいくら世界に開かれているといっても、現実にはそう単純な話でもないわけですが、とにかく誰かが見てくれるかもしれないという環境が、何らかの創作意欲につながるのであれば、それは素晴らしいことではないでしょうか。まゆたん様の人生において、短期ではあっても人生の記録作成に取り組まれることは、追々、大きな価値を生むことでしょう。

デザインをよくしてみても、たぶん、カウンターの回りはよくならないことでしょう。でもそれは決して無意味とはいいきれません。やはり自分の作品は見栄えがよい方が嬉しいものではないでしょうか。自己満足のページであるかもしれませんが、それ故に、自分でも納得のいかないデザインではやる気もそがれてしまうわけです。もし折りよく時間があって、せっかくだから挑戦してみようということであれば、私のアドバイスも少しはお役に立つでしょう。

いずれにせよ私は、まゆたん様のサイトがマイペースで更新され、末永く発展されることを期待しております。

ともふぞくようちえん

[2002.04.04]

表示速度:

表紙がCGI であるというのは、少々もったいないように思いますが、更新に便利なのでしょうから、やめるわけにもいかないのでしょう。とはいうものの、とりあえず重いページではありません。

しかしながら、今後のことを考えますと、いくらか記述を見直されるとよりよくなります。現在、テキストボックス代わりに用いられているテーブルは、無駄にページを重くしています。CSSによる装飾に変更されると、いくらか軽くなります。またCSSの記述は適当にまとめて指定なさってはいかがでしょうか。

また、ページの最上部に移動する矢印を記述するために毎回<a href="#dtop"><p align="center">↑</p></a>としている部分も文法違反なのでよろしくありません。IE といえども、将来はこうした不正記述にエラーを返すようになる可能性があります。以下のように書きなおしておくとよいでしょう。

<p align="center"><a href="#iddtop">↑</a></p>

視覚効果:

以前、入りづらいという指摘があったそうですが、たしかにあまりに表紙がそっけなく、歓迎感に乏しいのは事実です。また表紙がカウンター計測以外に意味がなく、つまり閲覧者に利益がないということも気になります。私なら表紙から入ったニュースのページにブックマークをします。

どうしても表紙を使うのなら、例えば私のように、JavaScriptを切っていない方のみ自動で次のページへ転送する仕組みを製作し利用されてはいかがでしょうか。

なお、シンプルがよいとはいっても、ただ単に「何もない」こととは違うわけです。また、単純明快だからサイトに統一感が出るというものでもありません。

いくらシンプルといえども、強調部分とリンクがそっくりな色で、しかもリンクに下線がもないのでは見分けに困ります。各ページのデザインをよく見たときに、じつはレイアウトがページによって異なっているというのでは統一感は生じません。

例えば、ナビゲーションのデザインを完全に共通化する、個性的な画像を全ページにワンポイントとして配置する、タイトルや見出しの言葉に、サイト全体で一定のルールを設定する……要素は削ぎ落とすのが正しいとは限らず、むしろ何かを共通して出現させることがサイトの統一感を築き上げていくということがままあります。

操作性:

最低限のナビゲーションとページの一番上に戻るリンクが用意され、サイト内の探索に決定的な不都合はありません。

細かい指摘はいろいろ出来ます。ページによってナビゲーションのデザインも位置も異なり、また表記揺れが多く見受けられます。これらの問題点を一言でまとめれば、統一されているべき部分がバラバラに表現されているということに尽きます。ぜひ改善を。

内容の充実:

以前書き込みづらい、入りづらい、といったことを知人に指摘されたことがあります。

とのことですが、サイトの閲覧者と知人とは大きく層が異なるはずです。オンラインの知人が基本的に精神面・感覚で大いに共通点のある仲間ですが、オフ知人はまず、地域・年齢・境遇などによる絞込みが強く働くため、精神面・感覚については共通点を探す方が珍しいということになりがちです。ですから、指摘は基本的に適当に聞き流してもよいでしょう。

また、どのようなサイトも、ほとんどの閲覧者にとっては書込みしづらいものです。一日数千ヒットのサイトですら、掲示板の書込み数は一日100などいくものではありません。もちろん掲示板サイトを除くものですが。以上、ご参考まで。

さて、日記を毎日欠かさず更新とは素晴らしい努力です。しかし、それならば、最新の日記をもっと少ないクリック数で読めるような工夫をしないのは勿体ありません。

全体的に、内容の豊富なサイトです。コンテンツは決して不足していません。結局、見せ方の問題です。今後の発展に期待しております。