Portfolioを公開しました

このたび、個人ポートフォリオサイト「koh-fukuzawa.com」を公開しました。

デザイン、実装ともにすべて自分で手がけたものです。

なんだかんだ手探りだったので1ヶ月半くらいかかったな・・・

デザイン的には全然気に入っていないので、これから他サイトや書籍で吸収/勉強しながら変更予定です。

💡 技術構成

• Next.js（App Router）
• TypeScript
• GSAP
• Three.js / WebGL / react-three-fiber
• Vercel（ホスティング）

もはや当然のスキルセット。

技術アピールのためNext.jsで作るのは確定していたので、Three.jsを勉強していたのに楽なr3fを使いました。ただr3fはあまり使いたくなくなった。理由は後述。

🚀サイトの特徴/強み/工夫点

複数のシーンをRenderTextureを用いて各シーンをテクスチャとしてレンダリングしています。条件をつけてアクティブなシーン（テクスチャ）だけ描画し、非アクティブシーンは完全に停止させているのでメモリ効率が良いです。

レスポンシブ対応は単に画面幅のみで行っています。spかどうかでシーンの処理を変えたり、家やdemoのシーンをレンダリングしないようにして、スマホでの高速読み込みを実現しています。

また、アクセシビリティを割と徹底しています。VoiceOver読み上げでのスクリーンリーダー対応チェックや、Tabフォーカストラップを実装し、キーボード操作でも問題ないようにしました。

自分的にlighthouseやpageSpeedInsightsは「点数が上がって楽しいな」くらいの信憑度しかないですが、一応

なお、これから機能を追加していくに当たってパフォーマンスの値は減っていく予定です。

githubは非公開ですが、コードを通して、モダンなWeb開発のベストプラクティスを追求したつもりです。

反省点

かなり見切り発車で作り始めて、デザインは何度も変えたし、時間かけて実装したアニメーションを作っては壊し、作っては壊しとすることになった。

ちゃんと時間かけて、目的に沿ったデザインをfigumaで作ろうと思います。

また、React-three-fiberを利用したが、古めのiPadからサイトにアクセスすると、クラッシュするようだ。手持ちのiPadではだめだった。React/Next.jsを使っていたとしても、Three.jsを使う方が良いのだろうか。

普通のThree.jsだったら、Next.jsじゃなくてAstroとか使ったほうが良いかもしれない。

Statcounterで統計を見ると、Tabletからサイトを見るユーザーの割合は2%。その中で古いiPadを使う人を考えるともう少し少なくなると考えて、仕方なく切り捨てることにした。。

🙏 最後に

今後はより高品質なインタラクティブ表現を探求していきます。

「ここをこうしたらもっと良くなる」といったフィードバックがあれば、ぜひX（旧Twitter）やコンタクトフォームから教えてください。

改善を楽しみながら、より良い表現を積み重ねていきたいと思います。