# 🌍【海外Webデザインアワード CSS Winner ノミネート】「記憶に残る」3DポートフォリオをVSCode + GitHub Copilotで泥臭く開発した話

はじめに：海外Webデザインアワード 「CSS Winner」にノミネートされました！

こんにちは、専門学校2年のWakatoです。
突然ですが、この度個人で開発したポートフォリオサイトが、国際的なWebデザインアワード**「CSS Winner」にてNominee（ノミネート）**に選出されました！

CSS Winnerとは？

CSS Winnerは、世界中の優れたWebサイトを審査・表彰する国際的なWebデザインアワードプラットフォームです。デザイン、機能性、ユーザビリティ、コンテンツの4つの指標で評価され、世界中のプロの制作会社やエンジニアがしのぎを削っています。毎日「Site of the Day（その日の世界1位）」が選出される、Webデザインの登竜門的な存在です。

現在、本気で**SOTD（Site of the Day：その日の世界トップ1位）**を狙って、世界中のプロの制作会社と殴り合っている最中です。この記事の最後に投票リンクがあるので、ぜひ応援（VOTE）してもらえると泣いて喜びます！

今回は、このサイトを**「VSCode + GitHub Copilot拡張機能」**のタッグを使って、いかに泥臭く作り上げたかという開発の裏側を共有します。

🛠 ベースとなる使用技術

本ポートフォリオは、主に以下の技術スタックで構築しています。

• フレームワーク: Next.js (App Router), React
• 3D・描画: Three.js, React Three Fiber (R3F), GLSL (カスタムシェーダー)
• スタイリング・アニメーション: Tailwind CSS, Framer Motion
• その他: Web Audio API (環境音制御), OpenWeatherMap API

💡 どんなポートフォリオか？（思想：音と視覚による記憶の定着）

就活やインターンに向けて、多くの学生がポートフォリオを作ります。
綺麗に整理されたUI、読みやすい実績の羅列。たしかに「見やすい」です。

でも、見やすいだけのポートフォリオは、面接官の記憶に残らないんじゃないか？

そう思った僕は、「情報を読ませる」のではなく**「体験として記憶に焼き付ける」ことに全振りしたポートフォリオを作ることにしました。コンセプトは「ただのWebサイト」ではなく、「体験する世界」**です。

Next.jsとReact Three Fiberをベースに、現実の天気が雨ならサイト内も雨が降り、夜になれば夜の顔を見せるような没入型の空間を設計。そこに RealisticPlanetScene.tsx で描く3Dの惑星と、SoundDirector.tsx によるシームレスな環境音のクロスフェードを連動させ、独自の「生きた世界」を表現しています。

ただ、自分の頭の中にある理想の動きをコードに落とし込むのは、想像以上に泥臭い作業でした。そこで圧倒的な威力を発揮したのが、VSCode内のGitHub Copilot Chatです。今回は複雑な実装の大部分はAIに任せ、自分は「ディレクションと体験の設計」にフルコミットするというスタンスで開発に挑みました。

🚀 VSCode + Copilotとの「リアルな」ペアプログラミング

僕はCLIなどの高度なツールは使わず、VSCodeのエディタ内に組み込まれている標準のCopilot機能だけで開発を進めました。しかし、最初は全く上手くいきませんでした。

1. 「なんかいい感じにして」は通用しない

開発初期、僕はCopilotに対して「WebGLでなんかいい感じの宇宙っぽい演出を作って」という雑なプロンプトを投げていました。結果は惨敗。出てくるのは、どこかで見たようなテンプレコードや、自分のイメージとは程遠いチープな3Dオブジェクトでした。
**「AIは魔法使いじゃない。要件定義とイメージの共有が必須だ」**と悟った瞬間です。

2. イメージ画像を読み込ませて「視覚的な要件」を共有する

言葉で長々と伝えるのをやめました。代わりに、自分が理想とする世界観のリファレンス画像をCopilot Chatに直接ドラッグ＆ドロップで読み込ませました。

「なんかこの画像っぽく、暗くてリアルな感じの星にして」

こんな適当なプロンプトでも、視覚情報をコンテキストとして与えることで、Copilotの提案精度が劇的に向上しました。複雑なGLSL（シェーダー言語）の数式構築はAIに全振りし、自分は「ノイズ関数をどう効かせるか」「光の差し込み具合をどう調整するか」というディレクションの壁打ちに集中することで、実装が一気に自分の理想のトーン＆マナーに近づいた瞬間です。

3. /ask の「逆質問」で実装自体を詰めていく

具体的な実装を進めるにあたり、僕は @workspace /ask を使い倒しました。ただ、ここでも最初から完璧な指示を出すわけではありません。

「画面遷移の時に、音もいい感じに繋げたいんだけど」
「各作品ページに遷移する時、作品のテーマに合わせたおしゃれなモーションを入れたい」

と適当に投げます。するとCopilotから**「その場合、以下のどのアプローチ（選択肢）を取りますか？」と逆質問**が返ってきます。
提示された4択や自由記述の質問にチャット形式で答えていくことで、自分の中のフワッとした実装要件が整理され、最終的にバッチリ動くコードまで導いてくれました。「AIに質問させる」ことで、実装の解像度を上げていく泥臭いやり方です。

🎨 最後の「1%」は人間の執念

Copilotは最高の相棒ですが、最終的な「魂」を込めるのは人間です。AIの力で浮いた時間は、以下の徹底的な作り込みに注ぎ込みました。

• 各作品の世界観に合わせた「技術構成」と「遷移モーション」の使い分け
  単なるリンク遷移ではなく、作品ごとに専用の演出を実装しました。例えば、AI水筒『ColdKeep』を開く時は画面が凍りつく「Freeze」トランジション、気象シミュレーション『おてんきぐらし』へはその日の天候に応じた「Rain」や「Sunburst」の遷移、『GitHub Planet』へは宇宙への「Warp」演出を取り入れています。さらに、エッジAIによる音声解析（ColdKeep）、Three.jsやWebGL（GitHub Planet）、Next.js+気象API（おてんきぐらし）といったように、各作品のコンセプトに合わせて裏側の技術構成も完全に切り替えています。
  
  
• 没入感を高める「表記の仕方」とタイポグラフィ
  ホームに戻るボタン一つとっても、宇宙空間のページでは「RETURN TO ORBIT（軌道に戻る）」、ほのぼのした『おてんきぐらし』では「おうちにもどる」と世界観に合わせて表記を変えています。さらにfont-monoやtracking-widestを活用した英語のタイポグラフィを効果的に配置し、洗練されたスタイリッシュなUIデザインへと調整しました。
  
• 「自己紹介（About）」は思想を抑え、見やすさに振り切る
  サイト全体は「体験という芸術」を全面に出していますが、自己紹介のページだけはあえて過度な演出を排除し、シンプルなレイアウトを採用しました。「志望はバックエンド寄り」といった経歴や実装スキルなどの情報にノイズが乗らないよう、そこは芸術ではなく「ちゃんと自分を紹介する」という実用性に振り切っています。
  
• マウスホバー時の音が鳴るタイミングや、惑星が回る時の微妙な慣性のつき方
• 体験を損なわないための徹底的なパフォーマンスチューニング（リッチなWebGL表現と相反するLCPの改善）

これらの「心地よさ」は、Copilotが出したコードをベースに、僕自身がブラウザのプレビューを何百回もリロードしながら泥臭く手作業でチューニングしました。AIの効率化があったからこそ、この「最後の1%のこだわり」に無限の時間を注ぐことができたのだと思います。

🔥 おわりに：SOTD獲得へ、VOTEのお願い！

「自分のやりたい表現を妥協しない」という泥臭い執念と、それを壁打ち相手として支えてくれたGitHub Copilotのおかげで、学生の個人開発ながら世界トップレベルの舞台に立つことができました。

現在、**10日間限定の一般投票（Public Vote）が行われています。
もしこのポートフォリオの「音と視覚」の体験を少しでも面白いと感じていただけたら、ぜひ下記のリンクから「VOTE」**ボタンを押して、日本の学生が世界1位（SOTD）を獲るための力を貸してください！

👉 CSS Winner 投票ページ（VOTEをお願いします！）

👉 実際のポートフォリオサイトはこちら
(※音が出ます。PC推奨です)

「記憶に残る体験」を、ぜひあなたのブラウザとイヤホンで味わってみてください。応援よろしくお願いします！