ソニックX-WEBのサイトマップ
ソニックX-WEBのガイドライン
ソニックX-WEBのFAQ

ソニックX非公式総合ファンサイト - ソニックX-WEB
ソニックXのストーリーレポート
ソニックXの全スタッフ一覧
ソニックXに登場したキャラクターを紹介
ソニックX関連グッズ情報
ソニックX-WEBのソニックXスペシャルコンテンツ
ソニックX関連やソニックX-WEB関連のリンク集
ソニックX-WEBに関するFAQ
ソニックX-WEBのガイドライン

SPECIAL CONTENTS

ソニックX-WEBスペシャルコンテンツ

ソニックX-WEB  -> ソニックX-WEBスペシャルコンテンツ -> ソニックX-WEB“ボツ”デザインギャラリー
ソニックXに関連するソニックX-WEBオリジナルのコンテンツです。

ソニックX-WEB“ボツ”デザインギャラリー

ソニックX-WEBは、これまで作ってきたウェブサイトの中で、間違いなく過去最高の完成度を誇っていると自負しています。
それもそのはず、2004年3月の放送終了後からリニューアルの計画を立て、デザイン構成と試作品制作に半年以上、 そこから全ての企画を洗い直し、インターンシップと現在の仕事先で習得したウェブ制作技術とバルキズムの制作で得た半自動更新プログラム のノウハウを取り入れて作られたと言う、これまでで一番時間がかかっているウェブサイトですから。

さて、今回は、そんなソニックX-WEBを完成させるまでに考えた、デザイン案のうち、実際に制作したモノを公開する・・・ と言うことで、このソニックX-WEB“ボツ”デザインギャラリーとして打ち出すことにしました。

ソニックX-WEBのボツネタを、どうぞご覧ください。


ソニックX-WEB第一案

インラインフレームを中央に表示させ、そこに全コンテンツを表示させる形だったのがレイアウト第一案。

確か、「スッキリとしたデザインがいいな〜」などと考えつつ、作ってみた記憶があります。

背景に使っている画像は、第四話『カオスエメラルドを手に入れろ!』のモノで、管理人お気に入りのワンシーンを、「こんなカンジのイラストが入れたいな〜」と考え、少し加工して貼り付けてました。

ちなみに、参考画像ではわかりませんが、メニューの部分はFLASHになっていました。

トップページからもう一階層入ったところのページです。
試しに第一話のストーリーレポートを入れ、どんなものかを見てみたんですが・・・少し幅が狭いですよネ(苦笑)

ちなみに、左側のメニューはこれまたFLASHで出来ていて、矢印をクリックすると、何枚も重ねてあるページが、次々入れ替わる仕組みになっていました。

ソニックX-WEB第3案

「2案は?」と質問されそうですが、第2案は、この企画を思いつく前に破棄してしまいました(苦笑)

100%FLASHで作っていたんですが、あまりにも時間がかかるのと、微調整が大変なので、途中で諦めたんですよネ。。。

さて、この第3案なんですが、相変わらず中央に表示させるデザインは変わっていないんですが、ロゴ(試作品)やバナー(試作品)、イラストなどを使って、少し彩りを出してみました。

個人的には結構気に入ってたんですが、この頃、ウェブサイトにたくさんの人が入ってこれるようにするウェブサイトを作る方法と出会い、その技術を盛り込もうと、このデザインをボツにしました。

このデザインの特徴はインデックスページのバナー(ENTER)をクリックすると、新規にこのようなウィンドウが立ち上がり、この中で、閲覧してもらえるようにする・・・と言うものでした。

ちなみに、ここでも左のメニュー部分はFLASHで作っており、マウスを乗せると、ちょっとした効果が現われるようにしていました。

ソニックX-WEB第4案

海外サイトのポートフォリオなんかで良く見るデザインで、一度やってみたかった案でした。

第3案で、『各コンテンツにキャラクターの画像を入れる』ことが決定していたんですが、肝心のキャラクター画像が本格的に仕上がってきたのが、この第4案だったので、非常に中途半端な形ですが、メニュー部分にキャラの画像を入れ込んでみました。(結局全員のイラストが完成したのは決定案のデザインが出来た後でした。)

ちなみに、これもFLASHで作っており、中々気に入っていたんですが、どうも細かいところが雑にしか仕上がらなかったのと、より多くの人に見てもらうには?」と言う2点を考えた結果、ボツにしました。

オマケ2:旧X-WEB

ソニックX放送当時の旧X-WEBのデザインです。
懐かしかったのと、自分の進歩を見るために出すことにしました。

一部画像がなくなったりしているんですが、当時はこう言うデザインで精一杯だったんですよネ(笑)

オマケ2:ソニックX-WEB決定案

高校生の頃からウェブサイトを作り続けた結果の集大成的な仕上がりにすることが出来たのが、この決定案です。

このウェブサイトには、デザインや技術など、これまでのウェブ制作で経験し、積み重ねてきたノウハウを全て注ぎ込んでいます。

技術面の工夫について一言

HTMLタグがわかる人、打てる人はソースを開いてみてください。レイアウト組む時に使ってるはずのタグがほとんど使われていないのがわかると思います。


ソニックテイスト