スポーツ興行における ユーザー参加型コンテンツの制作事例 - BOOSTER’S CAM -

━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【千葉ジェッツ演出】まさかの作動せず！？
失敗を乗り越えて実現した、BOOSTER’S CAMの制作秘話！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【出演】
谷 賢史 / Satoshi Tani
デザイン本部 テクニカルデザイン室 室長

佐藤 太一 / Taichi Sato
開発本部 たんぽぽ室 インフラグループ マネージャー

▼Cocoda記事
アリーナで繋がる観戦体験。MIXIのデザインと技術の共創で生まれた「BOOSTER’S CAM」について
https://cocoda.design/satoshitani/p/p70f2adb282fa
━━━━━━━━━━━━━━━━━━━━━━━━━━━━
◇◆◇ Information ◇◆◇
note | MIXI DESIGN
https://note.com/mixi_design/
Cocoda | MIXI DESIGN
https://cocoda.design/teams/mixi-design
Youtube | MIXI TECH&DESIGN
https://www.youtube.com/@mixi_developers
ミクデザキャンプ
https://mixi-design-camp.mixi.co.jp/
Slide (SpeakerDeck)
https://speakerdeck.com/mixi_design/

採用情報
https://mixigroup-recruit.mixi.co.jp/
Webサイト
https://mixi.co.jp/

Transcript

1. スポーツ興⾏における ユーザー参加型コンテンツの制作事例 - BOOSTER’S CAM -
2. ⾃⼰紹介 • 全社横断的なデザイン組織 ◦ 経営戦略に基づく事業ポートフォリオのス ケールに貢献 ◦ クリエイティブで事業⽀援/事業価値を向上 • 多様な専⾨性で事業に貢献 ◦ 事業部と共に⼿や脳を動かし能動的に関わる 動きをする • 社内外のイベントや、ブランディングのクリエイティ ブにも関わる • 全社横断的なエンジニア組織 ◦ 会社の注⼒事業を中⼼に活動 ◦ 技術で事業を推進 • ⾼い専⾨性のエンジニアが在籍 ◦ 各事業部へ技術的サポート ◦ 事業を推進するための提案 • テクノロジーの全社最適と ケイパビリティの強化 開発本部 デザイン本部 ⾕ 賢史 / Satoshi Tani デザイン本部 テクニカルデザイン室 佐藤 太⼀ / Taichi Sato 開発本部 たんぽぽ室 インフラG/映像開発G
3. BOOSTER’S CAMとは、千葉ジェッツの新ホームアリーナ「LaLa arena TOKYO-BAY」 で実施されるホームゲームで、ファン∕ブースターがスマートフォンを使って撮影した映 像を、リアルタイムで⼤型ビジョンに投影する企画です。 BOOSTER’S CAMとは 仮置き（イメージ）
4. MIXIとしての⽬的 スポーツ観戦体験に、⾝近な⼈とワイワイ楽しめるコミニュケーションの時間を増やす • ワイワイ楽しめる時間、コミュニケーションする時間が増えるか （減らないか） • ⾝近な⼈を巻き込んでいるか （⼀⼈使いが主役になってないか） • エモーションを伴う質の⾼いコミュニケーションになっているか （予定調和、機能的になりすぎてないか） • すべてを包み込む設計か （特定の⽴場の⼈に排他的になっていないか？） MIXIは、スポーツ観戦を家族や友⼈と⼀緒に盛り上がれるコミュニケーションの場所として楽しめる、エンターテイ ンメントを提供する * 背景 指針‧考えの軸
5. MIXI 公式ホームページ 出典： https://mixi.co.jp/business/sports/
6. デザイン本部側の制作
7. ⽂字列リスト デザイン本部 千葉ジェッツふなばし 知財‧広報 デザイン本部‧開発本部 作成 確認 実装
8. デザインの制作と実装
9. ベースの作成 02 デザインの制作と実装 ベース作成 バリエーション 作成 千葉ジェッツふなばし デザイン本部 実装 デザイン本部‧開発本部 ※画⾯は開発中のものです
10. 02 デザインの制作と実装 ※画⾯は開発中のものです
11. 02 デザインの制作と実装 バリエーション作成 ベース作成 バリエーション 作成 千葉ジェッツふなばし デザイン本部 実装 デザイン本部‧開発本部 ※画⾯は開発中のものです
12. 02 デザインの制作と実装 ※画⾯は開発中のものです
13. 02 デザインの制作と実装 ※画⾯は開発中のものです
14. 実装 02 デザインの制作と実装 • モックアップの作成 • 基本的なコンポーネント構造の配置 • 基本的な動作 • 画⾯の遷移 • スマートフォン‧カメラの映像表⽰ • サーバとのリアルタイム通信の確⽴ と、メッセージ受信時の処理 • 映像送信の通信確⽴と送信処理 • 映像送信終了処理 • モックアップに対してUIスタイル調整 • Figmaからの素材の切り出し • Figmaを元にスタイルを反映 • スタイルのブラッシュアップ 開発本部 デザイン本部 ベース作成 バリエーション 作成 千葉ジェッツふなばし デザイン本部 実装 デザイン本部‧開発本部
15. 開発本部：システム実装について
16. 開発本部 たんぽぽ室 インフラグループ＆映像開発グループ について
17. BOOSTER'S CAM システム概要 LaLa arena TOKYO-BAY内のセンタービジョン に投影された２次元コードを観客が⾃⾝のス マートフォンで読み取ると、⾃撮り映像をセン タービジョンに対して映像送信出来るシステム です。 LaLa arena TOKYO-BAY内の映像⾳響室に設置 のシステムでは投影する映像の選択等を実施し ます インター ネット (クラウド) ビジョン⽤ 映像スイッ チャー 映像⾳響室
18. BOOSTER'S CAM：オンプレ側（映像⾳響室に設置のシステム） PGMout SDIoutからPanasonic映像SWに送出し ている映像 セルフィ映像候補 1-8 上段ATEMのボタンと連動 ATEMの映像選択ボタンで選択したもの が送出線へ送られる ATEM “KEY1 MIX”ボタン フタ(SCAN NOW!)とセルフィ映像切替 StreamDeck ロトリー操作 システムのステータス確認 “Initialize”(初期化)操作 HyperDeck フタ映像出⼒ ※ロトリー(再抽選)  選択された映像を⼊替えする処理 映像出⼒サーバ フタ映像出⼒
19. インターネット BOOSTER'S CAM：サーバ側（クラウド） • WebRTCベース • Breezecast(オンライン編集)/Moani(SMPTE2110toWebRTC)等の⾃社製ツールでWebRTCを利⽤しており開発下地はあった • BOOSTER'S CAM⽤の開発が短期間で出来たのは事前の開発実績によるところが⼤きい • ⾃社製SFU(Selective Forwarding Unit) • WebRTCのサーバ部分(SFU)を⾃社製で開発、諸々のカスタマイズが柔軟に対応できるようになった • 具体的には‧‧‧ • 抽選に当選した端末のみ映像データを送出する(全員の映像データ送出は数千⼈x数Mbpsに現地のキャリア網が追いつかない) • 上限値設定(既定値以上のアクセスは抽選に参加させない) • ランダム遅延挿⼊(スパイクアクセスを平準化し、システム負荷を下げる) • セキュリティ • ビジョンに投影する２次元コードは毎回異なるものを表⽰ • 当選者の中からオペレーターがビジョンに送出する⼈を選択、当選端末再抽選 　　　SFU 当選待機 グループ 当選 グループ 上限超え グループ ✕ 当選グループの中から１端末を選択 当選待機から当選に順次再抽選
20. 超短納期なスケジュール、⼤変な調整 • 構想⾃体は以前からあったがLaLa arena TOKYO-BAYでの初開催準備もあり全体的にスケジュールが後ろ倒しに • 多すぎるステークホルダー • 千葉ジェッツ、LaLa arena TOKYO-BAY(TOKYO-BAYアリーナマネジメント) • MIXI内３部署合同での開発(開発本部、デザイン本部、LX事業本部) • 実質的なスケジュール • 2024春頃 BOOSTER'S CAM(セルフィCAMシステム)を実施したい要望がでてくる • 2024/06 間に合わないので仕様決め開始 • 2024/07上旬 実施確定、開発開始 • 2024/08上旬 会社で初テスト、概ね正常動作 • 2024/08下旬 現地で初テスト、概ね正常動作 • 2024/09/15 プレシーズンマッチで初めての本番利⽤、正常動作せず • 2024/09下旬 ⼤急ぎで原因究明、対策、負荷試験を実施 • 2024/10/05 ホーム開幕戦で正常動作！！！ 詳細は次ページ
21. 2024/09/15 プレシーズンマッチで初めての本番利⽤、正常動作せず プレシーズンマッチにて、観客(BOOSTER)前で初披露するも動作せず‧‧‧ ※現地MCフォローで乗り切る（こんなに冷や汗をかいたのは数年ぶり） ▪主な原因 数⼗⼈単位での現地での動作実績は出来ていたが、数百⼈単位での負荷試験は出来ていなかったのが原因 （数百台の端末を利⽤しての実動作での負荷試験はなかなか難しい） ▪実施した対策 １．サーバソフトウェア軽量化/クライアントの設定⾒直しにより、スパイク耐性に強い状態にした    サーバ：軽量化、クライアント：ランダム遅延挿⼊によりサーバ側からみた瞬間同時接続の負荷軽減 ２．クラウド側のサーバスペックアップにより各耐性のUP ３．同時接続ユーザ数の接続制限 ４．オンプレ側のシステム改修による負荷軽減 ▪負荷試験 朝会(MIXIの全社朝礼：週⼀開催)で負荷試験枠を設けて頂き、端末数百台での負荷試験を実施
22. 2025/03/26 Ver.2(MAC Mini版)が稼働しました！ 各運⽤(バックグラウンド画像差替他)も対応しやすくなりました ※Swift製⾃社開発アプリにて動作 今後の展開 開発本部xデザイン本部でAR(=Augmented Reality)をシステムを導⼊し CS放送やインターネット配信で利⽤されました！ 協力：伊東温泉競輪場、チャリロト 3/26 写真差し替え予定
23. BOOSTER’S CAMは、アリーナ観戦を⾝近な⼈と楽しむコミュニケーションの場にしたいとい う想いから⽣まれたコンテンツです。 多くの関係者と連携しながら進めた短期開発は⼤きな挑戦でしたが、ファン‧ブースターの皆さ んにとって思い出に残る体験になっていれば嬉しく思います。 これからも、千葉ジェッツだけなく、Bリーグ、そしてスポーツの体験価値を⾼める取り組みを 続けていきます。ご清聴ありがとうございました。 さいごに