Independent front-end engineerBased in Hiroshima, Japan

Mitsui.
Portfolio

MY APPROACH

使う人にとって心地よく、
育てていける実装を。

UI development / Front-end

Thoughtful interfaces.
Considered code.

TypeScript / React / Next.jsを中心に、Web制作からWebアプリケーション開発まで携わってきました。
開発環境が変わっても、UI・フロントエンドの実装を継続して担当しています。

View works
Design-minded developmentScroll to explore ↓
01

What I Do.

UI実装を軸に、プロジェクトごとの開発環境で担当してきたこと。

画面・コンポーネントの実装

デザイン・仕様をもとに、WebサイトやWebアプリケーションの画面・共通コンポーネントを実装。

Webアプリケーションの開発

フォーム、API連携、状態に応じて表示が変わるUIなど、Webアプリケーションのフロントエンドを実装。

既存サービスの改修・改善

既存コードや仕様を確認しながら、機能追加・UI改善・不具合修正を担当。

チームでの開発

デザイナー・バックエンドエンジニア・PMと連携し、仕様確認や実装範囲の調整を行いながら開発。

02

Works.

Web制作からWebアプリケーションまで、異なる開発環境で担当してきたUI・フロントエンド実装の事例です。

2026.07 - 2026.10

Spring Boot / Thymeleaf環境での画面実装

公共団体向け条文投稿システムのリプレイス・追加開発

  • Clineを活用した仕様書の把握・実装計画の作成・実装を担当。
  • JavaScript / jQueryによる画面イベント・入力制御、Thymeleafを用いたサーバーサイドレンダリングでのデータ埋め込みを実装。
  • Ajax通信によるControllerとのデータ送受信と、取得データを用いた画面の動的描画を実装。
  • CSS関連の不具合に対し、アクセシビリティ・レスポンシブを考慮した修正・共通化を実施。
  • JavaScript
  • jQuery
  • Spring Boot(環境)
  • Thymeleaf
  • MySQL(環境)
  • Cline
2026.02 - 2026.05

SaaSダッシュボード開発(Next.js)

SNSプラットフォームのクリエイター向けダッシュボード開発

  • Claude Codeを活用した機能実装・テストコードの作成を担当。
  • フォロワー・課金者向けメール一斉送信機能の改修(テンプレート追加、一覧画面のUI改善)を実装。
  • OpenAPIによるAPI仕様を確認しながらのサーバー連携実装、PostHogによるイベント計測の実装を担当。
  • Figmaをもとにした実装に際し、着手前にユーザー導線と実装コストを確認。PM・デザイナーと仕様改善や実装範囲の見直しを提案。
  • TypeScript
  • React
  • Next.js
  • React Hook Form
  • TanStack Query
  • Zod
  • Vitest
  • PostHog
  • Claude Code
2025.11 - 2026.01

メディアサイト開発(Next.js)

転職情報メディアサイトの開発

  • Claude Code / Figma MCPを活用したUI実装の効率化に取り組みながら、Next.js / MicroCMSを用いた開発環境を構築。
  • 共通レイアウト・各画面のUI実装、Storybookの導入・設定を担当。
  • ユニットテストの実装およびテスト自動化を推進。
  • TypeScript
  • React
  • Next.js
  • Storybook
  • Vitest
  • Claude Code
2025.04 - 2026.01

Ruby on Rails / Stimulus.js環境でのフロントエンド実装

求人マッチングプラットフォーム開発

  • 各画面・管理画面のUI実装を担当。Stimulus.jsを用いたインタラクティブ機能(求人情報検索、適職診断、求職者管理画面)を実装。
  • CSS設計および保守性向上のためのリファクタリングを実施。
  • Ruby(環境)
  • Ruby on Rails(環境)
  • JavaScript
  • Stimulus.js
2024.12 - 2025.03

モバイルアプリ開発(React Native)

ホテル会員向けアプリ・管理画面開発

  • VS CodeのChatGPTプラグインを活用した機能実装・コードレビュー・管理画面のUI設計を担当。
  • React Native / Expoを用いたスマホアプリのUI実装。
  • Firebaseを利用したログイン・抽選・クーポン等の機能実装、Next.jsを用いた管理画面のUI設計・実装。
  • 管理画面ではデザインデータがない状態から、仕様書をもとにUI設計・実装まで担当。
  • TypeScript
  • React
  • Expo
  • Next.js
  • Tailwind CSS
  • shadcn/ui
  • Firebase
  • ChatGPT
2024.05 -

個人開発(Next.js)

ポートフォリオサイトリニューアル

  • 当サイト。フレームワークにNext.jsを採用。
  • Vitestによるテスト自動化、Storybookでのコンポーネント管理を継続的に整備し、Claude Codeを活用した保守・改善を行っています。
  • TypeScript
  • React
  • Next.js
  • Tailwind CSS
  • shadcn/ui
  • Vitest
  • Storybook
  • Claude Code
2022.09 - 2024.11

サイトリプレース(Astro)

コーポレートサイト等のリプレース・運用、学習管理システム開発

  • v0を活用したLPの実装、WordPressサイトのリプレース(Shifter / Astro + React)を担当。
  • フォーム機能の実装(Salesforce等の外部サービス連携を含む)、サイト内検索機能の実装。
  • 学習管理システムのダッシュボードUI実装。
  • コードレビュー、デプロイ自動化、サイト運用・保守も担当。
  • WordPressの脆弱性対策を目的としたリプレースに際し、Astroを選定・導入。
  • TypeScript
  • React
  • Astro
  • Tailwind CSS
  • Make
  • Algolia
  • Firebase
2021.12 - 2022.06

システム開発(Angular)

販売管理在庫パッケージのフロントエンド実装

  • Angular, TypeScriptを用いた販売管理・在庫管理画面のUI実装を担当。
  • Swaggerで定義されたAPI仕様に基づくフロントエンド実装、Angular Materialを用いたUIコンポーネントの実装。
  • TypeScript
  • Angular
  • Angular Material
  • Swagger
  • MySQL(環境)
2021.04 - 2021.09

システム開発(Angular)

ビジネスマッチングアプリ開発ディレクション

  • クリエイター・講師と企業のマッチングアプリ開発プロジェクトにディレクターとして参画。
  • 業務委託エンジニア・オフショアチームのタスク管理、クライアントとの仕様確認・進捗調整を担当。
  • コードレビュー・動作確認などの品質管理、一部画面のUI実装・LPのデザイン実装。
  • TypeScript
  • Angular
  • Angular Material
  • React
  • Next.js
  • Firebase
  • Algolia
2020.12 - 2021.03

サイトリプレース(WordPress)

サービスサイトのリプレース・保守

  • Ferret OneからWordPressへのサイトリプレースを担当。
  • お問い合わせフォーム、決済機能を含むユーザー新規登録フォームの実装。
  • 新規ページの実装、既存ページの改修・WordPress保守。
  • PHP
  • JavaScript
  • WordPress
  • Sass
  • React
  • Firebase
2019.04 - 2020.11

Webサイト制作(WordPress)

各種サイトのリプレース・保守

  • フリーランスのフロントエンドエンジニアとして活動開始。
  • WordPressやMakeshopなどのテーマ開発案件へ参画。
  • ECサイトの開発や求人ポータルのテーマ開発などを担当。
  • JavaScript
  • PHP
  • HTML
  • WordPress
  • jQuery
  • React
  • Vue.js
2018.03 - 2019.03

サイトリプレース(WordPress)

各種サイトのリプレース・保守

  • Webアプリ開発・Web制作会社へ就職。
  • 主にHTML/CSSコーディング、WordPressテーマ作成業務を担当。
  • JavaScript
  • PHP
  • HTML
  • WordPress
  • jQuery
03

Skills.

フロントエンドの実務で継続して使用してきた技術と、その用途。

Core Technologies

TypeScript

React / Next.js、Angularを用いたフロントエンド開発で使用。画面実装やAPI連携、既存機能の改修を担当。

実務経験 3年以上

React

Webサイト・WebアプリケーションのUI実装、コンポーネント開発、フォーム・API連携で使用。

実務経験 4年以上

Next.js

Webサービス、メディアサイト、管理画面の開発で使用。画面実装、API連携、既存機能の改修・UI改善を担当。

実務経験 4年以上

JavaScript

Web制作からWebアプリケーション開発まで継続して使用。DOM操作、イベント処理、非同期通信を伴うUI実装を担当。

実務経験 8年以上

HTML / CSS

Webサイト・Webアプリケーションの画面実装で使用。WordPressテーマ制作、共通レイアウト、レスポンシブ対応、既存CSSの改修を担当。

実務経験 8年以上

UI / Frontend Development
Tailwind CSS(実務経験 4年以上)、Sass、Storybook、React Hook Form、TanStack Query、Zod、MUI、shadcn/ui、Axios、Vitest、OpenAPI
Other Experience
案件ごとに使用してきた技術:Angular / Angular Material、Vue.js、React Native / Expo、Astro、WordPress、jQuery。Spring Boot / Thymeleaf環境での画面実装、Ruby on Rails / Stimulus.js環境でのフロントエンド実装も担当。
サービス連携
Firebase、SendGrid、Algolia
開発環境・支援ツール
Git、GitHub、GitHub Actions、Vite、Webpack、Biome、Docker。Claude Code、ChatGPT、Figma MCPを実装・レビューなどの開発支援に活用。
04

Profile.

経歴と、いまの仕事への向き合い方について紹介します。

Mitsui

GitHub

フロントエンドエンジニア / 広島県広島市在住

  • UI・仕様改善の提案

    ユーザー導線や実装コストを踏まえ、PM・デザイナーへの仕様・UI改善の提案を経験。

  • UI設計・実装

    仕様書をもとにした管理画面のUI設計・実装を担当。

  • チーム開発

    小規模チームでのサブリーダーとして、タスク管理・メンバー支援を経験しています。

Web制作からWebアプリケーション開発まで、UI・フロントエンドの実装を継続して担当してきました。TypeScript / React / Next.jsを中心に、AngularやWordPress、Spring Boot / Thymeleaf、Ruby on Rails / Stimulus.jsなど、案件ごとに異なる環境でも画面実装や既存機能の改修に携わっています。

画面の使い心地と、その先のユーザー導線や運用を大切にしています。仕様が曖昧な部分はチームと確認し、実装コストも踏まえて進め方を相談しています。読みやすく直しやすいコードを意識し、テストや開発環境の整備にも取り組んでいます。

チームでは、声をかけやすく相談しやすい関係を心がけています。生成AIも開発支援に活用しながら、実装内容や技術選定の判断は自分で確認しています。

前職では会計事務所で法人経理を担当していましたが、より専門性の高いITスキルを身につけたいと考えWeb業界へ転身しました。2019年よりフリーランスとして独立し、コミュニティ運営や初学者向けプログラミング学習サービスでのメンター経験も積みました。2024年には法人化し、株式会社Taupe(新しいタブで開く)を設立しました。

お問い合わせは、Googleフォーム(新しいタブで開く)よりご連絡ください。