Creating Experiences...

0%

福沢コウのポートフォリオサイト

Welcome to myPORTFOLIO

My name is福沢コウKOH FUKUZAWA

制作哲学

the Philosophyof mine

AI時代に突入し、「エンジニア不要論」が話題になることも少なくありません。
しかし私はそのような風潮に流されず、自分にしか生み出せない価値が出せるまで勉強を続けたいと思っています。
効率や自動化が進む時代だからこそ、創造性・表現力・ユーザー体験へのこだわりが一層重要になる。
その軸をぶらさずに、技術を深く探求し、成果物に反映させていきます。

思わず見に来た人が
見惚れるようなWebサイト

高度な技術と複雑な表現


表現による没入感のある体験。見る人を感動させる、印象に残るWebサイトの創造。

スムーズな動作でユーザーを魅了。最適化されたコードとデータで高速なパフォーマンス。

レスポンシブ対応で、あらゆるデバイスで完璧な表示。ユーザーに違和感を与えない動き。

私について

Get to knowAbout me

フロントエンドエンジニアの福沢コウです。
モダン技術と アクセシビリティや パフォーマンスの知識を活用し、「見やすく・使いやすく・体験の良い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制作の知識を深める
  • オープンソースコミュニティへの貢献
  • フロントエンド技術の最前線で活躍
  • 田舎の大きな一軒家で暮らす
  • ペットを飼う

スキル等紹介

IntroduceSkills+αthrough model

勉強や趣味について紹介します。
モデルやパーティクルの動きなど、表現の一端を楽しんでいただければ幸いです。

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を買いました。振り返ると後先を考えない買い物でしたが、決意を形にできた良い選択だったと思います。カフェや図書館へ持ち運ぶので、キーボードはコンパクトなものを使っています。

制作デモ

Several Demosas exercises

練習の一環として制作したデモサイトをいくつかご紹介します。
実際に目にしたデザインやYouTube動画を参考に、短時間で再現したものです。
本番環境レベルには至っていないため、抜粋して一部のみ掲載しています。

React, Next.js, TS, React-Three-Fiber, GSAP, TailwindCSS, Lenis

3Dモデルがページトップに表示された、シンプルなデザインのポートフォリオデモサイト

3Dモデル表現とクリエイティブなモーダルメニューの実装練習GitHub
Three.js

マウスカーソルに追従して水面が揺れる

React, Next.js, TS, TailwindCSS, Lenis

美しい画像が効果的に動くリゾートホテルデモサイト

Next.jsの復習 / スクワークルデザインGitHub
React, TS, TailwindCSS, GSAP, Lenis

スクロールでコンテンツがダイナミックに表示されるデモサイト

スクロールアニメーション練習、shadcn/uiの試用GitHub
Three.js

最初はロゴの形を象るパーティクルが移動して、靴のモデルが現れる

HTML, CSS, TS, GSAP, swup

ヒーローセクションのアニメーションがページ下部のリスト表示に移行する

CSS疑似3D、MPAページ遷移アニメーションGitHub
HTML, CSS, TS, GSAP, Three.js

3Dのモデルとスクロールアニメーションを用いた商品紹介デモサイト

GSAP、Three.jsを用いた商品紹介デモサイトGitHub

お問い合わせ

Contact me

Webサイト制作・改善のご依頼やご相談は、下記フォームよりお気軽にご連絡ください。
ご依頼いただいた場合は、詳細を伺うための簡単な質問フォームをお送りいたします。

当サイトの改善案を教えてくれる先生や、学習仲間を探している方でもお気軽にどうぞ!

万が一下記フォームから送信できない場合は、Googleフォームからご連絡いただけますと幸いです。
いただいた情報はお問い合わせへの対応のみに利用し、第三者に提供することはありません。

是非一緒に素敵なサイトをつくりましょう!