Live2D Overlay Portfolio

課題・制作の目的

配信画面を題材に、Live2D表示・コメント・演出を組み合わせたブラウザUIを検証すること。

担当範囲

UI設計 / 実装

技術スタック

• Next.js
• TypeScript
• pixi.js
• pixi-live2d-display
• Socket.IO
• Vercel

実装内容

Next.js + pixi.js（pixi-live2d-display）を用いて構築した配信オーバーレイ UI。Live2D モデル表示、リアルタイムコメント連携、ハートパーティクル演出などを組み合わせ、配信画面向けの表現を検証しています。実案件ではなく、VTuber / エンタメ系案件への接続を意識した自主制作です。

• Live2D モデル表示をブラウザ上で実装
• リアルタイムコメントと演出エフェクトを統合
• 配信画面向けのビジュアル表現を検証

確認できる成果

VTuber / 配信文脈に接続できる UI 実装力を、自主制作として提示。

確認対象は以下の公開サイト・デモ・ソースコードと記載した実装範囲です。売上・問い合わせ数・工数削減率の測定値は掲載していません。外部デモは公開状況によって利用できない場合があります。

関連サービス

• MVP・新規Webサービス開発 →