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

Advice

徳保隆夫の発言集27

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

トロイメライ

[2002.07.21]

重いとは感じませんでした

AirH"32Kで見ましたが、重くはありませんでした。サクサク閲覧できたように思います。

3つのアドバイス

まず、エンターページを中トップにしてはいかがでしょうか。もちろん、同盟と更新記録も残します。WinXPのデフォルト状態のように表紙をすっきりさせたいのかもしれませんが、現状ではやはりさびしいというか、唐突な感じがします。たっぷりの余白を「魅せる」ほどデザインが洗練されていないからです。

次にレイアウトについてですが、背景画像を右側に持ってきたらよいのではないでしょうか。文字が左によっているのに、背景まで左に寄せるには理不尽です。白の背景色と比べ、意外にコントラストが強い背景画像なので、文字が読みにくくなっています。また、画面の右側の寂しさが強調されてしまいます。

最後に、HTMLの素人なのは、みな同じです。ただ少しばかりの勉強をしたかどうか、違いはそれだけです。お勉強しましょう。

お勉強のために

CSSはFPEではなく自分で書いて、ソースに挿入したものですよね? まずCSSからお勉強を始めるという手もあるでしょう。とりまえず外部CSSを使うことからはじめてはいかがでしょうか。その次は背景あたり。じつは右側に背景画像を並べるというのは、CSSを使わなければ基本的に実現不可能だったりします。

SilentEstado

URI:http://www5a.biglobe.ne.jp/~raimei/ [2002.07.22]

表示速度:

私は基本的にページの上下動はキーボードで操作しているので、マウス操作の面倒を減らすために文字を小さくする……というのは不思議な感じがします。Home、End、PageUp、PageDownの4つのキーを使うと、かなり便利に閲覧できます。リンクのクリックはマウスの方が便利だと思いますが、たとえばコピーはCtrl+Cと知っていると、いちいち右クリックして……なんてやってられなくなります。ちなみに貼り付けはCtrl+V、切り取りはCtrl+Xです。全部マウスでやる場合と作業効率が全然違うので、ぜひご参考になさってください。

なお、縦スクロールを減らしたいのであれば、ページを小分けにするのが標準的な方法です。ただし私はあまりおすすめしません。何回もリンクをクリックして、いちいち30秒以上待たされる(私の環境が低速回線なので)のはかったるいからです。よほどのことがない限り、スクロールの方が楽だと思います。

ところで、レイアウトの問題で文章が読みにくいという意見は私にもわからないでもないです。対象層次第だと思いますが、横にずらーっと並んだ文字は、若い人には不人気のようです。ティーンズノベルの文庫などを眺めると、ページの下3分の1がほとんど空白になっていて驚かされることがあります。文庫本の一行(36〜42字)すら長いと感じる方が少なくないということなのでしょう。ちなみに、新聞は一行16〜24字程度です。しかも一段落1〜3文が基本となっています。大人向けであっても、短時間に多くの情報を伝達する文書では、子供向けと同様に書くというわけです。

こうしてみると、もう少し段落を短くすることをお考えになった
方が
よさそうです。ただ、一点だけ注意していただきたいのは、改行
の位
置です。横幅に目を奪われるあまり、文の途中で改行する例が後
を絶
ちませんが、これは愚かなやり方です。真似してはいけません。
この
ようになってしまう危険性があるからです。(文字を大きくした
場合、
あるいは小さな画面で閲覧した場合など)

文章の表示領域の横幅を狭める方法としては、たしかに「表と文字を横に並べる」のも一手ですが、作成された表に巨大なものが多いので、今回はあまりうまくいかないかもしれません。ただ、いくつかの小さな表についてはぜひ検討してほしいのですが。

一般的な方法としては、CSSでbody要素に十分なpadding(内側の余白)を取る、ということになるでしょう。ついでにline-height(行の高さ)を1.5em(1.5文字)以上になさるとよいでしょう。だいたいそれで読みやすくなります。(私のサイトくらいには)

どこでも配置モード

案外、どこでも配置モードを使っている方は少ないですよね。IBMは説明書でも先に紹介していますし、イチオシの機能として売っているのですが、当然の結果だろうな、と思います。標準モードと異なり、どこでも配置モードはDTPのやり方(つまり紙に印刷するページを作る方法)をWebページ作成に持ち込んでいるわけです。すると当然のように、文字サイズも画面サイズの可変のWebページではうまくいかないんですよね。あれでもちゃんと使いこなせばIBMの示す例のようによいものが作れなくもないのですが、その努力をする気力があるならば、標準モードでがんばってみた方がいいのではないかと思います。

S.T.Sさんのサイトは内容が素晴らしいので、デザインによらずお客様は多勢いらっしゃるだろうと思います。デザインをよくしたらもっとお客様が来るか、といえばそうともいえないでしょう。アクセス数とデザインはそれほど関係ないからです。けれどもやはり、自分自身が納得いくかどうかということは、サイトの存続に大きく関わってきます。反響にとらわれずに、自分自身の手ごたえを拠り所として、デザインの改善を進めていってほしいと思います。

CSSのミソ

CSSは基礎からのお勉強になるかもしれませんが、CSSにできることは基本的に3つしかありません。HTMLで指定された見出しとか段落(なぜビルダーでは「標準」なんていうよくわからない用語を使っているのでしょうね)といった要素は、それぞれ長方形の箱型の領域を持っています。HTML文書の画面表示というのは、この長方形をどう組み合わせるか、ということなのです。

CSSにできることというのは、簡単にいって、この長方形に「背景をつけ文字をいじり枠線を指定する」「外側と内側に余白を作る」「配置を指定する」ことだけです。たいていのサイトは、とりあえずbody要素に内側の余白を取り、行の高さを1.5文字分以上にすれば読みやすくなります。CSSの記述としてはたった一行ですみます。

body {padding:2em; line-height:1.5em;}

たったこれだけなのですが、ここまでをちゃんと理解できれば、あとは結構楽でしょう。CSSの解説サイトを順に読み進めて、上記の一行を理解し、自分でも書けるようにしていただければと思います。

long trip

[2002.07.24]

フォントサイズ

同じことを何回でも書かせていただくわけですが、小さい文字が好きならば文字サイズ「最小」を推奨すればよいのです。文字サイズ「中」で小さい文字を表示させる必要は全くありません。目が悪くて文字を大きくしたい人、あるいは私のように小さい文字が好きで、いつも文字サイズ「最小」に設定している人、どちらも大切にするためには、文字サイズ「中」ではふつうのサイズで文字が表示されるようにすればよいのです。

各ページのレイアウト

サイトのデザインは各ページを見ればそこそこですけれども、できることなら表紙の雰囲気で全ページを統一なさるとよいでしょう。また、背景画像と文字が同じく左寄せなのは奇妙なデザインといえそうです。(私もやっちゃっていますが)これは改善した方がよいでしょう。修正のついでに、CSSを外部CSSに変えておくことをおすすめします。

タイトル

タイトルのないページが少なからず見受けられますが、必ずタイトルを忘れずに。文法的に必須だということはともかくとして、タイトルのないページは多くのウィンドウを開くタイプの(私のような)閲覧者には困りものです。お気に入りに追加するのも面倒です。タイトルはぜひ入れるようにしましょう。

サイトマップ

メニューがよくわからなかったので「初」を読んだのですが、サイトマップにはリンクも用意しておくとよいでしょう。とくによくわからないメニューの場合、説明のページから表紙に戻ったときにはもう、どれが何だったかうろ覚えになっていることが多いので。そもそもわかりやすいメニューにしてほしいと思いますが、何かこだわりがあるのでしょう。ですからせめて、説明を親切にしていただきたいところです。

ばつじるし

[2002.07.27]

配色を見直す

背景画像に直接乗っている文字が大変読みにくいこともさることながら、背景画像と目次の色がきれいにマッチしていません。背景画像はすべて、コントラストの低いエンターページのものにした方がよいでしょう。目次や文字色のトーンを押えて、色同士がけんかしないように注意しましょう。

レイアウトを見直す

目次ページのルフィは大きすぎてバランスを欠いています。画像を適宜縮小するようにしましょう。またサイトの中に中寄せのページと左寄せのページ、白背景と黒背景のページ、様々な文字色のページが混在するのもよろしくありません。

サイトの構造を見直す

しつこいようですが、エンターページはなくしましょう。いろいろ書いてありますが、目次ページにあっても問題ない内容ばかりです。また目次を見ると、重要なものとそうでないものが、いい加減に並べられています。何が重要で何が重要でないのか、あらためて整理し直すべきでしょう。

おまけ

FPEはフリーソフトではないので、勝手に配布してはいけません。またエンターページにある「転移」は「転載」が正解です。

追記

いくつか、改善されましたね。サイト全体のデザインの統一や、目次の整理、一部の文字色の見直しなど、もっともっとよくできる箇所はたくさんありますが、よい方向に進んでいるようで、安心しました。

なお、ルフィの画像が(大きさは小さくなったけれども)相変わらず重いので、どうにかした方がよいと思います。162KBありますが、せめて50KB以下にしましょう。参考までに、私が加工して4KBにしたものを示します。これくらいでいいんじゃないかと思うのですが。

tomomana's WEBSITE

[2002.07.27]

続けることが大切

小学校2年生だそうですが、漢字の使い方が概ね正しいことに驚かされました。せっかくなので、句読点も正しく遣うとよいでしょう。全体的に、よくできたサイトだと思います。

ひとつアドバイスできることがあるとすれば、とにかく続けることですね。お客さんをたくさん呼ぼうといったことはあまり考えずに、小学校2年生の間だけでもいいから、日記を書き続けることです。たいして意味のないことでも、続けることで重要な価値を持つようになります。頑張ってください。

その後

アドバイザーの独り言

(プロフィールの職業欄が「小学生・中学生」というのはおかしい、というご意見に対して)

職業は多分、直しようがないですね。gaiax系システムに標準装備されているプロフィールページの都合で、小学生と中学生を別々には選べなかったはず。「小学生・中学生」というのしか選択肢になかったと思います。

HPBのこともそうなんですが、鑑定には案外、余計な知識が要るものだと思います。HTMLやCSSの正しい使い方、アクセシビリティ―などについて説明するのは大切なことだと思いますが、相手がなぜそういった知識が不足したままここまできてしまったのか、まずそこを理解しなければ説得も難しいように思います。私自身、相当な紆余曲折を経て現在に至っています。会社でWordの正しい使い方を教えるような場面でもつくづく実感させられることながら、「最短距離で正解へと人を導くのは非常に難しい」といえます。世界観、人生観まで転回しかねない「第一歩」にどれほど苦労することか……。相手の考え、状況を斟酌した上で、それぞれの「第一歩」を私は考えていきたい。

gaiaxは発展途上で停滞したシステムで、使い勝手もさしてよくないのに制約ばかり非常に多いという特徴があります。しかしフレームを使った安定したデザインのサイトをこれほど簡単に作れるシステムが他にない以上、明野さんにとって当面、他の選択肢はありえないでしょう。とすると、アドバイスに困るんですよね。7歳というプロフィールをみる限り、先の長い方なので、とりあえず焦ることもないような気もするんです。(HPBの標準モードが現状かなりのレベルで仕様に準拠していたり、Mozillaの完成度が高いのでIEも今後ますます標準対応を進めるだろうといったことを勘案すると、しばらく待つうちに楽ちんシステムも「許せないこともない」というくらいには進化しうるのではないかと思われるのです)……結局、gaiaxの不都合には目をつぶっていくしかないのかな、というのが私の結論ではあります。

本題

とくにお勧めというわけではありませんが、10分くらいかけて私が探した素材屋をいくつか。

gaiax仲間のリンク先を探していけば、もっといろいろ見つかるのではないかと思います。

ところで、ページを軽くしたいという希望をお持ちのようですから、「画像を使わずにきれいなデザインを実現する」ことを考えてみるとよいでしょう。すぐに挑戦しようという性急な話ではなくて、じっくりと長い間、その方向で悩んでみてはどうかという提案です。なかなか面白い問題ではないかと思うのですが……。興味があればぜひ、挑戦してみてください。

画像を上手に使うには、多分、たくさんある画像をだんだん減らしていくよりも、画像なしの世界に、少しずつ、彩りを添えていくという方向性が望ましいのではないかと思います。何より「色」には注意するようになるでしょうから。[2002.09.14]