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

Advice

繁殖する小指の唄

[2002.04.23]

表示速度:

問題ありません。

視覚効果:

『ネバーランド』のアドバイスにもありましたが、現在のレイアウトには難があります。フレームの切り方がポイントになります。

現状維持
ナビゲーション部分、つまり左側2つのフレームは背景色を変えましょう。また、ナビゲーションフレームの真中を走る境界線を消してしまいましょう。画面が引き締まって見え、小目次が空白になる場合の間抜けな感じが大幅に緩和されます。
縦3分割
もし私が縦3分割のデザインを採用するとすれば、小目次は右にやります。左右でつりあってレイアウトが安定すること、左右に目次がある場合は右側が小目次だという暗黙の了解があることなど、メリットが多いからです。
T型分割
サイト全体のナビゲーションとコーナー毎のナビゲーションががある場合、よく使われるものです。例では小目次を右に配置していますが、これは小目次がない項目に配慮し、小目次が必要以上に目立たないよう配慮したためです。
横3分割
総合目次を上、小目次を下にします。

他にもいろいろ考えられますが、とりあえず4パターンを示しました。そのうち3パターンについては実際の例を示しました。いずれもフレーム定義ファイルおよび初期表示3ファイルのみHTML文書の記述を改めてあります(他のページはリンクでgoosideから読み込んでいます)。自由にソースをコピーして構いません。ご参考まで。

操作性:

「text」の閲覧に必要なクリック回数が多いのが気になります。ただ多いだけなら構いませんが、作品なのかメニューなのかわからないリンクを闇雲に進むことになるのが困ります。詩なのか小説なのかはっきりしないままクリックしていくことにも戸惑います。

現在位置がつかみにくい、リンク先の予想がつかない、これはつまり、ナビゲーションのシステム的な欠陥なんです。毎回「これは小説です」とか説明しなきゃいけないということではありません。ナビゲーションのシステムが適切に構築されていれば、自然に推測できることなのです。
では具体的にはどうしたらよいのか。

私ならサイトの構成そのものに手をつけますが、そこまでする必要はないでしょう。例えば一度選択したメニューを消さないナビゲーションを使用し、中目次を整理すれば問題はおおよそ解決します。

中目次の整理方法はいくつかありますが、最も単純なのは、内容を想像しやすい目次タイトルに変えることです。「賛歌」は「詩集1」とか。それが味気ないのであれば、「賛歌(詩集)」とする方法もあります。その他の整理方法として、小見出しとその内容という形で示す方法もあります。

賛歌
涙のかわりに
……
短い物語
画と唄
あそびごころ
思うこと

さて、一度選択したメニューを消さないナビゲーションというのは、例えば次のようなものです。

フレームをもう一つ増やす
さらにフレームを分割し、中目次の先の小目次をそこに表示させる。中目次が消えずに残る。
小目次をメインフレームに表示
これも中目次が消えずに残りますが、ただ単にこれをやったら操作性が低下するでしょうから、各作品の上下にも小目次を重複掲載しておくとよいでしょう。私がかつて製作したサイトでは各ページの上下(表紙のみ下だけ)にフレームにある目次を重複掲載しています。例えばこんな感じで。
DHTMLの利用
クリックすると同ページ内に小目次が展開する、あるいは中目次へのマウスオーバーに反応して小目次が表示されるものなど。

内容の充実:

内容は問題ないでしょう。

タグの勉強をしたいというお話がありましたが、お奨めの参考文献を
アドバイスNo.59でご紹介していますので、よろしければご覧ください。

The Stoner's World

[2002.04.23]

表示速度:

私の環境は通信速度32Kなので、さすがに重く感じられました。ただ、実際問題としては不都合ないでしょう。最近では大抵の企業サイトが、同等またはそれ以上のデータ量となっています。

視覚効果:

FLASHを使用されているということもあり、とても初心者の方とは思えませんね。全体的なレイアウトはたしかにそれらしいものですが、画像作成能力に優れていらっしゃるので、第一印象がいいんです。

小さな画面環境に対応したのでしょうけれども、携帯電話用サイトを思わせるclassicなデザインと技術力との差が、いささかアンバランスに感じられました。センタリング縦一列のデザインは、いささか単調といわざるを得ません。あるいはせめて、背景画像でダイナミックな効果を狙ってみてはいかがでしょうか。

私のサイトで使用している背景画像は、大画面でも小画面でもインパクトのあるデザインにしようと頭をひねった結果です。成功しているかどうかはともかく、背景画像はCSSと組み合わせて大胆に用いることで、意想外に主張の強いデザインを構成できるということをおわかりいただけるかと思います。(また別の例

操作性:

目次から内容を推測しがたい面があるのですが、それ以外にはこれといって戸惑う要素もなく、ただ動画の効果が私には少々うるさく感じられるといった程度でしょうか。しかしあのメニューの動画はサイトのイメージを強烈に担っており、多少の面倒は我慢してでも使い続けるべきかもしれません。

あるいはせめて、メニューが通常の画面サイズ800×600程度の中におさまっていると、スクロールの面倒がなくて便利なのですが。画面上部に陣取る動画を、下部へ移動すれば解決できるでしょう。

内容の充実:

内容はよろしいのではないでしょうか。ミュータント・忍者・タートルズを思い出しました。

クローバー

[2002.04.24]

表示速度:

テーブルレイアウトバリバリですね。テーブルを使ったサイトデザインを解説しているサイトばかりなので、仕方ないのですが、少々残念です。しかもHTMLの記述にミスが大量にあります。CSS(Web用のスタイルシート(の一種))を全ページにわたって使用されていますが、その文法もまたいい加減です。

IEはもともと文法違反を適切に修正する能力にたいへん優れているという特徴をひとつの売りとしてきたブラウザですが、そのIEが普及した結果、非常にいい加減なHTML文書が大量に出回るようになりました。梨紗さんの記述もIEでちゃんと見えればいいという発想でしょう。

しかしIEも最新のIE6以降、文法違反の修正能力を排除していく方針を打ち出しています。そして実際にIE6の標準モードでは、文法違反をほとんど自動修正しません。

将来的には、梨紗さんのサイトはまともに表示されなくなります。一生懸命レイアウトしても、文法違反のマークアップではブラウザ側がちゃんと認識しなくなるのです。そして頼みのIEにも裏切られます。

そもそも梨紗さんはマークアップという言葉の意味をご存知でしょうか? じつはテーブルも含めて、HTMLはレイアウトを記述するためのものではありません。文書の見た目はCSSで記述することになっています。そうしたお話も含め、もし興味があれば、下記のサイト群で一度お勉強なさると将来のためだと思います。不勉強なままでも今年も来年も困らないでしょうが、3年後、4年後には困るだろうと思います。
参考1
参考2
参考3
参考4

視覚効果:

背景画像がほぼ統一されており、雰囲気作りに成功しています。またテーマカラーのグリーンも徹底しており、好印象です。気になるのは表紙です。表紙も背景画像とテーマカラーを揃えるべきです。掲示板も同様で、背景画像を指定できるなら他のページと同様に。ただし日記は変えなくてもいいでしょう。とりあえず例外にします。

文字サイズについてですが、掲示板は文字サイズが固定のようですね。でしたら、全ページで文字サイズを固定してもよいでしょう。現状ですと、文字サイズ「最小」を指定した際に文字が小さすぎて読めないのです。また文字サイズを最大にした場合にレイアウトが崩れるページがあります。弱視者が文字サイズを大きくして読むことを想定しない方針なら、文字サイズは固定してよいでしょう。もちろん、レイアウトを工夫し、あまり小さな文字サイズをデフォルトにせず様々な閲覧者に配慮するのが王道ですが、サイトの性格上、とくにこだわる必要はないと私は考えます。

とりあえず表紙(エンターページ)のデザインだけはひどいので、すぐに改善されるべきです。壁紙とテーマカラーを揃え、レイアウトを全面的に見直されることをお奨めします。エンター画像よりランキング画像の方が目立っているように見えるのはおかしいと思います。

操作性:

目次の並び順ですが、目次の項目を上、ランキングなどは下に配置する方がおさまりがよいはずです。目次は大切なものから順に並べるのが基本です。ランキングの順位が大切なのはわかりますが、しかしだからといってランキングが最上位では変です。なぜなら、サイトの内容がいいから、投票してもらうことができるわけです。投票してもらうことが先であるはずがありません。

内容の充実:

ランキングを気にされているようですが、しばらくするとあまり投票もされなくなってきます。それは仕方のないことです。そして自分自身も、興味をだいぶなくしてしまうでしょう。そうなったら、ランキングは脱退してしまうのも手だろうと思います。

それからが本当にサイト運営の始まりになるのではないかという気がします。ランキングへの投票ボタンが目立つサイトから、サイトの内容が充実しているサイトへ方針転換することになるからです。

怪しげ探検隊

URI:http://toshi686-web.hp.infoseek.co.jp/ [2002.04.24]

表示速度:

問題ありません。テーブルが適当に小分けにされているなど、表示速度への配慮は十分なされています。デザイン的にテーブルでなくとも簡単にCSSで同様のデザインを実現できますが、FrontPageを利用されているということですから、まずは現状維持でよいでしょう。

視覚効果:

「怪しげな雰囲気」を出すには、どのようなデザインを心がけたらよいのでしょうか。怪しげなサイト構造、怪しげなレイアウト、怪しげな配色、怪しげな画像……いろいろ思いつきますけれども、実行する段階で障害の多い「構造とレイアウトの怪しげ化」は、この際除外しましょう。とすると残るのは「配色と画像の怪しげ化」です。

ここで少しばかり寄り道して色のメッセージ性について解説します。

モノトーン(白/黒/無彩色)
公的な,信憑性,厳粛,軽い(白),神聖(白),重い(黒),葬送(黒)
清涼感,さわやか,寒い,悲しさ,用心
自然,生命,調和,新鮮,希望

こうしてみますと現在の配色は、フォーマルで信憑性があり厳粛であることを基調とし、清涼感と調和の彩りを添えたサイト、というメッセージを発信していることになります。やはりあまりサイトの内容に合っているとはいえないかもしれません。

ではどのような配色にすればよいのでしょうか。残念ながら、これが絶対だという配色は存在しませんので、一例として、少々毒々しいものを作ってみました。白黒赤の組み合わせでUG系サイトのような雰囲気を作っています。また背景画像を怪しげなものに変更。強烈なインパクトを狙ってみました。全般に急作りで完成度が低いのは大目に見ていただくとして、配色と画像の変更によってサイトの印象がかなり「怪しげ化」することをご確認ください。なお、例示したページのソースや画像はご自由に再利用なさってかまいません。

操作性:

標準的なナビゲーションを一貫したシステムに基づいて利用されていますね。大量の情報をていねいに整理なさっていることに好感を持ちました。惜しむらくは行き止まりで戻れないページのあること。表紙または項目内の目次へ戻るリンクを完備しましょう。

内容の充実:

問題ありません。私も楽しく読ませていただきました。

私の健康社

URI:http://www.ddt.or.jp/~miyoshin/irinukah.htm [2002.04.25]

表示速度:

「新鮮いりぬか」はテーブル一辺倒のレイアウトなんですね。だから無駄タグが非常に多く、また論理構造もグチャグチャになっています。今はまだ旧式のHTMLにとらわれた方が多いので、あまり重要視されていませんが、将来的には文書の論理構造と適切なマークアップは重要視になってきます。そうしたことから、せめてもう少しテーブルの使用を控えていくべきだと思います。テーブルを使わずとも、CSSによってほぼ同様の効果を出すことは可能ですから。

また非常に表示が重い(表紙全体で186KB)こと、画像の質が悪いことが気になって調べてみたのですが、画像の本来の大きさと表示結果の指定サイズが異なっていますね。これはまずいやり方です。初心者向けの本にもよく書いてあることなのですが、実際に使うサイズで画像を作成しましょう。そうすれば画質もよく、しかも軽くなります。ただ、私ならこんなに多くの画像は使用いたしません。

視覚効果:

各項目を目立たせようとするあまり、あまりに枠線が太く、配色が派手で、品がありません。企業の信用にかかわるといえます。

レイアウト、ページのデザインの基本は、紙媒体と同様です。あまり派手にしてはいけません。試しに印刷なさってください。それが企業のパンフレットとして利用できないようなデザインであれば、やはり失敗といえます。Webだから若い人の感性に合わせて……などと考えるべきではありません。むしろ多くの紙媒体の情報を目にしてきた豊富な経験を活かすべきなのです。企業イメージを損なうようなデザインは間違ってもしてはいけません。

素人向けのデザインの教科書として定評のある本を一冊、ご紹介しておきます。Web製作コーナーにおいてあることが多い「Non Designer's Design Book」毎日コミュニケーションズ/税別1400円です。印刷物用の教科書なのですが、精選された内容がニーズに合うようで、Web屋のバイブルになっています。

文字の色使いですが、正直、色など使わなくてよいのです。まともな大企業のサイトは、軒並みカラフルな文字色を改めてきています。印刷物がそうであるように、文字はほぼ色を統一した方が情報の信頼性が高くなるという意見が常識となったのです。使用するにしても、せいぜい3色ということです。

操作性:

問題ありません。

内容の充実:

私はここまでいろいろ申し上げてまいりましたが、Web製作関連の書籍や雑誌を毎月購読して情報を仕入れていれば、誰だって私くらいのことはいえるようになります。お仕事の一貫としてWebに関わっていらっしゃるならば、それなりに情報収集とお勉強のためにお金と時間とかけていく必要があります。情報不足、勉強不足のまま、実製作にばかり時間を費やすのは人生の無駄です。人が自ら発見できる事柄は限られています。

素晴らしくよくできた企業サイトというのは、それこそいくらでもあるのですが、とりあえずUFJ銀行のサイトは非常に勉強になるかと思います。

なお参考までに、私のセンスだとこんなサイトになります、という例を出しておきます。これがいいというわけではなくて、ある意味対極をなすデザインでありながら、同じ情報が伝わっているということを見てほしいんです。そしておそらく、自分のやりたいことはやっぱりこれではない、とも思われることでしょう。その違和感の原因を探ることで、問題を解決し、しかも自分の希望をも満たすにはどうしたらよいか、少し見えてくるのではないかと思うのです。