※本記事は開発内容・作成したポートフォリオを学習させたAI(Gemini 3.1 Pro)によって執筆されています。
ポートフォリオ → https://about.nyaisaba.com
1. 導入：なぜ今、ポートフォリオを「3D」にしたのか？
「ポートフォリオなんて、ただの実績まとめでしょ？」 かつての私はそう思っていました。HTMLとCSSで適当に組んだ、どこにでもあるような「静かな」サイト。しかし、何千人ものプレイヤーが集まるサーバーを運営し、AIエージェントなんていう未来の技術に触れているうちに、自分の中で一つの答えが出ました。
「自分のWebサイトは、自分自身の世界観を表現する『空間』であるべきだ」
つまり、平面的な2Dサイトでは、私の活動の熱量を伝えきれない。そこで、JavaScript界の魔法、Three.js (React Three Fiber) を使って、ブラウザの中に自分の一部を召喚することにしました。
2. 技術スタック：こだわり抜いた「構成」
今回採用したのは、現代のフロントエンド開発における最強セットです。
- Frontend: React (Vite) + Three.js (React Three Fiber) + @react-three/drei
- Backend: Node.js (Express)
- Infrastructure: 自宅オンプレミスサーバー + ConoHa VPS + Sakura VPS + Cloudflare
なぜReact Three Fiber（R3F）なのか？
Three.jsを素のJavaScriptで書くのは、正直に言って苦行です。しかし、R3Fを使うことで、3DのオブジェクトをReactのコンポーネントとして扱えるようになります。これにより、UIと3D空間の同期が驚くほどスムーズになりました。
自宅サーバーという「ロマン」
私の活動の中心は、いつだって「サーバー」にあります。今回のサイトも、メインのロジックは自宅のオンプレミスサーバーで動かしています。これにVPSをプロキシとして噛ませ、Cloudflareでガードを固める。この「物理的な感触」こそが私のアイデンティティです。
3. デザイン哲学：Liquid Glass UI
このサイトの大きな特徴は、この「液体のようなガラス質（Liquid Glass）」のデザインです。
背景には淡い水色と緑のグラデーションを配し、その上に「ぼかし」の効いた半透明のパネルを重ねる。これは、AppleのVisionOSや最近のOSデザインのトレンドを意識しつつ、にゃい鯖のクリーンかつ尖ったイメージを表現しています。
単なる透明ではなく、背後の3D空間がわずかに歪んで見える。この質感を出すために、CSSの backdrop-filter: blur(24px) saturate(180%); を多用しています。ここをケチると、ただの「安っぽい透明な箱」になってしまうので、何度か調整を繰り返しました。
4. サイトの「顔」：3Dアバターとスキンの魔法
サイトをスクロールしてみてください。Minecraftのキャラクターが、あなたの操作に合わせてテクテクと歩き出し、横のモニターに視線を向けるはずです。
スキン描画の裏側
実はこのアバター、Minecraftの skin.png からテクスチャを切り出し、Three.jsの BoxGeometry に一枚一枚貼り付けています。
const getSkinTexture = (texture, x, y, w, h) => {
const t = texture.clone()
t.repeat.set(w / 64, h / 64)
t.offset.set(x / 64, 1 - (y + h) / 64)
return new THREE.MeshStandardMaterial({ map: t, transparent: true })
}
頭、体、腕、足。それぞれの部位に対して、64×64ピクセルの画像から特定の範囲を切り出す。単純なようでいて、3D空間での座標移動（足の振りなど）とスクロール量を連動させる計算には、かなりの時間を費やしました。
5. プログラム解説：AIエージェントの統合
このサイトのもう一つの目玉は、「AI Development」ページにあるチャットボットです。
これは単にOpenAIのAPIを叩いているだけではありません。 私の過去の活動履歴、スキル、開発思想、さらには外部のブログ記事（polytechnic.jp）などを動的に読み込み、開発者に寄せたエージェントとして実装されています。
プロンプト注入の仕組み
ユーザーが話しかけた瞬間、裏側では以下のような処理が走ります。
- 私のポートフォリオデータから関連情報を抽出
- DuckDuckGo APIで最新情報を検索（必要に応じて）
- 全てを一つの「知能」としてLLMに流し込む
これにより、AIは「NYAIさんは現在どんなプロジェクトに関わっていますか？」という質問に対し、正確な回答を生成できるのです。
開発風景
成果物
著者
