🎉

周年パーティーでの余興のシステム実装

に公開
Next.js
Tailwind CSS
Amplify
shadcn/ui
zennfes2025free
tech

10年の節目

半年以上の期間が空いてからの記事となりますが、株式会社add moreは2015年1月15日創業で、2025年1月15日をもって10年を迎えました。
この節目を迎えることが出来たのは、周りの環境に恵まれたこと、沢山の方にサポート頂いてのことだと思います。大変感謝しています。

そして2025年2月21日にはお客様や関係者を招いて、パーティーを実施しました。

当日の様子については下記のWantedly記事を御覧ください。

https://www.wantedly.com/companies/add-more/post_articles/960519

余興を考える

10周年パーティーを実施するにあたって、お越しいただいた皆様に何か少しでも楽しめる工夫はできないかと社内で検討しました。

クイズや人を巡るスタンプラリーなど様々な案が出ましたが、当日の進行などを考えると下記のポイントが重要となります。

  • 限られた時間の参加者も楽しめるように途中参加や離脱が可能であること
  • ルールがわかりやすい、または周知であること
  • 時間の予測や調整がしやすいこと

これらを深く考えて検証していくとビンゴが非常に優れたゲームであるという結論に至りました。
景品数や参加者からどれくらいの出玉でゲームが終了するかの予測値も検証したところほとんどブレがありません。

どこに行っても参加型のゲームと言えばビンゴとなるのも納得できます。

デジタル化の範囲

一般的なシステムや業務と同様にデジタルソリューションがどこまでのスコープを担うのか、デジタル実装とアナログの境界線や接点をどう設けるのかは非常に重要です。

デジタル化のスコープを広くする場合はビンゴカードの配布からスマートフォン向けのサイトにすることも考えられますし、デジタル化はせずにすべて手作業で実施することも可能です。

今回は下記のように整理しました。

  • 配布カードはアナログ（印刷物）で配布する
    • 配布カードまでデジタル化すると、参加者のITスキルに依存してしまう
    • 電波状況や不具合などの心配
    • 配布カード自体は調達が簡単で格安
  • ビンゴマシーンはデジタルでみせる
    • 視認性を高くしたい（会場にはプロジェクター完備）
    • デジタル化しない場合、これまでに出た数値をホワイトボードに記録するなど人的コストが増大する
  • 景品紹介はデジタルでみせる
    • 視認性を高くしたい
    • 社員紹介を兼ねており、「〇〇が選ぶ〇〇」という文面を押したい

使用技術

  • React/Next.js
  • shadcn/ui、TailwindCSS
  • AWS Amplify

業務の合間の限られた時間で構築する必要があったため、高速にユーザーインターフェースが実装できそうな技術スタックとデプロイからホスティングまで手間がかからないAmplifyを採用しました。

デザイン表現

少し暗い照明の会場で、画面デザインとしてはライトモードが正なのかダークモードが正なのか。生成AIに相談するとプロジェクター投影は「ライトモード」の方が無難なケースが多いとのこと。
自分の予想とは反するものだったためモード切替機能を実装し、事前に会場で検証しました。実際に現場で確認したところ、断然にダークモードのほうが良かったので、ダークモードを主として画面デザインを進めました。
事前の現場検証は大事ですね。

イラストと写真

イラストはChatGPT（DALL·E3）で、実写に近い素材（串カツ盛り合わせ等）はImageFXにて作成しました。

演出周り

賑やかな雰囲気のためにビンゴの玉はカラフルにしつつ、数値の近いものは同系色になるようHSL指定にて近い数値は色相が近似するように作成しています。

  const getGradientColor = (num: number | null) => {
    if (num === null)
      return 'linear-gradient(45deg, hsl(0, 0%, 30%), hsl(0, 0%, 80%))'
    const hue = ((num - 1) * 360) / 75
    return `linear-gradient(45deg, hsl(${hue}, 80%, 30%), hsl(${hue}, 80%, 80%))`
  }

何かしらのデータをビジュアライズする際にも、このHSLで3軸に分解して表現するのは有用です。
そして、よく見るとグラデーションがユラユラと動きがあるようにアニメーション処理をしています。
スロット回転中の背景の放射アニメーションとプレゼントオープン時の紙吹雪のような演出はtsParticles を利用しました。

ヒューマンエラーを避ける工夫

本番当日にあたふたしないように、実装時には下記の工夫を行いました。

  • 誤ってリロードして、すでに排出された数のデータがリセットされないようにリロードしても大丈夫なようにlocalStorageで管理
  • データリセット機能には確認ダイアログを追加
  • ネットワークに問題があった場合でもローカルで動作可能なように準備

本番当日を終えて

何かトラブルが起きないか心配でしたが、無事にシステムも動作し余興の進行を任せた若手社員が会場を大いに盛り上げてくれました。

社外の方との接点や窓口がどうしても偏りやすい中で、普段から裏方で活躍しているメンバーが認知され、「いいキャラクターの人いるね！」と色々なところから声を頂けたのが一番の収穫でした。

弊社は2015年10月から12期となりましたが、20周年パーティーも盛り上がれるように日々お仕事に取り組んでいます。また、一緒に盛り上げてくれる仲間も募集しています。
ご興味のある方はコーポレートサイトまたはWantedlyからご応募ください。

Discussion