Frontend Development

フロントエンド開発を、チームの一員として。

TypeScript / React / Next.jsを中心に、Webサービス・WebアプリケーションのUI開発を支援します。

開発支援について相談する

Introduction

UIと仕様を、 一緒に考える。

デザインや仕様をもとに、使う人にとって扱いやすい画面を実装します。操作の流れや実装コストを確認し、必要に応じて仕様やUIの改善を提案します。

PM・デザイナーとのすり合わせや、API仕様を確認しながらのデータ連携まで。チームの一員として対話しながら、継続して手を入れられる実装に取り組みます。

Support

お任せいただけること。

  • UI実装

    デザインや仕様をもとに、サービス画面・管理画面を実装します。必要に応じて、操作性や仕様についても提案します。

  • コンポーネント設計

    画面間で共通するUIを整理し、再利用や変更のしやすさを考えてコンポーネントを構成します。

  • API連携

    OpenAPIなどのAPI仕様を確認し、データの取得・送信から画面への反映まで実装します。

  • 既存機能の追加・改善

    既存画面の改修や機能追加に対応します。あわせて、保守性を考えたCSSの整理やリファクタリングにも取り組みます。

  • Storybook・テスト整備

    コンポーネントを確認できる環境やユニットテストを整え、継続的な開発を支えます。

  • アクセシビリティ・レスポンシブ対応

    マークアップや操作性、画面幅に応じた表示に配慮し、UIの実装・修正を行います。

Strengths

開発で大切にしていること。

操作の流れから、UIを考える。

画面単体の見た目だけでなく、その前後の導線や使う場面にも目を向けます。仕様だけでは判断できない部分は、ユーザー視点と実装コストを踏まえて相談します。

デザインと実装の間をつなぐ。

デザインの意図を確認しながら、実装上の制約や必要な作業を整理します。PM・デザイナーと認識を合わせ、仕様や実装範囲を一緒に考えます。

変更しやすいコードを積み重ねる。

既存の構成やプロジェクトの方針を理解することから始めます。機能や技術を増やすこと自体を目的にせず、必要な共通化やテストを考え、読みやすく直しやすい実装を大切にします。

Technology

主な対応技術。

TypeScript / React / Next.jsを軸に、プロジェクトの構成や目的に合わせて実装します。

  • TypeScript
  • React
  • Next.js
基礎技術
JavaScript / HTML / CSS
スタイリング
Tailwind CSS / Sass / MUI / shadcn/ui
API連携・フォーム
OpenAPI / TanStack Query / React Hook Form / Zod
品質・開発環境
Storybook / Vitest / GitHub Actions

Experience

開発への関わり方。

代表者がこれまでに参画したプロジェクトの一部をご紹介します。Taupe法人としての受注実績を示すものではありません。

Case 01 / 既存機能の改善・API連携

クリエイター向けダッシュボード

SNSプラットフォームのクリエイターが利用するダッシュボードの開発。

担当領域
機能改修、UI改善、API連携、テストコード作成。
実施したこと
メール配信機能のテンプレート追加と一覧画面の改善を担当。API仕様を確認しながら連携を実装し、着手前にはPM・デザイナーに導線や実装範囲の見直しを提案しました。
使用技術・ツール
Next.js / OpenAPI / Figma

Case 02 / 仕様書からの管理画面実装

会員サービスの管理画面

ホテル会員向けサービスに付随する管理画面の開発。

担当領域
管理画面のUI設計・実装。
実施したこと
デザインデータがない状態から、仕様書をもとに管理画面のUIを検討し、Next.jsで実装しました。
使用技術・ツール
Next.js

Case 03 / 共通UI・テスト環境の整備

転職情報メディアのUI・開発基盤

Next.jsとMicroCMSを用いた転職情報メディアの開発。

担当領域
開発環境構築、共通レイアウト・画面実装、Storybook・テスト整備。
実施したこと
共通レイアウトと各画面のUI実装に加え、Storybookの導入・設定、ユニットテストの実装と自動化を担当しました。
使用技術・ツール
Next.js / MicroCMS / Storybook

Development Style

チームに加わり、 開発を進める。

実装前に認識を合わせる

Figmaや仕様書を確認し、判断が必要な点を整理します。PM・デザイナーと相談しながら、担当範囲や画面の振る舞いを具体化します。

共有しながら積み重ねる

Git / GitHubを利用した開発やコードレビューに対応します。チーム内で相談しやすい関係を大切にし、必要な改善も共有します。

確認まで含めて取り組む

実装に加え、動作確認やテストにも取り組みます。生成AIも設計・実装・レビューの補助に活用しながら、最終的な判断は自分の目で確認します。

Contract

ご依頼について。

フロントエンド開発支援は、準委任契約によるWebアプリケーション等の開発チームへの参画を基本としています。

プロジェクトの状況や担当範囲について、まずはご相談ください。

Contact

開発について、
ご相談ください。

開発体制や必要なスキル、プロジェクトの状況など、お気軽にお聞かせください。

開発支援について相談する