激おもしろ字幕メーカー

どんなサービスか

話し手の声（大きさ・高さ・速さ）、表情、言葉の意味をリアルタイムに読み取り、話をリリックビデオのような動く字幕に変えて画面に映すWebアプリです。

• 大事な言葉、大きな声で言った言葉ほど大きく表示
• 話題は絵文字になり、今の話の「要約」が背景の中央に大きく出る
• 楽しい話は横書きで弾み、悲しい話は下へ沈み、怖い話は縦書きで闇に溶ける
• 吹き出しは声が高ぶったときだけ出て、叫ぶとギザギザになる
• 聞き逃した話は、右上の「さっきの話」で読み返せる
• 腕で ⭕ / ❌ を作ると画面にスタンプが出るので、声を出さなくても参加できる
• 刺激が苦手な人向けの「おだやかモード」付き

ブラウザを開くだけで動きます。インストールも有料のAPIも必要ありません。

---

作った背景

授業の話も、オンラインの会議も、耳からの情報だけでどんどん進みます。

• 一度集中が切れた子は、内容にも場の盛り上がりにも置いていかれます。文部科学省の調査（2022）では、通常学級に在籍する小中学生の 8.8%、35人学級なら約3人が、学習面または行動面で著しい困難を示しています。
• 耳が聞こえにくい人は、字幕があっても声のトーンや場の熱量までは受け取れません。
• オンラインで一人で参加している人は、会場の盛り上がりから取り残され、自分の声が届いているのかも分かりません。

原因は違っても、困っていることは同じ、**「声の熱量が届かない」**ことです。

普通の字幕は小さい文字が流れていくだけなので、文字を読むのが苦手な人にはかえって負担になります。そこで私たちは、**「読む字幕」ではなく「つい見てしまう字幕」**を作りました。

集中が続かない人に「ちゃんと聞きなさい」は効きません。楽しさそのものを、話についていくための入口にする。 これが、私たちの考えるインクルーシブです。

---

活用シーン

1. 教室：プロジェクターに映すだけで使えます。支援が必要な子だけに特別な道具を渡すのではなく、クラス全員で同じ画面を見るので、誰も特別扱いされません。手を挙げるのが苦手な子も、⭕❌で意思を伝えられます。
2. オンラインとオフラインの同時開催イベント：会場の盛り上がりを配信画面に流し、オンライン参加者の一言は会場のスクリーンに大きく映します。いる場所によって、参加できる度合いが変わりません。
3. オンラインで一人で参加している人：自分のしゃべった言葉がコメント欄のようにリアルタイムに流れるので、声が届いていること、自分も場にいることを実感できます。

---

推しアイデア

リリックビデオの手法を、リアルタイムの会話に持ち込んだこと。

リリックビデオは文字を出しているだけなのに、出すタイミング・位置・動き・書体で、見る人の気持ちを強く動かします。私たちは2本の先行研究をもとに、文字の見せ方を乱数ではなく、全部「気持ち」で決めるようにしました。

📄 TextAlive（Kato et al., CHI 2015）

歌詞を 文／単語／1文字 の3階層に分け、それぞれに動きのテンプレートを重ねて、キネティックタイポグラフィを作る研究です。

→ 私たちは ページ／文節／1文字 の3階層に分け、言葉の意味に合った登場の動きを25種類から自動で選び、1文字ごとの動きを重ねています。

📄 EmoBalloon（Aoki et al., CHI 2022）

漫画の吹き出し約15万個を分析し、気持ちが高ぶったセリフほど爆発型の吹き出しになること、そして吹き出しを付けると送り手と受け手のあいだで、気持ちの強さの伝わり方のズレが小さくなることを示した研究です。

→ 私たちは、声が強いページだけに吹き出しを付け、叫ぶとギザギザにしています。さらに論文で扱われていた「丸」と「爆発型」の2種類から一歩進めて、喜び＝もこもこ、悲しみ＝しずく、恐怖＝波、のように気持ちの種類ごとにも形を変えています。

---

推し技術

• 声×表情×言葉を合わせた感情推定 Web Audio APIで音量（RMS→dB）、自己相関によるピッチ（その人の平常時との比）、話速を解析します。MediaPipe Face Landmarkerの顔のブレンドシェイプからは、笑顔・驚き・しかめ面・悲しい顔・こわばりを、その人の普段の顔との差分で推定します。これらを言葉のカテゴリと合わせて、感情と強さを1つのスコアにまとめています。
• 腕の合図の認識 MediaPipe Pose Landmarkerで肩・ひじ・手首の位置を取り、肩幅を物差しにすることで、カメラからの距離に関係なく ⭕（頭の上で輪を作る）と ❌（胸の前で両腕を交差）を判定します。腕組みを「ばつ」と間違えない工夫も入れました。
• 辞書に無い言葉も分かる言語処理 Intl.Segmenterで文節に分け、手書きの語彙辞書と漢字1文字ごとの意味（霊→恐怖、炎→パワー）でカテゴリを推定します。Unicode CLDRからは約4000語の絵文字辞書を自動生成しました。関西弁などの方言や若者言葉にも対応しています。
• 読みやすさのルール 縦書きは、短くて縦でも十分大きく出せるページだけにしています。数字を含む言葉は、縦にすると横倒しになって読みにくいので、横書きにしています。
• その場で調整できる仕組み Dキーで、今の音量・ピッチ・感情の判定と「どのルールで見せ方が決まったか」をリアルタイムに表示します。Sキーの設定画面では、声の強さのメーターを見ながら、吹き出しが出るしきい値やマイクの感度を調整できます。
• サーバー不要・プライバシーに配慮 すべてブラウザの中で処理し、顔の映像は外に送りません。

---

チームでの進め方・苦労したこと

私たちは2人のチームです。最初は、アイデア出し、AIを使った実装、そのコードの精査、と役割を分けて進めていました。

しかし、それだけでは不十分だと感じました。AIが書いたコードを担当者しか理解していないと、「なぜ今この吹き出しが出たのか」「なぜ喜びと判定されたのか」を、チームで話し合えなかったからです。

そこで、2人ともアルゴリズムを理解してから進めることにしました。

• 声・表情・言葉をどうやって1つの気持ちにまとめるのかを、要件定義書（CLAUDE.md）に言葉で書き出し、2人と、AI（Claude Code）の共通の設計図にしました。
• 解析値と、見せ方が決まったルールを画面上でリアルタイムに見られるようにして、パラメーターを2人で見ながら確認・調整できるようにしました。

開発の途中で指導教員から「分かりやすいだけでなく、楽しめるか」「誰がどこで使うのか」と指摘を受け、見せ方を乱数ではなく気持ちで決める仕組みに作り直しました。教室見守りモードは魅力的でしたが、1画面版の完成度を優先して、実装を保留する判断もチームでしました。

---

挑戦・成長

表情と姿勢の認識、声と表情と言葉を合わせた感情推定、CLDRを使った辞書の自動生成は、どれもチームにとって初めての技術です。論文を読んで、その知見を実装のルールに落とし込むところまでやりきりました。

そして何より、AIに任せきりにせず、2人とも中身を説明できる状態で作り上げたことが、一番の成長です。

---

今後の展望

• 翻訳機能：日本語が分からない人にも、言葉と一緒に熱量まで届ける
• オンライン・オフライン同時開催のイベント：会場の盛り上がりを配信に、オンラインの人の一言を会場の画面に大きく映し、いる場所による差をなくす
• たかつき未来パーク（2029年春オープン予定）：今回のテーマ「インクルーシブ」は高槻市のスローガンでもあります。ステージイベントでこの字幕を大きな画面に映せば、耳が聞こえにくい人も、日本語に慣れていない人も、小さな子どもも、同じ画面を見て、同じタイミングで笑えます。声を出すのが苦手な人も⭕❌でクイズに参加でき、来られなかった人には配信で盛り上がりを届けられます
• 教室見守りモード：班ごとの話し合いを、先生が1画面で見渡せるようにする

その場の熱量を、ひとり残らず。

---

使用技術

• JavaScript / HTML / CSS / Canvas 2D 字幕・吹き出し・背景をすべてCanvasで描画（ビルド不要）
• Web Speech API 日本語の話し言葉をリアルタイムに文字にする（途中結果から表示）
• Web Audio API 音量（RMS→dB）、自己相関によるピッチ、話速を解析して「声の強さ」を出す
• MediaPipe Face Landmarker 顔のブレンドシェイプから、笑顔・驚き・しかめ面・悲しい顔・こわばりを推定
• MediaPipe Pose Landmarker 肩・ひじ・手首の位置から ⭕ / ❌ の合図を判定
• Intl.Segmenter 文を単語に分け、助詞などをくっつけて文節にする
• Unicode CLDR 日本語キーワードから約4000語の絵文字辞書を自動生成
• Google Fonts 気持ちに合わせて使い分ける日本語フォント約20種
• Claude Code 要件定義書（CLAUDE.md）を共通の設計図にして実装

ポイント

• すべてブラウザの中で完結しています。サーバーも有料のAPIも使っていません
• 顔の映像は外に送りません
• 動作環境はPCのChromeです。ネット接続は、音声認識・フォント・MediaPipeのモデルの読み込みに使います

参考文献

• Jun Kato, Tomoyasu Nakano, Masataka Goto. "TextAlive: Integrated Design Environment for Kinetic Typography." CHI 2015.
• Toshiki Aoki, Rintaro Chujo, Katsufumi Matsui, Saemi Choi, Ari Hautasaari. "EmoBalloon - Conveying Emotional Arousal in Text Chats with Speech Balloons." CHI 2022.
• 文部科学省「通常の学級に在籍する特別な教育的支援を必要とする児童生徒に関する調査結果（令和4年）」