使う人にとって心地よく、
育てていける実装を。
Thoughtful interfaces.
Considered code.
TypeScript / React / Next.jsを中心に、生成AIも活用しながら開発しています。
ユーザビリティと保守性を両立するUI実装を心がけています。
TypeScript / React / Next.jsを中心に、下記の技術を用いた開発が可能です。
3+Years
型安全性を意識した、堅牢で保守しやすい実装ができます。
4+Years
コンポーネント設計から状態管理まで対応できます。
4+Years
App RouterやSSR/ISRを活かした実装ができます。
4+Years
デザインに忠実で崩れにくいスタイリングができます。
8+Years
DOM操作から非同期処理まで幅広く対応できます。
8+Years
セマンティックでアクセシブルなマークアップができます。
設計・実装・レビュー・テスト作成まで、生成AIを日常的に活用して開発効率の向上に取り組んでいます。
開発や仕事において、大切にしていることです。
見えている画面の実装だけでなく、その先にあるユーザーの導線や運用まで考えて設計します。仕様書だけでは分からない部分は、ユーザー視点や実装コストをふまえて仕様改善を提案することもあります。
機能が動くことだけでなく、使っていて気持ちがいいかどうかを大事にしています。使いやすさやアクセシビリティにも気を配りながら、実際に触れる人が心地よく感じられるものづくりを心がけています。
気持ちよく働けるチームは、良いものづくりにもつながると思っています。声をかけやすい空気づくりや、困っていそうな人へのフォローを心がけ、みんなが楽しく仕事できる関係を大切にしています。
使う人には見えないコードも、Webをつくる大切な一部だと考えています。読みやすく、直しやすく、育てやすい実装を意識し、テストやCI、依存関係の健全性にも同じだけの熱量で向き合います。
機能や技術を増やすこと自体を目的にせず、必要なものを見極めます。生成AIを活用して実装スピードを高めながら、最終的な判断は自分の目で確認して行っています。
これまでに参画した主要なプロジェクトを一部抜粋してご紹介いたします。
システム開発（Spring Boot / Thymeleaf）
Clineを活用した仕様書の把握・実装計画の作成・実装を担当。
JavaScript / jQueryによる画面イベント・入力制御、Thymeleafを用いたサーバーサイドレンダリングでのデータ埋め込みを実装。
Ajax通信によるControllerとのデータ送受信と、取得データを用いた画面の動的描画を実装。
CSS関連の不具合に対し、アクセシビリティ・レスポンシブを考慮した修正・共通化を実施。
SaaSダッシュボード開発（Next.js）
Claude Codeを活用した機能実装・テストコードの作成を担当。
フォロワー・課金者向けメール一斉送信機能の改修（テンプレート追加、一覧画面のUI改善）を実装。
OpenAPIによるAPI仕様を確認しながらのサーバー連携実装、PostHogによるイベント計測の実装を担当。
Figmaをもとにした実装に際し、着手前にユーザー導線と実装コストを確認。PM・デザイナーと仕様改善や実装範囲の見直しを提案。
メディアサイト開発（Next.js）
Claude Code / Figma MCPを活用したUI実装の効率化に取り組みながら、Next.js / MicroCMSを用いた開発環境を構築。
共通レイアウト・各画面のUI実装、Storybookの導入・設定を担当。
ユニットテストの実装およびテスト自動化を推進。
Webアプリ開発（Ruby on Rails）
各画面・管理画面のUI実装を担当。Stimulus.jsを用いたインタラクティブ機能（求人情報検索、適職診断、求職者管理画面）を実装。
CSS設計および保守性向上のためのリファクタリングを実施。
モバイルアプリ開発（React Native）
VS CodeのChatGPTプラグインを活用した機能実装・コードレビュー・管理画面のUI設計を担当。
React Native / Expoを用いたスマホアプリのUI実装。
Firebaseを利用したログイン・抽選・クーポン等の機能実装、Next.jsを用いた管理画面のUI設計・実装。
管理画面ではデザインデータがない状態から、仕様書をもとにUI設計・実装まで担当。
個人開発（Next.js）
当サイト。フレームワークにNext.jsを採用。
Vitestによるテスト自動化、Storybookでのコンポーネント管理を継続的に整備し、Claude Codeを活用した保守・改善を行っています。
サイトリプレース（Astro）
v0を活用したLPの実装、WordPressサイトのリプレース（Shifter / Astro + React）を担当。
フォーム機能の実装（Salesforce等の外部サービス連携を含む）、サイト内検索機能の実装。
学習管理システムのダッシュボードUI実装。
コードレビュー、デプロイ自動化、サイト運用・保守も担当。
WordPressの脆弱性対策を目的としたリプレースに際し、Astroを選定・導入。
システム開発（Angular）
Angular, TypeScriptを用いた販売管理・在庫管理画面のUI実装を担当。
Swaggerで定義されたAPI仕様に基づくフロントエンド実装、Angular Materialを用いたUIコンポーネントの実装。
システム開発（Angular）
クリエイター・講師と企業のマッチングアプリ開発プロジェクトにディレクターとして参画。
業務委託エンジニア・オフショアチームのタスク管理、クライアントとの仕様確認・進捗調整を担当。
コードレビュー・動作確認などの品質管理、一部画面のUI実装・LPのデザイン実装。
サイトリプレース（WordPress）
Ferret OneからWordPressへのサイトリプレースを担当。
お問い合わせフォーム、決済機能を含むユーザー新規登録フォームの実装。
新規ページの実装、既存ページの改修・WordPress保守。
Webサイト制作（WordPress）
フリーランスのフロントエンドエンジニアとして活動開始。
WordPressやMakeshopなどのテーマ開発案件へ参画。
ECサイトの開発や求人ポータルのテーマ開発などを担当。
サイトリプレース（WordPress）
Webアプリ開発・Web制作会社へ就職。
主にHTML/CSSコーディング、WordPressテーマ作成業務を担当。
経歴と、いまの仕事への向き合い方について紹介します。
UI・仕様改善の提案
ユーザー視点や実装コストを踏まえ、仕様・UI改善を能動的に提案します。
UI設計・実装
デザインデータがない状態からでも、仕様書をもとにUI設計・実装まで対応します。
チーム開発
小規模チームでのサブリーダーとして、タスク管理・メンバー支援を経験しています。
TypeScript / React / Next.jsを中心に、Webサービス・管理画面・スマホアプリ・Webサイトなど幅広いフロントエンド開発に携わってきました。UI実装を主軸としながら、仕様改善の提案や開発環境の構築、テスト、運用まで、プロジェクトに応じてフロントエンド周辺の業務にも幅広く対応しています。
Firebase等のBaaSを活用したAPI・サーバーサイド機能・DB連携の実装や、Spring Boot / Rails環境でのフロントエンド・UI実装の経験もあります。
Claude Code等の生成AIを設計・実装・レビュー・テスト作成に日常的に活用しています。実装スピードを上げる一方で、依存関係の健全性やCI整備、リスクのあるアップデートを見送る判断など、地味だけれど後々効いてくる部分の意思決定は自分の目で確認して行うようにしています（本サイトも、そうしたやり方でClaude Codeと協働しながら継続的にメンテナンスしています）。
前職では会計事務所で法人経理を担当していましたが、より専門性の高いITスキルを身につけたいと考えWeb業界へ転身しました。フリーランスとして独立後はコミュニティ運営や初学者向けプログラミング学習サービスでのメンター経験もあります。
お問い合わせは、Googleフォーム（新しいタブで開く）よりご連絡ください。