公開中

Miiiwa Portfolio v0

WEB

Overview

このサイトの初代。黒地にネオンのグラデーションを重ね、カーソルから逃げ、長押しで吸い寄せられるパーティクルを敷いた、1ページ縦スクロールの HTML ポートフォリオ。3Dの惑星（v1）に置き換わるまで公開していたビルドを、そのまま触れる形で保存しています。

Tech Stack

Next.js
React
Tailwind CSS
Framer Motion

Play Now View Code

はじめてのポートフォリオ

Miiiwa Portfolio v0 は、このサイトの初代です。2026年7月13日から9月9日まで、およそ8週間、miiiwa.com のトップページとして公開していました。

黒い背景にネオンのグラデーションを重ねた、1ページを縦にスクロールしていくサイトです。上から順に、トップの見出し（Hero）、自己紹介、制作実績、技術スタック、経歴、お問い合わせと並んでいます。作ったのは Next.js と React、見た目は Tailwind CSS、スクロールに合わせて要素がふわっと現れる動きは Framer Motion です。

このページの「触ってみる」から、当時公開していたビルドをそのまま動かせます。

逃げる光、集まる光

v0 の一番の特徴は、背景いっぱいに敷いた光の粒（パーティクル）です。HTML の Canvas に描いていて、マウスの動きに反応します。

近づくと逃げる。 カーソルの周り90ピクセル以内に入った粒は、カーソルから押しのけられるように逃げていきます。カーソルが離れると、ゆっくり元の位置に戻ります
長押しで集まる。 マウスのボタンを押しているあいだは、影響が届く範囲が3倍に広がり、周りの粒がカーソルに吸い寄せられます
クリックで弾ける。 クリックした点から250ピクセル以内の粒は、爆発したように外側へ弾け飛びます

一粒一粒が「元いた場所」を覚えていて、力が加わっていないときはそこへ戻ろうとします。この「押しのける力」と「元に戻ろうとする力」の釣り合いだけで、触っていて気持ちいい動きになりました。

隠しコマンド：ターミナルモード

v0 には、遊び心としてターミナルモードを隠していました。ヘッダーの >_ TERMINAL を押すと、ハッカー映画のような起動の演出のあと、黒い画面にコマンドを打ち込める画面が開きます。

使えるコマンドは、本物の UNIX のものを真似ています。

ls でファイルの一覧を見る
cd products でフォルダを移動する
cat about.txt で自己紹介をアスキーアートと一緒に表示する
whoami で今のユーザーを表示する
help で使い方を見る、exit で元の画面に戻る

about や products と打つだけでも、それぞれの内容を読めます。このターミナルモードは、v1 にも、今のサイトにも引き継いでいます。

当時の制作実績

v0 の制作実績には、8つのプロダクトが並んでいました。今の一覧と見比べると、この2か月で何が変わったかがよく分かります。

「mesen」 — 今の Michaw の前身です。当時は、視線推定と顔認識の結果を GIF や MP4 の動画に書き出す Web アプリでした。つい見てしまうまでの時間を測るゲームになったのは、このあとです
「音階神経衰弱」と「野菜神経衰弱」 — それぞれ独立したサイトとして公開していた神経衰弱のゲームです。この2つを含む神経衰弱のゲームは、7月のうちに1つのサイトにまとめ、Synesthesium になりました
imadoko、gashaan、Umoja、Reallog、thanks-log — この5つは、今も同じ名前で並んでいます

v0 を開いて制作実績までスクロールすると、この当時の一覧を、当時の説明文のまま読めます。

なぜ3Dに作り替えたのか

v0 を公開してから5日後の7月18日、参考にしたいサイトをもとに、ポートフォリオ全体を「カメラが周りを回るボクセルの街」に作り替えることにしました。1ページの縦スクロールのサイトから、3D の空間を飛び回るサイトへの大きな方針転換です。

作り替えは別の作業用ブランチで進めていたので、その間も公開していたのは v0 でした。途中に「空に浮かぶ平らな島」の時代もありましたが、それは作業用ブランチの上だけにあり、一度も公開していません。そのため、この沿革では v0 の次をボクセルの惑星（v1）としています。

当時のまま残す

v0 を保存するときは、「どこまで当時のままにするか」を1つずつ決めました。

どの状態を残すか。 v0 の最後の内容の変更は7月18日ですが、実際にはその後、9月に広告のスクリプトを1行足した状態で公開されていました。残すのは「置き換わる直前に実際に配信されていた状態」だと決めて、そちらを保存しています。

画像は縮めない。 当時のスクリーンショットがそのまま入っていて、一番大きい画像は1枚で約7MB あります。縮めれば数百 KB になりますが、それでは当時のファイルではなくなります。画像は必要になるまで読み込まない設定なので、トップを開いただけでは読み込まれません。当時の本番と同じ体験でもあります。

使っていないファイルは消す。 一方で、当時すでにどこからも使われていなかった写真や動画、テンプレートに最初から入っていた画像は取り除きました。消す前に、ビルドの中のどこにもその名前が出てこないこと、元のソースコードでも名前を組み立てて使っていないことを2段階で確かめています。これで保存したビルドは22.9MB から19.0MB になりました。

黒とネオンの v0 は、今のサイトとはまったく違う雰囲気です。背景の光の粒を、ぜひ長押しで集めてみてください。