備忘録

平成17年1月23日

Advice315 いつかはホームシアターをつくろうでご意見させていただいたぼうさんから、嬉しいメールが届きました。

なんといつかはホームシアターをつくろうが Yahoo!JAPAN のホームシアターカテゴリに見事登録されたというのです! さらに構築日記を拝見すると、テレビの取材もあったというではありませんか。

さすが、志の高い方は違います。「個人サイトを運営するなら、かくあるべし」というお手本ですね。

番組のレポーターを務めた高井理江さんの日記を読むと、かなり張り切っているので、ぜひ見て下さいね2005-01-09)なんて書いてあります。そして取材当日の日記(2005-01-10)を拝見すると……うわ、楽しそう! やっぱり幸せな人と接していると、取材する側も幸せな気分になることが多いんじゃないかと思う。

家族みんなで楽しめるホームシアターを構築したいというゆめに向かってテクテク歩んでいたら、みんな(ちょっと)幸せになりました。まじめにコツコツ頑張るお父さんが起こした、小さな奇跡。

平成17年1月23日

えーと、ご依頼を受けたのが昨年の10月1日。4ヶ月弱……受験シーズンになってしまいました。自分の受験のことなんて遥か記憶の彼方、思い出すのは自分の生徒達のことばかり。みんなまじめによく頑張って、志望校にビシバシ合格してくれたので、感動したものでした。先日、実家へ帰ってみると、母がかつての生徒のその後を報じる塾の広告を見せてくれました。なんと私が落ちた大学に受かっていたので、感激して涙が出てきました。

自分が合格したときなんて、「ケケケッ」って感じだったのに。たかが塾講師でさえこうなんだから、親が子どものために命を捨てるのも、わかる気がします。

……という話は、今回のアドバイスとあまり関係ありません。

ご依頼人と Web サイトのご紹介

鈴さんは某市在住の中学3年生(だと思います)。小野不由美の超大作「屍鬼」を読破しているというので、ちょっと尊敬。私は2年余りも放り出したままにしていますので。

鈴さんはハリポタのファンでもあり、別サイトという体裁で、ハリポタのファンサイトも開設されています。コーエーの人気アクションゲーム「三国無双」のファンでもあるそうで、こちらについても妄想と煩悩の詰まったファンサイトが用意されています。

だんだん雲行きが怪しくなってきたところで面白いもん♪笑として紹介されていたのが「拘束少女保護区」……といっても当サイトの一般読者の方にはピンと来ないだろうと思います。女性読者中心の18禁小説投稿サイトとして(一部で)有名だったのですが、アドバイスをお待たせしている間に閉鎖してしまいました。現在は旧管理人の個人サイトとなっており、だいぶ様子が変っています。何はともあれ、おじさんにはついていけない世界なのでありました。

詩や小説はともかく、大半の日記はいかにも中学生らしいというか、今も昔もそう変らないなあ、という印象。それだけに、ところどころに顔を出す、さりげない発言が微妙に衝撃的。

ご相談の内容

初めまして。鈴と言います。

『Endless Midnight』というサイトを運営しております。小説と詩が一応メインの、文章サイトです。四年ほど前に開設し、当初と比べると大分お客様も多く足を運んでくださるようになりました。

が、まだ課題はたくさんあり、常に頭を悩ませています。入りやすいエンターページだろうか、文字の大きさはやはり小さすぎるだろうか、その他疑問点が多くあります。

宜しければ、感想、アドバイスをお聞かせ下さい。お願いします。

アドバイスいろいろ

つらつらと。

エンターページが素晴らしい

鮮烈な青と力強い手、そして紙飛行機。ハイセンスなエンターページです。この背景と小さな黒字の取り合わせは、ふつう、思いついても断念するところです。あえてタブーに挑戦した勇気を私は賞賛したいですね。

なぜ凡人は断念するか。それは、文字が読みにくいからです。サイトの注意書きは、絶対に読んでほしいと思う人が多いらしく、サイト内の他のどの文章よりも強く「読んでね」という意思を感じさせるレイアウトが採用されていることがしばしばです。けれども、たいてい読者は常連なのであって、注意書きをそれほど目立たせる必要があるのかどうか。

無意識であれ、それがわかっているから、鈴さんは注意書きが目立たないデザインを採用なさった。

あんな強烈な青を画面いっぱいに広げるなんて、ふつうはできないのです。文字が極端に少ない画面でしか、採用できないデザインだからです。背景色に対抗するには、例えば文字も画像化してリッチな装飾を施せばいい。けれども、想像すればお分かりの通り、たくさんの文字を画像化して放り込んだら、かなりくどいデザインになりますよ。あえて文字を隠してしまう、そしてEndless Midnight 入り口のリンクだけを白文字にして浮かび上がらせる、この割切りの素晴らしさ! 貴重な才能だと思います。

エンターページ自体の是非は問わず、デザインについてだけ書きますが、とくに女の子のサイトでよく見かける失敗が2つあります。

ゴミ箱状態

鈴さんは賢くも同盟やリングのバナー画像を別ページにまとめていらっしゃいます。たいていのガールズサイトは、これをエンターページに置くわけです。これが大失敗、よくいえば「宝石箱をひっくり返したような」となりますが、悪くいえば、まるでゴミ箱の中をのぞいたようなデザインになってしまっています。実際、同盟の少なからずは形骸化しており、チカチカ光るバナー画像のいくつかは放棄された人間関係の象徴といってもあながち外れていません。

白紙状態

ゴミ箱化を恐れるあまり、逆に何もかも取り払ってスカスカになってしまったエンターページも、よく見かけます。だったらエンターページ自体やめればいいじゃないかと思います。広大なスペースをテキスト情報抜きで自由に使えるのは、エンターページだけです。それを無駄に白紙のままにしているのですから、もったいない話です。

鈴さんのように、強烈なイメージをドカンと打ち出す、これがやはり(ひとつの)正解だと私は思います。そのためには、余分な要素を排除して空間を確保し、そしてデザインの自由度を活かして思い切り冒険することです。リニューアルの際にも、現在のデザインのいいところを踏襲していただきたいと思います。

エンターページの気になるところ

エンターページのデザインには、いくつかの気になる点があります。

  • 現在、日本人の閲覧者の多くは横書きのデザインを見る場合、左上を基点とします。このとき、一番最初に目に入るリンクは other です。これをクリックするとカウンターが表示されるわけですけれども、違和感があります。other がどうして、カウンターなのか。表示位置は左上になっているのは CSS で絶対配置しているためで、ソース上の順番はかなり後ろになっています。画面左上という絶好のポジションを、よくわからないリンクに渡してしまう道理もないわけで、カウンターの表示非表示を司るリンクは、ソース上の順番どおりの位置、あるいはもっと目立たない位置に表示するべきだと思います。例えば、画面右下など。
  • 目立つ白文字の入り口の位置が微妙。特定の文字サイズ+特定の画面サイズなら、紙飛行機の斜めのラインに沿って Endless Midnight 入り口参加同盟 リングの2つのリンクが並び、きれいに見えるのですが……。シンプルなデザインからは想像し難い煩雑なスタイル指定が行われているのですけれども、もっとシンプルに考えた方がよいのではないかと思います。
  • 背景画像の青と、ページ全体の背景色の青が微妙に違うので、背景画像の四角い輪郭が、よくみるとわかってしまいます。こういうのは、いったん気になると頭を離れないという点で、厄介な問題といえます。正直、大したことじゃないのですが。
エンターページの改善案

というわけで、改善案を作ってみました。文字が小さすぎるのでは? といった問題は後回しにして、似たようなデザインを、もっと簡単にスッキリと作ってみましたよ、という一例。

  1. 原本
  2. 改善案

出来上がりは似たようなものなのですが、ソースをご覧いただくと、その違いは明らかです。

HTML とスタイルシートについて

いくつかのページのソースを拝見しましたが、HTML とスタイルシートについて、あまり知識がないご様子。HTML をきっちり勉強してから Web サイトを作ろう! なんて考えると、いつまでたっても Web サイトを作れないわけで、現時点であまり知識がないこと自体は、別にそれはそれで構わないと思います。ただ、そのためにずいぶん損をされているのは事実。今後も更新を続けていく予定なのだろうと思いますので、少しずつ、勉強を進められることを期待します。

まず、絶対に勉強した方がいいのが外部スタイルシートの利用法。

現在、鈴さんのサイトでは、たくさんの文書に、まったく同じ内容のスタイルが指定されています。スクロールバーの色、背景色、背景画像、文字色など。こういうのって、面倒くさいじゃないですか。とくにリニューアルを考えるとき、今のやり方では絶望的ですよね。100以上の文書を全部書き直さなきゃいけない。ウェブの仕組みは、賢い人たちが集まって考えているので、じつはちゃんと、便利な方法が用意されているのです。

詳細はリンク先を参照していただきたいのですが、CSS は外部ファイルに書くと便利に使えます。ひとつの外部 CSS をたくさんの文書にリンクすることにより、ひとつの CSS で一括してデザインを指定できます。鈴さんのサイトの場合、コーナ毎にデザインが異なりますから、ひとつのコーナはひとつの CSS ファイルでデザインを指定するべきです。そうすれば、ひとつの CSS を書き換えるだけでコーナ全体をリニューアルできます。

……いきなりバリバリ説明されても理解できないでしょう。前出のリンク先を参照すれば、とりあえず先人の知恵をつまみ食いできます。そして余力があれば、以下の記事も参考にしてください。

きちんとした学習は目先の問題の解決にはなかなか役立ちません。一朝一夕には効果を実感できないのです。だから無理強いはしません。ただ、エンターページ改善案のソースを原本のソースを比較していただければ、「いったん勉強すれば、以後、楽になる」ことはご理解いただけるはずです。少しずつでも、勉強していく動機付けになれば、と思います。

CSS の文法について

とはいえ入門:CSS2 HTML への適用だけは、絶対に読むべきです。皮相なレベルの理解であっても、すぐ役立つ部分です。

また、鈴さんの CSS の書き方を見ていると、どこかのタグ屋からコピペしたような記述が少なくありません。前提知識が、あまりに不足しているきらいがあります。そこで、コピペするならするで、最低限知っておくべきことを書きます。

<style type=text/css>
<!--
body{
scrollbar-face-color:#0C61FC;
scrollbar-highlight-color:#0C61FC;
scrollbar-shadow-color:#0C61FC;
scrollbar-3dlight-color:#0C61FC;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#0C61FC;
scrollbar-darkshadow-color:#0C61FC;
}
-->
</STYLE>

<STYLE type="text/css">
<!--
body{cursor:crosshair;}
-->
</STYLE>

<STYLE type="text/css">
<!--
a{cursor:move;}
-->
</STYLE>

<STYLE type="text/css">
body,td{
letter-spacing : 3px;
line-height : 18pt;}
}
</STYLE>

<style type="text/css">
<!--
a{ text-decoration:none; }
-->
</style>

<style>
<!--a:link{color:#000000}
a:visited{color:#000000}
a:active{color:#000000}
a:hover{color:#000000}
-->
</style>

<style type="text/css">
<!--
body {
background-attachment: fixed;
background-image: url(hiko.jpg);
background-repeat: no-repeat;
background-position: left bottom}
-->
</style>

<style type="text/css">
<!--
body{ overflow-x:hidden; }
-->
</style>

<STYLE type="text/css">
<!--
A{
text-decoration : none;color : #000000;
cursor : default;
}
A:HOVER{
text-decoration : none;
cursor : default;
visibility : visible;
float : none;
clear : none;
position : relative;
top : 2pt;
left : 2pt;
}
-->
</STYLE>

長々と引用したのは、原本のスタイル指定です。HTML 文書で用いられるスタイルシートは、ふつう CSS(カスケーディングスタイルシート)です。鈴さんが用いているスタイルシートも CSS です。CSS の文法を知っていると、原本の記述は以下のように整理できます。

<style type=text/css>
<!--
body{
scrollbar-face-color:#0C61FC;
scrollbar-highlight-color:#0C61FC;
scrollbar-shadow-color:#0C61FC;
scrollbar-3dlight-color:#0C61FC;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#0C61FC;
scrollbar-darkshadow-color:#0C61FC;
cursor:crosshair;
letter-spacing:3px;
line-height:18pt;
background-attachment:fixed;
background-image:url(hiko.jpg);
background-repeat:no-repeat;
background-position:left bottom;
overflow-x:hidden;
}
a{
text-decoration:none;
color:#000000;
cursor:default;
}
a:link,a:visited,a:active,a:hover{
color:#000000;
}
a:hover{
position:relative;
top:2pt;
left:2pt;
}
-->
</style>

見違えるようにスッキリしました。以下のルールは、知っておくとよいでしょう。

  1. style 要素はひとつにまとめられる
  2. 同じ要素への指定はひとつにまとめられる
  3. 同じ要素について同じプロパティを複数回指定する場合、最後の指定のみ有効となる
    • Ex. 原本では a 要素に cursor:move;cursor:default; の2重指定があります。後者のみ有効なので、整理版では後者のみ記してあります
  4. a 要素への指定は a:link(未訪問リンク)と a:visited(訪問済リンク)と a:active(クリックしたリンク)と a:hover(カーソルが乗っているときのリンク)にも有効
    • Ex. 原本では a 要素への指定と a:hover への指定にダブりがあったので、整理版では前者のみ残し後者を削除しています
  5. 複数の要素に同じ指定をしたい場合は、要素をカンマで区切ればよい
  6. 未訪問リンクと訪問済リンクは IE の場合、デフォルトで別の色となる→スタイル指定で a 要素だけに色を指定してもリンクの色は思い通りにはならないため、a:link,a:visited,a:active,a:hover の4種それぞれに希望の色を指定する必要がある
    • 注:これは文法上のルールではなく「こうするとうまくいくよ」という Tips です
  7. #000000 というのが色を表している

そもそも body や a といった要素の意味がわからない、という場合には、HTML の勉強が必要になるわけですが、とにかく「よくわからない」なりにも、多少の知識があれば、記述を整理できます。

ついでにオマケのルールをひとつ。

  • 外部 CSS ファイルには、<style type=text/css><!----></style> は書かない

きちんと学べば、その理由もちゃんと理解できるのですが、外部 CSS ファイルについて知識をつまみ食いすると勘違いしやすいところので念のため。

geocities の広告は嫌な感じ

geocities の広告は非常によくないですね。フレームのページで非常に顕著なのですが、とにかくタチが悪い。デザインの幅を狭めるという点でも、閲覧者の邪魔になるという点でも、従来のバナー広告よりひどい。たしかに、小さくなってしまえば、それほど目立ちません。クリックして消せば、すっかり見えなくなってしまいます。けれども、それが目くらましになっている分、厄介ですね。

一見、デザインを崩すことがないので、製作者としてはバナー広告のことを考えずにデザインしたくなる。そして、バナー広告に戻したくはない、と思う。けれども、閲覧者の視点で考えれば、バナー広告の方がマシです。ページの最上部に登場するから、ダサい感じにはなりますけれども、デザインする側も気をつけますからね。広告は目に入るけれど、事実上認識されない(無視される)よう工夫します。この方が、閲覧者には都合がいいのです。

工夫といっても、大したことじゃありません。広告の下の領域だけを使ってデザインする、という頃です。本文と広告が重ならないようにする。

そんなの、簡単なことじゃないか、と素人さんはそう思う。けれども、その簡単なことが実現し難いのが、ポップアップ型の広告なのです。ポップアップウィンドウが開くなら、まだいい。自動でそれをブロックする機能が、IE6SP2 には標準装備されています。しかし geocities のポップアップ広告は、巧みに網をすり抜けます。

広告なしのサーバ
  • 無料で広告なしのサーバ
  • 有料で広告なしのサーバ

じつはこの2つがあります。中学生なのでクレジットカードがないでしょうから、有料のレンタルサーバを借りるにはたいていご両親の同意が必要になるわけで、いささか面倒な話になります。となると、無料で広告なしのサーバが気になりますね?

無料で広告なしのレンタルサーバ 2類型
  • プロバイダ提供のスペース
  • 慈善事業(みたいなもの)→例えば立花商会など

大手プロバイダの多くは、Web サイト用のスペースを無料で貸してくれます。ふつうは1回線につきひとつだけですし、やっぱり家族にバレることになります。バレてもいいなら別にいいのですけれども。とかくお金がないのはつらい、親の金でインターネットを楽しんでいる都合上、こうした問題はどこまでも付きまといます。慈善事業みたいなサービスを利用すれば、それでも当座の問題は解決します。ただ、慈善事業は気まぐれに終了するものと相場が決まっているので、注意が必要です。

こうしてみると、無料で広告付きのレンタルサービスを利用する理由も見えてきます……。

仮に広告なしのサーバをうまく確保できたとしても、新たな問題が生じます。移転に伴うアドレスの変更です。移転告知を出せばいい、というほど簡単な話でもなく、移転すると短期的にはお客さんは少し減るものです。どうもハッキリしない書き方になってしまうのですが、geocities の広告は嫌ですね、といってはみたものの、これはなかなか対処に困る問題です。

フレームの分割

広告が非常に気になることを抜きにしても、現在のデザインにはひとつ大きな問題があります。鈴さんも自覚されている通り、大目次から中目次を選ぶと、非常に画面が窮屈になります。だから、「同窓で開く」と「別窓で開く」という2種類のリンクをいちいち用意しなければならなくなっています。一応、これで問題は解決されていますが、しかしスマートとは言い難い解決策です。

鈴さんのサイトは、必ずしも大規模な構造ではありません。フレーム分割を工夫すれば、もっと見やすくできるはずです。

最も簡単な解決策は、フレームをT字型に切ることです。今回、それは不可能ではありません。なぜなら、大目次が簡明だからです。

  • E*Mを楽しむためのヒント
  • 最初
  • 小説
  • 散文
  • 溺愛
  • 舞台裏
  • 企画
  • 宝箱
  • 掲示板
  • 逃避行
  • 0574W.S.R*小説部門
  • 0574W.S.R*詩部門
  • web拍手をする
  • midiを聴く

なるほど、こうして並べてみると、ずいぶんいろいろあります。けれども、よく考えてみれば、ここには常にナビゲーションとして表示しておく必要のない情報も含まれていますね。最初のページだけに表示されていればいい情報も少なくない。そこで、私ならこうします。

  • フレーム分割の改善案(この改善案の公開は終了しました)

細かいところはともかく、おおよそこんな感じにすれば、いろいろな問題が解決されるはずです。リンクをたどり、各コンテンツを「同窓」で開いてみてください。詩、エッセイ、ハリポタなど、いずれもそこそこきれいな感じで画面内におさまります。

フレームの是非

そもそもフレームを使うこと自体について、いろいろ批判する意見もあるわけですけれども、想定読者層がフレーム対応のブラウザを利用していないことはほぼ考えられない状況ですし、また「サイト内の特定のコンテンツをブックマークしたい」といった要求もほぼ絶無であること、そして検索エンジン経由で個別コンテンツへやってくる読者が少なく、またそうした読者を重視しない運営方針であろうこと、などを勘案するに、批判の大半は「批判のための批判」として却下しても構わないと考えます。noframes 要素を十分に整備していないことについても同様です。

当サイトがガールズサイト系のサイト批評サイトに意見を伺ったのは2年以上昔のことですが、とくに多かった指摘のひとつが「なぜフレームを使わないのか?」というものでした。多くの初心者にとって、常にナビゲーション領域が画面の一部を占拠するフレーム分割を用いたデザインは、非常にわかりやすいものなのです。だから、画面の最上部にナビゲーションを集中させた当サイトのデザインは、どうにも閲覧が面倒くさい、というのでした。

キーボードを使ってよいならば、IE をはじめとする大半のブラウザにおいて、Home キーを叩けば、ページの最上部へ戻ります。ノートパソコンの場合、キーを節約するために PageUp キーと共通になっていることが多い。Function=Fn キーと PegeUp キーを同時に押すと Home キーが発動する仕組みになっていて、ちょっと面倒ですね。

とはいえ、こういうことを多くの閲覧者はご存じないから、スクロールバーを一生懸命操作したり、ホイールマウスをご利用であれば、ホイールをぐるぐる回したりしなければページの最上部に戻れない。

そういうレベルの方に、どこまで配慮すべきか。当サイトの場合は、一定以上のレベルに達していない閲覧者は切り捨てています。不勉強な本人が悪い、と。けれども、そんなことをいったら閲覧者がいなくなってしまうサイトもある。そうなると、製作者は立場が弱い。フレームだって何だって使って、「バカでもわかるナビゲーション」を用意することになります。それは別に悪いことではなく、方向性の問題だと思います。

フレームの是非 その2

「JavaScript を用いた、スクロールに合わせて移動するメニュー」とか、「CSS による擬似フレーム」といった妥協案(URI の一意性といった問題は解消されるが、画面の一部をナビゲーションが占拠し続けるというデザイン上の問題は解決されない)もありますが、これはこれで簡単でない。そうした技術そのものの難しさもさることながら、もっと単純な落とし穴もあります。

noframes 要素でナビゲーションを提供しない場合、フレームはリッチなナビゲーションを最も小さな労力で実現する方法です。フレームを使わずに同等のナビゲーションを用意するには、何らかの方法を用いて、全文書に現在はフレームに表示されているナビゲーションを挿入する必要があります。既に100以上の文書があるサイトにおいて、初心者がそれをやるのは大変なことです。

それでも、頑張れば一度のリニューアルはできるでしょう。しかし問題はその先です。コンテンツはだんだん増えていきますが、その度に全文書のナビゲーションを書き換えるわけにはいきません。だから、フレームとは別の形で、ナビゲーションだけを更新する仕組みが必要です。SSI は geocities で使えない(注:最近はどうか知りませんが昔はそうでした)ですから、JavaScript で挿入することになるのでしょうか。でも、SSI にせよ JavaScript にせよ、そうした方法を初心者向けに解説しているサイトや本を探すのは困難です。

注:解説が少ないのは、解説が難しいから、でもあります。フレームの場合、「なんちゃって HTML」の概念の中にあります。SSI を使う場合、また新たな概念をいくつも教えなければなりません。「フレームが使えないサーバはなくても SSI を使えないサーバはある」「拡張子を html にしないとうまくいかないことが多い」そういった過去の資産から推測できない領域の知識がたくさん必要になるわけで、たしかにフレームの方が初心者に教えやすいのです。

また、多くの文書に同じ JavaScript を読み込ませる記述を書き込むには、自動置換ツールを使うのがよいでしょう。けれども、経験者が身近にいなければ、これも初心者には高い壁です。ふつうの質問掲示板では、訊ねても答えられる人がいないですし。

フレームなら、(ある程度)わかっている人も多いし、解説もたくさんある、他の方法はそうではない。リッチなナビゲーションを実現する手段として、趣味の Web デザインにおいてはフレームがデファクトスタンダードになっているのです。「初心者はとりあえず Windows」みたいなもので、一概にそれを否定できるものではないと私は思います。

学習の道程を考えるに、フレームから始める他に手はないのではないか、と。手取り足取りフォローできる体制を整えていれば、最初から SSI やブログツールのカスタマイズなどを勉強してもいいのでしょうが。

ブログの段組

Seesaa ブログは管理画面がわかりにくいことで有名ですが、頑張れば3段組のデザインを1〜2段組に変更できます。

現在の使われ方を拝見する限りでは、ブログのリッチなナビゲーションは無用の長物かもしれません。そうであれば、コメント機能とトラックバック機能がついた日記 CGI とみなし、思い切ってシンプルな1段組にしてしまう方が、他のコンテンツのデザインと整合がとれてよいのではないでしょうか。そして、更新しやすい日記帳と割切ってしまった方が、更新頻度も高まってお客さんにも喜ばれる結果となるような気がします。

とはいえ、ブログの更新ばかりはかどって、小説や詩の更新が滞るようだと本末転倒なのですが。

今後の展望

たくさんのことを書いてきましたが、よく読めば大した内容ではありません。「エンターページはもうちょっとスッキリさせた方がいいと思う」ということと、「フレーム分割をT字型にするといい」、それから「ブログは1段組にすると他のコンテンツとデザインがそろう」。たった3つの提案です。

ここにさらに付け加えたいことがひとつ。「デザインは統一的に考えるべきだ」という話。

表紙の青が素晴らしい効果を上げているのに、なぜかその先のページに青が登場しない。もったいない話です。私なら、表紙で使った青をあちこちで再利用します。例えばリンクの色、あるいはフレームの境界線など。そして紙飛行機を小さく加工して、ワンポイントの画像として、マスコットキャラクターのようにあちこちで使い回します。表紙のデザインと、各コンテンツのデザインを、そうやって関連付けていく。

プロの仕事じゃないな、素人の趣味のサイトだな、とわかってしまうのは仕方ないとしても、趣味は趣味なりに、よしあしがあります。レベルの差があります。すごくセンスがあれば、適当に作っても不思議なまとまりが生まれ、統一感のあるデザインを実現できますが、ふつうはなかなかそうはいきません。鈴さんはセンスがあるので、バラバラな中にも淡い統一感があります。ありますけれども、もう少し、意識的にデザインのまとまりを狙っていく方がいいのではないかと思います。

各コンテンツの背景画像の選択ひとつとっても、そうです。バラバラなようでいて、一定の選択基準が伺えます。でも、無意識に頼っていると、ときどき変な選択をしてしまいます。

作者にとって、自分のサイトはひとつの小宇宙。あれもこれも、その中に詰め込みたい。けれども、閲覧者にとっては、夜空に浮かぶ星のひとつに過ぎません。全部似たようなデザインじゃつまらない! と考えがちな作者と違い、閲覧者はデザインに統一感がある方が安心します。ちょっとやそっとの統一感では、つまらない、なんて考えない。そういった差を学ぶと、もっときれいになっていくのではないでしょうか。

その他・文字サイズについて

入りやすいエンターページだろうかという問いがありました。私の回答は、「other というリンクが左上にあるのは、あまりよくない。それ以外に気になることはないけれど、全体にデザインをもう少しスッキリさせると、もっと入りやすくなると思う」です。

文字の大きさはやはり小さすぎるだろうかという問いがありました。私の回答は、「想定読者層次第だと思う」です。以下、ちょっと補足。

私にとっては、font size="1" は小さ過ぎます。でも、鈴さんにとっては、そうではない。逆に鈴さんにとって、当サイトの文字は大き過ぎるはず。どんな読者に好かれたいか、という話だと思います。Yahoo も文字を標準より少し小さくしていますから、たぶん、日本人は平均して、少し小さな文字が好みなのだと思います。だから、文字サイズは少し小さくするのが、一番受けがいいのではないか、という気はします。

けれども、みんながみんな、多数派のセンスに合わせて行動すべきとは思いません。文字サイズの指定なんて、IE のユーザ補助機能(ツール→インターネットオプション→ユーザ補助)を使えば、簡単に無効化できるわけです。だから、好きなように設定しても、致命的な問題にはならないはずなのです。ちなみに Firefox には「最小の文字サイズ」という機能がありますし。

一方、ひとつだけ考えておいた方がいいかもしれないことがあります。font 要素ではなく CSS で文字サイズを指定する場合には、px などの単位を用いると、IE の文字サイズ調整機能を無効化して、一定の大きさの文字を表示させることができます。

小さな文字が好きな人には、ブラウザの設定で文字サイズを「最小」などにしている人と、文字サイズ「中」のままで小さな文字が表示されてほしいと考える人の2通りがあります。私は前者で、いつも文字サイズ「最小」にしています。だから、鈴さんのサイトは、ちょっと読みにくかったです。それはともかく、ある程度小さな文字サイズで固定的に表示できるよう、CSS で設定すれば、どちらのタイプの「小さな文字が好きな人」にとっても嬉しい結果となります。

文字サイズ「最小」にしても小さくなりすぎない、そして文字サイズ「中」でも小さく表示されるのですから。

しかし逆に、小さな文字は読めない人にとって、ユーザ補助(あるいはそれに類する機能)を用いない限り、文字を大きくできないという問題があることに注意してください。

その他疑問点が多くありますとのことですが、書かれていない疑問に答えるのは難しく、以上でアドバイスを終えます。少しは参考になりましたでしょうか。

関連記事一覧

平成17年1月16日

転載リソース集に、1月1日の当サイトのスナップショットを収録。

  1. 02初級Webサイトデザインアドバイス[2002.5.5]
  2. 初級Webデザインアドバイス[2002.10.25]
  3. 趣味のWebデザイン[2003.2.7]
  4. 徳保隆夫の私的Webリソース[2003.10.9]
  5. deztec.jp[2005.1.1]

こうして変遷を眺めると、作者としては感慨深いものがあります。

平成17年1月9日

ついでにメモ。昨日、津田沼で会ったのは、中学時代の友人 W くん。高校2年の頃以来だから、7年ぶりかな、多分。途中でもう1回くらい、どこかで会ったような気がするのだけれど、明瞭な記憶がありません。

とにかく某安定企業に就職して法務の仕事を頑張っているということは分かりました。中学時代は鬼のように数学が得意(少なくとも好き)だったはずなのに、今ではすっかり自称文系。なんだかなあ、と思います。

数年で別人のようになってしまう人も少なくないけれど、私も W くんも、ゆっくりとした時の流れの中に生きているようでした。

平成17年1月9日

私は聴覚検査では異状無しと判定されるのだけれど、実際には難聴の気がある。音は聞こえるのだが、何をいっているのかクリアに認識できないのだ。声がくぐもる電話は苦手中の苦手で、相手の名前を何度も聞き返すことになる。それでもハッキリせず、「オオタさん? という方からお電話です」といって取り次いだら「ホウヤ」さんだった、みたいなことが日常茶飯事。老人の言葉も理解ないことが多い。

私が音楽に関心を持たなかったのは、言葉がわからないから、というのも大きかったと思う。メロディーは気に入っても、歌詞がさっぱり分からない。ふつうにハキハキ喋る言葉さえ、しばしば聞き取れないのに、節回しを優先して音を崩している歌声を聞き取るのは困難を極めます。

私は今でもよく「何をいっているのか分からない」といわれることがあります。発音が不明瞭なのだそうです。耳が聞こえない人がきちんと話すのは困難ですが、それと似た状況にあるといっていい。自分がきちんと聞き取れていないから、話す方もきちんとできない。明瞭な発音になるよう気をつけている間はいいけれど、音の意識を欠いて自然に任せて喋りだすと、もういけない。

昨日のライブには何組もの個人やグループが参加していたのですが、津田沼で人に会う用事があったので、くつしたさんの次の人までみて私は帰りました。で、この「次の人」の歌が、私にはちょっとつらかったのでした。くつしたさんの歌は、まずまず聞き取れたのだけれど、次の人のは猫の鳴きまねの他はほとんど理解できず、もどかしい思いをしました。全部聞こえないならともかく、「面白くて笑っちゃう内容」と宣伝する MC の言葉は聞こえてしまうのだから困ります。

平成17年1月9日

昨日、くつしたのライブへ行きました。しばらくご無沙汰していたのですが、ちょうど津田沼へ行く用事もあったので、ゼックス千葉まで足を延ばしたのです。

くつしたさんといえば、「耳が腐ります」をキャッチコピーにしていますが、もともとそんなにひどかったわけじゃない。といって、やっぱりうまいわけでもないんだろう、ということは素人にも分かる……といったところ。今回もきっとそんな感じだろうと思っていたところ、意想外に歌がよかったので驚きました。過去のライブでは MC (曲間のお喋り)の方に心ひかれるものがありましたが、今回は音楽のライブらしいライブ。

CD を持っていないから、記憶を捏造しているだけなのかもしれない(つまり変わったのは歌い手ではなく聞き手であった、という可能性もあります)。でも、とりあえず私個人にとって重要なのは、主観において、くつしたさんの歌がよくなってた! ということなので、いろいろな疑念は、忘れることにします。

くつしたさんは近日、千葉テレビの番組に出るのだそう。ライブにも予備取材の方がいらしてました。くつしたさん紹介映像の素材にするのでしょう。テレビ局ってマジメだなあ、と思う。クイズミリオネアが、予選の早押しクイズ参加者全員に対し予備取材して「頑張るぞー!」の映像素材を収録していることに気付いたときにも思ったことですが、あらためて感心しました。

平成17年1月1日

今、頑張っていれば、いつかいいことがあるから。(例えば)勉強したがらない子どもに対して、よく親や教師が使う言葉。

本当ですか? と疑問に思ったことのない方は、少ないと思う。

現在の私は、幸運な少数派の一人。

もともと足るを知る最も重要な人生訓のひとつと信じて生きてきたこともあり、現状に不満がないのです。衣食住は満たされており、のんびりグダグダする時間があり、適度にやりがいと責任のある仕事を抱え、人間関係も非常にサッパリとした理想的な状態。頑張りたいときに、頑張りたいだけ、頑張ればいい。こんな幸せな環境が、かつてあったでしょうか。

毎日が日曜日、なんて言葉があるけれど、たぶん、本当にそうなったらあまり面白くないと思う。仕事が私の生活リズムを作ってくれています。誰かに(ちょっとだけ)必要とされたい、みたいな欲求をきちんと満たしてくれる便利な存在。体調が悪ければ「今日は休みます」といっても誰にも怒られない、この軽〜い期待と責任が、私という人間の大きさにピッタリ!

適当に怒ったりもしつつ、日々平穏なお気楽生活。

平成17年1月1日

先年はたいへんお世話になりました。本年もよろしくお願い申し上げます。

2005年も、サイトの更新は適当にサボります。メールへの返信率を上げる予定もありません。電話はいつも留守電。いい加減で無責任な路線を継続しますので、ご期待無用。

久々の銀世界に感動しつつ、これでますます実家へ帰るのが面倒になり、参ったなあ、と思ってます。年2回(正月と盆)顔を見せるくらいの親孝行はした方がいいんだろうけれども、生来の怠け者気質はなかなか支配力が強くて……。両親ともに勤勉なのに、なぜ怠け者なんだ、私は。