Design History
MOL > Design History > Majesty Onlineのいろいろ
MOL CSD-V. 2.6

MOLは発足当時からデザインを重視してきましたが、それには訳があります。 私は電脳戦機バーチャロン・オラトリオタングラムをたまにゲーセンでやるんですが、そんなときいつも「このサイバーな感じがいい!」って思っていました。 そして、「この雰囲気を自分のページで使いたい!」という強い願望にかられ、創作活動にとりかかりました。 それ以来いろいろとデザインを変えながらここまで来ました。 本来こういう内容はシークレットで公開するんですが、ちょっとした事情で今回はMOLのメインで…ってことになりました。
このページのスクリーンショットは、ウェブ上で公開しているものと、開発画面とが混在しています。 また、すべてのスクリーンショットは画面モード 800×600 または 1024×768 ピクセル時にMicrosoft Internet Explorer(撮影当時の最新版)を全画面表示にしたものです。

MOL 開設当時

MOL発足当時に製作したメインページです。 当初は、全コンテンツをこんな感じに統一してました。 これこそ、最初にオラタン(バーチャロン・オラトリオタングラム)をイメージして作ったものです。 厳密に言えば少し違って、SF映画に出てくるような次世代感覚の乗り物のコクピットにあるモニターをイメージして作りました。 背景の流れる青い線は、オラタンで、STAGE 7〜9(テムジンやライデンのステージ)を参考にしました。
(800×600)
Majesty on Line 初期

CSD-V. 1.1

青い流線が、見る側にそれなりのマシンパワーを要求していたため、背景のみを変えたものです。 コンテンツはなにも変わりませんでしたが、読みやすくなったのは確かだと思います。
(800×600)
MOL CSD-Version 1.1

CSD-V. 1.9 シリーズ

CSD-V. 2シリーズへ移行する元になったものです。 コクピット感をさらに重視させることと、背景の流線を廃止することが目的でした。 CSD-V. 1.9は、背景だけをかえたものです。 玄関とホームもCSS化し、MOL全体でもCSS Level 2を採用しました。
はじめは横スクロールコンテンツにしようと思っていましたが、基本設計が上手くいかなかったので見送りました。
(800×600)
MOL CSD-Version 1.9

CSD-V. 2 シリーズ

CSD-V. 1.9を元に、インターフェイスやメンテナンス性を考慮したシステムです。 CSD-V. 2シリーズは、ホームから総合的なコンテンツまで、多くのページに採用され、MOLの2世代目の顔となっています。
右のスクリーンショットはCSD-V. 2.4で、このヴァージョンは、画面左上からスクロールインするショートカットバー「Quick Menu Bar」を搭載しました。 また、このころからMajのPC環境が大幅に変わり、大きな画面で表示させることも念頭に入れるようになりました。
(1024×768)
MOL CSD-Version 2.4

CSD-V. 3

CSD-V. 3コンセプトは、「明るい背景で読みやすいコンテンツ、且つスタイリッシュ」です。 CSD-V. 1 〜 2 シリーズの雰囲気を壊さないことに苦労しました。 画像やCSSファイルをできるだけ分割・共有させ、フレームを多用することで、ユーザーインターフェイスが格段に向上しました。
(800×600)
MOL CSD-Version 3

CSD-V. 3.1 シリーズ

CSD-V. 3.1 シリーズは、CSD-V. 3を大型コンテンツ用にマイナーチェンジしたものです。 ですので、コンセプトや設計ビジョンはCSD-V. 3を継承しています。 フレームで「エ」の字型に分割し、機能性を向上させました。
(1024×768)
MOL CSD-Version 3.1

CSD-V. 2.5

サイト名を「Majesty on Line」から「Majesty Online」へ、開設当時からロゴに採用していたフォントを「Eras」から「Century Gothic」へ、それぞれ変更しました。 また、CSD-V. 1.9のころより、背景の色合いが鮮やかになりました。 インターフェイスの面では、CSD-V. 2.4で採用したQuick Menu Barを廃止して、フレームを採用しました。
(1024×768)
MOL CSD-Version 2.5

CSD-V. 2.6

CSD-V. 2.5に合わせて、CSD-V. 2.3からグレードアップした汎用大型コンテンツ用のシステムです。 べたテキスト書きに適したように改良しました。 また、CSD-V. 2.5との共有部分を増やし連携を考慮したため、メンテナンス性も向上しました。
(1024×768)
MOL CSD-Version 2.6