Portfolioを公開しました

2025/10/06

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

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

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

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

💡 技術構成

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

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

「白いパーティクルが謎の穴に吸い込まれていくシーン」から始まり、「穴の中を進み」→「家のモデル」→「制作物の紹介」→「穴を抜けて町へ出る」→「お問い合わせ」という構成になっています。

一見すると少し奇妙な流れに見えるかもしれませんが、これはエンジニアとして成長していく過程を物語的に表現したものです。

冒頭の「白いパーティクル」は、エンジニアを志す人々を象徴しています。カメラ自身（自分自身）も白いパーティクルの一つといえます。

そして「穴」は、学習の道のりや試行錯誤の過程を意味しています。暗くも奥行きのある空間を通り抜けながら、知識や経験を積み重ねていく様子を描いています。

家のシーンは、学びの拠点＝自分の制作環境をイメージしています。そこで得た知識をもとに制作物を生み出し、やがて「チュートリアル地獄」とも言える長い学習期間を抜け出して、

新しい世界（＝町）へ飛び出し、人のためにWebサイトを作るフェーズへと進みます。

つまりこのサイトは、「学びの渦の中にいた一人の人間が、光のある現実世界へと出ていく」というストーリーをデザインとして表現したものです。

・・・サイトをみて、そんなことが分かる人はいないと思います。（笑）ただ、一応そういったことを考えて作りました。

ストーリーなんかわからなくても、「おっ、技術使ってるな」なんて思ってもらえたらモーマンタイです。

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

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

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

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

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

今後はこのポートフォリオを軸に、より高品質なインタラクティブ表現を探求していきます。

また、デザイン・実装の両面から「体験としてのWeb」を追求し、国内外のアワードサイト（Awwwards / CSS Design Awardsなど）への応募も予定しています。

サイトではデザインや実装の改善案も募集中です。

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

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