MMARS - Masa's MIDI-Arrange Rave Station

過去のMMARSデザインをキャプチャーしてみました。開設当時からMMARSをご贔屓にしてくださっている皆様には、「あーあ、昔はホントにボロかったよなぁ」と懐かしんでもらえるかもしれません。残念ながら一番初っ端のファイルセットは消してしまったので、ここでは一番古いもので、「OPEN後の一回目か二回目のマイナーチェンジ」のバージョンを載せています。

初代MMARS - マイナーチェンジPART1

フレーム・JAVAアプレット・クリッカブルマップ

保存しているファイルセットの中でもっとも古いものです。一番最初の公開から2回ほどのマイナーチェンジを行っております。HTMLの勉強を始めて、メモ帳でサクサク書いては開いて見て、またメモ帳でサクサク・・・とやりながら作っていたのにもかかわらず、一番最初からフレーム構成で挑んだため、HTMLのHも知らない私にとって、なんと入りにくい世界だ、ほぉむぺぇじ！！と悪戦苦闘いたしました。が、おかげで、要領よくHTMLの概要が把握できたので結果オーライか。

この写真では、メニューが下フレームにありますが、MMARS誕生当時は、メニューは左フレームにあり、どっかの素材集でパクったメニューのアイコンを使ってました。ちなみにメニュー項目は、誕生当時から第4次リニューアルまで全く変わってません。第4次リニューアルで、INDEXを廃止し、EXTRAを追加したくらいですね。分類ワケは何気にうまくいってたみたいです(笑)

すでに、モノクロのロゴ看板にバージョンアップした画面を紹介しておりますが、一番最初はレンガ調の壁にスプレーでかいたようなデザインの看板を使っておりました（以下写真）。MICROSOFTの製品についてるPHOTO EDITORかなんかでこさえたものです。ページのデザインですが、背景を黒にして、濃い色あいのシマシマに MASA'S M.A.S と縦に書いた壁紙を使い、アニメーションGIFやら他の画像で色とりどりにしてにぎやかに見せかけていた傾向があります。

この当時はページのデザインよりもMIDIを頑張っていた頃です。一ヶ月に2個か3個は作ってたなぁ。1週間で連続して5個とか作ってたときもあったし。んー最初のうち頑張って数をためておいてよかったです(笑)開設当時、一ヶ月でたしか500アクセスを突破してたと思います。これはPANDAさんやMYATさんのサイトからのリンクが大きく貢献してくれたのでしょう。開設から1年くらいたった時点で100アクセス/日を実現しておりまして、何気にゲスト様からのご声援にささえられているんですね。

初代MMARS - マイナーチェンジPART2

フレーム・JAVAアプレット・クリッカブルマップ

先ほどのヤツからマイナーチェンジを行い、結局は誕生当時と同じようにメニューを左フレームに戻しました｡ちなみに、このトップページで使われている壁紙が、さっきの説明であった「濃い色あいのシマシマに云々かんぬん」のヤツです。各ページで色を変化させ、MMARS全体で同じパターンを使用しました。

MENUですが、マイナーチェンジPART 1 の頃にはじめてクリッカブルマップの存在をしり、早速MMARSでも採用。このとき以来、クリッカブルマップが楽しくて仕方がない、といわんばかりに第3次リニューアルまで採用しておりました。懐かしいなぁ。

この写真ではドメインをまだとったばかりのころのもので、ドメインでのURLがトップページに記載してあります。ドメインとったのは2000年の初夏ですから、実は、初代MMARSのスタイルって誕生当時から結構長く使っていたスタイルなんですね。

このときはまだレンタルサーバーを使っておりませんでした。なので、ドメインからプロバイダ領域に転送していたころです。この頃はいつかガラっとデザインを変えてやるとふつふつと気持ちを高めていた頃合でございます。

第2次MMARS - メジャーチェンジ

フレーム・JAVAアプレット・クリッカブルマップ

思いきってバックを白にいたしました。これは相当の思い切りでしたね。このバック白化によって、今まで使っていたフォントの色を全て調節しなくてはいけなくなり、結局全てのページに渡って、色大改正を行ったり、どうせだったらロゴとかその辺のグラフィック周りも変えなあかんだろう、と結構時間のかかった作業でした。下の写真はMIDI RAVEメニューのページです。

なんか、色々なサイトを見てると白系のほうが多いんですよ。企業とか大きなサイトになるとやっぱ明るい色を好む傾向にあります。なので、ウチもマネしたと（笑）メニュー画像もメニューフレームも、もっと小さくしてコンパクトにして下側に薄く描写されている感じがカッコイイだろうと直感でこのデザインに。また左から下へメニュー移動です(^^) しかし、全体を通して眺めていると、いまいちまとまり感がなくてシックリしないなぁと感じてました。

第3次MMARS - メジャーチェンジ

JAVAアプレット・クリッカブルマップ

いまいちしっくりしなかった第二次MMARSがお見事キッカケになりまして、3ヶ月という短いインターバルでまたリニューアルを決意。今回はフレームを取りやめて全ページ同じデザインで表示されるようにしました。遂にフロントページというホームページ作成ソフトの恩恵にあやかることを決意し、テーブルのセル背景によるデザイン構成と、通常のイメージ表示を組み合わせて一つのページのデザインを確定するという、なんとも無謀な暴挙に出たペｰジ構成です。見る人に「お、なかなかカッコイイじゃん」といわせるためには、または、ちょっとHTMLかじってる人に「お、この部分どうやってるんだ？」といわせるためには、こうした妙な構成にせざるをえなかったんですね(笑)

なんでこんなヘンな組み合わせで構成したかというと、上のメニュー部分なんですよ。これを全てテーブルで分けてセルの背景として画像を出せばイイと思いがちなんですが、ワタクシの大好きなクリッカブルマップにするためには、通常の画像表示じゃなきゃダメなんですね、背景じゃNG。したがって、少なくとも上のメニュー部の画像は背景にはできません。かつ、球体から下に伸びる黄色三角のところは余白として何も入らないようにしたかった。なので左はやっぱりテーブルのセルが伸びないといけません。左を背景にすると、ページを下にスクロールしたとき、三角の最下端にきた時点でまた同じ物が続けて表示されてしまうというジレンマをどうにかしないといけなかったんです。このロゴですが、1個に見える画像でも、実は3つに分割されていて、それぞれピッタリとくっつき1つに見えるように工夫されているんですねー

んで、本文のところですが、この上の部分に現在いるページのタイトルを文字で出したかったのです（上写真でいうと、赤い文字で書いてあるところ）。全ページ同じデザインなのでこれがないと、どこにいるんだかわかんなくなっちゃう。けど、この余白に文字を書くためには、デザインの一部になっている、右下へと伸びている薄いグレーのMASA'S MIDI-ARRANGE RAVE STATIONの上に重なるように乗っけなければいけないワケで、したがって求める解は「この画像は背景として表示し、普通に上に文字を表示せよ」となるわけです。したがって、この部分はセルの背景です。

第4次リニューアルを終えた今、考えてみれば、最初からDREAMWEAVERの力を借りてソフトの使い方を覚えていれば（実はこのころから持ってました。使い方がメンドくさそうなので手付かずでした。ああ、愚か・・・）、このデザインもフレーム化できたんだけど、今更考え直すのメンドくさいのと、12月の年の暮れ「21世紀に間に合いました」といいたかったのもあり「ページ毎テーブル構成」でリリースいたしました。この画面はMIDIルームのメニュー画面ですが、トップもいつもと同じような感じです（笑）ちなみに、このリニューアルのきっかけですが、屋内スキー場、ザウスのホームページで、テーブルによるデザイン構成のヒントを得ました。あそこのページ、白バックでカッコイイんですよ。

このデザインを作るにあたり、ADOBEのPHOTO DELUXEを本格的に使用しております。レイヤーを8つくらいかさねて作った力作ロゴで御座います。私は簡単なソフトが大好きでして・・・あと、クリッカブルマップも当然ながら顕在であります。なお、MMARSオープンからずっと愛用していた「放射線マークに手」のロゴは、メインコンテンツでの使用を廃止して、GUEST BOOKに移動しました。

このころには、っていうか第2次リニューアル時より、ドメインとレンタルサーバーを対にして運営しております。メアドもドメインのヤツを使用しております。んー、ドメインってやっぱいいよなぁ。携帯のメールもドメインのアドレスで転送設定で受信できちゃうし！

ナンタラ@docomo.ne.jp とか、ナンタラ@sky.tu-ka.ne.jp なんつー長ったらしいアドレスとはおさらばです。あ、ちなみに、ワタクシの携帯メールは call@mmars.net で届きます。カッコイイっしょ。

第4次MMARS - メジャーチェンジ

フレーム・JAVAアプレット・CSS

第3次MMARSのデザインはかなり自分でも気に入ってたんですが、メニューを増やそうと考えた際、メニューに絵を加えるためには全ページの画像を作り直さないといけないってんでメンドウ！ということ、やっぱりフレームがクールだよなぁと思い、どうせならリニューアルするかと。

第3次で使い方をモノにしたDream WeaverとFire Worksで作成に入りまして、1週間くらいでリニューアルが完了しました。また黒に逆戻りです。色数も抑えて、俺の好きな青系に統一。うん、やっぱ色を絞るってカッコイイのだ。そして長年愛用していたクリッカブルマップをついに卒業。JAVA SCRIPTでロールオーバーメニューにしました。マウスを当てると違う画像になるというヤツです。

また、着メロが大分メジャーになり、PHONE MELODYに一気に大量アップを行ったのもこの時代でしたな。そのころ、ウチのLINKに紹介している同級生 ARTIE RIPPYの「りっぴぃ」が見るに見かねたのか、いい加減スタイルシート（CSS)にしろ、やればわかるから・・・ということでこれも2年越しに重い腰を上げてやってみると。アラ、ホント・・・なんて便利なの！！ということで「DAILY MASA」のコーナーに採用しました。

そしてまぁ、今の第5次MMARSに至ります。今回は、それまでの経験と失敗、やりたかったことをうまく反映したデザインになりました。色数をもっと抑えてさわやかに。ということで、第3次で採用した白ベースの背景に。そして俺の好きな青を使って抑えたデザインにしました。やはりシンプル・イズ・ザ・ベストかなぁと。全ページ、スタイルシートを利用し、全体の統一感を図りました。

今回のデザインはいかがですか？