<p>営業の工数を削減する社内ツールを作っています。デリバリー代理店営業の自動化がメインで、ほかにSNS運用の自動化やコーポレートサイトのリニューアルなど、頼まれたものを順に作っている形です。相手は非エンジニアの営業チームなので、「作って終わり」ではなく、運用者が自分で回せるところまで持っていくのがこの案件の肝です。</p>
<h2 id="デリバリー営業自動化システム">デリバリー営業自動化システム</h2>
<p>営業リストの店舗が Uber Eats や出前館などの対応エリアに入っているかを、住所から自動判定するシステムです。以前は営業担当が1件ずつ地図と照らし合わせていました。</p>
<ul>
<li>各社が公開しているKMZ/KMLの対応エリアポリゴンをパースしてPostGISに取り込む</li>
<li>営業リスト（スプレッドシート）の住所を正規化し、Google Maps Geocoding APIで緯度経度に変換</li>
<li>PostGISの <code>ST_Contains()</code> でエリア内外を判定し、結果をスプレッドシートに書き戻す</li>
<li>最初はPython CLIで作ったが、営業チームが自分で使える形にするためNext.jsのWebアプリに作り直した。住所フォーム、一括判定のアップローダ、対応エリアの地図表示、管理者向けのポリゴンインポート画面がある</li>
<li>インフラはTerraformで構築。EC2 + PostGISの構成と、App Runner + RDSの構成の2パターンを用意した</li>
</ul>
<h2 id="営業リスト作成ツール">営業リスト作成ツール</h2>
<p>対象エリアの店舗情報をまとめて収集し、営業リストを一括生成する社内CLIツールです。上のエリア判定システムの入力を作る位置づけです。</p>
<h2 id="sns運用自動化ツール">SNS運用自動化ツール</h2>
<p>アカウント別のスプレッドシートに書いた投稿を、決まった時刻にSNSへ自動投稿するGASツールです。マルチアカウント運用が前提で、アカウント連携ページをセルフサービスにしてあるので、運用者はエンジニアに頼まずにアカウントを追加できます。連携に成功すると投稿用シートが自動で作られ、投稿や認証の更新が失敗したときはオーナーにメールが飛びます。</p>
<h2 id="コーポレートサイトのリニューアル">コーポレートサイトのリニューアル</h2>
<p>WordPressサイトの既存CSSとテーマを解析してデザイントークンを抽出し（CSS変数、SCSS、W3C準拠JSONの3形式）、新しいトップページと事業紹介ページを実装して本番反映しました。ローカルのWordPress開発環境もdocker-composeで整備してあります。</p>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>Next.js / TypeScript / Python</li>
<li>PostgreSQL + PostGIS / Prisma</li>
<li>Google Apps Script / Google Maps API / Google Sheets API</li>
<li>Terraform / AWS (EC2 / App Runner / RDS) / WordPress</li>
</ul>

営業の工数を削減する社内システム・自動化ツールの開発。デリバリー営業自動化、SNS運用の自動化、コーポレートサイトのリニューアルなど。

株式会社alive

<p>GyazoチームでGyazoの開発に参加しています。機能ベースで開発するチームなので、フロントエンドからバックエンド、必要ならネイティブ側まで、その機能に必要な範囲は横断して担当します。プロダクトは複数のリポジトリで構成されていて、そのほとんどに関わっています。</p>
<h2 id="webアプリケーションruby-on-rails--typescript">Webアプリケーション（Ruby on Rails / TypeScript）</h2>
<p>一番長く関わっている領域です。権限まわりやプランに応じた機能の出し分けなど、プロダクトの土台に近い部分を継続的に実装しています。</p>
<p>あわせて、未使用コードの整理やツールチェーンの移行など、歴史のあるコードベースをどう現代化するかという技術負債の仕事も進めています。移行の方針は調査した上で提案としてまとめ、チームで合意してから着手する形を取っています。</p>
<h2 id="デスクトップ--モバイルクライアントswift">デスクトップ / モバイルクライアント（Swift）</h2>
<p>撮影まわりの機能追加と、操作性やクラッシュの改善を担当しました。デスクトップアプリはWebと違ってリリースを巻き戻せないので、変更の入れ方は慎重になります。</p>
<h2 id="メディア処理その他go-ほか">メディア処理・その他（Go ほか）</h2>
<p>動画や画像の変換まわりの機能、ブラウザ拡張や決済まわりの改修など、必要に応じて担当範囲を広げています。</p>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>TypeScript / React</li>
<li>Ruby on Rails</li>
<li>Go</li>
<li>Swift (macOS / iOS)</li>
</ul>
<h2 id="学び所感">学び・所感</h2>
<ul>
<li>「機能ベースで縦に切る」開発スタイルは、特定のレイヤーだけ得意な状態を抜けて、プロダクトとして責任を持つ感覚が育つ</li>
<li>大きなプロダクトに対しても、堅牢さと開発スピードを両立させる進め方を学んだ</li>
<li>社内のドッグフーディング文化や BizDev とのコミュニケーション設計など、技術以外の学びも多い</li>
</ul>

Gyazoチームで機能ベースの開発に参加。Webからネイティブまで、機能に必要な範囲を横断して実装しています。

株式会社Helpfeel

<p>AIマーケティング分析・クリエイティブ提案プラットフォームの開発を中心に参加しています。別案件として採用SaaSの開発にも入っており、あわせてClaude Codeを使った自動PRレビューや社内スキル共有など、チームの開発基盤の整備も担当しています。</p>
<h2 id="aiマーケティングプラットフォーム">AIマーケティングプラットフォーム</h2>
<p>Google広告やMeta広告のデータを分析して、クリエイティブの提案まで行うプラットフォームです。Next.js (App Router) + Prisma のmonorepo構成で、クリエイティブ制作まわりを中心に実装しました。</p>
<ul>
<li><strong>クリエイティブ制作機能</strong>: バナー生成と複数画像の同時生成。生成の前段に、選択式と自由入力を組み合わせたヒアリングUIを置いて、ユーザーの意図を構造化してからモデルに渡す形にした。画像生成モデルは途中でreplicateからnano bananaに切り替えている</li>
<li><strong>動画生成</strong>: Remotionを使って、生成した素材から動画を書き出す機能</li>
<li><strong>プランと課金まわり</strong>: プラン別の機能制御（BASICプランへのクリエイティブ機能追加）、招待フローのバグ修正、トランザクションのtimeout延長</li>
<li><strong>Google広告の審査対応</strong>: OAuthで「確認されていません」と出る問題の調査、Search Consoleの所有権確認、プライバシーポリシーの作成。広告APIを本番で使うための審査は、コードより手続きが重かった</li>
<li>予算やCPA入力のカンマ区切り表示、通貨入力などの細かいUX改善</li>
</ul>
<h2 id="採用saasの開発">採用SaaSの開発</h2>
<p>別案件として、運営管理者、企業、求職者の3ロールを持つ採用SaaSの開発に参加しています。担当が多いのはAI面接まわりですが、課金やTerraformまで必要なところは全部触ります。気づいたらコミット数はリポジトリで一番多くなっていました。</p>
<ul>
<li><strong>AI面接の音声まわり</strong>: TTS（音声合成）を実物のTTSに置き換え、停止操作やデフォルトピッチの調整に対応。文字起こしは質問の文脈を渡すことと音声の前処理で精度を上げ、STT失敗は構造化ログにして追えるようにした</li>
<li><strong>同意と通知</strong>: 規約同意モーダルを必須と任意の2段構成にし、非同期面接では個別同意に対応。面接完了時は求職者と企業の両方にHTMLメールで通知。結果の外部共有リンクも実装</li>
<li><strong>求職者・企業向け機能</strong>: Googleログインの追加、求人票のフィルタと掲載数集計、動画フィードの改善、企業向け課金プランと管理画面の利用枠設定UI</li>
<li><strong>インフラとコード品質</strong>: Terraformの本番drift解消とproduction用workflow、コード規約をbackend / frontend / infraの3層で導入してESLintで機械検知、URLスキーム検証によるXSS防止</li>
</ul>
<h2 id="開発基盤">開発基盤</h2>
<ul>
<li>GitHub ActionsでClaude Codeの自動PRレビューを構築。PRを開くと自動でレビューが走り、メンションで追加の指示も出せる</li>
<li>社内でClaude Codeのスキルや設定を共有するためのリポジトリ整備（dotfiles型の配布、マーケットプレイス）</li>
<li>SupabaseとVercelのインフラをTerraformでコード管理する構成を作った</li>
</ul>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>Next.js / TypeScript / React</li>
<li>PostgreSQL / Prisma</li>
<li>OpenAI API / Google Ads API / Meta API</li>
<li>Firebase Auth / Dify / GCP (Cloud Run / Cloud Armor)</li>
<li>Remotion / Terraform / Claude Code</li>
</ul>

AIマーケティング分析・クリエイティブ提案プラットフォームと採用SaaSの開発、Claude Codeを使った開発基盤の整備。

moji株式会社

<p>動画配信プラットフォームのOWNEDを開発しています。マルチテナント構成のB2Bサービスで、全体管理者、クライアント管理者、視聴者の3ロールがあり、クライアント企業ごとにテナントを提供する形です。文字起こしやRAGチャットなど、AIまわりはほぼ自分が作りました。インフラや認証などの基盤も担当しています。</p>
<h2 id="文字起こしパイプライン">文字起こしパイプライン</h2>
<p>アップロードされた動画から文字起こしを作る一連のパイプラインです。</p>
<ul>
<li>AWS Transcribeで文字起こし。Transcribeの2GB制限に当たる動画があるので、先に音声だけ抽出してから投げるパイプラインにした</li>
<li>手動起動用のAPIと管理画面のボタン、完了を受けるWebhookを用意</li>
<li>話者分離の結果からSpeakerレコードを自動生成し、動画フレームのOCRと顔検出を組み合わせて話者名の候補を自動で付ける。登壇者のプロフィールはClaudeとWeb検索で自動生成する仕組みも作った</li>
</ul>
<h2 id="視聴者向けaiチャット">視聴者向けAIチャット</h2>
<p>動画の内容について視聴者が質問できるチャットです。</p>
<ul>
<li>文字起こしをembedding化して pgvector に保存し、RAGで回答を生成</li>
<li>チャットUIはストリーミング対応。回答には該当箇所の時刻リンクが入り、クリックすると動画がその位置にシークする</li>
<li>話者認識のembeddingを使ってRAGの精度を上げる改善も入れた</li>
<li>Redisベースのレート制限とクォータ管理で、テナントごとの利用量を制御</li>
</ul>
<h2 id="基盤運用">基盤・運用</h2>
<ul>
<li>Cognito認証、S3 + CloudFrontの配信、ECSデプロイ。ハードコードされていたクレデンシャルをIAM Roleに移行</li>
<li>GDPR対応として、登壇者が自分の情報を削除できるオプトアウトフローを実装。AI生成プロフィールにはソース信頼度の防御層を入れた</li>
<li>環境変数をローカルとAWS間で双方向同期するスクリプト、MUIからTailwindへのUI統一</li>
</ul>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>Next.js / TypeScript / Prisma</li>
<li>AWS (Transcribe / Cognito / S3 / CloudFront / ECS / Lambda)</li>
<li>pgvector / OpenAI / Claude API</li>
<li>Redis</li>
</ul>

動画配信プラットフォームOWNEDの開発。マルチテナントのB2B動画配信基盤で、文字起こしパイプラインやRAGチャットなど、AIまわりはほぼ自分が実装。

ONDO Inc.

<p>AIが電話応対を代行するプラットフォーム「MCPhone」の初期構築を単独で担当しています。電話の内容を聞き取るだけでなく、MCP経由でTableCheckやShopify、kintoneといった外部SaaSにアクセスして、調査や処理の実行まで完結させるのがコンセプトです。</p>
<h2 id="アーキテクチャ設計">アーキテクチャ設計</h2>
<p>ゼロからの立ち上げなので、まず全体の構造を決めました。3層に分けています。</p>
<ul>
<li><strong>Skill</strong>: Markdownで書く会話戦略。受付Skillが通話を受け、必要に応じて業務Skillを呼び出す</li>
<li><strong>Flow</strong>: YAMLで宣言的に書く業務処理。「予約変更」のような定型業務を手続きとして定義する</li>
<li><strong>MCP</strong>: 外部SaaSへのアクセス層。公開されているMCPをラップして使う</li>
</ul>
<p>会話（揺れる）と業務処理（揺れてはいけない）を分離するのがこの設計の狙いです。LLMに全部任せると業務処理の確実性が出ないので、Flowを宣言的に固めて、LLMはSkillの範囲で会話に集中させます。</p>
<h2 id="実装したもの">実装したもの</h2>
<ul>
<li><strong>Orchestratorコア</strong>: 通話セッション管理、Skillのスタック、Toolハンドラ、プロンプト組立。擬似LLMとモックMCPを組み合わせて「予約変更」シナリオをend-to-endで通した</li>
<li><strong>フロントエンド</strong>: React Flowによる業務フローの可視化、SkillとFlowの新規作成画面、レスポンシブ対応、ライト/ダークモード切り替え</li>
<li><strong>コード規約</strong>: Zodスキーマ駆動で型を生成し、<code>as</code> / <code>any</code> 禁止。UI / Domain / Container の3層分離、薄いhandler、Factory DIといった規約をCLAUDE.mdに定めた</li>
</ul>
<p>現状はOrchestratorコアが擬似実装でend-to-end動作確認済みの段階で、実LLM接続と音声I/O（Realtime API / SIP）はこれからです。</p>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>React / TypeScript / TanStack Query</li>
<li>Hono</li>
<li>Zod / React Flow</li>
</ul>

AI電話応対プラットフォーム「MCPhone」の初期構築を単独で担当。Skill×Flow×MCPの3層アーキテクチャ設計から実装まで。

合同会社草創技術

<p>受託案件のフロントエンド実装を主に担当し、現在は自社AI SaaS「開発AIコア」の開発にも参加しています。要件定義に近いところから入って、設計・実装・運用まで一貫して担当することが多いです。会社は途中で Tavern から株式会社バクに社名変更しました。この会社との付き合いは2023年からで、いま手元にある案件の中では一番長く続いています。</p>
<h2 id="コーポレートサイトのリプレイス">コーポレートサイトのリプレイス</h2>
<p>既存のペライチ／素のHTML+CSSのサイトをNext.jsに置き換えました。フロントエンドの設計から実装まで担当。規模は小さい案件ですが、この会社で最初に受けた仕事で、ここから継続的に案件をもらう関係になりました。</p>
<h2 id="ロードサービス系の管理システム構築">ロードサービス系の管理システム構築</h2>
<p>フロントエンドの設計から実装までを担当しました。バックエンドは別のメンバーが担当していたので、OpenAPIスキーマからOrvalで型とAPIクライアントを自動生成する構成にして、スキーマを境界にした分業で結合コストを下げました。管理システムなので画面数が多く、型生成の仕組みを最初に整えたことが後半の実装速度に効きました。</p>
<h2 id="設計図のaiレビューシステムai検図saas">設計図のAIレビューシステム（AI検図SaaS）</h2>
<p>図面や仕様書などの設計成果物間の整合性をAIでチェックするSaaSです。検図業務の効率化が狙いで、最初のターゲット顧客向けのMVPを作るフェーズから参加しました。フロントエンド全般を担当しています。</p>
<ul>
<li>検査セッションの新規作成: ファイルアップロードと検査項目選択のUI、セッションIDベースのルーティング</li>
<li>検査は非同期で走るので、ステータスをポーリングして pending / 完了 / エラーを出し分けるフローを実装</li>
<li>図面の一部だけを検査対象にするための画像クロップ機能（react-image-crop）。切り抜き範囲の境界チェックまわりで手を焼いた</li>
<li>検図履歴と結果ページ、指摘内容のMarkdown表示、PDFダウンロードと印刷機能</li>
</ul>
<p>DXFやTIFFといったCAD由来のフォーマット、三角図法のようなドメイン固有の概念が出てくる領域で、業務ドメインを理解しながらUIに落とす仕事でした。</p>
<h2 id="開発aiコアの開発">「開発AIコア」の開発</h2>
<p>LLMで成果物を解析して指摘（リスク）を生成するSaaSです。トライアル顧客と一緒にPSFを検証しているフェーズのプロダクトで、機能開発と運用の両方をやっています。本番環境はSaaS向けのGCP Cloud Runと、セルフホスト顧客向けのAWS ECSの2系統あり、変更を入れるときは両方への配線まで見ます。</p>
<ul>
<li>招待・認証フローの刷新。以前は平文パスワードを配布する運用だったのを、メール送信 + 初期パスワード方式に作り直した</li>
<li>管理者向けメトリクス: 組織別の利用状況テーブル、組織別ユーザー数と週次クレジット集計。旧データモデルから新モデルへの移行リファクタも一緒にやった</li>
<li>PostHogを入れてプロダクト分析の土台を作った</li>
<li>OSV-Scannerが検出する脆弱性の継続対応。protobufjsのCritical含む17件の一括対応や、pnpm overridesでのCVEピン止め運用など</li>
<li>「リスク」を「指摘」に変えるような用語統一、重要度ラベルの算出ロジックなど、細かいUI品質の改善を積んでいる</li>
</ul>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>Next.js / React / TypeScript</li>
<li>Prisma / PostgreSQL</li>
<li>Orval</li>
<li>GCP Cloud Run / AWS ECS / Terraform / SOPS</li>
</ul>
<h2 id="学び所感">学び・所感</h2>
<ul>
<li>受託の現場では、要件定義〜納品までのリードタイムが短い案件も多く、PoCスピード重視の進め方が身についた</li>
<li>AIを組み込んだプロダクトは、毎回同じ出力が返ってこない前提でUIを設計する必要があり、そこが一番難しいと実感</li>
<li>OSV-Scannerが検知する脆弱性を潰し続ける役目をやって、依存関係の管理は根性ではなく仕組みで回さないと破綻すると分かった</li>
</ul>

受託案件のフロントエンド実装から、自社AI SaaS「開発AIコア」の開発まで。コーポレートサイトのリプレイス、業務システム、AI検図SaaSなど。

Tavern株式会社（現 株式会社バク）

<p>エンタープライズ向けの情報収集・要約AIシステムの開発に参加しました。複数の公開サイトに分散している情報を自動クローリングで集め、PDFやHTMLからテキストを抽出して、AWS Bedrock (Claude) で要約レポートを生成してメール配信するシステムです。期間は短めで、やったことの大半はバックエンドの障害調査と改善です。</p>
<h2 id="504-gateway-timeout-障害の根本原因特定">504 Gateway Timeout 障害の根本原因特定</h2>
<p>URL登録時にAPIが504を返す障害があり、その調査を担当しました。仮説を立てて段階的に切り分けていきました。</p>
<ol>
<li>まずJWKS取得（認証）のタイムアウトを疑い、取得タイムアウトを短縮 → 再発</li>
<li>次にDB接続プールを疑い、NullPoolとQueuePoolの切り替えやpool_timeoutを調整 → 再発</li>
<li>asyncpgに <code>command_timeout</code> を入れて診断ログを仕込んだところ、クエリ実行そのものがハングしていると判明</li>
</ol>
<p>最終的に、Aurora Serverless v2 が低ACU（0.5）までスケールインした状態でクエリ処理がハングするのが根本原因だと確定しました。対策として command_timeout の設定、最小ACUの引き上げ、フロント側のリトライを提案し、一連の流れを調査レポートにまとめて納品しています。</p>
<h2 id="urlインポートの非同期化">URLインポートの非同期化</h2>
<p>PDFのインポートが同期処理でタイムアウトの温床になっていたため、EventBridge + Lambda の非同期構成に移し、さらに実行時間の制約から ECS Fargate に移行しました。途中、Lambdaがモジュール未同梱と環境変数不足で全滅していた問題も特定しています（デプロイCIのRevert放置が原因でした）。</p>
<h2 id="クローラーの信頼性改善">クローラーの信頼性改善</h2>
<ul>
<li>iframe / embed / object の中にあるPDFの検出</li>
<li>HTMLの取得制限を広げつつ、メインコンテンツを優先して抽出する処理</li>
<li>クエリ文字列付きPDF URLの判定修正、開催スケジュール抽出の改善</li>
</ul>
<p>「未来の開催予定を検知して当日に再クロールする」という追加要望については、既存のバッチ設計で既に実現されていることを調査で示し、追加実装なしで済ませました。作らずに済むことを示すのも調査の仕事のうちです。</p>
<h2 id="pocのフロントエンド実装">PoCのフロントエンド実装</h2>
<p>別案件として、チャットボットとファイルストレージ管理を中心にした画面一式のPoCを単独で実装しました。実働1週間ほどの短期案件です。</p>
<ul>
<li>TOP画面、ファイルアップロード画面、ドキュメント一覧、チャットボット画面、チャット一覧をNext.js (Pages Router) で実装</li>
<li>提供された開発ガイドを読み込み、画面仕様書に沿ってUIを書き出した</li>
<li>PoCのゴールが「動く画面で仕様の妥当性を確認すること」だったので、API結合はせずモックで動くプロトタイプとして納品。機能要件書に画面ごとの工数見積も記載した</li>
</ul>
<p>短期のPoCは「どこまで作らないか」の判断が全てで、この案件ではモック納品と割り切ったことで1週間に収まりました。</p>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>Python / FastAPI / SQLAlchemy (async) / Alembic</li>
<li>AWS (Bedrock / Lambda / ECS Fargate / Aurora PostgreSQL Serverless v2 / EventBridge / SES)</li>
<li>Terraform</li>
<li>Next.js / TypeScript / Tailwind CSS</li>
</ul>

エンタープライズ向け情報収集・要約AIシステムの開発と、PoCのフロントエンド実装。障害の根本原因特定、クローラー信頼性改善、非同期アーキテクチャへの移行など。

株式会社FourYou

<p>コミュニティ設計を支援するSaaSの開発に参加しました。コミュニティの設計書、KPI、ペルソナ（参加者像）、メンバーインタビューといった要素を一つのツールで管理するプロダクトです。バックエンドはLaravelのAPI、フロントはReact + Viteの構成で、KPIまわりを中心にほぼ全部の画面を触りました。コミット数はリポジトリで一番多いです。</p>
<h2 id="kpi機能">KPI機能</h2>
<p>このプロダクトの中で一番作り込んだ領域です。</p>
<ul>
<li>KPI設計フロー（設計書ダッシュボード）のコンポーネントとルーティングを実装</li>
<li>KPIカードのクリックからの遷移ロジック、並び替え、指標の更新とマイグレーション</li>
<li>ダッシュボードのグラフは、値に応じてY軸の上限と目盛りステップを動的に計算するようにした。固定軸だと小さいコミュニティのKPIが張り付いて見えなくなるため</li>
</ul>
<h2 id="設計書ダッシュボード">設計書・ダッシュボード</h2>
<ul>
<li>設計書詳細画面の遷移ロジックとステータスアイコン、コミュニティ情報（タイプ・開始日）のコンポーネント</li>
<li>ステータス管理機能: seederでの初期データ、各ページからのステータス更新API連携</li>
<li>共通言語やバリュープロポジションの分類フィールド、改行の反映など、テキスト中心のドメインならではの細かい対応</li>
</ul>
<h2 id="認証組織設定">認証・組織設定</h2>
<ul>
<li>JWTの有効期限まわりの調整（12時間固定、型キャストの修正）と組織向け認証フック</li>
<li>組織ロゴのアップロード。パスの持ち方をAPIエンドポイントでURL生成する形に改善し、multipart/form-dataに対応</li>
</ul>
<h2 id="その他">その他</h2>
<ul>
<li>DBのstring→text型変更（文字数制限の緩和）などのマイグレーション、不正JSONレスポンスのエラーハンドリング</li>
<li>コーポレートサイト（Next.js）の軽微な改修</li>
</ul>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>Laravel (PHP) / MySQL / Swagger</li>
<li>React + Vite / TypeScript</li>
<li>Next.js（コーポレートサイト）</li>
</ul>

コミュニティ設計支援SaaSの開発。KPI設計フローとダッシュボードを中心に、ほぼ全部の画面を実装。

株式会社jinen

<p>セキュリティレビューAIのPoCから始まり、セキュリティアセスメント・教育プラットフォームの開発と、別クライアント向けの推し活ロイヤリティプラットフォームの構築を担当しました。2案件で性格が全然違って、前者は既存プロダクトの機能開発と運用、後者はゼロからの立ち上げです。</p>
<h2 id="セキュリティアセスメント教育プラットフォーム">セキュリティアセスメント・教育プラットフォーム</h2>
<p>セキュリティのアセスメントと社内教育をまとめて提供するプラットフォームです。フロントエンド、バックエンド、RAGサービスの3つのリポジトリすべてに入っていて、稼働が一番多かったのはフロントエンドでした。</p>
<ul>
<li><strong>フロントエンド（Next.js）</strong>: アセスメント画面と教育コンテンツ画面（マインドマップ、アジェンダ、インシデント詳細）の実装と改修。マインドマップは生成に時間がかかるので、ローディングとポーリングで完了を待つUIにした。ほかに結果テーブルのCSV出力、テナント判別方式をドメインベースと環境変数ベースで切り替えるリファクタなど</li>
<li><strong>バックエンド（Express + Prisma）</strong>: 管理画面向けのアセスメント機能、インシデント教育のフロー、アンケート管理。Entra ID移行に伴うレガシー認証の削除。コンテナのリソース監視機能（cgroupベースのメトリクス取得）とテーブル設計</li>
<li><strong>RAGサービス（FastAPI + Celery）</strong>: PDFのセキュリティガイドラインを解析してベクトルDBを作り、仕様書のレビューを自動生成する部分。AI側とアプリ側の繋ぎ込み、トークン数超過時のエラーハンドリング、Celery Workerのリソース監視をAzure Container Apps対応で作り直した</li>
</ul>
<h2 id="推し活ロイヤリティプラットフォーム">推し活ロイヤリティプラットフォーム</h2>
<p>Wixで運用されていたチケット販売とグッズ受注を、決済やポイントまで一元化した自社システムに移行するプロジェクトです。設計から入って、DB設計、認証（Better Auth + LINE Login、運営とインフルエンサーでロール分離）、バックエンドAPI（Hono）、フロントエンド（React + Vite）まで一人で通して実装しました。</p>
<ul>
<li>出演者管理、商品売り行き集計、イベント横断の商品一覧、連日開催イベントの日程CRUDなど、ドメインのAPIと画面を一式</li>
<li>インフラはTerraformでGCPを構築し、GitHub ActionsでCI/CDを整備</li>
<li>環境変数はdotenvxで暗号化してリポジトリ管理に一元化、セットアップはMakefileで一発にした</li>
</ul>
<p>立ち上げ案件だったので、コードよりも先に「運用が回る形」を決めるのに時間を使いました。</p>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>Next.js / React / TypeScript</li>
<li>Node.js (Express / Hono) / Prisma / PostgreSQL</li>
<li>Python / FastAPI / Celery / Azure OpenAI / Cosmos DB</li>
<li>Azure Container Apps / GCP Cloud Run / Terraform</li>
<li>Stripe / Better Auth / Supabase</li>
</ul>

セキュリティアセスメント・教育プラットフォームと、推し活ロイヤリティプラットフォームの開発。フロントエンドを中心に、バックエンドやRAG、インフラまで担当。

株式会社Xer

<p>勤怠・シフト管理システムの構築の全般を担当しました。管理者が販売員のシフト希望を集めて自動で割り振るシステムで、実装だけでなく、エンドユーザーとの打ち合わせや対応状況の報告書作成まで受け持ちました。</p>
<h2 id="何を作ったか">何を作ったか</h2>
<ul>
<li><strong>シフト提出から確定までのフロー</strong>: 募集期間を起点に、販売員がシフト希望を提出し、管理者が自動割当をかけて一括確定する一連の流れ。自動割振で弾かれた希望はその理由と一緒に表示して、管理者が手で調整できるようにした</li>
<li><strong>勤務調整マトリクスUI</strong>: 店舗×日付のマトリクスで、セルをクリックすると編集モーダルが開く。基準月の期間表示や週送りにも対応。このシステムで一番操作頻度が高い画面なので、作り込みに一番時間を使った</li>
<li><strong>マスタ管理</strong>: 企業、エリア（サブエリア含む）、店舗のCRUD。エリア管理者ロールと編集ログも用意した</li>
<li><strong>CSV連携</strong>: 推奨メンバー、店舗、POS売上の取込とエクスポート。既存の運用がExcelベースだったので、移行期はCSVで橋渡しする設計にした</li>
</ul>
<h2 id="運用と品質">運用と品質</h2>
<ul>
<li>pintと型チェックのCI、テストを整備。JWTの期限切れ時はログイン画面に戻す、提出ボタンの連打を防ぐなど、実運用で踏む問題を潰していった</li>
<li>デプロイ先はXServerで、CD失敗の原因（host鍵の扱いやseedの分離）も直した</li>
<li>クライアントからのフィードバックには打ち合わせベースで継続対応し、「対応状況ご報告書」を作って進捗を共有する形をとった</li>
</ul>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>Laravel (PHP)</li>
<li>React + Vite / TypeScript / Tailwind CSS</li>
<li>PostgreSQL</li>
<li>XServer</li>
</ul>

勤怠・シフト管理システム構築の全般を担当。Laravel + React + Vite の構成で、実装から顧客折衝や報告書作成まで。

株式会社アリアーレ

<p>大学に入って最初に関わったNPOで、長くゆるく関わっていました。学生向けのプログラミング教室イベントのスタッフや、自社サービス・業務委託の開発をお手伝いしていました。</p>
<h2 id="やったこと">やったこと</h2>
<ul>
<li>プログラミング教室イベントのスタッフ運営</li>
<li>自社サービスや業務委託案件の開発に、時々参加</li>
<li>学生時代から「人に教える」「コミュニティを運営する」経験を継続的に持つことができた</li>
</ul>
<h2 id="学び所感">学び・所感</h2>
<ul>
<li>学生の頃から「教える側」に回る機会を持つと、自分の理解の浅さに気づける</li>
<li>営利の事業会社とは違う、NPO ならではの目線でプロダクト・コミュニティ運営を見られた</li>
</ul>

大学生向けのプログラミング教室イベントのスタッフや、自社サービス・業務委託の開発に時々関わっていました。

NPO法人Clipper

<p>業務委託として自社サービスの開発に参加していました。DB設計から実装まで全てを幅広く担当しました。</p>
<h2 id="やったこと">やったこと</h2>
<ul>
<li>自社プロダクトの開発全般
<ul>
<li>DB設計</li>
<li>フロントエンド実装</li>
<li>バックエンド実装</li>
</ul>
</li>
<li>主に関わったプロダクト
<ul>
<li>ザ・スタンプラリー</li>
<li>ザ・クーポン</li>
</ul>
</li>
</ul>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>Nuxt2 / Nuxt3</li>
<li>Firebase</li>
<li>TypeScript</li>
<li>mapbox</li>
</ul>
<h2 id="学び所感">学び・所感</h2>
<p>藤原さんにはかなりお世話になったので、ボリュームを持って書きたい。
一旦箇条書きで出来事をまとめる</p>
<p>大学３年生から大学卒業間際まで</p>
<h2 id="出会い">出会い</h2>
<p>前職を辞めた時に、XのDMでお誘いをもらった
フロントエンドの技術スタックとはかなりマッチしていた&#x26;個人開発でもLINE messaging APIを触っていたので、楽しそうだろうなっていう気持ちでいっぱいでした。</p>
<p>面白いのは、自分のプログラミングの師匠(ようかん)[]と一緒に働くということ
高校から今でも仲の良い友達と一緒に働くという経験がすごく新鮮で面白いなと思いました。
しかし、一方で気まずくなったらどうしようという思いもありました。それが気まずくならないように、頑張ろうという気持ちには自分はなりました。</p>
<h2 id="学んだこと">学んだこと</h2>
<p>Nuxt3とFirebaseという技術スタックでした。</p>
<p>機能を作るというところを一貫して任せてもらえたのはいい経験だったと思います。</p>
<p>機能から逆算して、DBの設計はこうする必要がある、APIの改修は必要なのか、フロントエンドはデザイナーさんがデザインしてくださったものに合わせながら実装をするということは、エンジニアだったら必要な経験だったと思います。</p>
<p>FirebaseはNoSQLなので、一般的なDBのベストプラクティスが当てはまらないところはありましたが、そういう時はみんな快く相談に乗ってくれたりしてくださったのはとてもいい組織だったなと思います。</p>
<p>ここでの一貫した開発した経験が就活でも話す話題となった、なぜそのようにしたのかなどを話せる範囲で話すことで色んな面談の責任者と話すことができました。
ちゃんと意図を持った開発経験が積めるのは良かったです。</p>
<p>業務委託として、一人でDB設計から実装まで通すことが多く、自走力が育った
位置情報を扱う機能もあったので、mapboxとFirebaseの組み合わせを実運用で学べたのは良かったのかなと思います。</p>
<p>※オフィスの写真を入れたい</p>
<p>当時はオフィスが東京で自分は関西大学に通っていたので、リモートで勤務をしていました。時々東京でご飯会などが開催される時にオフラインで行ってました。</p>
<p>※画像を入れる</p>
<h2 id="最後に">最後に</h2>
<p>自分が働いた中でかなり長いことお世話になったので、とても感謝の気持ちでいっぱいです！</p>
<p>自分は今では仕事での関わりはないのですが、プライベートでも誘ってくださっているので、交流があるのはとてもありがたいことだなと思います！🙏</p>

自社サービスの開発を、DB設計から実装まで幅広く担当。FirebaseとNuxt2/Nuxt3を使い、ザ・スタンプラリーやザ・クーポンなどの開発に携わった。

株式会社ohmygod

<p>Tech Jobで一ヶ月インターンに参加していました。プロダクトにアニメーションの追加を担当しました。</p>
<h2 id="やったこと">やったこと</h2>
<ul>
<li>自社システムへの View Transition API の組み込み
<ul>
<li>社内に知見がない API を扱うため、既存のコードやシステムを理解した上で実装</li>
<li>仕様策定〜実装〜社内共有まで</li>
</ul>
</li>
</ul>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>React</li>
<li>View Transition API</li>
<li>React Router</li>
</ul>
<h2 id="学び所感">学び・所感</h2>
<ul>
<li>「社内に知見がない技術」を扱う際の進め方 (仕様の読み込み・社内デモ・既存コードへの影響範囲調査) を体験できた</li>
<li>一ヶ月という短期間でも、組織の中で一つの技術を伝える役を担うことができた</li>
</ul>

Tech Jobで一ヶ月インターンに参加。自社システムへのViewTransition API組み込みを担当し、社内に知見がないAPIを既存コードと突き合わせて実装。

株式会社CyberAgent

<p>短期インターンとして参加していました。</p>
<h2 id="やったこと">やったこと</h2>
<ul>
<li>自社サービスの一部のフロントエンド改修</li>
<li>Nuxt2 と PHP のコードベースに触れる</li>
</ul>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>Nuxt2</li>
<li>PHP</li>
</ul>

短期インターンとして参加。Nuxt2とPHPで自社サービスの一部に触れた。

株式会社Beenos

<p>サマーインターンに参加していました。Stockチームで、新規機能の開発をさせてもらうことができました。</p>
<h2 id="やったこと">やったこと</h2>
<ul>
<li>自社システムの新規機能の作成
<ul>
<li>フロントエンドの実装</li>
<li>APIの実装と設計</li>
</ul>
</li>
</ul>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>React + Vite (フロントエンド)</li>
<li>Go (バックエンド)</li>
</ul>
<h2 id="学び所感">学び・所感</h2>
<ul>
<li>短期間ながら、フロントエンドと API の両方を担当したことで、設計の境目に対する感覚が育った</li>
<li>短期で「価値を出して帰る」サマーインターンの特性上、要件をどう絞り込んで実装するかという判断の練習になった</li>
</ul>

サマーインターンとして、Stockチームで自社システムの新規機能の作成に参加。フロントエンドの実装からAPIの実装・設計まで担当。

株式会社BuySell Technologies

<p>この頃はインターン生として関わりました。フロントエンドエンジニアとして、自社サービス「Quden」の開発に携わっていました。</p>
<h2 id="やったこと">やったこと</h2>
<ul>
<li>Qudenの新規画面の作成</li>
<li>ユーザー数を増やすための施策の実装</li>
<li>動画を扱うプロダクトでフロントエンドの実装</li>
</ul>
<h2 id="使った技術">使った技術</h2>
<ul>
<li>Next.js</li>
<li>Nest.js</li>
<li>TypeScript</li>
</ul>
<h2 id="学び所感">学び・所感</h2>
<p>ZipunkのQudenに参加させてもらったのは、大学2回生の時ですかね？</p>
<p>初めてきちんと強いエンジニアが整備して、アーキテクチャーを組んだプロダクトに出会えて、衝撃と絶望を感じました。</p>
<p>しかし、正直この頃の自分は技術力がなく、ついていくことに必死でした。もしかしたら、周りからしたらついていくこともできていなかったのかもしれません。</p>
<p>技術的には動画を扱っていたので、かなり興味があり、全部を理解するのは無理でも、少しでもと思っていましたが、なかなか自分の血肉にすることはできませんでした。</p>
<p>Qudenでは、コミュニケーションや1on1などの部分ではかなり学びがあって、すごい良かったなと思っています。印象に残っているのは安住さんが自分の上長だったのですが、親身になって、ペアプロなどをしてくださったのは覚えています。</p>
<p>CEOの兵頭さんの人としてのあり方はとても学びになるものがありました。
曖昧で意味が違っていたら申し訳ないのですが、</p>
<p>[スタートアップにいるならもしかしたら沈みゆく船の時もあるかもだけど、その時は一緒に乗った船なんだから、途中で抜けるのではなく、最後まで共にする奴になってくれ]っていうような言葉を聞いて、自分は感動しました。
自分もこんなことを言えるでっかい男になりたいと。</p>
<p>こう見ると、全然自分はGiveできるような技術力がなくて申し訳なかったのですが、またどこかで一緒に開発できたら最高に嬉しいなって思います。</p>

動画関連の自社サービス「Quden」のフロントエンド開発。初めて「強いエンジニアが整備したプロダクト」に触れた現場。

職歴