Windows XPをポートフォリオとして再現
(mitchivin.com)- グラフィックデザイナー Mitch Ivinが、自身のポートフォリオサイトをWindows XPスタイルで再現
- JavaScriptを有効にすると、すべての視覚効果と機能を体験可能
- サイト全体がWindows XPデスクトップの雰囲気とインタラクションを忠実に模倣
- 訪問者はログインユーザーインターフェースやスタートメニュー、タスクバーなどを自由に探索可能
- ポートフォリオ体験そのものが、独自のインターフェースデザイン力を強調
Mitch Ivin — ポートフォリオWebサイト紹介
- Mitch Ivinはグラフィックデザイナーで、自身のポートフォリオWebサイトをWindows XPオペレーティングシステムのデスクトップ環境のように精巧に実装
- 訪問者は最初の画面で**Windows XPの壁紙（Bliss）**画像やブートローディングアニメーションなど、実際の利用環境を思い起こさせる視覚要素に触れられる
- ログインは「Mitch Ivin」をクリックして進み、その過程を経ると、ユーザーは実際のデスクトップを使うようにサイトを探索できる
- UIの各所にはタスクバー、スタートメニュー、ユーザープロフィールアイコン、再起動およびログオフボタンなどがあり、いずれも実際のOSの雰囲気とUXを忠実に反映
- 本サイトは、自身のデザインおよびフロントエンド開発能力を「体験」そのもので示す創造的なポートフォリオであり、楽しいWebインタラクションの例でもある
主な機能と特徴
- 全体の動作にはJavaScriptが必須
- F11キーで全画面表示にすると、実際のデスクトップ体験により近づく
- LinkedIn、GitHub、Instagramなど、外部プロフィールや制作物へ移動できるショートカットボタンを提供
- モバイル端末では「端末を縦向きに回転してください」という案内ウィンドウのような、ユーザーフレンドリーなアニメーションを適用
- 各アイコン、ボタン、アニメーションは意図あるデザインとしてシンプルで、オリジナルの「Windows XP」の感性をそのまま伝えている
インターフェース構成
デスクトップ画面とログイン
- 初期画面にはWindows XPの背景画像と起動アニメーションを表示
- 「Mitch Ivin」ユーザーアイコンをクリックするとログイン手順が進行
- ログイン成功時にタスクバーやスタートボタンなどのインターフェースが有効化
タスクバー(Taskbar)とスタートメニュー(Start Menu)
- 実際のWindows XPと非常によく似たタスクバーを表示
- Restart（再起動）およびLog Off（ログオフ）などの視覚的ボタンで構成
- 各ボタンをクリックすると、実際のOSのようなインタラクションを演出
要約
- Mitch IvinのWindows XPポートフォリオサイトは、個性的なUI/UXで差別化された自己紹介を提供
- 訪問者は単なるプロジェクト一覧ではなく、直接体験する形式のポートフォリオを味わえる
- デジタルデザイナーやフロントエンド開発者が参考にできるインターフェース設計とブランディングの事例である
3件のコメント
Hacker Newsの意見
正直、このプロジェクトはかなり気に入った。とても見事に実装されていると思う
ただ、自分を「グラフィックデザイナー」と紹介していながら Windows XP をそのまま再現しているので、その人自身のデザイン力がどの程度あるのかはすぐには分からず、そこは少し惜しい
IE アイコンの下にある別のプロジェクトを見ると、もう少し本人らしさは感じられるが、ビジュアルの一部が AI 生成っぽく見えて期待感はやや下がる
UX も少し変だ。たとえば履歴コントロールがポートフォリオ内でカルーセルのように動作する。戻る／前へボタンを押したらプロジェクトメニューに戻ると期待したが、そうはならない
もしこういうポートフォリオで自分に応募してきたら、面接の機会は与えると思う。明らかに多くの努力を注ぎ、高いクオリティに仕上げている点は印象的だ
ただ、上で触れた点、特にユーザー中心のアプローチが見えないことは気がかりなので、面接ではぜひ聞いてみたい
念のため付け加えると、こういうデザインは自分にも作れる。実際のところ、これは UX デザイナーが出したモックを実装するのと実質同じ作業で、そういう仕事はたくさんやってきた
がっかりさせる言い方に聞こえるかもしれないが、それでも相当にかっこいい仕事で気に入ったし、多くの場面で「最初の関門」を突破するためのポートフォリオとしては確実に通用するはずだ。本当の実力を見せるのはその次のステップだということは覚えておいてほしい
本当にこのデザインを自分にも作れるし、デザインセンスはないほうだと言うなら、その言葉にどこまで自信があるのか聞いてみたい
これまで XP 模倣インターフェースを数多く見てきたが、いつもどこかしら不自然な要素があった
MitchIvin XP が完全一致の複製ではないとしても、体験としてはかなり快適だ
似たような懸念を持っている
単体のプロジェクトとしては面白いが、XP の複製というだけなら、もっと正確に実装された例はすでにたくさんある
ポートフォリオとしては、むしろマイナスに働く面のほうが大きいように思える。今どきのデザインでは、何か独創的な試みを見せることのほうがずっと重要だ
グラフィックデザインは単にソフトの習熟度で評価されるものでも、かっこいいものを描く技術でもなく、制約や対象、感情などのメッセージを視覚的に設計するコミュニケーションだ
近道はないので、これまでのデザインを研究し、色、レイアウト、タイポグラフィ、画像で自分が何を見せたいのかを練習すべきだ
自分の手で描いてみるのもいいし、生成 AI は自分が十分に熟達するまでは避けたほうがいい
今の段階では、ポートフォリオとして記憶に残るほど惜しく、もっと練習が必要だと思う
それでも、ひとまず完成させて HN の上位にまで持っていったのは大いに称賛に値する。この機会が転機になって、これからも何かを作り続けてほしい
「面接で聞きたい点があるので条件付きで採用候補にできる」という時点で、このサイトはポートフォリオとしての役割を果たしたと言える
ポートフォリオは、誰かに「この人に一度会ってみたい」と思わせる好奇心を起こせれば十分だ
要するに「最初の扉をノックする」役目であって、それ自体で仕事を得ることが目的ではない
実際、グラフィックデザインは芸術ではない
テキスト、画像、レイアウトを戦略的に使って、情報を視覚的に効果的に伝えるコミュニケーション手段だ
独創性が重要になるのは、ブランディングや著作権の問題、あるいは既存文化を無批判に持ち込むような場合くらいだ
もっと重要な問いは「なぜ Windows XP を通して、あなた自身とあなたのポートフォリオを見せようとしているのか」だ
自分に伝わってくるのは技術力くらいだ
たぶん意図としては、技術業界のクライアント、特にフリーランス案件を狙って、ノスタルジーに訴えることなのだろう
自分がアートディレクターなら面接には呼ばないが、おそらくこれはアートディレクター向けのポートフォリオではなかったのだろう
そして「これは自分にも作れる」という話は、デザインの仕事ではよく聞く
実装は実際、デザインの中ではいちばん簡単な部分だ。このポートフォリオは XP より良く見えて当然で、そこに実力が出る
デザイナーを採用するとき、XP のぎこちなさをどれだけ正確に再現したかには興味がない
開発者ならこういうものを実装できて当然なので、そこに驚きはない
むしろ、開発者が良いタイポグラフィやレイアウトに気を配っているときのほうが感心する。実際に最も難しいのは、画面に何を載せるかと情報構造を決めるプロセスだ
何を載せるか、どう構造化するかが成功の鍵だ
自分はこの人を採用したい
競争相手と差別化できるだけの根性、粘り強さ、創造性がある
HN の何千人ものユーザー、その友人たち、テックジャーナリストなど、多くの人がこの作品を楽しんだし、これからさらに多くの人に知られるだろう
今は仕事を得るのが簡単ではないが、こういうスタイルを見せればオファーは必ず来ると思う
ちなみに自分のポートフォリオもそろそろアップグレードしないといけないのだが、これを見て刺激を受け、自分も挑戦したくなった
「細部に気を配った XP スタイルのカスタムポートフォリオ」と紹介していたので、いくつか細かい指摘をしたい
もし自分がこれを作るなら、ブート画面とログイン画面は省くだろう。特にクライアントが「About Me」を見つけやすいよう、起動時にすぐ表示するほうがよい
タイトルバー左上のアイコンはダブルクリックでウィンドウが閉じるべきだ。タイトルバー本体をクリックしたときのように最大化ではなく、閉じる動作になるのが本来の挙動だ
ブート画面とログイン画面は、再現全体の魅力にかなり貢献していると思う
こういう細かなディテールやユーザーの没入感こそ、GUI プロジェクトでは本当に重要なポイントだ
実際の Windows XP よりも滑らかに感じる
うまく説明しにくいが、UX/UI 的にたしかに引きつけられる魅力がある
ブラウザタブの階層構造とも自然に調和しているのが興味深い
独自の領域感を作るスタート画面、ログイン、サウンドのおかげで、「ここだけの空間」に入った感覚をうまく与えている
Windows であれ何であれ、速ければずっと良く感じる
20ms 以内で動作すれば遅延を感じにくく、快適になる
完全に同意する
macOS 26 ベータを使っているが、この Windows XP クローンのほうがむしろアップグレードのように感じる
理由はシンプルで高速で、使い方をすでに全部知っているからだ
昔の Windows はシングルコア前提でマルチタスクに弱かったが、そのおかげでむしろ集中しやすかった
最新の OS では何十ものウィンドウと何百ものタブを複数のワークスペースやモニターに散らして使うので、どうにも落ち着かないと感じる
ノスタルジーが大きな要因ではあるが、ログイン音に何かさらに引かれるものがある
ログアウトも押してみたのか気になる
UI のインタラクション速度が非常に速い
現代的な UI は一部の遷移だけ速くて、全体としては反応が鈍く、かえって不自然に感じることが多い
正直、面白くはあるが、アプローチがどこか間違っている気がする
ポートフォリオの「グラフィックデザイナー」という紹介を見て入ったのに、実際には昔の他人のデザインを単純に複製しているように感じる
ログイン画面の AI 画像や、マウスオーバーで妙に動くアイコンも目につく
Windows XP にこんな効果があった記憶はないので、変なバグなのかと迷う
このあたりで信頼感が落ち始める
「グラフィックデザイナー」なのに AI 生成のグラフィックを使っていて、同じようにコード作成も任せたのではないかと疑ってしまった
履歴書を偽の PDF ファイルとして見せるやり方も、もどかしく感じた
複数のプロジェクトも小さなウィンドウに閉じ込められていて、まともに見づらく、そのうち 2 つはローディングアニメーションしか表示しない
最初はコーディング経験がなく、AI エージェントの助けを借り、「すべての決定は人間がした」と言っていたが、自力でコードを書ける実力がない状態なら、実質的な決定権は LLM のほうに多くあったのではないかと思ってしまう
自分でこのプロジェクトを最初から作り直せると本当に確信しているのかも気になる
面白くてクールなプロジェクトではあるが、ポートフォリオとしてはむしろ本人の実力を過小評価させる結果になっていて惜しい
それに、こうした類例はすでに多い win32.run
以前これを投稿しようとしたが、うまくいかず残念だった
今みんなが楽しんでくれているのを見てうれしい
HN には新しく登録したので、自分もそろそろカルマを稼ぎたい
（運営です）
元の Show HN 投稿を再掲載し、コメントも統合しておきました
スパムフィルターに引っかからないよう、アカウントも通常アカウント扱いにしておきます
仕上がりが本当に素晴らしい！ XP の雰囲気と、その時代の精神までとてもよく表現できていると思う
もし Windows XP に本当にプロフェッショナルな「ポートフォリオ作成アプリ」があって、その出力がこのクオリティだったなら、みんな驚くほど美しく素晴らしい製品だと認めたはずだ
自分の実力を示すと同時に、Windows XP の美しさも現代的かつ歴史的に再現した見事な仕事だ
とてもよくできている！ すごい作品だ
自分のブラウザ（Chrome 138、Windows 10）では、スタートメニューが数秒後に一瞬表示されてすぐ消える
本当に完成度が高い。素晴らしい出来だ
XP ユーザーとして、この作品は本当に気に入った
少しだけ細かく言うと
自分はこれをオマージュ、つまり古典的な Windows XP の美学を当時にはなかった新しい表現と混ぜて洗練させたアップグレードだと見ている
こうして芸術やスタイルを現代的に再解釈・継承しつつ、そのルーツを尊重するのは、美的感性の進化ではよくあることだ
タスクバーのタブについてはその通りで、この部分を合わせるためにものすごく時間をかけた
結局、少し違いはあるが、かなり近いところまでは実装できたと思う
それ以外の部分は意図的な美的判断だ。実は大きな違いの一つで、まだ誰も触れていないものがある
デスクトップアイコンをドラッグ選択したときのハイライトが、XP よりも Windows 11 にかなり近い
ここは今後さらに改善したかった部分だ
この作品は本当に素晴らしいが、2 点ほど惜しいところがある
ひとつは、何というか「コンピュータらしさ」が完全には生きていないことだ。たとえばコマンドラインで
dirと入力したときに、何か面白いインタラクションが追加されていたらもっと魅力的だったと思うもうひとつは、ポートフォリオ内のコンテンツのクオリティが、このウェブサイト自体の雰囲気に追いついていないことだ。サイトは非常に高品質なのに、そこにある他の作品を見ると、あまりにシンプルで物足りなく感じる
結果としては良いプロジェクトだと思う
本当に見事な仕事だ
見るたびに Windows XP のスタイリングが恋しくなる
XP は「楽しさ」を追求しようとしていた唯一の Windows で、検索結果に犬のマスコットが出てくるほど遊び心があった
下部のタスクバーも Fisher Price のおもちゃみたいで、Clippy も懐かしい
昔はプロ向けソフトウェアにもこんな陽気さが許されていた時代があったのだと思うと少し寂しい
追記すると、本人のアバタースタイルが Simpsons や Bob's Burgers のようで印象的だ
印象的な作品だが、もう少し深い考察が必要だとも感じる
複製と創作のあいだには根本的な緊張関係がある
もちろん多くの創作物は既存の型から始まる。たとえば推理小説には死体や酒瓶、気の利いた台詞といったお決まりがある。だが、その型を自分なりにどう再解釈するかが本当の芸術だ
AI にストーリーラインを任せることはできても、選択、声、摩擦といった本当の「存在感」や魂は人が加えなければならない
ここではその「存在感」が足りないように感じる
プロジェクトはよくできているが、ただ Windows XP らしいだけで、見栄えはよいものの平板だ
作者の努力や学習の過程は尊重するが、最終的には「複製」に感じられる
もし自分が当人なら、これは第一歩だと考える。「コピーは終えた。では次に何を改善できるか。どこを変え、どんなリスクを取れるか。ビフォーアフターを見せられないか」と
本当の焦点は、なぜ模造品で止まるのか、さらに進んで複製の限界を超え、改善し、拡張し、自分のものにできないかということだ
AI と協働する時代に、無限のテンプレートと高速な反復の中で、どうやって自分だけの差別化ポイント、あるいは「魂」を見せるのかは真剣に考えるべき問題だ
（ちなみにこの文章も Grammarly で文をチェックした。「男は自分の限界を知らなければならない」という有名な台詞を思い出す）
ひとつは拡張性のある大規模プロジェクト、もうひとつは記憶に残るクリーンな複製プロジェクト。この組み合わせは、多くのポートフォリオを短時間で見て回る人にとって、より魅力的に映る可能性がある
ただし最終的には、ポートフォリオがバランスよく多様化されている必要があるという点には同意する
とても気に入った
細かい XP の違いをいくつか執拗に挙げるなら
見事なオマージュ、あるいは古典スタイルの現代的解釈だと思う
クラシックな美学を現代の感覚と結びつけて新しく見せながら、ルーツを失わない正統な進化の過程だ
タスクバーのタブについてはその通りで、本当にたくさん時間をかけたが、完全に同じにはならず、ある程度は諦めた
それ以外はすべて美的判断だ。実は誰も言っていない点が一つあって、デスクトップアイコンをドラッグ選択したとき、XP よりずっと Windows 11 スタイルに近い
個人的には、ここも変える必要があると思っていた
とても見事な作品だが、本当に「コンピュータっぽい」感じがやや足りない
たとえばコマンドラインに
dirと入力したとき、ちょっとしたインタラクションがあればもっと楽しかっただろう二つ目は、ポートフォリオのコンテンツのクオリティがあまりにシンプルで、サイトのクオリティと釣り合っていないことだ
全体としては良いプロジェクトだと思う
本当に素晴らしい仕事だ
見るたびに Windows XP 時代のスタイルが恋しくなる
XP は「楽しさ」を追求していた唯一の Windows で、かわいい犬のマスコットや Fisher Price のおもちゃのようなタスクバー、Clippy など、遊び心が生きていた
プロ向けプログラムがこんなに愉快だった時代が懐かしい
そしてアバターが Simpsons / Bob's Burgers 風で印象的だ
このプロジェクトは本当に素晴らしい
本人のスキル、学習能力、粘り強さ、細部へのこだわりまでよく伝わってくる
複製であることや細部のミスを批判する人たちとは違って、自分はそこが重要なポイントだとは思わない
素晴らしいプロジェクトだ。おめでとう
こんにちは。該当の投稿ととてもよく似たポートフォリオを開発中のバックエンド開発者です。まだ仕上げの修正中ではありますが、
私も率直なフィードバックをいただけないかと思い、コメントを残しました。
このようなコメントをするのが問題なければ、ポートフォリオのリンクを載せます。
+) それから、ここは初めてなのですが、常体のような簡潔な文体を使うのがルールなのか気になっています。
その必要はありません。どうか開発者の方はそうしないでいただきたいです。正直、本当に見ていて嫌になるほどですが、有用な情報が多く、彼らが情報を効果的に伝えるための手段としてあのような話し方をしているのだと思うので、不快でも見ているだけです。きちんとした文章で情報を共有していただけるとありがたいです。