えーと、ご依頼を受けたのが昨年の10月1日。4ヶ月弱……受験シーズンになってしまいました。自分の受験のことなんて遥か記憶の彼方、思い出すのは自分の生徒達のことばかり。みんなまじめによく頑張って、志望校にビシバシ合格してくれたので、感動したものでした。先日、実家へ帰ってみると、母がかつての生徒のその後を報じる塾の広告を見せてくれました。なんと私が落ちた大学に受かっていたので、感激して涙が出てきました。
自分が合格したときなんて、「ケケケッ」って感じだったのに。たかが塾講師でさえこうなんだから、親が子どものために命を捨てるのも、わかる気がします。
……という話は、今回のアドバイスとあまり関係ありません。
鈴さんは某市在住の中学3年生（だと思います）。小野不由美の超大作「屍鬼」を読破しているというので、ちょっと尊敬。私は2年余りも放り出したままにしていますので。
鈴さんはハリポタのファンでもあり、別サイトという体裁で、ハリポタのファンサイトも開設されています。コーエーの人気アクションゲーム「三国無双」のファンでもあるそうで、こちらについても妄想と煩悩の詰まったファンサイトが用意されています。
だんだん雲行きが怪しくなってきたところで面白いもん♪笑
として紹介されていたのが「拘束少女保護区」……といっても当サイトの一般読者の方にはピンと来ないだろうと思います。女性読者中心の18禁小説投稿サイトとして（一部で）有名だったのですが、アドバイスをお待たせしている間に閉鎖してしまいました。現在は旧管理人の個人サイトとなっており、だいぶ様子が変っています。何はともあれ、おじさんにはついていけない世界なのでありました。
詩や小説はともかく、大半の日記はいかにも中学生らしいというか、今も昔もそう変らないなあ、という印象。それだけに、ところどころに顔を出す、さりげない発言が微妙に衝撃的。
初めまして。鈴と言います。
『Endless Midnight』というサイトを運営しております。小説と詩が一応メインの、文章サイトです。四年ほど前に開設し、当初と比べると大分お客様も多く足を運んでくださるようになりました。
が、まだ課題はたくさんあり、常に頭を悩ませています。入りやすいエンターページだろうか、文字の大きさはやはり小さすぎるだろうか、その他疑問点が多くあります。
宜しければ、感想、アドバイスをお聞かせ下さい。お願いします。
つらつらと。
鮮烈な青と力強い手、そして紙飛行機。ハイセンスなエンターページです。この背景と小さな黒字の取り合わせは、ふつう、思いついても断念するところです。あえてタブーに挑戦した勇気を私は賞賛したいですね。
なぜ凡人は断念するか。それは、文字が読みにくいからです。サイトの注意書きは、絶対に読んでほしいと思う人が多いらしく、サイト内の他のどの文章よりも強く「読んでね」という意思を感じさせるレイアウトが採用されていることがしばしばです。けれども、たいてい読者は常連なのであって、注意書きをそれほど目立たせる必要があるのかどうか。
無意識であれ、それがわかっているから、鈴さんは注意書きが目立たないデザインを採用なさった。
あんな強烈な青を画面いっぱいに広げるなんて、ふつうはできないのです。文字が極端に少ない画面でしか、採用できないデザインだからです。背景色に対抗するには、例えば文字も画像化してリッチな装飾を施せばいい。けれども、想像すればお分かりの通り、たくさんの文字を画像化して放り込んだら、かなりくどいデザインになりますよ。あえて文字を隠してしまう、そしてEndless Midnight 入り口
のリンクだけを白文字にして浮かび上がらせる、この割切りの素晴らしさ! 貴重な才能だと思います。
エンターページ自体の是非は問わず、デザインについてだけ書きますが、とくに女の子のサイトでよく見かける失敗が2つあります。
鈴さんは賢くも同盟やリングのバナー画像を別ページにまとめていらっしゃいます。たいていのガールズサイトは、これをエンターページに置くわけです。これが大失敗、よくいえば「宝石箱をひっくり返したような」となりますが、悪くいえば、まるでゴミ箱の中をのぞいたようなデザインになってしまっています。実際、同盟の少なからずは形骸化しており、チカチカ光るバナー画像のいくつかは放棄された人間関係の象徴といってもあながち外れていません。
ゴミ箱化を恐れるあまり、逆に何もかも取り払ってスカスカになってしまったエンターページも、よく見かけます。だったらエンターページ自体やめればいいじゃないかと思います。広大なスペースをテキスト情報抜きで自由に使えるのは、エンターページだけです。それを無駄に白紙のままにしているのですから、もったいない話です。
鈴さんのように、強烈なイメージをドカンと打ち出す、これがやはり（ひとつの）正解だと私は思います。そのためには、余分な要素を排除して空間を確保し、そしてデザインの自由度を活かして思い切り冒険することです。リニューアルの際にも、現在のデザインのいいところを踏襲していただきたいと思います。
エンターページのデザインには、いくつかの気になる点があります。
otherです。これをクリックするとカウンターが表示されるわけですけれども、違和感があります。
otherがどうして、カウンターなのか。表示位置は左上になっているのは CSS で絶対配置しているためで、ソース上の順番はかなり後ろになっています。画面左上という絶好のポジションを、よくわからないリンクに渡してしまう道理もないわけで、カウンターの表示非表示を司るリンクは、ソース上の順番どおりの位置、あるいはもっと目立たない位置に表示するべきだと思います。例えば、画面右下など。
Endless Midnight 入り口と
参加同盟 リングの2つのリンクが並び、きれいに見えるのですが……。シンプルなデザインからは想像し難い煩雑なスタイル指定が行われているのですけれども、もっとシンプルに考えた方がよいのではないかと思います。
というわけで、改善案を作ってみました。文字が小さすぎるのでは? といった問題は後回しにして、似たようなデザインを、もっと簡単にスッキリと作ってみましたよ、という一例。
出来上がりは似たようなものなのですが、ソースをご覧いただくと、その違いは明らかです。
いくつかのページのソースを拝見しましたが、HTML とスタイルシートについて、あまり知識がないご様子。HTML をきっちり勉強してから Web サイトを作ろう! なんて考えると、いつまでたっても Web サイトを作れないわけで、現時点であまり知識がないこと自体は、別にそれはそれで構わないと思います。ただ、そのためにずいぶん損をされているのは事実。今後も更新を続けていく予定なのだろうと思いますので、少しずつ、勉強を進められることを期待します。
まず、絶対に勉強した方がいいのが外部スタイルシートの利用法。
現在、鈴さんのサイトでは、たくさんの文書に、まったく同じ内容のスタイルが指定されています。スクロールバーの色、背景色、背景画像、文字色など。こういうのって、面倒くさいじゃないですか。とくにリニューアルを考えるとき、今のやり方では絶望的ですよね。100以上の文書を全部書き直さなきゃいけない。ウェブの仕組みは、賢い人たちが集まって考えているので、じつはちゃんと、便利な方法が用意されているのです。
詳細はリンク先を参照していただきたいのですが、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>
見違えるようにスッキリしました。以下のルールは、知っておくとよいでしょう。
cursor:move;と
cursor:default;の2重指定があります。後者のみ有効なので、整理版では後者のみ記してあります
そもそも body や a といった要素の意味がわからない、という場合には、HTML の勉強が必要になるわけですが、とにかく「よくわからない」なりにも、多少の知識があれば、記述を整理できます。
ついでにオマケのルールをひとつ。
<style type=text/css><!--と
--></style>は書かない
きちんと学べば、その理由もちゃんと理解できるのですが、外部 CSS ファイルについて知識をつまみ食いすると勘違いしやすいところので念のため。
geocities の広告は非常によくないですね。フレームのページで非常に顕著なのですが、とにかくタチが悪い。デザインの幅を狭めるという点でも、閲覧者の邪魔になるという点でも、従来のバナー広告よりひどい。たしかに、小さくなってしまえば、それほど目立ちません。クリックして消せば、すっかり見えなくなってしまいます。けれども、それが目くらましになっている分、厄介ですね。
一見、デザインを崩すことがないので、製作者としてはバナー広告のことを考えずにデザインしたくなる。そして、バナー広告に戻したくはない、と思う。けれども、閲覧者の視点で考えれば、バナー広告の方がマシです。ページの最上部に登場するから、ダサい感じにはなりますけれども、デザインする側も気をつけますからね。広告は目に入るけれど、事実上認識されない（無視される）よう工夫します。この方が、閲覧者には都合がいいのです。
工夫といっても、大したことじゃありません。広告の下の領域だけを使ってデザインする、という頃です。本文と広告が重ならないようにする。
そんなの、簡単なことじゃないか、と素人さんはそう思う。けれども、その簡単なことが実現し難いのが、ポップアップ型の広告なのです。ポップアップウィンドウが開くなら、まだいい。自動でそれをブロックする機能が、IE6SP2 には標準装備されています。しかし geocities のポップアップ広告は、巧みに網をすり抜けます。
じつはこの2つがあります。中学生なのでクレジットカードがないでしょうから、有料のレンタルサーバを借りるにはたいていご両親の同意が必要になるわけで、いささか面倒な話になります。となると、無料で広告なしのサーバが気になりますね?
大手プロバイダの多くは、Web サイト用のスペースを無料で貸してくれます。ふつうは1回線につきひとつだけですし、やっぱり家族にバレることになります。バレてもいいなら別にいいのですけれども。とかくお金がないのはつらい、親の金でインターネットを楽しんでいる都合上、こうした問題はどこまでも付きまといます。慈善事業みたいなサービスを利用すれば、それでも当座の問題は解決します。ただ、慈善事業は気まぐれに終了するものと相場が決まっているので、注意が必要です。
こうしてみると、無料で広告付きのレンタルサービスを利用する理由も見えてきます……。
仮に広告なしのサーバをうまく確保できたとしても、新たな問題が生じます。移転に伴うアドレスの変更です。移転告知を出せばいい、というほど簡単な話でもなく、移転すると短期的にはお客さんは少し減るものです。どうもハッキリしない書き方になってしまうのですが、geocities の広告は嫌ですね、といってはみたものの、これはなかなか対処に困る問題です。
広告が非常に気になることを抜きにしても、現在のデザインにはひとつ大きな問題があります。鈴さんも自覚されている通り、大目次から中目次を選ぶと、非常に画面が窮屈になります。だから、「同窓で開く」と「別窓で開く」という2種類のリンクをいちいち用意しなければならなくなっています。一応、これで問題は解決されていますが、しかしスマートとは言い難い解決策です。
鈴さんのサイトは、必ずしも大規模な構造ではありません。フレーム分割を工夫すれば、もっと見やすくできるはずです。
最も簡単な解決策は、フレームをT字型に切ることです。今回、それは不可能ではありません。なぜなら、大目次が簡明だからです。
なるほど、こうして並べてみると、ずいぶんいろいろあります。けれども、よく考えてみれば、ここには常にナビゲーションとして表示しておく必要のない情報も含まれていますね。最初のページだけに表示されていればいい情報も少なくない。そこで、私ならこうします。
細かいところはともかく、おおよそこんな感じにすれば、いろいろな問題が解決されるはずです。リンクをたどり、各コンテンツを「同窓」で開いてみてください。詩、エッセイ、ハリポタなど、いずれもそこそこきれいな感じで画面内におさまります。
そもそもフレームを使うこと自体について、いろいろ批判する意見もあるわけですけれども、想定読者層がフレーム対応のブラウザを利用していないことはほぼ考えられない状況ですし、また「サイト内の特定のコンテンツをブックマークしたい」といった要求もほぼ絶無であること、そして検索エンジン経由で個別コンテンツへやってくる読者が少なく、またそうした読者を重視しない運営方針であろうこと、などを勘案するに、批判の大半は「批判のための批判」として却下しても構わないと考えます。noframes 要素を十分に整備していないことについても同様です。
当サイトがガールズサイト系のサイト批評サイトに意見を伺ったのは2年以上昔のことですが、とくに多かった指摘のひとつが「なぜフレームを使わないのか?」というものでした。多くの初心者にとって、常にナビゲーション領域が画面の一部を占拠するフレーム分割を用いたデザインは、非常にわかりやすいものなのです。だから、画面の最上部にナビゲーションを集中させた当サイトのデザインは、どうにも閲覧が面倒くさい、というのでした。
キーボードを使ってよいならば、IE をはじめとする大半のブラウザにおいて、Home キーを叩けば、ページの最上部へ戻ります。ノートパソコンの場合、キーを節約するために PageUp キーと共通になっていることが多い。Function＝Fn キーと PegeUp キーを同時に押すと Home キーが発動する仕組みになっていて、ちょっと面倒ですね。
とはいえ、こういうことを多くの閲覧者はご存じないから、スクロールバーを一生懸命操作したり、ホイールマウスをご利用であれば、ホイールをぐるぐる回したりしなければページの最上部に戻れない。
そういうレベルの方に、どこまで配慮すべきか。当サイトの場合は、一定以上のレベルに達していない閲覧者は切り捨てています。不勉強な本人が悪い、と。けれども、そんなことをいったら閲覧者がいなくなってしまうサイトもある。そうなると、製作者は立場が弱い。フレームだって何だって使って、「バカでもわかるナビゲーション」を用意することになります。それは別に悪いことではなく、方向性の問題だと思います。
「JavaScript を用いた、スクロールに合わせて移動するメニュー」とか、「CSS による擬似フレーム」といった妥協案（URI の一意性といった問題は解消されるが、画面の一部をナビゲーションが占拠し続けるというデザイン上の問題は解決されない）もありますが、これはこれで簡単でない。そうした技術そのものの難しさもさることながら、もっと単純な落とし穴もあります。
noframes 要素でナビゲーションを提供しない場合、フレームはリッチなナビゲーションを最も小さな労力で実現する方法です。フレームを使わずに同等のナビゲーションを用意するには、何らかの方法を用いて、全文書に現在はフレームに表示されているナビゲーションを挿入する必要があります。既に100以上の文書があるサイトにおいて、初心者がそれをやるのは大変なことです。
それでも、頑張れば一度のリニューアルはできるでしょう。しかし問題はその先です。コンテンツはだんだん増えていきますが、その度に全文書のナビゲーションを書き換えるわけにはいきません。だから、フレームとは別の形で、ナビゲーションだけを更新する仕組みが必要です。SSI は geocities で使えない（注：最近はどうか知りませんが昔はそうでした）ですから、JavaScript で挿入することになるのでしょうか。でも、SSI にせよ JavaScript にせよ、そうした方法を初心者向けに解説しているサイトや本を探すのは困難です。
注：解説が少ないのは、解説が難しいから、でもあります。フレームの場合、「なんちゃって HTML」の概念の中にあります。SSI を使う場合、また新たな概念をいくつも教えなければなりません。「フレームが使えないサーバはなくても SSI を使えないサーバはある」「拡張子を shtml にしないとうまくいかないことが多い」そういった過去の資産から推測できない領域の知識がたくさん必要になるわけで、たしかにフレームの方が初心者に教えやすいのです。
また、多くの文書に同じ 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 で設定すれば、どちらのタイプの「小さな文字が好きな人」にとっても嬉しい結果となります。
文字サイズ「最小」にしても小さくなりすぎない、そして文字サイズ「中」でも小さく表示されるのですから。
しかし逆に、小さな文字は読めない人にとって、ユーザ補助（あるいはそれに類する機能）を用いない限り、文字を大きくできないという問題があることに注意してください。
その他疑問点が多くあります
とのことですが、書かれていない疑問に答えるのは難しく、以上でアドバイスを終えます。少しは参考になりましたでしょうか。