ブログ
BLOG

           

リアルY2Kデザインを再現してみた!【古のWebサイトあるあるを添えて】

良かったらハートを押してね!

リアルY2Kデザインを再現してみた!古のWebサイトあるあるを添えて

気が付けばもう9月も半ば、今年も残すところあと3ヶ月ちょっととなりました。
ということは、そろそろクリスマス会に向けて今年の時事ネタを勉強せねばなりません。

※WWGでは毎年、社長の早崎主催のクリスマス会が開催されており、そこで時事ネタを含むクイズ大会があります。
全員もれなくプレゼントがもらえるのですが、得点の多い人から選べるのでみんな本気です。

そこで、2024年のWebの話題を調べていたところ、今年のデザインのトレンドに「Y2K」がありました。

Y2Kとは「year2000」の略で(K=1000の単位で、2K=2000を表します)、直訳すると2000年のことですが、トレンドとしてのY2Kは2000年前後に流行ったテイストのことになります。

ファッションでY2Kが流行っていたのは知っていましたが、Webデザインでも流行っていたとは知りませんでした。(WWG、制作のスタッフはトレンドに敏感な人が多いのですが、私のような制作以外に関わるスタッフは流行に乗り遅れがちです、反省)

そして何を隠そう、私はリアルな2000年頃のインターネットを記憶しています!

家に1台だけあった大きなデスクトップのパソコン、モニターは今のような薄型ではなくブラウン管のテレビくらいの厚みがあって、OSはWindows98だったはず。

それを使って日々インターネットサーフィンに勤しんでいた少女時代の記憶をもとに、古のインターネットあるあるも振り返りながら、Y2Kっぽいデザインの画像作成に挑戦してみようと思います。

※私が見ていたサイトに偏りがあるため(コーポレートサイトではなく個人サイトが多いです)、流行の正しいY2Kデザインとは異なる場合がございます、ご了承ください。

目次


  1. 「~へようこそ」のテキストがある
  2. 色は濃いめ、派手め
  3. やたら要素が多い
  4. <番外編>HTMLで頑張って動かしてみる
  5. まとめ

1.「~へようこそ」のテキストがある


「〇〇へようこそ」というテキストがあるサイトが多かったイメージです。
セットで近くにアクセスカウンター(全期間のPV数がカウントされるツール)が設置されており、「あなたは〇〇〇番目の訪問者です」と表示されていたりました。

真っ白の余白がすごいですが、ここから少しずつ色や要素が増えていく想定です。
最近だとモノトーンのシンプルなホームページもありますが、後述の通り当時はシンプルとは真逆が主流だったので、このテイストの画像はここだけです。

おまけ:
1111のようなゾロ目や、1234のような階段番号は「キリ番」と呼ばれ、踏み逃げ禁止(=掲示板やメールで管理人に報告してね!)をルールにしているところも多かったです。

2.色は濃いめ、派手め


当時見ていたサイトで、パステルカラーのような淡い色合いをメインにしたものはあまりなかった気がします。
赤、青などの原色や、カラフルなグラデーションをよく見かけたと思います。

今回の画像はCanvaで作成していますが、Canva内のテキスト作成では文字色のグラデーションができなかったので、文字の部分はWordのワードアートで作成したものを取り込みました。

ただ、これだけではまだ2000年っぽさが足りません。
こんなシンプルさでY2Kは語れません。
次でぐっと近づけます!

3.やたら要素が多い


テキストが動いていたり、アイコンが動いていたり、背景がにぎやかだったり、とにかく盛り盛りだったあの頃。

引き算なんて知らない、せっかくいろいろできるなら全部やろう!という気概を感じました。

※gif画像が入っているので動画です。

文字の視認性が悪くても、縁がギザギザで解像度低めでも気にしてはいけません。
(画像編集ソフトで、範囲の自動選択のみで背景削除をしたらこうなりました)

背景は特定の画像を「昔っぽい」扱いしているみたいになると嫌なので、グラデーションのみにしました。

テキストは横スクロールさせたかったのですが、Canvaでは再現できず……。

ちなみに、グラデーションがついたときからアルファベットのフォントが変わっていることにお気づきでしょうか?

Comic Sansという、Windows98に標準で搭載されていたフォントです。
カジュアルな印象で、使うシーンを選ぶことから「世界一ダサい」といわれたりする気の毒なフォントなのですが、当時ってそういうのをあえて使うのが面白い、みたいな風潮があった気がするので採用しました。

今回は入れていませんが、MIDIという、サイトを開くと自動で音楽が流れる仕様も当時人気でしたね。(当たり前ですがめちゃくちゃ重かったです)

4.<番外編>HTMLで頑張って動かしてみる


やはり文字の横スクロールはリアルY2Kを語るうえで諦められないので、HTMLでどうにかできないかやってみました。

調べたところ、<marquee>というタグを使うと文字のスクロールができるようなので、その情報をもとにChatGPTで質問、答えをWordPressのカスタムHTMLに入力して確認、を何度か繰り返します。

そして結果がこちら!

※現在は推奨されないタグをゴリゴリ使っているため、プレビューの画面コピーの動画でお届けしております。

文字のグラデーションは物足りなくなりましたが、動きとしてはまさにこれで、大変味わい深いです。

4.まとめ


今回作成したデザインを静止画にするとこんな感じ。(文字の横スクロールは心の目でご覧ください)
本当はもっと再現したい部分があるのですが、やり始めるとキリがないので最低限の要素に留めました。
かすかに2000年の香りは感じていただけるのではないかと思いますが、いかがでしょうか。

平成が早くも「平成レトロ」と言われていることに地味にショックを受けていましたが、こうやって懐かしいものが再び世の中に増えていくのは楽しいものですね。

黒歴史も役に立つときがあってよかったです!

名古屋から愛知全域にて企業専門のホームページ制作をしています
株式会社 WWG(ダブルダブルジー)
愛知県 名古屋市中村区名駅5-16-17 花車ビル南館5F(企画)&9F(制作)

お電話でもホームページの制作相談OK: 052-890-7007
※ホームページ制作のお問い合わせフォーム(24時間365日受付)はコチラから
HP活用サポートだけでも大丈夫です。気軽にご相談・ご質問くださいませ。

プロフィール写真

キャサリン

営業アシスタント

企画・開発部所属、2018年入社の営業アシスタント。
社内イチ業務内容が多岐にわたり、「制作以外のすべてを担う」と言われている、らしい。
最近毎朝5時頃に目が覚めるのが悩み。

良かったらハートを押してね!

おすすめの記事

CONTACT

お問い合わせ

ご不明な点やご質問等、
まずはお気軽にお問い合わせください。