いにしえのトップページ

過去のトップページを集めてみました。
ページが古いため所々リンク切れや表示がおかしい箇所があるかもしれません。
なお各トップページから戻る時はブラウザの『戻る』で戻ってください。

スマキンの前は『大乱闘スマッシュシスターズDX』というサイト名だったんですわ。ちなみに『過去ログの部屋』の下にやたらとスペースがあいてるが、そこには任天堂のニュースや更新情報を載せていました。にしても今と比べてずいぶん文字がデカイしコンテンツも少なかったな〜。
サイト名を『スマブラキングダム』へと改名したと同時にレイアウトも一新したんだ。またリンクにカーソルを乗せるとリンクの背景色が変化するようにして視覚的効果も重視するようになった。しかしトップページのリンクが多いせいで反応が遅すぎるので3代目では却下されちまったんだってさ。それとコンテンツの増加にともない文字サイズが小さくなったってよ。またインラインフレームを使うことによって画面のスクロール量を減らすことに成功した。
2代目は2色に分けた背景を使用してフレームに見立てた疑似フレームのレイアウトが異色だべ。またスクロールする文字のタグや日数をカウントするJavaScriptなど様々な手法を使い始めた頃でもあるんスね。
カーソルに☆がついてくるようになったのが3代目なのだ。でも、ちょっとウザそうだしクリックする時ジャマそうなのでトップページ以外では☆はついてこないようにしたのです。またランダムロゴとランダムトップ絵を始めたのもこの3代目なんスね。さらにリンクにカーソルを乗せるとリンクにアンダーラインとオーバーラインがつくように変更して、今までの背景色が変化するものより反応がなめらかになったんだよね〜。
コンテンツの各分類の色が今までは青、オレンジ、緑、水色、紫だったが、4代目からは青、オレンジ、緑、黄色、紫になった。4代目にもなるとコンテンツの量がべらぼうに多くなって画面のスクロール量も増えてしまう。そこでインラインフレームを2つも追加しちまったのだ〜!
基本的なレイアウトは4代目をベースにしているのでよく似ている。そしてさらなるコンテンツの増加により画面に入りきらなくなってしまったが、全体を左上につめることでスペースを確保できたのだ。今まではほぼ1ヶ月おきにレイアウトを変更していたが、5代目はもう何ヶ月も変更していないのだよ。それだけこのデザインが気に入ったわけで、当分変更はないだろうな〜。ちゅ〜かこれが最終形かもしれんな〜。
5代目の時『これが最終形かもしれんな〜』とか言ってたのにまた新しいレイアウトを作ってしまうとは・・・。で、6代目では不要だと判断したモノをいくつかはぶいて結構スッキリしたレイアウトになったんだな。例えばカーソルについてきた☆。この☆ウザイしクリックする時ジャマになる時があるのでなくしましたとよ。今回はスマキンのイメージカラー通り全体の色をできる限り青系だけにしぼってみた。また多すぎるコンテンツをインラインフレームの中に入れることで画面のスクロール量をできるだけ減らしたんだ。
今回のレイアウトは構想から完成までに約2ヶ月はかかっていると思われる。これほどまで時間がかかった理由は、今回初の試みであるコンテンツがページスクロールと共にエレベーターのように上下に移動する仕様にしたためだからだ。でも最初はこのエレベーター機能に加え、コンテンツがウィンドウの左側に格納されていて、クリックすることで引き出すことができる仕様だった。けど、トップページを表示させるたびにクリックして引き出すのはめっさめんどいもんだから、結局今のカタチに落ち着いたっぽいよ。あと、不要っぽいと判断したモノを今回もまたいくつか省きましたとよ。
2003年4月1日(火)にエイプリルフールネタで作ったトップページっス!でも、想像以上に反響がデカくてめっさビクった!!ちなみにサイト名は『スマブラキングダム』⇒『キマグスブランダム』⇒『気まぐれランダム』という流れでできたっぽい。ちなみにハエ丸星人くんとリグくん考案です。エイプリルフールネタ提供者:ハエ丸星人くん・リグくん・みすた〜くん。
今まで背景画像は全ページ共通だったけど、もう少しダークな感じを出したかったためトップページのみ別の背景画像にしてみたさ♪あと7代目って激重だったんでさ〜エレベーターはなくしますィたさァ!!またCSSもよりシンプルな設定にしてみたさァ♪と、いろんなとこを簡略化し軽量化を図ってみたんだな。そしてコピーライトにポチコロのオマケつきだったりしちゃったりw
これまでは暗い色を基調にしてきたけど、9代目からは明るくて清潔感のある色に変えてみたっスよ!暗い色のレイアウトには相当慣れてきたんだけど、明るい色は初のチャレンジであって思った以上にレイアウトしにくかったですゥ;一番上のカウンターがある部分のバックは、この頃デザインに凝りすぎてたんで、今回はかなりシンプル化させてみたです。スクロールバーの色も背景画像も他のページとは違うですね〜♪あと、ロゴ画像をランダム表示すると重くなるんで、1枚だけにしちまいましたとさァ♪ってか、ハーボットの置き場所にかなり困ってしまったさ;当初はスクロールバーを出さないようにして、画面に全て綺麗に収めようと考えてたんだけどねェ・・・。ハーボット消そうかとマジで考えちゃったよ(;^ヮ^A
今回のトップページの制作にかかった日数は、約5日程度と実に短かった。しかし、なんつ〜か短期間で作ったわりには、メチャメチャ凝ったレイアウトぢゃねェですべ?今までコンテンツ部分は、コンテンツのカテゴリーごとに色分けしていたんだけど、なんかさァ〜それだとカラフルすぎてると思ったんでさ、寒色系で統一してみたんですよねさァ〜。記念すべき10代目ということもあって、自分でもかなり満足いくデキになったので、よかったよ〜かった〜♪
制作期間は1週間ぐらいと今回も短めだ。というのも、今回は2周年記念にリニュしようと思い立って、ギリギリで作り始めたから急ピッチで仕上げる必要があったためであって・・・。んで、10代目は画像が少なめだったけれども、11代目はよりいいデザインにしようと、画像を多く使用してみたのです。全体的に色も昔のように、ちょっと暗い感じの色に戻ってきたよ〜な感じみたいな(何)また今回は、トップページとしては初の<TABLE>タグを一切使わないレイアウトを実現させたという、1つのことをやり遂げた達成感がありゅ。さらにもう1つ、前々からの目標でもあったスクロールバーを出さないようにして、画面に全て綺麗に収めることも達成できたのだ♪もちろん今回も満足のいく出来栄えで、スマキン2周年を祝うに相応しいものとなりましたw
11代目をベースにして作ったため、レイアウトはかなり酷似しているです。11代目はちょっと暗い感じの色になってたので、今回は極力明るい色をベースにデザインすることに努めた結果が12代目なのです。色合いはなかなかいいと思うんだけど、レイアウト面では11代目と大差なくていまいちだ〜な。あと、NEWマークの画像も変わりましたねェ。ぶっちゃけ、新年あけおめリニュってことで作った・・・わけではないんだけど(ぇ)。なんか公開ためらってたら元旦になっちゃってたからさ(爆)。ちなみに左上にあるロゴは、某オンラインRPGのパクリだという噂が・・・(ぇ
このデザイン実は、去年の暮れごろにはすでにできていたデザインだったりするんスがね。つまりは、12代目が公開される前からあったというわけですな。で、半年以上たってやっと公開されることになったのでした。12代目は平面的だったのに対し、13代目は立体的なデザインになったと思うのだ。それから、このごろ全然更新してなかったトップ絵をはずしてみました。その結果、全体的にスッキリした感じになったっぽいかもです。また今回は、コンテンツと更新履歴の部分をインラインフレームで表示させるのをやめて、すべてCSSで擬似インラインフレームを使い、1つのHTMLファイルだけで表示させてみることを実現させてみました。さらに擬似フレームを使用し、画面をスクロールしても上下の部分が固定されるようになってたりするのも新しい試みなのです。ちなみに13代目はスマキン1000日記念として公開されたもので、もちろん自分でも大満足なデキとなってますw
サイトリニューアル&改名にともない急遽作ることになった初代スマキンですよ。つってもデザインそのものは、13代目スマブラキングダムとほとんど変わりないですがな〜。変わったところといえば、『チャットだけよ〜♪』がなくなったんで、トップに『Smakin Chat』を設置してみたりとか。それからもうスマブラサイトじゃなくなったんで、オリキャラのイラストをトップに飾ってみたりとかァ。あと、左上のロゴって某アニメを意識してるっぽいよね?(ぇ
実に4年ぶりのリニューアルである。2008/01/11(金)から今回初の試みであるFlashを駆使して制作開始された。そして弐代目スマキンのコンセプトは軽いトップだったが、どういうわけか重くなっちゃったけど、その代わりカスタマイズ可能なトップに変更された。基本的なデザインは、初代スマキンのものを踏襲している部分が多い。そしてActionScriptを駆使し今までのHTMLのページではできなかったことを多く取り入れた。また、トップページにあったInformationやSmakin Chat、チャット入室状況、ハーボットなどは重くなる原因だったり不要だったりと判断した上で全て削除され、とてもシンプルな画面となった。Flashのトップページの詳細説明は、ロゴの下にあるヘルプをご覧いただきたい。
弐代目スマキンで Flash を使っていたけど、正直あれはやりすぎて重すぎた上に更新が凄く面倒くさかったので、再び HTML だけのページに戻しました。近年のトップページは明るい色調が多かったので、昔のようなクールでダークな色合いにしようと思いイラストなんかを背景とかに使ってみました。長年同じ背景画像を使い続けていたが、思い切ってイラストに切り替えてみたのです。全体的にシンプルでスッキリとしたレイアウトになったと思います。
ページ全体を縦横中央寄せを実現したり、不要なコンテンツをいくつか減らしたりして整理し、随分とスッキリしました。なくなったコンテンツへは SiteMap から行けます。そして「Contents」→「Categories」、「What's New」→「Update Information」へと一部名称の変更。各カテゴリー名も英語に変更しました。ただカッコつけたかっただけですね(^^; 全体的に彩度の低い色味にすることで、どんな色を使ってもうるさく感じにくくなったと思います。いつの間にか IE で CSS の position 属性の fixed を使用できるようになっていたので、前からやりたかったヘッダーとフッターの固定を実現してみました。CSS3 から追加された角丸や影も使いまくってます。カテゴリーの NEW マークを <img> タグを使わずに CSS だけで表示の切り替えを実現しています。これで HTML ソースがスッキリしました。カテゴリーにカーソルを近づけると周辺の色が変わるのも、Blog のドロップダウンメニュー表示も全て CSS で処理しています。
前回に引き続きコンテンツを再整理し「SubCategories」と「Archives」を追加しました。そして「Quick Links」→「Friend Links」へと名称の変更。また一部復活させたコンテンツもあります。WebKit 系ブラウザ(Google Chrome 、Safari 等)で閲覧すると、CSS を使っていくつかアニメーションを実現している箇所があります。IE9 はまだアニメーションを実装していないため動きません(2013/01/02(水)追記:IE10 を始めいくつかのモダンブラウザでも動作するようになりました)。「Update Info」の右上にある+ボタンをクリックするとカラムが縦に伸びて読みやすくなります。「Categories」をピクトグラムのアイコンにして視覚的に分かりやすくしました。
そしてこれが最新のレイアウトだ!! というか目に優しかった肆代目のデザインに戻してコンテンツを整理・削除しただけですね(笑)。