こんにちは。mud Inc.の芦川です。
みなさんガンプラ作っていますか？
プラモデルのパーツがくっついてるフレーム部分をランナーというのですが、制作後にそのランナーを回収するBOXが、今全国を巡業しています。（詳細はこちら https://bandai-hobby.net/site/gnf/ )
このボックスはただの回収ボックスではなく、ランナーを入れると映像演出が行われたり、SNSを通じてメッセージを収集して表示したりと仕掛けがあります。
このボックスを弊社チームで制作したので、制作の進行や開発の話をまとめていきます。
また技術的にはTouchDesigner, Firebase, Astro ( React+Tailwindcss+Framer )などを使っています。
つくったもの（画像と映像）
システム概要
ハードウェアシステム簡易図
筐体配線図
アプリケーション図
主な機材
| 機器 | 型番/仕様 |
|---|---|
| PC | EPSON Endeavor JS210 |
| DMX I/F | ENNTEC DMX USB PRO |
| 開閉センサー | ドアセンサースイッチ(リードスイッチ) SPS-320 |
| 開閉センサー I/F | BitTradeOne / USB DELEGATER B |
| 重量センサー | A&D / ボタン型USB対応デジタルロードセル LCCU21シリーズ IP64 |
| DMXデコーダー | LTECH-LED dmx512デコーダー |
| 照明電源 | LRS-350-12 |
| Wifiルーター | NECプラットフォームズ Wi-Fi Aterm PA-HT100LN-SW |
| スピーカー | YAMAHA ( ヤマハ ) / MSP3A |
| LEDテープ | JW-system / 12V 5050シリーズ RGBW 60leds/m |
制作ロードマップ
要件定義フェーズ
初めに2023年の9月ごろに制作の相談を受けました。
この時、ランナーを透過させて見せたいというアイデアと共にいくつかの要件がありました。
- ガンプラのリサイクル回収ボックスを兼ねたモニュメント
- どのくらい積み上がってるか中身の進捗がわかるようにしたい
- クール／スタイリッシュ系のトーンにしたい（LEDバーが埋め込まれるとか）
- 可動式が望ましい
- サイズは1200×1200が最大くらい。高さは1800未満
という具合でした。
↑ヒアリング後のイメージ
そこから要件を整理し必要なシステムをまとめ、予算に収まるかの検証と提案を行なっていきました。(弊社プロデューサーと並走して技術面の要件整理や提案を行なっています。)
↑最初のシステム図
（当初、筐体とユーザーとのインタラクションは、ランナーをボックスに入れること以外にタッチ操作をすることも入っていたためタッチフレームの組み込みも想定していました。）
序盤の検証ポイントは透過ディスプレイの選定でした。
選択肢としては、
- 透過型LEDディスプレイ
- 透過液晶ディスプレイ
- 透過パネルへのプロジェクション
- シースルー型LEDビジョン
がありました。それぞれメリットデメリットをまとめつつ、実際に機材調達をして検証を行いました。
（↑見えにくいですが真ん中のボックスの中にギターが入っていて白箇所が透けています。）
| 機材 | 長所 | 短所 | 特徴 |
|---|---|---|---|
| 透過型LEDディスプレイ | 明るく見栄えが良い。 | 値段が高い。 | 黒が透過 |
| 透過液晶ディスプレイ | 透過型LEDディスプレイと比べて価格が抑えられる。照明環境を作れば見え方も良い。 | ディスプレイが発光しないので、別途照明が必要になり設計が大変になる。取り扱い業者が少ない。 | 白が透過 |
| 透過パネルへのプロジェクション | プロジェクターとの組み合わせによっては価格を抑えられる。 | プロジェクターからパネルへ照射するため、設計が難しくなる。照射面の外に抜ける光を考慮しないといけない。照射範囲によってはプロジェクターの解像度をフルに活かせない。暗い。（値段によるが）環境依存が高い。 | 黒が透過 |
| シースルー型LEDビジョン | かなり明るい。 | ピクセルピッチが低いので、提供素材を見せるための解像度を担保しようとすると大きくなりすぎる。コントローラーなどの別途機材が高い。 | 黒が透過 |
調査の結果、コストとクオリティのバランスから透過液晶ディスプレイに決定しました。初めは透過プロジェクター案もコスト面から有力だったのですが、実際に検証すると色々問題が顕在化したので無しになりました。実機で検証するのは大事です。（透過型LEDディスプレイは予算の関係上、序盤に検証候補から外れました。）
設計フェーズ
ここから関連メンバー、チームが増えてきたので関係図をざっくり図解すると以下のような感じです。
筐体設計
具体化してきた仕様を実現するために、考慮ポイントを筐体デザイナーとエンジニア陣ですり合わせ設計を行いました。主には以下のようなポイントです。
- 必要な機材と収納場所
- 配線経路
- 排熱
- 機材の取付位置
ランナーを検知するセンサーの位置や、重量を測定するセンサーの位置、ボックスに仕込むLEDの位置や数をプロトタイプを作り検討しました。（だいたい1,2月ごろ）設計後に制作業者へ発注するため、その制作スケジュールから逆算して間に合うように仕様を詰めました。筐体デザイナーが優秀だったおかげで、ある程度要望を伝えると良い感じに起こしてくれました。
ただ、重量センサーは想定していた仕組みで測定精度が出なかったため急遽設計変更を行ったり、ボックス内部に入れるLEDテープの排熱考慮が抜けていたりなど、筐体制作が始まりつつも割とドタバタと修正が発生しました。
アプリケーション設計と検証
センサー類や照明連携を検証しつつ、求められるUI/グラフィック要件の実現性を検証していきました。実際に試すことで見えてない問題が具体化し、上で説明した重量センサー設計の問題のように、アプリケーション開発から筐体設計にフィードバックしていきました。
左 : 板の隅4点に重量センサーを配置しランナーを計測テスト
右 : ポストの構造とドアセンサーの距離テスト
UIデザイン設計
透過ディスプレイのデザインは通常のグラフィックとは違い、「透過して見えるランナー + ディスプレイに映し出されるグラフィック」という複合的なレイヤー構造でのデザインが必要だったため、透過液晶ディスプレイに実際にグラフィックを表示しつつ検討を行いました。
アプリケーション開発フェーズ
アプリケーションの開発は主に2パートありました。
- 筐体で映像コンテンツを表示するアプリケーションの開発
- Xの投稿を収集し表示非表示を管理するCMS
筐体でのコンテンツのビジュアルシステムはTouchDesignerで作成したのですが、
Xの投稿を取得し表示領域を可変しモーションをつける要件があったため、そのような要件はTouchDesignerよりもWeb技術の方が得意なので、センサー類と照明類との連携はTouchDesigner側で行い、X関連のViewの作成はAstro (React + Tailwind + Framer) 環境で行いました。
CMSに関してはFirebase認証の管理画面をこれもまたAstroで作成しています。
ちなみにアプリケーション開発はエンジニア2人で行なっています。
システム結合フェーズ
筐体制作が終わり各機材を一箇所に集め、筐体と各機材の連結、アプリケーションの導入を行いました。
ハード
- 透過ディスプレイと筐体の結合
- LEDテープの配線と組み込み
- 収納エリアへの機材固定
いわゆる展示システムの機材設置は今までにも経験があるのですが、今回は全国を移動するシステムの機材設置だったため、配線や機材固定の仕組みも検討する必要がありました。ある程度は事前に検討していたのですが間に合っていなかった部分があり、近くのホームセンターで機材を購入し設置機材を組み立てるなどの泥臭い設置作業が多くなりました。筐体の狭いスペースの中で電ドラボールやインパクトでネジ閉めや配線結合を行いました。想定していたよりも時間がかかりアプリケーションデバッグの時間が短くなったりなどバッファをみつつのスケジュールでしたがやはりタイトになりました。
またランナーを検知するセンサーの位置は、現場で位置調整が必要になり3Dプリンターで固定器具を作り修正しました。
アプリケーション
今回、照明はDMXで制御しているのですが、照明演出の組み込みはプロトタイプ機材では限度があったため、機材結合後に急ピッチで加えました。（演出をタイムラインで制御するツールなども作っていました。）
また、自動起動やリモート監視、筐体起動タイミングでのSlack通知、OS設定などを行いました。※この辺は詳細話すと長くなるので、また別の機会に。。
納品フェーズ
想定される操作を複数人デバッグしたのちに、マニュアルを作成し納品となりました。
運用フェーズ
やはり想定外のトラブルはいくつか起きたのですが、リモート操作できるようにしていたため、今のところ対応が落ち着き、現在はテクニカルオペレーションなしで巡業しています。（お祈り🙏）
結び
ざっと概要を説明しましたがいかがだったでしょうか。
ものづくりといっても様々なアウトプットがあり、コードだけで完結するものから、物理的な制作が必要なケースまで幅広くあります。今回のようにソフトウェアエンジアリング以外の領域まで関わるプロジェクトでは各専門家たちの意見を集約しつつプロジェクトに反映することが重要でした。詳細は省きましたが、透過ディスプレイと筐体を結合するため金属フレームの開発のために下町の板金屋さんと打ち合わせをしたりと、色々な人の協力が必要不可欠でした。チームのみんな + 関連会社の皆様のご協力があり完成まで辿り着けました。ありがとうございました。GUNDAM CONNECT BOXは全国の商業施設を巡業しているのでを見かけた際は思い出していただけたら嬉しいです。
最後に営業になり恐縮ですが、、このようなデジタルとリアルを絡めた試作にご興味があれば、お気軽にお問い合わせください。またこのような制作に興味のあるエンジニアさんからの問い合わせもお待ちしております。
弊社ホームページ: https://mud.co.jp/
プロダクションクレジット
Producer / Planner: Kojiro Matsumoto（mud Inc.）
Technical Director: Yoshizumi Ashikawa（mud Inc.）
Art Director / Designer: Junya Sato（VOLA inc.）
Box Design: Yusuke Yoshida（moult Inc.）
Application Engineer: Yasuhiro Hoshino
Hardware System Architect: Hiroaki Nakai（AID-DCC Inc.）
Project Manager: Akane Hayashi（mud Inc.）