公開サイトから業務システムまで
設計から実装まで対応
Next.js / TypeScript を軸に、公開サイト、管理画面、API、配信演出 UI まで一貫して制作します。実績と対応領域が短時間で伝わる構成を重視しています。
できること
Capability
公開サイト構築
特設サイトやポータル寄りの公開サイトを、情報設計から実装、公開後の更新導線まで見据えて構築します。
Capability
管理画面・業務システム
業務フローを前提に、入力しやすさと一覧性を両立した管理画面や業務システムを設計・実装します。
Capability
API設計・実装
認証、DB 設計、Swagger を含む API を構築し、フロントエンドとつながる土台を整備します。
Capability
リアルタイム機能
チャットや更新通知のような双方向性のある機能を、要件に合わせた構成で実装します。
Capability
配信演出 UI
Live2D / pixi.js を使った演出 UI を自主制作で検証し、VTuber・配信文脈に接続しやすい表現を形にしています。
Selected Work
Glänz Futsal Club 公式サイト構築
品川区を拠点とするフットサルクラブの公式サイトを新規構築し、継続更新しやすい公開導線を整備。
- 担当
- 要件整理 / 情報設計 / 実装 / 公開
- 成果
- 公開サイトとして運用しやすい構成を整え、継続更新の土台を作成。
東京・品川区を拠点に、MENS / MIX カテゴリーでリーグ戦や交流試合に参戦する Glänz（グレンツ）フットサルクラブの公式 Web サイトを、Next.js + Tailwind CSS でフルスクラッチ構築。クラブ概要、選手・スタッフ紹介、最新ニュース、試合スケジュール、過去試合結果のマッチレポートを個別ページとして整備し、Firebase Firestore による更新フローも導入しました。
AstraFlow Dimensions 2026
架空の VTuber イベントを題材にした自主制作。公開サイトと管理画面を一体で設計した特設サイト作品。
- 担当
- 情報設計 / UI設計 / 実装
- 成果
- VTuber / エンタメ文脈の特設サイトと運用管理画面を、架空イベント題材の自主制作として提示できる状態に整理。
Next.js で構築した、ポートフォリオ向けの「公開サイト + 管理画面」一体型イベントサイト。README と公開ページの記載どおり、実在の企業・VTuber・イベントではなく、架空イベントを題材にした自主制作です。ja / en ルーティング、ニュース・出演者・スケジュール・FAQ・固定ページ、管理画面での更新導線、ローカル JSON モックデータ運用、GA4 計測ポイント実装までを含みます。
SimpleOps Demo
店舗向け業務システムを想定した、自主制作の管理画面デモ。顧客・ボトル・勤怠を一元管理。
- 担当
- 要件整理 / UI設計 / 実装
- 成果
- 業務システム UI と導線設計のサンプルとして公開可能な状態に整理。
店舗向けに、顧客管理・ボトル管理・キャスト勤怠管理を一元化できる業務システムのデモ。Next.js 15 + React 19 + shadcn/ui によりモダンな UI を構築し、Firebase をバックエンドに採用。Vercel へデプロイして実際に操作可能な形で公開しています。
OpsView AI
AI導入の効果を商談で伝える自主制作。問い合わせ対応・社内検索・議事録整理を導入前後の比較と操作デモで提示。
- 担当
- 要件整理 / 画面設計 / 実装
- 成果
- AI導入で業務がどう変わるかを、非エンジニアにも短時間で伝えやすい営業用デモとして公開。
Next.js 16 + TypeScript + Firebase + OpenAI API で構築した、AI業務改善の営業向けポートフォリオ。主力の「AI問い合わせ対応アシスタント」を軸に、「社内ナレッジ検索AI」「商談議事録整理AI」を共通基盤で展開し、導入前 / 導入後の違いを見て分かる形で整理しました。Sample Mode でも主要デモを確認でき、ダッシュボードでは文書管理や履歴確認まで含めて運用イメージを提示しています。
Shindan Roadmap Workbench
中小企業診断士の受験学習に特化し、学習記録の自己点検から改善提案、履歴分析、ChatGPT 用プロンプト生成までをローカル完結で行えるアプリ。
- 担当
- 要件整理 / 情報設計 / UI設計 / 実装
- 成果
- 学習記録を残すだけで終わらせず、次に何を直すかまでつながる自己点検フローを 1 つのアプリに整理しました。
中小企業診断士の学習内容を、目的別の入力テンプレートで整理できるワークベンチとして制作しました。入力内容はルールベースで自己点検され、スコア、弱点カテゴリ、不足項目、改善提案、次アクションとして返されます。保存した履歴は再利用でき、科目別件数や不足項目の傾向分析にも使えます。ロードマップと曜日別テンプレートも備え、学習行動を整理しやすい構成です。
astryllune-app
株式保有状況と銘柄情報を確認する自主制作ダッシュボード。再利用しやすい UI で構成。
- 担当
- 画面設計 / 実装
- 成果
- ダッシュボード系 UI の構成力を示せる公開アプリとして整理。
Next.js（App Router）、TypeScript、Tailwind CSS、shadcn/ui を用いて構築した株式ダッシュボードアプリケーション。保有株一覧、資産サマリー、銘柄ごとの詳細画面、売買戦略プランナーを、再利用可能なコンポーネントとして構成しています。
Live2D Overlay Portfolio
配信オーバーレイ UI をテーマにした自主制作。Live2D 表示と演出表現の検証用ポートフォリオ。
- 担当
- UI設計 / 実装
- 成果
- VTuber / 配信文脈に接続できる UI 実装力を、自主制作として提示。
Next.js + pixi.js（pixi-live2d-display）を用いて構築した配信オーバーレイ UI。Live2D モデル表示、リアルタイムコメント連携、ハートパーティクル演出などを組み合わせ、配信画面向けの表現を検証しています。実案件ではなく、VTuber / エンタメ系案件への接続を意識した自主制作です。
会議室予約管理 API
認証とリソース管理を備えた会議室予約 API。バックエンド設計とドキュメント整備を確認できる制作物。
- 担当
- API設計 / DB設計 / 実装
- 成果
- 認証付き API とデータモデル設計の実装サンプルとして公開。
FastAPI + SQLAlchemy + PostgreSQL を用いた会議室予約管理 API。JWT 認証、予約の作成 / 更新 / キャンセル、ユーザー・会議室リソース管理、Swagger UI による API ドキュメントを実装しています。
リアルタイムチャットアプリ
双方向通信を軸にした自主制作。チャット、暗号化、オフライン対応を一通り実装。
- 担当
- フロントエンド / バックエンド実装
- 成果
- リアルタイム通信と Node.js ベースのアプリ構成を確認できる制作物。
React + Socket.IO + Node.js でリアルタイムチャットを構築。メッセージの暗号化、オフラインメッセージキュー、リッチテキスト機能を実装しています。
ニュースアグリゲーターアプリ
RSS 収集と分類を軸にした自主制作。ポータルサイト寄りの情報整理 UI を実装。
- 担当
- 設計 / 実装
- 成果
- 情報整理型サイトと検索導線の実装サンプルとして提示可能。
Next.js + TypeScript でニュースまとめサイトを構築。RSS フィードの自動収集、セクション分類、キーワード検索機能を実装しています。
Udemy ブロックチェーン学習アプリ
Ethereum / Web3.js の学習制作。スマートコントラクト操作の基礎を実装。
- 担当
- 学習実装
- 成果
- 学習制作としてブロックチェーン実装の基礎を確認できる内容。
Udemy の講座をもとに開発した学習用ブロックチェーンアプリ。Ethereum + Web3.js でスマートコントラクトを操作し、トークントランザクション機能を実装しています。
About
東京在住のフリーランスエンジニア。フロントエンドからバックエンド、インフラまで横断して設計と実装を担当しています。
得意領域は TypeScript / Node.js / React / Next.js。公開サイト、管理画面、API のように用途が異なる案件でも、運用しやすさまで含めて形にするのが強みです。
配信演出 UI として、Live2D モデル表示を含むオーバーレイ実装も自主制作で検証しています。
Skills & Tech Stack
Backend
- TypeScript / Node.js
- NestJS
- Express
- Laravel
- FastAPI
- TypeORM / Sequelize
- MySQL / PostgreSQL
Frontend
- React / Next.js
- Vue.js
- Nuxt.js
- Tailwind CSS
- HTML5 / CSS3
- Accessibility
- Live2D / pixi.js
Infrastructure
- AWS (Lambda, ECS, S3, RDS)
- Docker / Kubernetes
- Terraform
- CI/CD (GitHub Actions)
Tools & Others
- Git / GitHub
- ESLint / Prettier
- Jest / Vitest
- GraphQL / REST API
- Linux / Bash
- Python
- LINE Messaging API
Contact ＆ Inquiry
ご依頼やご相談はお気軽にご連絡ください。公開中の実績と GitHub が確認できる導線をまとめています。