開発事例 / Webアプリ

Note to Podcast - AI記事音声化

noteの記事URLを貼るだけ。AIがラジオ風ポッドキャストを自動生成。

公開中

note記事のURLを入力するだけで、Playwrightが記事コンテンツを自動取得し、Gemini AIがラジオのトーク番組のように聴きやすい台本に自動変換。自然な音声でポッドキャストを生成します。記事をわざわざ読む時間がない人のために、「聴ける記事」という新しいコンテンツ消費体験を提供。MP3ダウンロード対応でオフラインでも聴取可能。

この作品の要点

困っていたこと	noteの長文記事を読む時間がない。
やったこと	URL入力だけで全工程を自動化し、記事を聴けるコンテンツに変換。
起きたこと	記事の音声消費という新しい体験を実現。

どこでつまずいたか
できあがったもの
どう作ったか
相談する

どこでつまずいたか

01noteの長文記事を読む時間がない

02記事コンテンツの音声化には台本作成と収録が必要

03既存の音声化サービスは機械的で聴きづらい

どう解いたか

01URL入力だけで全工程を自動化し、記事を聴けるコンテンツに変換

02ラジオ風台本で聴きやすさを最適化

03AIが文脈を理解した自然な台本リライトを実現

マンガでわかる

Note to Podcast - AI記事音声化のしくみを4コマ漫画で説明した図

できあがったもの

できあがった画面

結果

01	記事の音声消費という新しい体験を実現
02	コンテンツクリエイターの発信チャネルを拡大
03	通勤・家事中の情報インプット時間を創出

この作品でできること

URL入力だけで記事→台本→音声の全自動変換
ラジオ風の聴きやすい台本にAIがリライト
Playwrightで記事コンテンツを自動取得
MP3エンコードでダウンロード・共有可能
複数記事のバッチ処理に対応

どう作ったか

できること3項目

URLを貼るだけの簡単操作	noteの記事URLを入力フィールドに貼り付けるだけ。Playwrightが記事のタイトル・本文・画像を自動スクレイピングし、コンテンツを取得します。
ラジオ風台本に自動変換	Gemini AIが記事の内容を解析し、ラジオのトーク番組のような聴きやすい会話調の台本に自動リライト。重要なポイントを強調した構成で記事の核心を伝えます。
MP3ダウンロード対応	生成されたポッドキャストをMP3形式でダウンロード可能。通勤中や運動中に、オフラインでも記事コンテンツを聴くことができます。

つくり4項目

Playwright Scraping	Playwrightでnote記事のDOMを解析し、タイトル・本文・画像を正確に取得。SPAにも対応するヘッドレスブラウザスクレイピング。
Gemini AI台本生成	記事の文脈と論理構成を理解し、ラジオ番組の台本フォーマットに変換。一方的な朗読ではなく会話調で聴きやすさを最適化。
lamejs MP3エンコード	ブラウザ上でMP3エンコードを実行し、サーバーコストを削減。クライアントサイドで完結する高効率なエンコーディング。
Supabase Storage	生成された音声ファイルをSupabase Storageに保存。ユーザーごとのポッドキャストライブラリを安全に管理。

使いどころ3項目

通勤中のインプット	電車やバスでの移動時間に、気になるnote記事をポッドキャスト感覚で聴取。スキマ時間を学習時間に変換。
コンテンツクリエイター	自分のnote記事を音声コンテンツに変換し、新しい発信チャネルを開拓。読者以外のリスナー層を獲得。
情報キュレーション	複数の記事をまとめてポッドキャスト化し、テーマ別のプレイリストを作成。効率的な情報収集を実現。

担当と道具

担当	企画・UI設計・フルスタック開発・AI連携
使った技術	Next.js 16・TypeScript・Tailwind CSS 4・Gemini API・Supabase・Playwright・lamejs