【アドベントカレンダー2025】オンラインイベントを盛り上げたリアクションツールをつくって、クローズするまでの話

こんにちは！普段は ぐるなびウエディング の開発をしている滝口（@ytakiguche）です。
ぐるなび Advent Calendar 2025 の 9 日目を担当します！

この記事では、オンラインイベントを盛り上げるために社内で開発した「リアクションツール」が、どのような課題から生まれ、どのように使われ、そしてなぜクローズに至ったのかを振り返ります。

目次

---

🤔 オンラインイベント、盛り上がっていますか？

オンラインイベントは便利な一方で、対面イベントに比べて「場の空気」が伝わりにくいという課題があります。

• 参加者は基本的にカメラオフ
• 発表者からは参加者の表情や反応が見えない
• 大勢の前だとチャットで発言するのは少し勇気がいる

ぐるなび開発部では、毎週「ナレッジ共有会」という、開発部全員が参加するオンラインイベントを開催しています。
とても有意義な場なのですが、オンラインゆえに発表者からは参加者のリアクションが見えづらく、

• 「ちゃんと刺さっているのかな……？」
• 「笑ってくれているのかな……？」

と、少し心細くなってしまうこともありました。

そこで、「もっと気軽にリアクションを返せて、発表者もそれをちゃんと受け取れる仕組みがほしいよね」というところから、このリアクションツールの構想が生まれました。

---

💡 リアクションツールの誕生

こうして誕生したのが、オンラインイベントを盛り上げるための「リアクションツール」です。

このツールが目指したのは、発表者と参加者の間に「リアルタイムな反応の橋」をかけることでした。

• 参加者：ボタンを押すだけで、手軽にリアクションを送信できる
• 発表者：自分の画面上に、飛んでくるリアクションがアニメーション表示される

結果として、「なんとなく静かなオンライン会」から、「ちゃんと反応が“見える”オンライン会」に変えてくれる存在になりました。

発表者にリアクションが表示されている様子

使い方はとてもシンプルです。

1. 参加者は、事前に共有された専用 URL にアクセス
2. 画面上に表示される複数のリアクションボタンから、押したいものをタップ／クリック
3. 発表者の画面上に、押されたリアクションがふわっとアニメーション表示される

参加者側からすると「オンライン会議のリモコン」のような感覚で、
発表者側からすると「画面の上に会場のノリが直接降ってくる」ような体験になります。

---

🧩 システムアーキテクチャ

このリアクションツールは、次の 3 コンポーネントで構成されています。

• 参加者向けのリアクション送信画面（Web）
• 発表者向けのリアクション表示アプリ（Electron）
• 2 つをつなぐリアクションサーバー（Node.js + WebSocket）

それぞれの役割はシンプルですが、WebSocket によるリアルタイム通信でつなぐことで、「ボタンを押したらすぐ飛んでくる」体験を実現しています。

リアクションツールのシステムアーキテクチャ

リアクション送信画面（参加者側）

参加者向けの画面は、シンプルな HTML / CSS / JavaScript で構築しました。

• スマホからの操作を前提に、大きめのボタンを配置
• 各ボタンにクリックイベントを設定し、押された種別を WebSocket でサーバーへ送信
• 「どのイベント・どの発表に対するリアクションか」を識別できるよう、セッション情報も付与

参加者から見ると、「URL を開いて、気になったタイミングでボタンを押すだけ」という体験に徹底的に寄せています。

リアクション表示アプリ（発表者側）

発表者向けのリアクション表示アプリは、Electron を使ってデスクトップアプリとして実装しました。

• リアクションサーバーと WebSocket で接続
• サーバーから届いたメッセージを受け取り、画面上にアニメーション表示
• 発表スライドの表示を邪魔しないよう、オーバーレイ表示や配置・大きさを調整

オンライン発表では、スライドと発表者の顔で画面が埋まりがちなので、
「違和感なく重ねられる UI」になるよう工夫しました。

リアクションサーバー

リアクションサーバーは、Node.js と WebSocket ライブラリで構築しました。

• 参加者・発表者それぞれのクライアントからの接続を管理
• 参加者から受信したリアクションを、対応する発表者クライアントへブロードキャスト
• イベントごとのルーム分けや、接続切断時のクリーンアップなどを担当

これにより、多人数の参加者 → 1 人の発表者 へのリアルタイムなフィードバックループをシンプルな構成で実現できました。

---

🎉 実際に使ってみてどうだったか

実際のナレッジ共有会などのオンラインイベントで使ってみると、

• 参加者が、かなり気軽にリアクションを送ってくれるようになった
• 発表者は、話しながらリアルタイムに反応を感じ取れるようになった
• 「盛り上がってる感」が目に見えるので、場の一体感も生まれた

という、当初の狙い通りの効果が出ました。

特に印象的だったのは、

• テキストチャットはしないタイプの人も、リアクションボタンはどんどん押してくれる
• 難しめの技術話でも、「ちゃんと伝わってるんだな」と発表者が安心できる

といった「ハードルの低いコミュニケーション手段」として機能してくれたことです。

---

⚠️ しかし、クローズへ

そんなリアクションツールですが、有志で開発・運用してきたこともあり、
残念ながら 2025 年秋をもってクローズ することになりました。

主な理由は次の通りです。

• 開発・運用リソースの確保が難しくなってきた
• セキュリティやメンテナンスに関する課題・考慮事項が増えてきた
• 参加者のニーズが変化し、他のコミュニケーション手段が主流になってきた

特に最後の点は大きく、

• Google Meet のリアクションボタン
• 各種オンライン会議ツールに標準搭載されているスタンプ機能

など、イベントツール側の進化によって、似た体験がデフォルトで利用できるようになりました。

「それなら、無理をして自前のツールを維持するよりも、
標準機能を活用していったほうが、参加者にとっても運営にとっても幸せだよね」という判断です。

---

🙏 最後に

このリアクションツールは、社内のオンラインイベントを大いに盛り上げてくれました。
発表者と参加者の距離を少しだけ縮めてくれた、とても頼もしい存在だったと思います。

一方で、ツールそのものはクローズされても、

• 「オンラインイベントで、どうやってリアクションを見える化するか」
• 「参加者が気軽に反応できる“入り口”をどう用意するか」

という観点は、これからも変わらず大事にしていきたいテーマです。

この記事を読んでくださったみなさんの現場でも、

• 既存の会議ツールの機能をもっと活用してみる
• ちょっとした Web ツールを自作してみる
• 物理的なグッズ（カードやうちわなど）を組み合わせてみる

など、自分たちのイベントに合ったやり方で、オンラインでも「反応が見える」状態を作ってみてください。

ここまで読んでいただき、ありがとうございました！

滝口

趣味はバスケとスノボ。英会話とピアノを習いたいと思ってかれこれ6年以上経過。
好きな言葉は「Done is better than perfect.完璧を目指すよりまず終わらせろ。」
現在『キングダム』からチームビルディングを勉強中。