つくって、体験してもらって、楽しんでもらう - 子どもも大人もワクワクするインタラクティブ体験を支える技術 -

Transcript

1. つくって、体験してもらって、楽しんでもらう - 子どもも大人もワクワクするインタラクティブ体験を支える技術 - 豊田陽介（@youtoy ） 2026年9月10日 (木) KGDC Tech Conference #15 ＠KDDI高輪本社
2. 自己紹介 豊田陽介（ @youtoy ） プライベートでの活動 ▶ IT系コミュニティ主催・登壇など ▶ ガジェット系、AI・機械学習系の 書籍を共著・単著で出版 ▶ 個人制作作品をメーカーフェア等の モノづくり系展示イベントに出展 ▶ Microsoft MVP（Developer Technologies） 好きな技術など ▶ ガジェット ▶ 描画系／IoT／AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript
3. まずは「つくって、体験してもらって、 楽しんでもらった作品」をいくつか紹介
4. インタラクティブな体験型のWebアプリを開発・展示 HTMLファイル 1つで実装した 某極大消滅呪文が使える Webアプリ ⇒ MediaPipe（JS版）＋ WebGL のシェーダー 今年7月作成（最近）
5. インタラクティブな体験型のWebアプリを開発・展示 光学迷彩的エフェクト、空間を歪める波紋のようなエフェクト ⇒ MediaPipe（JS版）＋ 描画系技術（p5.js / シェーダーなど） 2022年8月作成（4年前） ※ ChatGPT など登場以前 今年2月作成（わりと最近）
6. 子どもも大人も ワクワク楽しんでもらう
7. 展示イベントで作品を楽しんでもらった時の様子 大人の方々 にも 子ども達 にも
8. 子どもから大人まで楽しんでもらう ための技術構成
9. 自分が作るインタラクティブな体験型展示の構成 人による何かの「入力」に反応して、何かの「出力」が返る • 不思議な／綺麗な ビジュアル表現 • 人の動き • デバイスや日用品 などの操作 • 何かの音・声 入力 ブラウザで動く 様々な処理 出力 • 動く • 光る • 音が鳴る ※ 同様のことはネイティブアプリ等でも実装可能で、自分は 「好きな技術＝Web技術」なのでブラウザでの処理を利用 さらに「何をすれば良いか」「何が起こるか」が 分かりやすいものにする
10. 体験をもっと気持ちよく・ 印象的にする技術
11. MediaPipe カメラ映像から手・顔・姿勢などを リアルタイムに認識 リアルタイム体験に使いやすい 公式サンプルを試しやすい 自分の作品用途では、精度・ 処理速度とも扱いやすい ⇒ 自分の動きが連動している 感じが高まる 現行の機能や挙動をすぐ確認 ⇒ 作品への活用を検討しやすい
12. Google公式のMediaPipeのデモ 公式サンプルをブラウザですぐ試せる ⇒ 現行の機能や挙動を体験・確認し、作品への取り込みを 検討しやすい
13. シェーダー GPUで、形や画面の色を高速に計算するプログラム ⇒ 炎・光・水・歪みなど、通常の描画では難しい表現も作れる コードだけで多彩なビジュアルエフェクトを生成 ⇒「魔法みたい！」「すごい！」という感想が出る非日常体験 （複雑な表現を重ねると、処理負荷が高くなることも…） 色々な方の知見が共有されている 例：Shadertoy（共有サイト）
14. Shadertoy（共有サイト） https://www.shadertoy.com/
15. 入力側に関する別の技術： 「物」を扱う動作を入力に変える
16. 100円ショップのアイテム （空気ポンプ） ポンプを押す ⇒ 空気をマイクへ ⇒ 音量変化として取得 入力 音量変化を処理
17. 親子向け展示イベントで楽しんでもらった時の様子 100均の空気ポンプを押す（または叩くなど）を入力に ポンプの空気 → マイクの音量変化 → 音の処理（Web Audio API） → 画面の反応
18. ゲーム用の特殊な仕様のコントローラー 太鼓の達人用コントローラー、サオコン
19. 親子向け展示イベントで楽しんでもらった時の様子 太鼓・釣り竿を扱う動作／叩く・ハンドル部分を回す コントローラーの入力値 → Gamepad API／WebHID API → 画面の反応
20. これらの「物」を使うメリット 動作に面白さが生まれる ・何をすれば良いか 分かりやすい ・意外性や非日常を 組み込める ・物を使った動作自体が 楽しい 技術者の方にも楽しんで もらえる 本来の接続先・用途と 異なる使い方に対して 「どうつないだか？」 という興味が生まれる 展示で使いやすい ・既製品は一定の 安全性・耐久性が 考慮されている ⇒ 私の場合は完全自作 よりは安心材料に ※ 本来と異なる使い方をする 場合は、別途安全の考慮が必要
21. 作ったものを色々な場所で展示して、 楽しい体験を提供
22. 直近半年で出展したイベントをマッピングしてみた 7/18： DIYデジタルガジェット で遊ぼ ４ in 那須 6/28： NT金沢 3/1： NT広島 5/4： NT函館 3/7： NT松戸 6/12： Interop Tokyo 2026 8/8： Interface誌主催の展示 5/10： つくろがや！4 余談 好きでWeb技術を 使い続けていたら、 Interop Tokyo の W3Cブース展示へ
23. 紹介しきれなかった他の色々な技術 展示で扱いやすいガジェット 音・声の違いを入力に変える技術 長時間のデモ展示で扱いやすく、 入力／出力に使いやすい 楽器などを鳴らす・しゃべる を別の体験につなげられる 楽しい体験を作ることができる技術は他にも色々 ⇒ メーカーフェアをはじめとしたモノづくり系イベント に行くと、たくさん体験できます！おすすめ！
24. これからも好きな技術を組み合わせて つくって、体験してもらって、 楽しんでもらいたい！
25. 終わり！