インタビュー
なにこの平成レトロ感!? SNSより新しいかも
～～ようこそ！ 個人ホームぺージの世界へ。デザインの“お約束”教えます～～
2025年12月26日 16:56
「当時の個人ホームページのデザインは、管理人の好みや技術的な制約がそのまま反映されたような、独特な雰囲気がありました」――。
個人ホームぺージ文化の継承を掲げてニフティ株式会社が展開する「＃好きがつながるプロジェクト」において、「世界観がすごい個人ホームぺージ3選」を紹介する特集ぺージが12月19日に公開された。選出にあたっては弊誌「INTERNET Watch」編集部のスタッフも参加しており、編集長・山田貞幸のコメントも掲載している。ぜひご覧いただければと思う……のだが、そのぺージがなんとも見づらく、目がチカチカするかもしれない。
ニフティによれば、今から30年前の1995年ごろ～2000年ごろによく見かけた個人ホームぺージの雰囲気を再現したものだという。現代のウェブデザインを見慣れた人々からすると非常に違和感のある奇抜なデザインと映るだろうが、当時は、新しいウェブの技術、例えば文字だけでなく画像を組み合わせられることや、鮮やかな色の表現、動きのある演出などを試し、自分のホームページに取り入れることも、ホームページを作ることの楽しみの1つだった。
技術が洗練され、可読性や、スマートフォンなど多様な環境におけるアクセシビリティを重視して作られるようになった現代のウェブデザインとの違いを、お楽しみいただければ幸いだ。
では、具体的にどのような要素が盛り込まれているのか？ なぜ、ニフティはこのようなデザインのぺージを制作したのか？ 以下、同社のUXクリエイティブチームのお二人にお話を伺い、いろいろ解説いただいた。
［解説していただいた主な要素］
レインボーカラー（グラデーション）
タイトル文字の「世界観がすごい個人ホームページ」には、赤から青・紫へと向かう「レインボーカラー」を施し、ヘッダー全体の背景にもレインボーカラーのグラデーションをかけています。当時のホームページでよく使われていた定番のデザインです。
ただし、当時はCSS（Cascading Style Sheets）で文字や背景にグラデーションをかける機能が一般的ではなかったため、PCの画像編集ソフトを使ってグラデーションを施した画像データを作成し、それを貼り付けるという手法が取られていました。現代のような滑らかなグラデーションではなく、文字も現在のようなアンチエイリアスがかかったきれいな表示ではありませんでした。
今回これを再現するにあたって、現代の表示環境が「きれいすぎる」ことが課題になりました。フォント表示が滑らかすぎるため、テキストで表示したのでは当時の雰囲気を再現できません。今回はテキストをわざわざ画像化したうえで、ピクセル単位で加工し、「昔のガタガタしたドット文字」のようにしています[*1]。
背景（壁紙）
同じくタイトル文字「世界観がすごい個人ホームページ」の箇所は、背景にボーダー柄を敷きました。当初はレンガ模様で作ってみたのですが、さすがにタイトル文字が読みにくいということでボーダー柄に落ち着きました。これでもだいぶ「どぎつい」感じを受けるのではないでしょうか。
当時はインターネット回線の通信速度やPCのスペックの制約もあり、1枚の大きな画像ファイルを貼るのではなく、模様や写真などの小さな画像を繰り返すことで、「壁紙」のようなパターンで背景を埋め尽くす手法が一般的でした。それが独特の雰囲気を生み出していたのです。
画像素材の意味の分からなさ
目がチカチカと点滅する「招き猫」の画像は、その奇抜なデザインで非常に有名だったある病院のサイトへのオマージュです[*2]。これは外せない要素だとして、担当者の好みも反映して配置しました。
当時の個人ホームページには、コンテンツとは全く関連がないような画像が貼られていたり、脈絡もなく唐突にアニメーションGIFが配置されていたりすることもよくありました。回転するフロッピーディスクの画像とかもあったと思います。ホームページ作成ソフトに付属していた素材集などからイラストやボタンの画像を選んで貼り付けていたのではないでしょうか。
個人ホームぺージの管理人の多くは、デザインの専門家ではありません。デザイン上の理由や機能性ではなく、ブラウザー上で画像が動くこと自体が技術的に新しく、面白かったのでしょう。「動かせるものをとりあえず動かしてみる」――そんな作り手の素朴な実験精神と、目新しさのアピールが先行していたのだと思います。
今回、「なぜここで目が光るのか？」「なぜフロッピーディスクの画像なのか？」と閲覧者が疑問に思うような「意味の分からなさ」で当時の自由な空気の再現を試みています。
壊れた画像（画像のリンク切れ）
「壊れた画像」のアイコンは、ブラウザーに画像を正常に読み込めないときに表示されるものです。もしかしたら、この箇所に真っ先に目が行ってしまうという方も多いかもしれません。
昔の個人ホームページでは、HTMLの記述ミス（絶対パス／相対パス、ファイル名の拡張子の間違いなど）や、画像ファイルの管理不備など、管理人の知識不足や確認漏れによって画像が正常に表示されず、このアイコンのまま放置されていることが「あるある」でした。
なお、今回は意図的にHTMLの記述ミスをしてブラウザーにこのアイコンを表示させているわけではありません。現代のブラウザーではアイコンのデザインが変わってしまっているため、当時の雰囲気を出すために「昔のブラウザー風の壊れた画像アイコン」自体を画像として作成し、その画像が正常に表示されている状態なんです。
レイアウト崩れ
タイトル文字の「世界観がすごい個人ホームページ」の右端の部分の表示が、フロッピーディスクの画像と重なってしまっているはずです（PCのブラウザーで閲覧した場合）。また、矢印を並べて罫線のようにしている部分では、左右の枠が真ん中で重なってしまっています。こうした「レイアウト崩れ」は、前述の「画像のリンク切れ」と同様に、かつての個人ホームぺージの「サイトの不完全さ」を再現するために取り入れた要素です。
当時はまだ、現在のようにCSSが一般的でなかったため、HTMLのtableタグ（表組み）をタグ本来の用途ではなく、ぺージのレイアウトを整える目的で使用することも一般的でした。しかし、管理人の単純な計算ミスなどによって、テーブルレイアウトの横幅の比率指定に不備があって表示が崩れていたりしたものです。例えば、枠を左右に分割して表示させようとして、本来は合計100％になるべきところを、片方が50％、もう片方が60％で合計110％になってしまった場合などです。今回は、それをブラウザーが無理やり描画しようとして強引に解釈し、おかしな表示になっている状態をイメージしています。
また、HTMLの記述が正しくても、当時はブラウザー（特にInternet Explorer）の解釈の違いやバグにより、意図せず表示が崩れたり、重なったりすることが頻繁にありました。
訪問者からすれば「なぜ正常に表示されるよう修正しないんだろう？」と疑問に思うかもしれませんが、ホームぺージの管理人も、修正したいという意思はあるけれど、原因が特定できない、修正方法が分からない、ということで放置されていたということもけっこうあったのかもしれません。
流れるテキスト（marquee）
トップページで「ようこそ」「Welcome」といった言葉で訪問者を出迎えるのが、当時のホームぺージの定番でした。
また、テキストを電光掲示板のように横に流れるように表示する演出も多用されました。そうした表示を行う専用の「marquee（マーキー）」タグというものが、Internet Explorerの独自機能として追加されたようです。長いテキストを読ませるためというよりは、アニメーションGIFで「動かせるものをとりあえず動かしてみる」というのと同様に、動きを付けることのインパクトが目的化していたのではないでしょうか。スピードが速すぎてテキストが読めなかったり、意味もなく左右に往復したりする挙動も「あるある」でした。
今回は読める程度のスピードで流れますが、もう少し速くしてもよかったかもしれません。
そのほかの“お約束”～アクセスカウンター、工事中、相互リンクバナーなど
このほかにもいろいろと、個人ホームぺージでよく見られたデザイン・要素があります。
- アクセスカウンターとキリ番
ホームぺージへの訪問者数をカウントする「アクセスカウンター」が設置されており、「キリ番（切りの良い数字）」を踏んだ訪問者はBBS（掲示板）で報告する文化がありました。 - 最終更新（Last Update）と更新履歴（What's New）
SNSやブログでは新しい記事が自動的に上に表示される仕組みなのに対し、ホームぺージは「更新感」が伝わりにくい構造です。トップページに「Last Update」として最終更新日を明示するともに、更新履歴を「What's New」としてリストアップしておくことで具体的にどこが更新されたのかも分かるようにしていました。 - 点滅するNEWアイコン
更新履歴や目次において、新しく追加したコンテンツに「NEW」の文字が点滅する小さなアニメーションGIF画像を添えるのも定番です。当時のホームページは基本的にテキストと静止画で構成されていたため、こうしたシンプルな動きでも効果的でした。 - 工事中（Under Construction）
まだ完成していないページ、公開する予定はあるもののまだ中身のないぺージなどに「工事中（Under Construction）」のアイコンを表示することも一般的でした。いつまで経っても工事が終わらないままでぺージが放置されていたりするのも「あるある」でしょう。 - 3カラム（3列）レイアウト
左カラムにカテゴリーなどのメニュー、中央にメインのコンテンツ、右カラムに日記や更新履歴などを配置する3列のレイアウトがよく見られました。 - 相互リンクバナー
他のホームぺージからリンクしてもらうときに使ってくだいさい、ということで、自身のホームぺージのタイトルなどをあしらった小さなバナー画像が用意されていることも多く、アニメーションGIFで動くものもありました。相互リンクが多いホームぺージでは、リンク先のホームぺージのバナー画像がずらりと並んでいたものです。
「世界観がすごい個人ホームページ3選」で紹介しているホームぺージでも、こうした要素がいくつか実際に使われています。簡単な解説とともに示していますので、ぜひ、「世界観がすごい個人ホームページ3選」の特集ぺージを訪問してみてください。
「世代を超えて個人ホームページ文化に興味を持ってもらえれば」
スマートフォンにも対応した「レスポンシブデザイン」を前提とした現代のウェブサイトとは異なり、当時のウェブサイトはPCでの閲覧のみを想定していて、スマートフォンで見ると極端に文字や画像が小さく表示されてしまいます。また、色覚特性を持つ方への配慮などアクセシビリティの面、現代のUI/UXの観点からすると、商用サイトでこうしたデザインを採用することは、やはり今では厳しい。通販ぺージとかだと、怪しい詐欺サイトに見えてしまうかもしれません。
しかし、エンタメやアミューズメント系のイベントのランディングページなどでは、こうした個人ホームぺージのようなデザインも選択肢として十分にアリなのではないかと思います。
今回、「＃好きがつながるプロジェクト」の1つのコンテンツとしてこうしたレトロなデザインのぺージを制作したわけですが、同プロジェクトの本来の目的は「インターネットが育んできたカルチャーを見つめなおし、人と人、過去と未来をつなげていく」ということなんです。
当時リアルタイムで個人ホームページを作ったり閲覧したりしていた世代の方が「そうそう、こんな感じだったよね」と懐かしんで、「あるあるネタ」として楽しんでもらうことも、もちろん狙っています。しかし、「つなげる」という意味では、新しい世代の方々にも興味を持ってもらうことが大事です。
SNSのタイムラインなどに今回の「世界観がすごい個人ホームページ」の画像が流れてくれば、当時を知らない世代からすれば新鮮で、「なんだこれ？」「なんか変だぞ！」ということになるはずです。そうした違和感をきっかけにして、これまで個人ホームぺージ文化と接点がなかった方にも興味を持ってもらって、世代を超えて「好きをつなげる」ことができれば、今回こういうデザインにした意味があると感じています。
廿楽港大さん（ニフティ株式会社 サービス開発グループ UXクリエイティブチーム）
「＃好きがつながるプロジェクト」のメインディレクター……といっても、現在まだ20代半ば。「当時、私はまだ生まれていないか、せいぜい幼少期でしたので、リアルタイムでこうした個人ホームぺージ文化に触れていたわけではありません。しかし、今回の企画を通じて昔のサイトをたくさん調査する中で『結構いいな』と感じるところが多くありました。そうした昔の良さを、ぜひ後世に残していきたいという思いが生まれました」
松村大地さん（ニフティ株式会社 サービス開発グループ UXクリエイティブチーム）
当時を知らない廿楽さんをサポートした、当時の記憶がまだ残っているベテランデザイナー。「今回は、画像を汚くする・色を見づらくする・背景の同化を気にしないといった、デザイナーとして普段は絶対にしてはいけない『逆のこと』をあえて行う作業でしたが、自由な楽しさも感じました。当時のホームぺージの管理人たちが楽しんで作っていたような空気感を感じ取ってもらえればと思います」
［編集部注］
[*1]…… 今回の特集ぺージは、あくまでも“見た目”を再現したものだとしており、当時のHTML要素をそのまま使って再現しているわけではない。文字部分のほか、ほとんどの要素が1枚の画像ファイルに落とし込まれて表示されているかたちだ（そのため、HTMLソースを参照することで拝借できるテクニックは、残念ながらあまりないかもしれない）
[*2]…… 参考記事：
- 果てしないデジャブ感…愛生会病院そっくりのアニメ公式サイトが登場し話題に（やじうまWatch、2014/3/17）
- 閉鎖が決定した愛生会病院のサイト、2000年当時の姿との違いとは（やじうまWatch、2013/5/16）