Now I have a solid understanding of ラップムシ's features. Let me create the Roblox UI mockup design.

Now let me read the existing files before building the mockup.

Now let me build the Roblox-style UI mockup. I'll create an interactive prototype showing both Rap Mode and DJ Mode with a 3D/blocky Roblox aesthetic.

Now let me update the layout and create all the components:

Now let me update the font references in globals.css:

Now let me create the components. First, the shared Roblox UI building blocks:

Now the Rap Mode component:

Now the DJ Mode component:

Now the top HUD bar and character display:

Now the main page that ties everything together:

Roblox向けの「ラップムシ」UIコンセプトを構築しました。以下が主な内容です:

• Rap Mode: 7ページのフレーズボタン（タップでラップ）、ページナビゲーション、自動ラップ機能、ビートコントロール（再生/停止、音量スライダー）
• DJ Mode: 2つのターンテーブル（クリックでスクラッチ演出）、トラック選択、クロスフェーダー、ボリュームメーター
• Robloxスタイル: ブロック風の3Dボタン（押し込みシャドウ）、ヘッドホン付きキャラクター、ダークな背景にビビッドなグリーン/パープル/イエローの配色、ドットグリッドパターン

これはRoblox Studio内で実装する際のデザインリファレンスとして活用できるインタラクティブなモックアップです。実際のRoblox実装ではLuaスクリプトとUI要素（ScreenGui, Frame, TextButton等）に変換する必要があります。