福沢コウのポートフォリオサイト
Welcome to myPORTFOLIO2025
My name is福沢コウKOH FUKUZAWA
Scroll
制作哲学
AI時代に突入し、「エンジニア不要論」が話題になることも少なくありません。
しかし私はそのような風潮に流されず、自分にしか生み出せない価値が出せるまで勉強を続けたいと思っています。
効率や自動化が進む時代だからこそ、創造性・表現力・ユーザー体験へのこだわりが一層重要になる。
その軸をぶらさずに、技術を深く探求し、成果物に反映させていきます。
動きとデザインで
引き込ませるWeb制作
思わず見に来た人が
見惚れるようなWebサイト
技術と知識を活用した
AIでは作れない体験
高度な技術と複雑な表現
新しい表現方法に
挑戦し続ける
表現による没入感のある体験。見る人を感動させる、印象に残るWebサイトの創造。
技術だけでなく
ユーザー体験を重視
スムーズな動作でユーザーを魅了。最適化されたコードとデータで高速なパフォーマンス。
見た目の美しさと
使いやすさの両立
レスポンシブ対応で、あらゆるデバイスで完璧な表示。ユーザーに違和感を与えない動き。
To be...
- Frontend Engineer
- Creative Developer
- Interactive Web Engineer
- WebGL / Shader Developer
- Freelance Frontend Developer
私について
フロントエンドエンジニアの福沢コウです。
モダン技術と アクセシビリティや パフォーマンスの知識を活用し、
「見やすく・使いやすく・体験の良いWebサイト」の制作を心がけています。
私のキャリアは最悪でした。中退後の不安定な時期を経てリゾートホテルで住み込みで働いていた頃、「このままではいけない」という強い思いから、2023年、偶然手にしたWebデザインの本をきっかけに独学を始めました。当初はパソコン初心者でHTMLの基礎からの学習でしたが、自分を信じて学習を続け、数カ月後に就職。Web更新の業務に携わりながら、awwwardsやFWAに掲載される海外のWebサイトに憧れ、「将来的にはこうした体験を届けたい」という強烈なモチベーションを得ました。
しかし、数ヶ月で業務に慣れるとより挑戦的な環境を求めるようになり、会社の方針や技術スタックに将来性を見出せず退職。2025年2月からは専念して独学に取り組み、セマンティックマークアップを研究していた会社時代とは一転、GSAPやThree.js、WebGLなどの動きのある表現技術を中心にスキルを磨いています。勉強することは尽きず、学びの過程そのものが楽しみです。
AIは既存の情報収集・分析には強みがありますが、高度なコード生成はまだ難しいと感じています。だからこそ、自らその水準に到達し、創造的で価値あるWeb体験を提供できるエンジニアを目指しています。このポートフォリオは、その歩みの一端です。
強み
Web制作会社でSEO最適化やパフォーマンス改善、WordPressサイトの高速化を実現。
制作部署ではないながらハングリーに仕事をもらい、デザイナーと連携してLPを多数コーディング。
常に最適な実装を意識し、レスポンシブデザインやアクセシビリティ、クロスブラウザ対応を実践。
技術スタック
- HTML, CSS, JavaScript, TypeScript, React, Next.js
- Three.js, WebGL, GSAP
- Node.js, Express, PHP
- Figma, Photoshop, Illustrator
- Git, Prisma, microCMS, Firebase, Supabase
目標・予定
- 大手アワードサイトでの受賞・掲載
- WebAssembly,RUST習得
- WebWorker、WebGPUなど、次世代Web技術の習得
- PWA、ServiceWorker、オフライン対応技術の実装
- より高度なGLSLやTSLの習得
夢
- 情報系の大学に所属し学ぶ
- web制作の知識を深める
- オープンソースコミュニティへの貢献
- フロントエンド技術の最前線で活躍
- 田舎の大きな一軒家で暮らす
- ペットを飼う
スキル等紹介
勉強や趣味について紹介します。
モデルやパーティクルの動きなど、表現の一端を楽しんでいただければ幸いです。


HTML
アクセシビリティ 内部SEO PHP EJS
タグ・要素の使い方は本当に適切か、アクセシブルであるか、最適なマークアップとは何かを常に考えています。チームで開発をしていたため、みやすさや保守性の高さも意識し、「誰にとっても扱いやすいコード」を心がけています。

CSS
CSS設計 SCSS CSSModules TailwindCSS
より短い記述で実現できないかなあと考えるのが楽しいです。前職では古い書き方に触れることが多く、CSSの進化に遅れると非効率的な書き方を続けることになると感じています。技術評論社「CSS設計完全ガイド」を読まずにwebで仕事はできないと考えています。

JavaScript / TypeScript
JavaScript TypeScript Node.js Express
web上で様々なことを実現でき、大好きです。今後もさらに理解を深め探求したいと思っています。オブジェクト指向に取り組んだり、クリーンコードを意識してから、コードを書くことがさらに楽しくなりました。

React / Next.js
React Next.js microCMS Prisma
新しい技術を学ぶ際はフレームワークやライブラリを使わないため、何度か学び直しをしていますが、その便利さに毎回驚かされています。書籍やUDEMYを中心に勉強していましたが、最近は海外のYouTubeが解説・実例ともに豊富であることに気づきました。

3D / アニメーション
WebGL Three.js GSAP react-three-fiber
アワードサイトを見てから、これらの技術の習得に強い関心を持ち始めました。まだまだ学習中ではありますが、シェーダーをより深く理解し、複雑で多彩な3D表現が実装できるようになることを目標とし、継続的に挑戦していきます。

家のモデル
Blender
Blenderはチュートリアル程度の経験しかありませんが、ベイク機能の軽量さに感動し、「ぜひポートフォリオに活かしたい」と思い、このミニ家モデルを制作しました。このモデル自体も1MB未満に収めており、Web上での軽快な表示を意識しています。

趣味
映画・アニメ・小説家になろう・配信者・温泉
インドア派です。映画や温泉に行くときは必ず「人が少ない」ことが条件です。月に2回ほど映画館に足を運びます。1本の作品にじっくり向き合う時間をリフレッシュにしています。

野球
野球バット YouTube キャッチボール
野球経験者ではないですが、2015年頃から大谷翔平選手の活躍を毎度YouTubeで見ています。最近はキャッチボールをしてバッティングセンターに行った後、温泉で汗を流しています。

デスク周り
PC キーボード マウス
Web制作を学習し始めてすぐ、思い切ってMacBookAirを買いました。振り返ると後先を考えない買い物でしたが、決意を形にできた良い選択だったと思います。カフェや図書館へ持ち運ぶので、キーボードはコンパクトなものを使っています。
制作デモ
練習の一環として制作したデモサイトをいくつかご紹介します。
実際に目にしたデザインやYouTube動画を参考に、短時間で再現したものです。
本番環境レベルには至っていないため、抜粋して一部のみ掲載しています。
3Dモデル表現とクリエイティブなモーダルメニューの実装練習
React, Next.js, TS, React-Three-Fiber, GSAP, TailwindCSS, Lenis3Dモデルがページトップに表示された、シンプルなデザインのポートフォリオデモサイト
3Dモデル表現とクリエイティブなモーダルメニューの実装練習のGitHubThree.js GPGPU の練習
Three.jsマウスカーソルに追従して水面が揺れる
Next.jsの復習 / スクワークルデザイン
React, Next.js, TS, TailwindCSS, Lenis美しい画像が効果的に動くリゾートホテルデモサイト
Next.jsの復習 / スクワークルデザインのGitHubスクロールアニメーション練習、shadcn/uiの試用
React, TS, TailwindCSS, GSAP, Lenisスクロールでコンテンツがダイナミックに表示されるデモサイト
スクロールアニメーション練習、shadcn/uiの試用のGitHubロゴから商品へと移動するパーティクル
Three.js最初はロゴの形を象るパーティクルが移動して、靴のモデルが現れる
CSS疑似3D、MPAページ遷移アニメーション
HTML, CSS, TS, GSAP, swupヒーローセクションのアニメーションがページ下部のリスト表示に移行する
CSS疑似3D、MPAページ遷移アニメーションのGitHubGSAP、Three.jsを用いた商品紹介デモサイト
HTML, CSS, TS, GSAP, Three.js3Dのモデルとスクロールアニメーションを用いた商品紹介デモサイト
GSAP、Three.jsを用いた商品紹介デモサイトのGitHubお問い合わせ
Contact me
Webサイト制作・改善のご依頼やご相談は、下記フォームよりお気軽にご連絡ください。
ご依頼いただいた場合は、詳細を伺うための簡単な質問フォームをお送りいたします。
当サイトの改善案を教えてくれる先生や、学習仲間を探している方でもお気軽にどうぞ!
万が一下記フォームから送信できない場合は、Googleフォームからご連絡いただけますと幸いです。
いただいた情報はお問い合わせへの対応のみに利用し、第三者に提供することはありません。
是非一緒に素敵なサイトをつくりましょう!