ライブ配信視聴画面 UIコーディング

対応の内容

困っていたこと

配信サービスの視聴ページに高級感のあるUIを実装したかったが、配信映像・チャット・ギフト・ライブログ・キャストプロフィールといった多機能を1画面に収めつつ、PCとスマホで最適なレイアウトに切り替える設計が必要だった。さらに、運営側の既存システムへ後から組み込めるよう、再利用しやすいコンポーネント分割が求められた。

やったこと

ヘッダー・動画プレイヤー・チャット・ギフトパネル・ライブログ・キャストプロフィール・タブパネル・ネオンフレームの8コンポーネントに分割し、Propsで内容を差し替えられる汎用設計で実装。紫×ピンクのネオン＋ガラスUIをTailwind CSSで構築し、PCは映像＋サイドパネルの複数カラム（小・シネマ・全画面の表示切替）、スマホはCHAT/GIFT/LOGのタブ切替でレスポンシブ対応。チャットの表示ON/OFFに連動してギフト・ログ枠が伸縮するアニメーションも実装した。

どうなったか

運営側の既存システムへ移植しやすいコンポーネント単位で納品。背景の透過・吹き出しの配色など複数回のデザインフィードバックにも迅速に対応し、その後の継続案件（サービス公式サイトのリニューアル）受注につながった。