全てが謎の「たかまがはらねっとランド」をマジメに徹底分析

2004年頃、内容がぶっ飛びすぎて意味が分からないと話題になった「たかまがはらねっとランド」ですが、2024年現在も変わらず運営されています。

ただ、ウェブサイトのコンセプトは当時のものとは変更されていて、YouTuberを毎日紹介するエンターテイメントサイトになっているようです。

サイト制作総指揮の二代目未女子日女によると、ウェブサイトのコンセプトはこんな感じ。

画面がどこまでも長くスクロールしたり
音楽が鳴ったりと
いままでのネットでは避けられていたことを
あえて！
どんどん行なって
ネットの新たな可能性に
みんなでチャレンジしています

どこで改行してんねん！って思いますが、「あえて」という言葉通り、2024年現在もぶっ飛んでいます。

そんなインターネットの黎明期に誕生してすぐに話題になったウェブサイト「たかまがはらねっとランド」にはどんな技術が使われているのか、それは果たして現代でも通用するものなのかをウェブデザイナー目線で徹底分析していきたいと思います。

www.takamagahara.com

たかまがはらねっとランド：ぷりんてぃんと遊ぼうよ！

http://www.takamagahara.com

CONTENTS

キャプチャ
ソース
技術
まとめ

給付金で最大54万円OFF！独学では手に入らないウェブスキルが身に付く日本初のW3C認定スクールが無料カウンセリング受付中！

キャプチャ

キャプチャを見てみましょう。

デザインは奇抜で情報は散見しています。どこに何が置いてあって、どこがリンクなのかすら分かりにくいですが、他に類を見ないという点では参考にしたいデザインでもあります。

また、縦に長すぎるため迷子にならないように左下にメニューを配しているのも好印象ですね。

メニューを開くとこれまた縦に長いので、迷子にならないように存在しているはずのメニューを開いたのにメニュー内で迷子になりそうな、まるでRPGの迷いの森に迷い込んだような印象となっています。

ソース

ソースを見ると最初にツンデレのアスキーアートが目を惹きます。

<!--

きゃっ！　あ、あなた、だ、誰ですか？


　　　　　　　| 　i人:::: ､__　　:::.:/ /´　　｀ヽ:､
　　　　　 　 |　 ｉ i个ト ｀ ´ 　 ｲ ,′　　　　Vヽ
　　　　　　　!,rヽﾕ､'´￣＿_ ´ V　　 　 　 ヽ
　　 　 　 　 r'　　　 Y"´　　　/　　　 　 ,　 ﾊ
　　　　　 　 〉､　　　 !ーつ　/ 　 　 　 /　 ﾊ
　　　　　　　Y,ﾊ　　　l￣＼/ 　 　 　 /　 /
　 　 　 　 　 /　l 　 　 !｀`ｿ 　 　 　 /　 ,ﾊ
　　　　 　 ,./　　l　　　 l`/ 　 　 　 /　 /
　　　　　//　　　l　　　 / 　 　 　 /　 /
　　　 　 !　　　　,ﾊ　　/ 　 　 　 /　 /
　　　 　 !　　　 /　ﾊ　　　　 　 /　　l
　　　 　 ゝ__,／　 l　ヽ　　　　/　 　 ヽ
　　　　　　　 　 　 !　 ヽ､__／ 　 　 　 ヽ
　　　　　　　　　　 l　　　　　　　　 　 　 ヽ
　　　　　　　　　 　 l　　　　　　　　　　 　 ヽ
　　　　　　　　　　　 !ヽ　　　　　　　 ﾉ　 　 ヽ
　　　　　　　　　　　　!　　　　　　 ／ 　 　 　 ヽ
　　　　　　　　　　　　|',　 　 　 ／　　　　 　 　 ',
　　　　　　　　　　　　l ヽ　　 /　　　　　　　 　　!
　　　　　　　 　 　 　 l　 ヽ　/　　　　　　　　　　 l
　　　　　　　　 　 　 /　 　 ｿ　　　　　　　　　 　 |
　　　 　 　 　 　 　 /　 　 /　　　　　　　　　　　 j
　 　 　 　 　 　 　 /　 　 /　　　　　　　　 　 　 /
　　　　　　　　　 /　 　 /　　　　　　　 　　 　 /


ソースの中を覗くなんて、最低ですー！

は、恥ずかしくないんですか？

・・・まっ、まあ、どうしても見たいっていうなら

　　　　　　　見せてあげないこともないですけど・・・・

と、特別、特別ですからね！

べ、別に、あなただから、見せてあげるわけじゃないんだから！

か、勘違いしないでね！☆

　＾＾／　-->

こういったコメントアウトは他のサイトでも見ることができますが、ツンデレのアスキーアートを描いているあたりに歴史を感じますね。

ちなみにSlackのコメントアウトはこんな感じで「もしかして仕事探してますか？」ってメッセージとリンク先が入っています。

Thanks for taking a peek! Maybe a job is what you seek?
https://slack.com/careers

また、他のページにも同じようなコメントアウトコンテンツがありますが、フロントページとは違ってシンプルです。

<!--「感じる・・・誰かがこのソースを見ている・・・むっ！　モニターの前の貴様ぁぁぁ！
　貴様！　見ているなッッ！！！！
　なんてね♪　別に見てもいいよー☆　＾＾／　-->

フロントページは力を入れていますが下層ページはHTML 4.01のままなので、下層ページのメンテナンスはしてないようですね。

ソースから技術を見てみると、Googleアナリティクスでアクセスを計測しているほか、Googleアドセンスで広告も配信しています。

Twitterに関してはOGPも適切に設定されているようですので、SNSでシェアされることも見越して作成されていますね。

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@mimeko_hime" />
<meta property="og:url" content="http://takamagahara.com/" />
<meta property="og:title" content="たかまがはら ねっとランド" />
<meta property="og:description" content="愛の妖精ぷりんてぃんとカワイイがいっぱいの遊園地" />
<meta property="og:image" content="http://takamagahara.com/pub_graphic/pb_logo/pub_twitter_card191104001_01.jpg" />

ディレクトリの管理に関しては「javascript」というディレクトリにCSSファイルもJavaScriptファイルも置いているため管理は面倒くさそうです。さらにCSSファイルは4つもあるので「css」というディレクトリにまとめておいたほうが良さそうです。

<link rel="stylesheet" href="javascript/gsoffice_style01.css" type="text/css" />
<link rel="stylesheet" href="javascript/public_style01.css" type="text/css" />
<link rel="stylesheet" href="javascript/stmp_contents01.css" type="text/css" />
<link rel="stylesheet" href="javascript/tate-style01.css" type="text/css" />