| [ Home > KOTOBA > Design ] |
Design - Making this site (10/25/98)
11/9/98 一部追記
さてつれづれなるままに執筆しているこのサイトですが、ありがたいことに結構な反響で、中にはいろいろ建設的なご意見をいただける方もいらっしゃいます。自分一人で悩んでいるより、誰かとDISCUSSすることによって、自分自身の考えもより進歩するような気がしています。
トップページのデザイン変更について
トップページはそのサイトの「顔」です。中の記事は一度読んでしまえば、時間が経てば忘れてしまうかもしれませんが、トップページの「印象」は頭に残るでしょう。そのサイトがどんなサイトか、書いている人がどんな人柄か、このトップページがすべてを物語ります。
ですから色々と工夫を繰り返しています。まず考えることは、全体のバランス。色調。それからあまり冗長になりすぎないように。以前は単純にすべて中央揃えで縦に長く配置していましたが、どうも、下までいちいちスクロールするのは面倒くさそうなので、テーブルを使って、画面の大きさに収まるよう配置してみました。
（M嬢）「写真が目立たなくなってちょっと悲しい。」
配置の都合上、メインの写真を右に持っていきました。写真を右端に持っていくとやはり目立たなくなるようで。。。見せたい物を真ん中に置く。これが基本のようです。
（M嬢）「このページの中心はカウンター？うーん、読者はカウンターよりも写真の方が楽しみなんだけど。」
私自身はカウンターを結構みるのですが、そう、読者にはそんなことは関係ありませんね。小さく、どこか隅っこに。書いた本人が分かる程度に配置すりゃいいでしょう。真ん中から右端に移動しました。
画面の広さ
どれくらいの広さの画面で読んでいるか？これはデザイン上も大事な問題です。一昔前ならブラウザにもいろいろありましたが、今になっては、PC, Windows, Netscape, Internet Explorer を前提としてかまわないでしょう。さて問題は画面の広さです。いまだに、640x400の画面でもちゃんと見えるようにとの配慮をしたサイトもあり、そのポリシーには感服しますが、私を含め、周囲で800x600より小さい画面を使っている人はそう見掛けませんから、800x600できれいに見えればいいことにします。
（M嬢）「Netscapeだと左に寄ってて窮屈そうだけど。それは私のPCのせい？でも、他のページはページ一杯に見えるよ。」
テーブルの属性を左詰めにしてました。窮屈に写ったようです。テーブルの属性を幅いっぱいに使うように変更してみました。ここは好みが別れるところでしょう。
どこが変更されたか？
そのサイトを覗くとき、「どこが変更されたか？」「なにが新しいか」がまず知りたい物です。
（Sさん）「最初は，頻繁にupdateしてるなとおもって、ホームページを見にいっていたんですが、どこが変っているかわからなくて、、、」
最初はなかった What's New のページを追加。これはやはり必須のようです。それか、トップページを What's New として使う手もあります。どうせ、ここから見るんですから。まぁ、私の場合、当分トップページには写真を載せたいので、独立した What's New のページを作ることにしました。
それから、各ページのリンクに直接「更新日付」を入れてみました。よく、リンクに「○月○日更新」と書いてあったり、「NEW」のマークがあったりしますが、あれと同じような効能を、FrontPageのナビゲータでやりたかったのです。
ナビゲーターに関する賛否
全体のナビゲータ。見やすいサイトの必須条件です。ナビゲーターがわかりにくいばっかりに迷子になって、、とか、戻りたいところに戻れなくていらいらという経験はだれしもお持ちでしょう。
いちいちリンクを書き換えたり、ディレクトリ名を変えるたびにURLのリンクを変更したりの作業を嫌って、FrontPageのThemeを使うようにしています。自由度が制限される反面、メンテナンスはらくちんです。
（M嬢）「左のタンポポくんの黄色が目立つからかなあ。。。こういうのが付いてると、無機質じゃなくて嬉しいんだけど、地が黒だからか、黄色いので目立つよ。」
左側のナビゲーターの文字列を黄色に、ボタンのバックグラウンドにたんぽぽのイメージを使ったときのこと。やけに目立ちすぎるとの指摘。
（M嬢）「左のフレームでかいよね。私のPCだと、読みたい本文にたどり着いたときは、黄色のタンポポくんが邪魔。消せるといいのに。だって幅を利かせてるんだもん。かわいいんだけど、HomeとUpだけのやつとか、やっぱり目障りなんだよね。でも、やっぱりここに日付は載ってて欲しいから、このぐらいの幅がいるのか。うーん。。。」
FrontPageのデフォルトのナビゲータのボタンは結構幅が広いです。右側の本文の幅がこれによって制限されてしまいますから、結構重要な問題です。ボタンの幅はバックグラウンドのGIFイメージの幅で決まります。しょうがない。Theme Designer を引っ張り出して、エディターでGIFイメージを小さくしてみました。
→ 幅140ピクセルのボタンを110に変更
これだけでも随分印象が違いますナビゲータは必要最小限の大きさで、しかも使いやすくなければならないという、非常に難しい問題です。^^；
（M嬢）「あと、見たページはやっぱりリンクの色が変わって欲しいんだけどね、個人的には。だって、あ、これは読んだやつだ、ってわかるしさあ。」
いいたいことはわかります。通常のリンクなら、一度アクセスしたものは色が変わるので、2回目読む必要がありません。「ぱっと見」で次どこを読むべきカをイメージしやすい。。
しかし、これは、このボタンが単なるリンクではないところがつらいところです。DynamicHTMLだかなんだか知りませんが、FrontPageの既存のマクロを組み直す必要があるでしょう。
いえ、最初は通常のリンクにしてたんです。イメージボタンなんて使っても遅くなるだけですから。しかし、IEならいいんですが、Netscapeではこの左のナビゲータのフレームの幅が正しく計算されなくなって、字が重なってしまうという症状がでるので、仕方なくイメージボタンを使っています。これならイメージボタンの幅で、フレームが形成できます。
余談ですが、このIEとMozzilaの相性というか解釈の違いというのは、思ったより多くの場面で遭遇します。ちょっとデザインに凝り始めると、とたんにその矛盾に苛まれるようになります。多くのサイトでイメージボタンや、イメージの背景を使う理由はそこにあるのかも知れません。自分の表現したいデザインをIEでもMozzilaでも同じように再現するには、もっといえば、個人のブラウザの設定に影響されずに再現するには、イメージファイルを貼り付けるしかないのです。
もう一つ欠点としては、このナビゲーター必ず左上にしか出現しないので、縦に長い記事を書くと、いちいち、ページの先頭まで戻らないと、ナビゲーターにたどり着けないことになります。これじゃぁ不便と、ページの一番したにも、横ならびに、全く同じナビゲーターを配置してみました。
（M嬢）「各ページについているPrev Home Up Next は私は使わないなあ。これって、各ページがシリーズになっているとか、連続で読むメリットがないと使わないよね。このHomepageはページごと読み切りがポリシーかと思ってたんだけど、そうでもない？」
そうか。ナビゲータが２つ以上あってもややこしいだけということですね。確かに。でも依然、縦長記事の問題は残ります。本当は、「ページの先頭に戻る」あるいは、「一段上のページに戻る」というボタンをページの最下部に追加できるといいのだろうと思うのですが。。。
答えは単純でした＾＾； #top という NameTag を用いて、このタグへのリンク、つまりジャンプするリンクを付けておけばいいのです。簡単です＾＾； いえ、最初からそんなことはわかっていたのですが、
各ページの先頭にいちいち Name Tag を付与するのが面倒！ と思ってた私は二の足を踏んでいたのですが。。。実は、何のことはありません、Name Tag は付与する必要はないのです！ ブラウザが、
存在しないタグへのジャンプ ＝ そのページの先頭へのジャンプ
とみなしてくれます。IEもMozzilaもそうです。これで無事にページの先頭に戻れます。よかった、よかった：-）
ナビゲーターの並び
（Kくん）「HPの並びは時系列なのがよろしいのではないでしょうか。読みやすくて良いと思います。」
そう、いっそのこと新しい物を上にというのは基本ですから。しかし、反面、一番下にある「Contact」、一番上にある、「NY Life」といった、イメージが失われてしまうという欠点もあります。カテゴリー分けを全くせずに、日々、日記のように追加していくなら、それもいい方法だと思います。うーーん。悩みます。。。。
