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 本番の集計アルゴリズム speakerScore() をブラウザでそのまま実行。
実装の現物 — クリエイティブ量産パイプライン・モーショングラフィックス (1レコード→4判型→A2→ZIP)
1件のセッション情報から4つの判型を一括生成してZIP書き出しする制作パイプライン
// MOTION 1レコードを4判型へ扇状展開し、印刷用に A2 精密拡大して ZIP 出力。
実装の現物 — 😍 を選んだ人だけが見る祝祭 (実装の現物・触れる)
// MOTION 😍を選んだ瞬間だけ祝祭が出る実装。顔を押すと右の分岐が光る。
本番サイト — 参加者が実際に触った画面
iframe 配信用に切り出した会場マップだけ live で埋め込み、残る 5 画面はスクショと要点で紹介する。
// LIVE iframe 配信用に切り出した bare 会場マップ。pan/zoom で部屋をクリック。
そのほかの実ページ (スクショ + 中身)
ivs.4s.link/timetable
▲▼ auto-scrollivs.4s.link/speakers
▲▼ auto-scroll主要 3 画面 — 実デザインをそのまま動かす
スクショではなく、本番 ivs.4s.link のデザインをそのまま組み込んで自動ループさせた。会場マップの DAY 切替・アンケートのランキング直結・#atIVS の OG 生成という、それぞれの画面の核心操作を実データで再演する。
実装の現物 — Startup Market ゾーンマップ (実デザイン・自動ループ)
// MOTION 本番の Startup Market ゾーンマップを自動ループで再演。
実装の現物 — セッション後アンケート + ライブ Q&A (実デザイン・自動ループ)
// MOTION 本番のセッション後アンケート+ライブ Q&A を自動ループで再現。
実装の現物 — #atIVS OG ジェネレータ (実デザイン・自動ループ)
4Sリンクを貼るだけでSNS用の縦長プロフィール画像を自動生成する実ページ
// MOTION 本番 #atIVS の3ステップで縦長プロフィール画像を焼き込む工程を再演。
実演 — 固有機能をそのまま動かす
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
