■Occasional ThoughtsのTopへ


カウント2万記念:“歴代TOPページを振り返る”、みたいな

2002年の4月からだから、
現時点(2005年秋〜冬)で、
3年半くらい運営されてているわけですか、
この「LIFE WAVE」は。

途中で半ば放り出されることもあり、
本気でたたむことを考えたこともあり、
別段ドラマチックなことはなくとも(あたりまえ)、
管理する側としては、いろんなことがありました。

その3年半という期間で
訪問者(というかカウンターが)2万人というのは、
1日単位、あるいは1月単位で見たら、
数としては、かなり、もうホントかなり、
少ない計算になるだろう。
それは寂しいようで、けれども、
我がサイトらしいといえば、サイトらしい。
と思う。

でも、まあ、しかし、
なにはなくとも、
「ありがたや」
ということで、記念というか、そんな感じで、
ここで前から1度やりたかった、
歴代TOPページを振り返ってみることを、
したいと思います。

全然あれだよね、記念とか言っておいて、
結局自分のやりたいことやるっていう(笑)。

で、えーと、自分では
これまでに9つ(9枚って言う方がいいのかな?)、
TOPページを作ったつもりだったんだけど、
あくまで「つもり」だったみたいで(笑)、
ソースを整理してみたら、アラ「8つ」しかない!
あれ、今ので9つ目だと思ったんだけどなあ…。
しかし見あたらないんだから、しかたないね。
今ので8つめということで、話を進めます。

下にこれまでのTOPページを紹介します。
clickすると別ウィンドウで開きますので。
まず言っておくと、ホント1番初めのヤツは
ソースをとってないみたいで、ありません。
2番目のやつも、なんかこんなだったかなあ?
って感じもするし、
実際使用したのはちょっと違うよなあ、
みたいなのもありますが、
ちょっとでも楽しんでいただければ幸いでふ。

ホント開設当初から訪問されている方には、
少しだけ――少しだけ、ね、懐かしいかもしれない。
主要なコンテンツへのリンクはとりあえず外してあるし、
カウンターやニュースティッカーも取り除いてある。
そのせいでデザイン的に「空き」が目立つようになった場合には、
適宜「ここにニュースティッカーがありましたよ」ということを書いておいた。
細かいけんども。気になるので。
あと各TOPページ内の「UPDATE」も当時のままになっているけれど、
気にしないで下さい。ただの記録です。
では。


#1:1st wave

初代TOPページ。これは、上にも書いたように、すいません、ソースがありません。 だからリンクもできませぬ。でもあれだ、確か最初は真っ黒な背景に、蒼白い光(素材)を使った、暗いデザインで、その次に、レンガ調の壁紙を使った少し明るいものになったんだと、記憶している。パッと見が「暗い」よりも「明るい」方が、一般的にはとっつきやすい(HPの中に入りやすい)のかもしれない、ということを考えたのだった。



#2:2nd wave(←click!)

これは厳密な意味では2つめのモノではないと思う。2つめのやつに、ちょっと手を加えたものだと思う。ちょっとこう、パッと見で「情報量多し」みたいな印象を出したくて、こんなゴツイものになってしまったんだった。PSソフトの「シルバー事件」の画面デザインに そこはかとなく影響されているはずだ。「NOW LOADING」のGIFアニメも、シルバー事件風の素材として作られたものを、使わせていただいた。「update」の付近に使われている英詩は、ラスト・デイズ・オブ・エイプリルの“Down The Aisle(with you)”から引用している。 コンテンツ付近の英詩は、ナイン・インチ・ネイルズの“フラジャイル”より。気づいた方はいただろうか。あと使われている画像はAutechre(オウテカ)。nothing recordsのHP(今はない)より拝借した。また、1番上を走っている船&ジェットスキーは、「LIFE WAVE」上を「サーフィン」するというようなイメージで用いている。ちなみにその横に書かれた「Surfing On Life Wave」は、ポリゴン・ウィンドウ(エイフェックス・ツイン)の『Surfin' On Sign Wave』を、もじったものだった。細かいところをいじったヴァージョン違いは多数あったと思う。

この頃に、HP自体に大改造を行ったのだった。それまでコンテンツ内も、内容に応じていろいろ趣向をこらしていたのだが、ここからはいたってシンプルなものに変更した。その目的は、TOPページをどう変えようと、そのままで対応が効くように、だった。中身のデザインを思い切り簡素なもので統一しておけば、TOPページがどんなに賑やかだろうとおとなしかろうと、入ってきた人は違和感ないだろう、というわけだ。



#3:3rd wave(←click!)

これもまた「シルバー事件」を意識している。ホント好きだったので(今でも好きだよ)。特に色。紺色、グレイ、赤、オレンジ、これは僕の中で「シルバー事件」を代表する色だったので、どうにかそれでまとまらないかと思い、 こういう色使いになったのだった。あと意識した部分は、スクロールさせずに、TOPページの全体が見えるものにする、というところだった。 まあPCの解像度やなんかの設定で異なってくるとは思うけれど、少なくとも自分では、1画面中に表示できたので、よしとした。毎回課題になるのが、UPDATEの情報と、ニュースティッカーと、コンテンツへのリンクをどう置くかということなんだけど、ここではニュースティッカーをバータイプにすることで、スペースをかせげたので、「1画面内で」というこだわりも何とか貫けた。何となく、だけど、これまででは、1番気に入っているTOPページだと思う。もし永久にTOPページを固定するのであれば、たぶんこれにすると思う。



#4:4th wave(←click!)

んー。これは、何だろう(笑)?。確か春か夏ごろに、その季節を意識して作ったような記憶がある。だから新緑をイメージして、バックを緑にしたんだったと思う。あと1部に、背景よりももっと濃い緑を使ったりね。で、新緑をたたえた樹木の「肌」をイメージして、「UPDATE」や「CONTENTS」の部分に茶系統を使ったんだった。IEしか反映されないようだけれど、上の方に、MARQUEEで「ゴホウモンアリガトウゴザイマス」という文字が流されていた。各コンテンツ名の横に小さい□が並んでて、 1つだけ黒く塗られている(■)けれど、あれは見て分かるように、そのコンテンツの並び順に該当する□が、黒塗りされている。1番目の「Profile」だったら、1番目の□が塗られているというわけです。9番目の「Mail」だったら9番目の□、ね。なんか寂しかったので、入れてみただけで、深い意味はないんだけれど。これも割りと好きかなあ。



#5:5th wave(←click!)

なんか段々苦しさが見えてきている(笑)。これは、4分割画面、みたいなイメージで作れないかなあ、なんて思ってチャレンジしたんだった。 したら、いろいろいじっているうちに、クモの巣みたくなってきたんで、色もそれに合わせて赤や黒といった、見せ方によってはちょっと毒々しい色にした。あと背景が白だと少し爽やかすぎるので、ノイズ系統の壁紙を使わせていただいた。ホントは網の目の中を色んな色で塗ろうとしたんだけど、あんまり意味がなさそうでやめたのだった。コノ頃からテーブル(TABLE)タグの中にテーブル(TABLE)タグを入れるということを意識的にやり始めたのだけれど、頭がえらいこんがらがることにようやく気づいた。作っているときは考えが研ぎ澄まされるからよいのだけれど、少し離れるとタチドコロに忘れるものだから、大変だ。だから、こういう類のものを作るときは、一気に仕上げねばならぬ、ということを知った。 あと小ネタとしては、デザインの都合上、「Monthly Recommend」を説明する文章の下が空いてしまっているのだが、そこに「まだまだイケマッセ」という言葉が隠されている。別に反転文字とかではなくて、ソースを見れば分かるだけなんだけどね。なんかTOPページ作り変えるのもそろそろ限界かな、なんて思っていたので、自分を鼓舞するためにも、そんなメッセージを入れてみた。デザインとしては、あんまり気に入っていない。だからすぐに変えてしまった記憶がある。



#6:6th wave(←click!)

これは僕の中では5thの発展系、みたいなイメージがある。5thを作っているときに、このイメージはすでに頭にあったんだった。5thをもっと小さくして、みたいな。これはコンテンツの置き方に大分迷った記憶がある。僕はコンテンツ名だけ書いておくのは嫌いなので(だって中身が何か分からないから)、外から見て中身が分かるようにするために、コンテンツを説明する文(なりコメントなり)をつけるのを信条としているのだけれど、この場合はさあどうするか、となったのだった。デザイン上、1マスには書ききれない。下(ちょうど「UPDATE」があるあたり)に示すのでは、感覚的になんかおかしい。ということで、鏡のように、各コンテンツの横にそのまんま並べることにしたのだった。で、色を対応させれば少しは分かりやすいかと思い、各コンテンツ名を書いたマスと、その説明のマスは、色を対応させている。ところどころテーブルが細切りになっているけれど、あれば流星のしっぽをイメージ。全体ではそんなイメージないんだけど、そこだけはそんなイメージで作った記憶がある。「UPDATE」が下にきてしまったのは気に食わないのだけれど、これもけっこう好きなページだ。あと2ndの頃から画面右下に「虫(BUG)」のアイコンが置いてあるんだけれど、あれは管理人「BUG」の分身だとでも思ってください(笑)。フリー素材だけどね。たまに変わってることがあるから、気になる人は注意しておいてください。



#7:7th wave(←click!)

1つ前のTOPページだ(2005年秋現在)。この前にもう1つあったような気がしたのだが、僕の気のせいだろうか。ううむ。ここでイメージしたのは、植物の茎と葉。真ん中に1本太い柱があって、そこから各コンテンツへのリンクが葉っぱのように伸びている、というものだった。けれど、1本で示すと、柱が長くなりすぎる、ということで、2本に分かれたのだが、おかげで何となくムカデのようになってしまった(笑)。オレンジと黒の縞、という色デザインは線路から来ているのだが、図らずも「ムカデ」的なイメージにも適合してしまった。これもUPDATEをどこにもってくるか、カウンターをどこに置くかということで悩んだ記憶がある。当初ニュースティッカーの下は画像を置くようにしていたのだが、途中からブログを始めたので、急遽ブログへのリンクを示す場所となった。テーブルタグをバキバキに使って作った後だったので、そんな中、ブログへのリンクをコンテンツの並びに入れるのは、あまりにしんどかったのです。

バナーを貼り付けてあるテーブルが、いつも画面下部に張り付いているけれど、これもどんなTOPページになっても、そこで使えるように、こんなデザインにしてある。TOPページに合わせてテーブル幅や色使いを少し変える必要があるけれど。いちいち丸ごと作り直す苦労に比べたら、はるかに楽だと思う。


で、この後が、今のTOPページ。
これについてはあんまり説明はしません。
以前ブログで、「当初思っていたデザインとはかけ離れてしまった」
と書いたけれど、じゃあ初めはどんなイメージをしていたのかと言いますと、
「ビル」だったんだけどなあ…(笑)。
HTMLだけ使ってると、どうしてもデザインが角張るから、
じゃあ「世の中にある角張ってるものを」ってイメージしたら、
たまたま「ビル」で、よし、今度はそれにしようと思って作ったら、
あんなんなってますよ。
小さい四角がいくつかならんでいますが、
あれがビルの窓っていうかね、そんなイメージを漂わせていて、
「ビル」の名残を少しだけ僕に感じさせてくれます。

ということで、以上、
TOPページを振り返ってみました。
いかがだったでしょうか。
またいつか機会があれば、
ココから先のTOPページを振り返ってみたいですね。
今度は5万人位いったら、やりますかな、
って一体いつだよ。

2005/10/21
▲このページのTopへ ■Occasional ThoughtsのTopへ



welcome to my world.