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

Advice

徳保隆夫の発言集14

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

キョンシー電影所

URI:http://www.geocities.co.jp/Hollywood-Studio/4558/ [2002.05.14]

現状維持でよいのでは?

現在のデザインが正解でしょう。キョンシー的雰囲気を盛り上げるということよりも、情報サイトとして信頼の置けるデザインを重視して、よい効果を上げているように思われます。暗いデザインにして、具体的にどのようないいことがあるかというと、どうにも思い浮かびません。

キョンシーの小説を公開しているサイトなら、そのデザインが小説の雰囲気を盛り上げる効果を持つでしょうが……。

アオイゲンソウ

URI:http://www.mars.dti.ne.jp/~jeke/ [2002.05.16]

一部修正案

かなりの技術をお持ちですね……。デザインコンセプトもレイアウトレベルではかなりよいと思います。閲覧しやすい構成ですし、サイトの雰囲気も一貫しています。

文字サイズが可変なのに改行幅が固定なので、文字サイズを大きくすると文字が重なります。外部CSSファイル中の文字サイズと改行幅の設定を修正されると、アイフレーム内が読みやすくなるでしょう。(註:この場合、font要素で文字サイズを小さくするのはやめてください。CSSファイルで既に小さい文字を指定してあります)

hiyama.css修正案(body要素のみ)

body
{font-size:x-small; line-height:1.5em; font-family:"MS ゴシック";
color:#4d6495; background-color:#ffffff;
スクロールバーの設定}

ところで、外部CSSの中に<style type="text/css"><!--といった記述は「入れないのが正しい」ので注意が必要です。なぜなのか、について興味がある場合はHTMLの文法を勉強なさってください。

ペンション☆なおぴー

[2002.05.16]

見違えました

なんだかしばらく見ないうちにずいぶん頑張られたのですね! 見違えました。ナビゲーションが非常に充実していらして、びっくりしました。壁紙も注意深く選定されていますし、画像も厳選されています。いろいろ画像を使いたいというのは、多くの人が固定観念として持っている思いです。それを短期間で打ち破った努力には頭が下がります。私などは何ヶ月も悩んだのです。

さて、今後の更新の労力を考えますと、もしSSIで単一のファイルを一気に読み込ませているのでなければ、表紙以外のナビゲーションに「Up」マークはつけない方がよろしいだろうと思います。あまりにも更新が面倒になると、「更新サボっちゃえ」につながります。一度作ればそれですむ部分に手間をかけるのはよいのですが、今後、更新のたびに書き直さなければならない部分は少ない方がよいでしょう。リニューアルは一生懸命やって、更新は気楽に、それがサイトを長く運営する秘訣です。

実際に現時点でも、表紙にアップマークのついていない「過去ログの間」に、他のページではアップマークがついているという不統一が発生しています。注意して、頑張って更新すればどうにかなる問題ですが、でも私は、そこを頑張るよりは宝塚の記事を書く方に手間をかけてほしいと思うのです。

さて、その他の改善点をいくつか、つらつらと。

Homeへ戻る画像リンクが左へいったりまん中にあったり、まだ不統一です。どちらかに決めましょう。

管理人室にプロフィールと日記へのリンクが用意されていますが、私なら、管理人室に直接プロフィールをおいてしまい、その上に日記へのリンクを用意します。プロフィールのページはそんなに分量が多くないので、管理人室とくっつけてしまって構わないと思います。

ナビゲーションにタイトル属性でいろいろ書いていらっしゃるのはよいのですが、ぜひそれを全部の項目につけましょう。つけるならつける、つけないならつけない、なにごとも統一し、迷いを排すのが定石です。その細心の注意が、閲覧者に「親切だ、しっかり作られている」という印象を与える力になります。

更新履歴によると手書きのサイトだそうなので、最後にこれだけは……。以前も申し上げたかもしれませんが、やはりCSSを導入されることを、強くおすすめします。ソースを書くのが、ずっと楽になるのです。私はビルダーでほとんど作成してしまうのですが、最後の仕上げだけ少し手を加えます。しかしそれでも、CSSを本格的に導入すると、更新が非常に楽です。

単語やフレーズのひとつひとつにfont要素やb要素などを指定するのは面倒ではありませんか? 正しいHTMLは簡単です。その簡単なHTMLでマークアップして、太字にするとか文字の色を変えるとかはCSSでやってしまいませんか? そうすれば、ああ、この色はちょっと気に入らないや、という場合でも、CSSファイルを一箇所書き換えるだけで、Webサイトの表示は全部変わるのです。リニューアルが簡単になります。そして何より、更新が楽になります。(あまり更新をしていない私がいっても説得力がありませんが……)

私がCSSの勉強をはじめたのは、100ページもある友人のサイトを全面リニューアルしたときのことでした。一度やって懲りて、しかし2ヵ月後には再リニューアルの予定が。正直やってられないと思って、こんなに苦労するリニューアルは次回を最後にしようと考えました。そして2ヶ月かけてCSSを勉強したのです。で、再び泣けてくるような更新作業があって、さらに2ヵ月後。30分でリニューアル完了。CSSファイルをちょっと書き換えるだけだから、何の苦労もいらなかったんです。

そんなわけで、CSSのお勉強をおすすめします。[02.05.12]

無理をなさらず楽しく

HTMLクイックチェッカはHTML4.0 Transitional限定対応なのですが、いいソフトだと思います。StrictなHTMLに慣れてくるとエディタとしても非常に使えます。文法チェックと解説付きでフリーソフトというHTMLエディタも公開されています。

さて、私が断腸の思いでおすすめサイトをひとつに絞ったのは、なるべく短時間で全体像を見通していただきたかったからです。私は試行錯誤する中でCSSと出会い、多くの適当な解説に騙されながら勉強しました。遠回りをしました。HTML+CSSの思想、その全体像を見渡したのは、じつは一通りの勉強を終えたあとでした。そのときに、「最初からこれを教えてほしかった! そうすればこんなに苦労することはなかったのに!」とつくづく思ったのです。でもやっぱり、初心者に全体像を伝えるのは難しいんですよね。

なおぴー様にはぜひ、私がおすすめしたサイトなどでHTMLとCSSの全体像をつかんでいただければと思います。最初から全部を読む必要はありません。基礎にあたる記事は必ず読んでいただくとしても、リファレンスは興味のあるところをつまみ食いしていけばよいでしょう。

趣味のお勉強はあまり大まじめにはやらないで、教材さえいいものをそろえたら、あとは興味に任せて読み進めばよいのではないかと思います。[02.05.16]

チョコのおもちゃ箱

[2002.05.16]

アクセスアップは困難

重いサイトを軽くしたらアクセスが増えるかというと、そんなことはないだろうと思います。現状をみますと、一体どのページに人を呼びたいのかさっぱりわかりません。サイトのイメージをどう売っていくのか、どのようなサイトとして印象付けたいのか、肝腎の部分が曖昧なので、きれいなデザインにもかかわらず印象に残りません。サイトのコンセプトをはっきり決めて、見せたいページをいかにフィーチャーするか、その一点だけを考えてサイト構造そのものに手をつけるべきです。サイトのタイトルも含め、現状ではいわゆる自己紹介型個人サイトの範囲を一歩も出ておりません。

アクセスアップというのが1日に30人程度をさすのならば、ネット上での人付き合いを効率化すればすぐにも達成できます。しかし、もし1日100人が目標だとすれば、かなりたいへんです。ふつうの人がふつうにサイトを作ったのでは到達不可能な境地ですから。[02.05.07]

その後

デザインは見違えるようによくなったと思います。メインコンテンツのアピールはまだ今ひとつですが、それでも一つの壁を越えているように見えます。今後は、例えば表紙の目次の中で「素材」だけ大きいロゴにするなど、デザイン的に特別扱いされるとよいでしょう。

フレームはもっと簡単に記述できます。一気に3分割できるからです。以下を参考に。まず横に3分割、続いて真中の部分を縦に3分割しています。

(前略)
</head>
<frameset rows="33,*,74" frameborder="NO" border="0" framespacing="0" cols="*">
<frame name="topFrame" scrolling="NO" noresize src="frame/ftop.htm" >
<frameset cols="37,*,32" frameborder="NO" border="0" framespacing="0" rows="*">
<frame name="leftFrame" scrolling="NO" noresize src="frame/fleft.htm">
<frame name="mainFrame" src="indextop.htm">
<frame name="rightFrame" scrolling="NO" noresize src="frame/fright.htm">
</frameset>
<frame name="bottomFrame" scrolling="NO" noresize src="frame/fbotom.htm">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>

サイトはたいへんよくなったと思います。積極的に交流の輪を広げていくと、また新たな展開があるかもしれません。

なお、離乳食のページは人気はあまりないかもしれませんが、残しておいた方がいいような気がします。(こればっかりは根拠はありません。ただそう思っただけです)[02.05.16]

さらにその後

離乳食の人気ページをいくつかご紹介します。

アクセス数を決めるのは、内容と宣伝だけです。宣伝しなければ人はきませんし、内容が優れていなければ再び来てはくれません。私のサイトのリンク集のように、「他にないもの」を扱っているならば、優れていようといなかろうと、必要とする方は来てくれるのですが、そういった題材はそうそうないものです。

サイトの方向性として、いわゆる個人サイトとしてやっていくのか、情報提供型サイトとしてやっていくのかという問題があります。私は、チョコさんの場合、個人サイトとしてサイトを運営して、あまりアクセス数のことは考えないのがいいんじゃないかと思います。そうして、自分時の会うネット友達(という言い方が適当なのかどうかはわかりませんが)と交流していくのがよいのではないかと。

情報提供型サイトは、いうなれば利用されるだけです。10万ヒットの人気サイトでさえ、月に1・2回しか掲示板に書き込んでもらえません。それでも世のため人のためになるのなら、喜んで情報提供しますよ、と、そういう崇高な理念がないとやってられないのではないでしょうか。[02.07.06]

後日談

勘違いがあるといけないので、念のため。

noframes要素は、フレームページをフレーム未対応環境の方にも問題なく閲覧できるようにするための要素です。フレーム未対応環境のために、フレームなし版を作る、というのとはまったく発想が異なるので要注意です。

noframes要素は、フレーム対応環境では表示されません。フレーム未対応環境でのみ、表示されます。フレーム定義ファイルにnoframes要素を追加すれば、フレーム未対応環境の方にも、何らかの情報を伝えることができます。ふつうは、目次ページなどへのリンクを用意します。

フレーム未対応環境として最大の勢力は携帯電話です。携帯電話でも情報を入手できるようにしたいのであれば、必須です。携帯電話からのサイト閲覧で最大の障害となるのは、まずページサイズの制限オーバー、次にフレーム、そしてテーブルレイアウトです。ご参考まで。サイズ制限は拡張の一途をたどっているので、数年内には問題ではなくなるでしょう。とするとフレームには要注意となるかもしれません。携帯電話なんかどうでもいいとおっしゃるなら話は別ですが。

さて、フレーム定義ファイル以外にもnoframes要素を用意されることをおすすめします。フレームを前提にしたサイトは、コンテンツページにナビゲーションが不足する傾向があります。チョコさんのサイトもそうですね。そこで、最低限のナビゲーションとして、各コンテンツページにnoframes要素を用いて目次ページへのリンクを用意しましょう。とにかく目次へ戻れればよい、ということです。

noframes要素を全ページに書くのは面倒くさいと思われるかもしれませんが、実際にはそれほどでもありません。Speeeeedなどの複数ファイル内の文字列を一括で置換するソフトを用いれば一瞬です。例えば、<body>\n(←Speeeeedでは\nが改行を意味する/Perlと同じ)を、以下のように置き換えなさい、と命令すればよいわけです。ただしこの例の方法はフレーム定義ファイル以外でしか使えませんが。(フレーム定義ファイルではnoframes要素の中にbody要素が入る)[2002.10.22]

<body>\n<noframes>\n<p><a href="menu.html">目次</a></p>\n</noframes>\n

後日談2

現在はまだ、サイズ制限がきついので携帯電話でPC向けに作られたサイトを見る人は多くありません。テキストサイトなど、一部で広まりつつある、といったところです。しかしながら携帯電話はなおも進化中ですから、今後だんだんに携帯電話で最新の更新をチェックするといったスタイルが広まっていくのではないかと思います。

今すぐどこうという話であれば、たしかにあまり重要ではない話かもしれませんけれども、「最低限のレベル」で対応するのはそれほど大変な話ではないので、フレーム未対応環境への配慮に取り組んでみてもいいのではないかと思います。

それはともかくとして、新しいデザインはかなりすっきりとしていて、以前と比較してかなりよくなったと思います。物事が一気に進展することは滅多にないわけで、この数ヶ月間、たゆまず新デザインを練ってこられた地道な努力の成果がよく現れているものと思います。

少しでも簡単に、迷いなく、便利に閲覧できるデザイン。更新しやすく、内容の充実に取り組みやすいデザイン。デザインの切り口はいろいろあります。今回のリニューアルでひと段落ということだそうですが、今後もちょっとした改善は随時行っていかれたらよいのではないかと思います。

よいところに落ち着かれたと思います。これで安定期に入るわけですが、今後の更新をますます楽しみにしております。

素材がずいぶん充実してきましたね。個人的には、こぶたの掲示板で使われている半透明風の無地背景画像を、いろんな色で作って配布していただけたらなあと思います。けっこう使い途があるのに、たくさん(200色くらい)配布している素材屋さんを知らないものですから。たいてい2〜5色程度で。たしかに物が物だけに、著作権を主張できない(あまりにもありふれたものには著作権が認められない場合がままあります)のでつまらないのかもしれません。でも、あったら便利だなと思います。[2002.10.23]

図食館

URI:http://homepage3.nifty.com/tosyokukan/ [2002.05.17]

「不注意」を減らしていきましょう

重さを心配されていますが、問題ないようです。私はサクサクと閲覧することができました。またレイアウトはページ毎に多少の変動がありますが、概ね色彩が統一され、直線を基調としたデザインも一貫していたため、すっきり読むことができました。サイトの構成も明解、よく整理されています。

「リニューアルしなきゃいけない」というような欠点はないように思われます。細かいことをいえば、ほんの感想ページだけ色が濃い理由がよくわからないとか、「三月は深き紅の淵を」のレシピのタイトルが「上と外」になっているとか、レシピの目次にセンタリングと左寄せが混在しているとか、同じ目次でセルの一番左から文字があったり、1文字分スペースがあったり不統一だとかいった「不注意」が多々ありますが、それは発見し次第修正していくということでよいのではないでしょうか。