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

Advice

イオ日記

URI:http://www.io-p.net/io_nikki/ [2002.04.06]

表示速度:

XHTML+CSS2による記述、しかも画像の使用を極力抑えたということもあり、十分に速いものとなっています。努力の成果がよく現れています。

視覚効果:

高い頻度でCSSが変更されるようですが、4月6日時点のスタイルについて今回はアドバイス致します。

読みやすく使いやすいデザインですが、惜しむらくはアンカーが明示されていないこと。たしかに色わけで表現されていますが、Indexでは下線がありながら、他の本文では下線なし、似たような色でも見出し1にはアンカーがなく、メニューにはアンカーがある、といったあたりは混乱のもとです。

見出しの一部が明度差不足で、液晶画面では少々読みにくいのですが、不都合というほどではありません。

全体的に非常によいデザインですから、アンカー周辺の設定を見直されますと、鬼に金棒となるはずです。

操作性:

細かいことをひとつ。表紙では日記から順に目次リストが並んでいますが、他のページでは表紙から順に並んでいます。ソースを見るといずれも日記から順になっているのですが、多くの方はCSSで装飾された結果を見るので、ぜひご一考ください。

現在位置がすぐにわかるなど、よくできたメニューだけに、ほんの僅かな違和感が気になりました。

最後にサイトの構成について少々。

日記が更新の中心ならば、表紙のメニュー直下の内容は日記であるべきです。現状では下の方の目立たないところに日記の一部が載っているのみですが、かなりもったいないといえます。引用などに備え、ログもちゃんと更新されるとよいわけですが、表紙に載せるのは日記全文の方が親切です。

また、お二人の日記があるので、いずれも最新版を全文掲載されてはいかがでしょうか。たとえそのようにしても、64KBには十分におさまるはずです。

また、イラストギャラリーに「電話」を追加といった更新報告も、表紙のその絵を載せた方が便利です。数日たったら表紙から消せばよいわけで、更新直後には表紙から全部の最新情報を見られるのが閲覧者にとって都合のよい方法です。

もっとも私自身、そのようにはしておりません。私の場合、最新の更新分を読ませたいわけではないからですが、閲覧者はそう思ってはいないのでしょうから、不徹底ではあります。

内容の充実:

内容は典型的な個人サイトですね。気になること、興味のあることを何でも取り入れていくという。

親ばかサイトだから人気が出ないとか、日記中心だから人気が出ないといったことはありません。要はやり方次第なのです。

現在のサイト構成は非常に明解で、コンテンツごとの役割分担がはっきりしています。わかりやすいということでは何ら問題はありません。しかし分類が明確なかわりに、メニューが多すぎるという問題を抱えています。メニューを階層化し、コンテンツを整理されてはいかがでしょうか。「日記」「人」「交流」「表紙」の4項目にするなど。

この場合、閲覧者のクリック数が増えるという不都合があります。対策としては、「日記」をクリックすると日記が表示されますが、そのページのどこかに利用頻度の低いABOUTとINFOを放り込んでしまうという手があります。同様に「交流」をクリックするとBBSが表示されますが、ページの上方にLINKとETC.へのアンカーを用意しておきます。「人」をクリックするとPROFILEが表示され、BIRTHとALBUMへのアンカーもどこかに用意します。

人気のあるコンテンツをデフォルトで表示し、その他のコンテンツをリンク先として紹介するわけです。

このようにすると、更新の仕方も変わってくるでしょう。リンクの更新情報は掲示板で発表され、STUDYやTOPICSは日記の内容からのカットアウトになるでしょう。こうなると、アクティブに更新するページとログを保存するページが分離され、閲覧者がどこを見たらよいのか迷わないサイトになります。

初めて訪れた人にわかりやすさではむしろ現状維持がよいかもしれませんが、リピーターを増やすには、メインコンテンツを明示する方がよいでしょう。それは必ずしも私が例示したような大手術でなくともよく、単に「HOME」「BBS」「PROFILE」「DIARY」をリストの中でもとくに目立たせること、自分の中で更新するページとログをカットアウトして整理・保存するページを峻別することにさえ留意すれば目的を達成できます。

ぜひ、挑戦なさってください。

補記:

以下、各アドバイスについての私の考え、及び対応を書かせていただきます。

ご返答ありがとうございます。私もまだまだ勉強中のアドバイザーなので、相手の状況を十分に把握し最も的確なアドバイスを行うことができているかといえば、怪しいものです。ときどき寄せられる反応はいつもありがたく読ませていただいております。

見出しに下線を入れたところ、うまくいったというお話でしたが、デザインと機能の両立は永遠の課題かもしれませんが、今回はとりあえず納得のいく答えが見つかったということでしょうか。

私自身、液晶画面と古いCRTの二つの環境で随時更新しているため時々、色の濃さ等が混乱し、統一が取れていないことが多いです。

液晶画面でチェックする限りは、CRTでコントラストがきつくなることはあるとしても、CRTでチェックした場合のように液晶画面でどうにも読めないということはなくなります。色彩はまったくもって厄介で、狙い通りとはいかない分野ですけれども、よい妥協点を見つけてください。(私のサイトの場合、CRTの方は紫系だと思っており、液晶の方は水色だと思っているというくらいに差があります)

これは表紙以外のページのナビのスタイルをfloatで右に流し込んだらたまたまいい感じになったので、そうしています。前ページ縦に幅を取るのはどうかと思ったので。確かに表紙と並びが異なるのは違和感がありますね。表紙のHTMLを書き直してしまえばいいのでしょうか。でも、そうするとCSSオフで見る人が分かりにくいですね。

メニューの並べ方の件ですが、メニューをdiv要素としてまとめてしまうというのはいかがでしょう? そうすればふつうに左に流し込んだもの全体を右寄せに配置できるのではないかと思うのですが……。HTMLの記述が複雑化するのがまずくなければ有力な手かと。

日記をメインに据えるのは、なにか面映い感じがして、読みたい人だけ読んでください、と言う意味合いで冒頭のみ紹介していましたが、考えてみたら毎日来てくれる人は日記が目的に決まってるわけで、だったらその人たちにとって便利なほうが良いに決まってますね。早速直しました。

連れ合いの日記は更新しやすいように掲示板CGIを利用しているのでトップページに置くのは更新が面倒なのと、全然更新されないのでかえって逆効果と思い、表紙には載せていません。

なるほど。見落としておりました。やはり、あまり面倒ですと更新が滞る元ですからね……。適当なあたりで手を打つということでよろしいのではないでしょうか。

最新情報は全て表紙にというコンセプトに基づき、今後はまず表紙のみ更新し、後に保存ページへ移動というふうにして行こうかと思っています。

やはり、どうしても億劫で、サイトの更新が面倒だなーと思うようになってきたら、以前のスタイルに戻してもいいはずです。サイトの第一の目的は、将来、お嬢様にお見せすることなわけです。現在の閲覧者よりも、本来の目的を優先させてください。

メニューの階層化はページ間の移動に手間がかかるという意識が強かったため、現在のような並列式にしていたのですが、結局ページが増えるにつれ、12項目でも納まりが付かなくなって来つつあり、どうしたらよいか悩んでいるところでした。ですから上記以降のアドバイスは、まさに求めていたものであり目からウロコの思いです。

多くの方が何度も訪れるコンテンツと、一度見るだけのコンテンツを分けて考えようというのが趣旨でした。これも悩み始めるといろいろ結論が出ずに苦しむわけですが、幸い、評価段階でメニューがきれいにグループ化されていたので、すんなり提案ができました。

サイトはいろいろいじっているときが一番面白いともいわれますが、たいへんな大改造に楽しく取り組まれることを期待してやみません。

悩み相談K's house

[2002.04.11]

表示速度:

画像の使用にストイックで、データ量は抑えられています。それだけにページ全体をテーブルで囲んでいるのが残念です。CSSも利用されていることですから、ブロック要素をセンタリングするだけならばdiv要素を利用されますと表示が速くなります。ソースが簡単になるので単純にデータ量も減りますが、逐次表示されるので、テーブルの内容を読み終わるまで待たされるということがありません。

また、font要素が多用されていますが、ほとんどが無駄に使われています。単にページ内の全ての文字サイズを小さくしたり、見出しを太字にしたり色を変えたりするだけなら、適切なマークアップとCSSによる装飾に切り替えた方が、ビルダーを利用する場合でもサイト作成は楽になりますし、またソースをいくらか軽量化できます。ただし少々の勉強の手間はかかりますが……。

視覚効果:

文字サイズ耐性に問題があります。目次フレームはなくても内容の閲覧に支障はないので、目次部分のみは文字サイズを固定して大丈夫です。また、文中で改行するのはやめておくのが無難です。試しに文字サイズを最大にしてみてください。妙なところで折り返されて気持悪いことになるでしょう。段落をp要素にする(ビルダーでは指定範囲をドラッグ→標準に指定)のが最もよい対策でしょうが、せめて改行を(基本的に)文章の末尾に限定なさったらよいでしょう。

操作性:

フレームが解除されるページがあるのですが、私には基準がわかりませんでした。とくに理由が無いのであれば、閲覧者を混乱させないよう、ふつうにフレーム内にリンク先を表示すべきではないでしょうか。

内容の充実:

メインコンテンツは「みんなで相談」だそうですが、であるならば、もう少し「みんなで相談」を目立たせる工夫がほしいところです。とはいうものの、実態として十分に掲示板は盛り上がっており、これ以上は望みようがないように思われます。私はデザイン屋ですけれども、いくらデザインを変えても現在の人気を上回るのはまず難しいというのが結論です。初来訪の方も現在はどんどん書き込みがなされているようですし、当面は現在の人気をいかに維持するかが課題ではないでしょうか。

近日中にヤフー登録も考えているとのことですが、どうにも似たようなサイトが多そうな分野なので、よく研究されることをお奨めします。ヤフーの特徴として、先人よりも優れているかどうかは関係ないというものがあります。したがってお悩み相談掲示板という発想のサイトが既に登録されていれば、たとえ現在盛り上がっているのがK様のサイトの方であっても、まず登録は難しいということになります。その場合には内容を絞るか、何らかの新規軸を打ち出すことが必要になってきます。

like a deadman walking.

URI:http://www.interq.or.jp/www-user/nal/ [2002.04.11]

表示速度:

さして問題はありませんが、div要素とCSSあたりをうまく使えば、テーブルレイアウトよりはソースが簡単になり、逐次表示が可能となるため体感表示速度の改善が期待できます。ご検討ください。

視覚効果:

まとまったデザインであり、統一感があります。色使いも全体の雰囲気をよく調和させることに成功しており、問題ないでしょう。

気になることといえば、右寄せ、中寄、左寄せが混在し、しかもその意図が不明確であるという点でしょうか。何となく決めているのでしょうけれども、なるべく統一しておくとデザインがかっちりと決まります。あえて不安定にしているのであれば構いませんが、それが締まらない感じを生んでいるということだけは知っていてもよいだろうと思います。

またCSSを利用されているようなので、もう少し行間を広くとってもよいのではないでしょうか。外部ファイルで指定しているのですから、苦労はありません。

操作性:

ナビゲーションは一部再考の余地ありです。たとえクリック数が多くても、閲覧者が迷うことがなければ問題ではない、とはいうものの、大抵の場合、クリック数の少ないデザインはわかりやすいことでも優れているものです。小説の項目がさらに3つに分類されていますけれども、例えばこれなどはクリックして各ジャンルの小見出しを出すのではなく、グループ分けした上で1ページに全ての小見出しを表示してしまう方がよいでしょう。

またリンクの明示が不十分であり、どこがクリックできるナビゲーション部分なのか、パッと見にわかりにくいことも残念です。レイアウトから推測できるとはいえ、直感的にわかりやすい表示は可能な限り取り入れるべきです。下線をつけろというわけではなく、せめてリンク以外の部分と同じ配色はよしてほしいということです。

内容の充実:

創作系サイトはなかなか更新がたいへんでしょう。とくに長い小説はWebになかなか向かず、苦労の多いこととお察しします。そんな逆境にありながら、既に多くのログを書き溜めてらっしゃるのは立派です。最近のWWFに関するお話も面白く読ませていただきました。今後の展開を楽しみにしております。

1/42

URI:http://homepage2.nifty.com/mukku_c/ [2002.04.14]

表示速度:

背景画像はたしかに重く、私の貧弱な環境では表示に分単位の時間がかかります。とはいうものの、一度読み込んでしまえばキャッシュに保存されますから、以降はとくに気になりません。むしろテーブルでページ全体を囲っていたりすることの方が気になります。

テーブルの幅指定が99%ということもあり、どうにも意図を掴みかねるわけですが、ページ全体を囲むようなテーブルにできることというのは、基本的に全てCSSで簡単に実現可能です。内容を全部読み込んでから表示されるテーブルと異なり、読み込まれた部分から順々に表示されるようにすることが可能なので、体感の表示速度が向上します。

なお、背景画像の重いことについては、JPEG画像をPNG画像に変換し、パレットを16色から32色程度に指定、さらに白い部分を透明にすると、相当に改善されます。画像処理ソフトは無料のものだけでもいろいろあります。雑誌の付録などにもよく入っていますので、探してみてください。私はビルダー付属のアートデザイナーをよく使います。機能が限定されており、簡単に使えるからです。

ところで、ソースを見ると文法違反がたくさん見つかります。詳しくは添付ファイルをご覧いただきたいのですが、とにかく現状はまずいとお考えになってください。

IEは文法違反を自動修正する能力に非常に優れたブラウザですが、最新のIE6では標準モードにおいてその能力をむしろ退行させる方向に軌道修正しています。OSやブラウザに依存しないマークアップ言語としてのHTMLを守り発展させていくためには、コンテンツの作成者がIEの修正能力に依存せずにHTMLの文法通りに記述することが大切だ、ということではないでしょうか。

将来的にはIEも自動修正機能を大幅に縮小し、文法違反のページは最小限、文字が読める程度に表示するということになっていくだろうと、私は予想しています。デザインをどうしようかということは重要ですが、実際にどのようにHTMLを記述していくかということも重要です。IEで思ったように見られるならそれでいいと考えていると、そのうちにIEでさえろくに見られないということになってしまいます。

おそらく手書きのソースなのではないかと思います。最近はソフトが進歩しましたから、とくにホームページビルダーの標準モードなどはかなり堅実なソースを書くようになっています。有名ソフトはたいていしっかりしています。HTMLやCSSの正しい記述法について勉強するのが一番いいように思いますが、それが面倒であればソフトの使用をお奨めします。

勉強に役立つ文献をいくつか紹介しておきます。

視覚効果:

きれいなデザインだと思います。背景画像の使い方がうまいですね。文字サイズは固定のようですが、解像度耐性があるのはよいことです。VGAに対応したデザインのサイトは、最近本当に少なくなりました。

惜しむらくはHTMLの記述がよろしくないということです。単純明快なデザインのサイトであり、10時間ほど勉強なされば正しい記述で現在とまったく同様のデザインを実現できるはずです。

また、ナビゲーション側のフレームは1024×768あたりの解像度を念頭において、改行を用いて目次の位置を下げているのでしょうが、あまり意味がありません。ためしに改行を減らして上に寄せてみたデザインを作成してみましたが、それでとくに見た目が悪いとも思われませんでした。とすれば、低解像度の環境を考えるに、改行で目次の位置を下げるのはお奨めできないという結論になります。

操作性:

いろいろな意見があるでしょうけれども、最新の日記は表紙にある方がよいと私は思います。最近の1〜3日分の日記と、現在の表紙にあるメールフォームと諸連絡が表紙にあれば、大抵の閲覧者にとって便利なはずです。一方、「ONE DAY」は日記ログへのリンクになさってはいかがでしょうか。新しい日記は表紙で読めるようにして、「ONE DAY」は過去ログ担当ということで使い分けるとわかりやすいサイト構成になります。

一例を示します。

内容の充実:

改行を増やしたほうが読みやすいかどうか、というご質問がありましたが、そんなことは気にする必要がありません。自分が改行したいところで改行すればよいのです。どのような読者を対象とするかによって、そもそも適切な改行位置は変動します。もちろん段落とは何か、という見地から論理的に改行の適正位置を探ることは可能ですけれども、それとて前提のとり方次第で結論は変わってしまいます。

アクセスアップ狙いとして、という意味でも、私はやはり改行位置にはこだわらなくていいとアドバイスさせていただきます。私は高校生の日記系サイトをそれなりにたくさん読んできましたが、人気の有無と改行位置には必然的な関係が見つかりません。改行が多くても少なくても、内容さえよければ人気が出ます。アクセスアップ講座系サイトには、いろいろ書かれていますが、まともにデータを示して「だからこうするべき」といっているところはひとつもありません。「たぶん」「おそらく」「私が思うには」ばかりなんです。だからそんな愚論に付き合う必要はありません。実際に人気のあるサイトをよく見てみてください。改行の多いサイトも少ないサイトもあるはずです。

めい様のサイトは基本的に同年代の読者を想定されているだろうと思いますが、高校生が好む改行頻度は決して一様ではありません。あまり極端でさえなければ、内容の良し悪しこそサイトの人気を決める要素です。

とはいうものの、人気のある文章を書くのが難しいからこそデザインなど改善しやすい分野で努力しようとするのですから、私のアドバイスはほとんど無意味なものかもしれません。

とりあえず、一点のみ文章の内容についてアドバイスするなら、「不特定多数の方が興味をもって読むような文章かどうか」という自省はあるべきでしょう。題材は本当にただ単に日常生活についてでよいのです。それでも人気があるサイトがあります。題材は問題ではありません。大切なのは文章であり、そこに現れる思想、考え、人格です。書き方ひとつで、なんでもない題材を取り上げた文章に命が吹き込まれます。

「何を」書くかは、当面、気にする必要はないでしょう。「いかに」書くか、集中すべきはその一点です。HTMLの記述についても、同じアドバイスをしましたね。

パソコンの薦め

[2002.04.14]

表示速度:

空の背景は素人臭さを演出しがちで、そのうえ多くの場合重いという欠点があります。girenさんのサイトも例外ではありません。まず背景画像をなくすか、せめて変更されてはいかがでしょうか。サイトのテーマから考えて、私は背景画像は必要ないのではないかと思います。

視覚効果:

センスの良し悪しが問題となる以前の部分で引っかかっているように見えます。デザインも基礎固めの部分は知識量の勝負になります。非常にセンスのある方、あるいはどこかで勉強された方は、半ば無意識にやってしまうことですが、素人はまず勉強しなければなりません。

具体的なアドバイスをいくつか。

まず、左寄せとセンタリングの混在は非常にアンバランスなので、いっそ左寄せに統一すべきです。

また、何から何までテーブルで整理して見せていますが、そのことが印象を必要以上に堅くしてしまっています。定義リストの使用なども検討されてはいかがでしょうか。

さらに見出しに画像を利用している部分がありますが、デザインがバラバラで統一感に欠けるきらいがあります。せめてデザインは同じくし、コンテンツ毎のテーマカラーを決めて色分けのみ行うなど、むしろ共通点を強調するようなデザインを行うことでセンスよく見せることができます。

操作性:

各ページの最上部に目次を用意したのは便利でよいですね。ただ、目次はもう少しコンパクトにできそうですし、ジャンルわけを適切に行うことで見やすくなってくるはずです。また、3×3のテーブルによってレイアウトしているわけですが、これは再考の余地ありでしょう。

内容の充実:

ここまでデザインについて述べてきましたが、正直なところ、全て改善してもさしてアクセスは増えないでしょう。やはり内容が薄いのが最大の問題ではないでしょうか。情報が無いので教えてください、というサイトに人が集まるはずがありません。サイト作成のコンテンツにしても同様です。無料のサイトスペース提供業者を紹介するサイトは既に世の中にたくさんあります。現在の情報量では、先行するサイトには遠く及びません。

人気サイトの建設には苦労が必要です。勉強(あるいは才能)が必要です。自分にとくに人より優れた部分があると思うならば、その分野で勝負するのが一番です。しかしそうもいかない場合が多いでしょう。やはり、自分で大量の情報を集める努力なしには、なかなか情報提供系のサイト運営は困難です。ぜひここで心機一転、頑張ってください。