1 / 3SESSION SURVEY — 匿名・常時受付
このスピーカーの登壇はどうでしたか?
IVS Event Frontend
セッション・会場マップ・アンケート・登壇者ランキング・クリエイティブ自動生成まで、IVS2026 カンファレンスの機能面を担った公式サブサイト兼 CMS。SNS カードから A2 印刷ポスターまでコードで生成した。
COMMITS1,341
LINES+218,472
ADMIN TOOLS23
画像生成ルート11
裏側の仕組み — 評価と生成の 2 エンジン
IVS Event Frontend の中核は 2 つのエンジンで立っている。会場の匿名評価を「ベスト登壇者」へ変換する加重レーティングと、1 レコードのセッションデータを SNS カードから A2 印刷ポスターまで一気に吐き出す生成パイプライン。まずこの 2 つをアニメで図解する。
実装の現物 — ライブ投票→加重集計→ランキング→校正曲線 (実アルゴリズムを実行)
// MOTION 画面のスコアは 1 つも手打ちしていない — 本番の speakerScore() をそのまま移植し、ブラウザで実際に計算している。未投票は A/B/C/D ボタン → 投票するとその端末だけ % が見える (X の投票と同じ体験) → 締切で確定スナップショットの結果カードが 👑 + 金で生える → quality / w(v) / baseline の実式が収束し、票数最多 (44 票) の登壇者が 😐 6 件のペナルティと😍率プレミアムで 3 位に落ちる → 最後に 😍 のみ v 票の校正曲線を実計算で描く (1 票は ±5 だけ、30 票の熱狂だけが 90 台)。@harvested-from ivs-cms src/lib/survey/ranking.ts / PollBubble.tsx — https://ivs.4s.link/sessions/58daf476-6ea3-472c-a27c-8f5ac4a2682e/survey
実装の現物 — クリエイティブ量産パイプライン・モーショングラフィックス (1レコード→4判型→A2→ZIP)
// MOTION セッション 1 レコードが実在する 4 判型 (#atIVS 900×1200 / OG 1200×630 / A3 ポスター / 掲示 1920×1080) へ扇状展開し、A3 (297×420mm) 座標のまま CSS 変数 --print-k: 1.41428 で A2 (420×594mm) へ精密拡大 (デザイン無変更)、全フォーマットが ZIP へ収束して 0→9 PNG (本日のROHM 2ホール + 本日のオークラ 1ホール × DAY1–3 = 9 枚を modern-screenshot の domToPng で書き出す実測枚数)。確定スタンプは IVS 京都の判子。@harvested-from ivs-cms startupMarket.module.scss / dailyBoard.ts — https://ivs.4s.link/startup-market
実装の現物 — 😍 を選んだ人だけが見る祝祭 (実装の現物・触れる)
// MOTION 送信完了では発火しない — 😍「めちゃ良かった」を選んだ瞬間だけ祝う。3 つの顔を実際に押せる: 😍 = 全画面の祝祭 (GreatCelebration = 140 粒 / 10 色 / 5 シェイプ + 赤フラッシュ) + カード内バースト (#ff1a30) / 😊 = 何も出ない / 😐 = 完全ゼロ。「全員を祝わない」という判断こそがこの製品でいちばん面白い実装で、右のコード欄では押した face の分岐が実際に点灯する。@harvested-from ivs-cms GreatCelebration.tsx / SurveyForm.tsx — https://ivs.4s.link/sessions/58daf476-6ea3-472c-a27c-8f5ac4a2682e/survey
本番サイト — 参加者が実際に触った画面
iframe 配信用に切り出した会場マップだけ live で埋め込み、残る 5 画面はスクショと要点で紹介する。
// LIVE iframe 配信のために切り出した bare ページ。生 SVG をインライン展開し、pan/zoom 上で部屋をクリック。elementsFromPoint で図形の重なりも解決する。
そのほかの実ページ (スクショ + 中身)
ivs.4s.link/timetable
▲▼ auto-scrollivs.4s.link/speakers
▲▼ auto-scroll主要 3 画面 — 実デザインをそのまま動かす
スクショではなく、本番 ivs.4s.link のデザインをそのまま組み込んで自動ループさせた。会場マップの DAY 切替・アンケートのランキング直結・#atIVS の OG 生成という、それぞれの画面の核心操作を実データで再演する。
実装の現物 — Startup Market ゾーンマップ (実デザイン・自動ループ)
// MOTION 本番 ivs.4s.link/startup-market のデザインそのもの。DAY1 で 128 社がフロア格子に充填 → 検索とフェーズ絞り込みで該当ブースが赤縁で残り → DAY2(132社)/DAY3(118社) へ切替。物理ブース 128×3日=374 レコードを DAY タブで出し分ける実機能を再演。https://ivs.4s.link/startup-market
実装の現物 — セッション後アンケート + ライブ Q&A (実デザイン・自動ループ)
// MOTION 本番のセッションカード + アンケート/Q&A タブをそのまま再現。登壇者ごと 3 段階 face 評価がベスト登壇者ランキングに直結して順位が動き、Q&A タブでは Slido 風ライブ投票が走る。https://ivs.4s.link/sessions/58daf476-6ea3-472c-a27c-8f5ac4a2682e/survey
実装の現物 — #atIVS OG ジェネレータ (実デザイン・自動ループ)
// MOTION 本番 ivs.4s.link/ativs の 3 ステップ UI そのもの。4S リンクを貼る → 8 スタンスから 1 つ選ぶ → 3:4 縦長ビジュアル(900×1200)にアバター・氏名・SNS・スタンスを焼き込んで生成する工程を再演。https://ivs.4s.link/ativs
実演 — 固有機能をそのまま動かす
WHAT'S INSIDE
01
アンケート → 登壇者ランキング
匿名 3 段階評価を IMDb 型加重レーティング(会場平均ベースライン + 票数信頼度 + 😍率プレミアム)で集計し、全セッション横断でベスト登壇者を確定する。
02
ライブ Q&A + Slido ライク投票
誰でも ♥ 1人1票 (UA+IP hash)。最大 4 択のインライン投票は締切で 👑 付き確定スナップショットを自動投稿し、ホストは ★採用 / ✓対応 / 🗑削除で捌く。
03
A2 印刷ポスター自動生成
Startup Market 出展社を A3 座標で組み、印刷時のみ CSS 変数 ×√2 で A2 へ拡大(デザイン無変更)。ロゴは直リンク/Drive 自動取得 + 手動 UP の 3-tier。
04
掲示ボード自動生成
★featured セッションを種に ROHM / オークラの各ホールへ自動配置し、modern-screenshot で 1920×1080 PNG・全会場×全 DAY を ZIP 書き出し。
05
セッション全文書き起こし
30 本・約 250 時間の通し録音を ffmpeg で 15 分チャンク化 → ElevenLabs Scribe (word timestamps + diarize) → 1 点アンカー方式で壁時計に合わせセッション単位へ切り出し → glossary で固有名詞の音写ミスを冪等補正。概要 + まとめ記事 Markdown まで生成して /admin/transcripts で読む。課金ステージは --go 必須の DRY 設計。
06
OG 画像 server-side 生成 11 ルート
session / speaker / timetable / partner / map 等を next/og + Satori + sharp で生成。simple-icons を白化・BudouX で日本語折り返しまでコードで焼く。
07
4S API 連携 + ISR 償却
公開 /slug/ivs26(3.5MB)を unstable_cache 60s + edge ISR で束ね、毎リクエスト取得の 15 秒スパイクを償却。編集は revalidateTag で ≤60 秒反映。
08
セッションカード量産システム
10 variants × 2 テーマ(IVS2026=blood / CORE=ink)× CJK/EN 自動 fit。役職は日本語フォントで 1 サイズ統一、名前は省略せず良い境界で改行。
09
匿名スパム対策
honeypot + UA hash + 24h 同 hash dedup で常時受付・常に匿名を担保。config は持たず、回答こそが唯一の真実源。
Latest projects
ディレクターズ葛藤 / IVS2026 MV「無限夢想家」 / SPIKES / XDEAL / 4S Referral Network / 熟と燗 / Metoree TVCM / IVS2025 AI CM Suite / Totally Startuped MV / Ojima Dental Clinic / STATION Ai / Paytner WebCM
