拡張機能研究所

おすすめのブラウザ拡張機能をマンガ形式で紹介!

2025/08/21 09:00

レトロかわいい!Windows 98風ポートフォリオをReactとTailwindで作ってみた話

Windows 98の懐かしいUIを参考に、ReactとTailwind CSSでレスポンシブなポートフォリオを作った初チャレンジを紹介。 昔ながらのデザインを今っぽく見せる工夫についても触れてます。
レトロかわいい!Windows 98風ポートフォリオをReactとTailwindで作ってみた話

最近、昔のOSデザインってなんか可愛いなあって思うことがあって💭
特にWindows 98のあの四角いウィンドウとか、シンプルだけど味がある感じ…なんか気になるんだよね✨

そんなわけで、ある人がReactとTailwind CSSを使って、Windows 98風のポートフォリオサイトを作ったっていうのを見つけたんだ💡
リンクはこちら👉 https://adriancrosby.com

どうしてWindows 98スタイル?

普通のモダンデザインって、丸みを帯びてたり、アニメーションが派手だったりするけど、Windows 98のUIは直線的でシンプル
それが逆に目立つし、懐かしさもあって、見てるだけでちょっと楽しい気分になるんだよね🌸

ReactとTailwindでどう作ったの?

このポートフォリオ、Reactで動的に動かしてるのはもちろん、Tailwind CSSを使ってレスポンシブ対応もバッチリにしてるみたい。
1人でReactとTailwindを組み合わせて、ちゃんとスマホでも見やすく作るのって、けっこう大変だと思うけど、見た感じちゃんと考えられてるなあって思ったよ👍

ポイントは「シンプル&直感的」

Windows 98っぽいUIはごちゃごちゃしてなくて必要な情報だけ出してる感じだから、サイトも見やすいんだよね。
無駄を省いて、使いやすさを優先してるのが伝わってくる

わたし的に気になったところ

  • ボタンやウィンドウの枠が昔のままっぽくて、ちょっと懐かしい気持ちになる🥺
  • 文字の色合いとかも当時のPC画面を意識してて、細かいところまでこだわってるのがすごい!
  • でも、スマホで見るときにもうちょっとボタンを押しやすくするとか、より親切になるかな?って思ったよ🌸

昔のデザインをあえて使うっていうのは、今の感覚とミックスして新しい魅力を生み出す面白い方法だなあって改めて感じた✨
もし自分でポートフォリオ作るなら、こういう遊び心も取り入れてみたいなあ💭

ReactやTailwindに興味がある人は、こういう実例を見て「こういうのもできるんだ!」って刺激になるかも👀❣️
ちょっとレトロでかわいいウェブデザインの世界、覗いてみてほしいな〜って思ったよ💗

ひとことアニメーション表示ON
レトロかわいいって最高すぎるよね〜✨

コメント

アバター

グレース

いい感じ! アバターのキャッシュ設定を変えてメモリに残すとレイアウトのズレが減るかも。

アバター

エイダン

めっちゃかっこいい! 似たの俺も作ってるよ: [https://os7311.vercel.app/](https://os7311.vercel.app/)

アバター

レオ

超スムーズ! ナイス仕事! 👍

アバター

ロバート

リンクは同じタブ派? 新しいタブ派? 俺は新タブ派で戻らなくて済むから楽だよ。 サイトもいい感じだね。

アバター

ベン

めっちゃ可愛い! すごく上手くできてる!

アバター

チャーリー

ウェブデスクトップ見たら即ポチ!

アバター

ハンナ

いいね! スタートボタンは文字だけじゃなくてボタン全体を押せるようにしたらもっといいよ。

アバター

リリー

記憶違いじゃなければ、これWin95っぽいよね? (昔だけど)

アバター

レオ

好き!

アバター

キンバリー

モバイルEdgeだとフォントがデフォルトのままだね。 Node.jsやJSのアイコンもピクセル調やWin98風にするといいかも。 とはいえ、すごく良くて使いやすいよ。 拍手!

アバター

クリス

今日見た中で一番良かった!

アバター

サラ

Safariのせいかもしれないけどフォントが読み込まれずAppleのデフォルト表示になってるよ。 iPhone14 ProのiOS26beta6で確認。

アバター

チャーリー

めっちゃ綺麗! おめでとう🙌

アバター

ロバート

いいね、それ俺もいつか作りたいと思ってたアイデアだ。


関連記事