Creating Experiences...

0%

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

Welcome to myPORTFOLIO

Created by福沢コウKOH FUKUZAWA

制作哲学

the Philosophyof mine

AI時代の今こそ、創造性・表現力・ユーザー体験へのこだわりが一層重要になる。
その軸をぶらさずに、技術を深く探求し、自分にしか生み出せない価値を形にしていきます。


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

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

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

私について

Get to knowAbout me

フロントエンドエンジニアの福沢コウです。
モダン技術とアクセシビリティやパフォーマンスの知識を活用し、「見やすく・使いやすく・体験の良いWebサイト」の制作を心がけています。

私のキャリアは最悪でした。中退後の不安定な時期を経てリゾートホテルで住み込みで働いていた頃、「このままではいけない」という強い思いから、2023年、偶然手にしたWebデザインの本をきっかけに独学を始めました。当初はパソコン初心者でHTMLの基礎からの学習でしたが、自分を信じて学習を続け、数カ月後に就職。Web更新の業務に携わりながら、海外の大手アワードサイトに掲載されるような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

Web業界に入った当初から、これらの技術の習得を掲げ、勉強ルートを築いてきました。まだまだ学習中ではありますが、シェーダーをより深く理解し、複雑で多彩な3D表現が実装できるようになることを目標とし、継続的に挑戦していきます。

家のモデル

Blender

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

趣味

映画・アニメ・小説家になろう・配信者・温泉

常にアニメやゲームの配信等を流し見しています。映画や温泉も好きですが、行くときは必ず「人が少ない」ことが条件です。活動名の福沢コウという名前は好きなアニメ「マリア様がみてる」と「クロスゲーム」の主人公からとっています。

野球

野球バット YouTube キャッチボール

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

デスク周り

PC キーボード マウス

Web制作を学習し始めてすぐ、思い切ってMacBookAirを買いました。振り返ると後先を考えない買い物でしたが、決意を形にできた良い選択だったと思います。カフェや図書館へ持ち運ぶので、キーボードはコンパクトなものを使っています。

制作デモ

Several Demosas exercises

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

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

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

Three.js

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

Next.js, TS, TailwindCSS, Lenis

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

React, TS, TailwindCSS, GSAP, Lenis

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

Three.js

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

HTML, CSS, TS, GSAP, swup

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

HTML, CSS, TS, GSAP, Three.js

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

お問い合わせ

Contact me

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

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

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

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