Genspark課金してみたらGeminiより良かった【Mixture of Agents楽しい】
大下勇次
クリメモ クリエイティブ備忘録
全自動プレゼンマシンをWordPressプラグインで自作した話【バイブコーディング】
大下勇次
記事内に商品プロモーションを含む場合があります
目次
分岐するプレゼンが全自動で走る、そんなWordPressプラグインを作った
Facebookを眺めていると、LOOVというツールの広告がやたら流れてくる時期があった。
完璧な営業マンを全自動で走らせる
みたいなコンセプトのインタラクティブ動画プラットフォームで、視聴者の属性や回答に応じてプレゼンの内容が変わり、そのまま資料請求やCVまで誘導できるという法人向けSaaS。
正直、けっこう気になってたけど、AIに料金感を調べてもらったら、月額9万円〜の年間契約で初期費用も別途かかるらしい。年間にすると100万超え。個人で遊ぶにはやりきれんなと。
じゃあ自分用に作ってみるか、という話になった。
もちろん私はエンジニアではないので、コードは1行も書けない。Claude Codeに「WordPressのプラグインとして実装するっていうのはどうだい」と相談したら、ナイスアイディアと言ってくれたので、そういうことで。AIに全部作ってもらうことにした。
結果として、画像＋ナレーション原稿で走る「分岐するプレゼンテーション」がWordPress上で動くプラグインができた。動画のアップロード機能はあえて外してある。LOOVの核は動画内インタラクティブだけど、自分の用途だとスライド＋音声読み上げで十分だったので、動画なしの設計にした。その方がコンテンツ作成も楽だし。
この記事では、何ができるのか、どういう設計思想なのか、そしてバイブコーディングで作ったものを公開することの「ケツ持ち問題」について書いておく。プラグインのZIPは記事の最後に貼ってある。
このツールを使って、このツール自身の紹介をしたプレゼンは↓からご覧いただけます。
このプラグインで何ができるのか
機能は非常にシンプル。いやまあシンプルじゃねえんだけど。
コアの仕組みだけ先に説明すると、スライド1枚ごとに画像とナレーション原稿を登録して、それを順番に、あるいは分岐させながら自動で再生するプレゼンテーションマシン。WordPressのプラグインとして動くので、パーマリンクが生成されて、そのURLにアクセスすれば誰でもプレゼンを視聴できる。
スライド＝画像＋ナレーション原稿＋音声読み上げ
1スライドは「画像1枚」「ナレーション原稿」「音声」のセット。音声の再生方法は3種類から選べる。
ブラウザの内蔵TTS（テキスト読み上げ）は品質が正直イマイチだけど、原稿を変えたら即反映されるので、制作中のプレビューには便利。人間が吹き込んだMP3を登録することもできるし、Google Cloud TTSで生成した音声を使うこともできる。
Google Cloud TTSはAPIキーが必要だけど、取得自体は無料。標準音声なら月400万文字、WaveNet音声でも月400万文字の無料枠がある。プレゼンのナレーション程度ならまず超えない。APIキーの取り方はAIに聞けばすぐ教えてくれるし、一度設定画面に入れたら後は忘れてていい。
テキストベースでいつでもTTSによる読み上げができるので、ちょっとした情報更新があってもすぐに修正できるのが気に入ってる。動画だと動画の取り直しとか動画編集が必要になるからね。
選択肢で分岐する、タグで見せ分ける
各スライドには選択肢を追加できて、どの選択肢を押したらどのスライドに飛ぶかを個別に設定できる。CTAボタンを置いて外部URLに誘導することもできる。ここまでは想像通りだと思う。
面白いのは「タグによる表示制御」の仕組み。特定の選択肢を踏んだユーザーにタグを付与して、そのタグを持っている人にだけ特定のスライドを表示したり、逆に非表示にしたりできる。
たとえば、プレゼンの冒頭で「あなたの属性を教えてください」と聞いて、「社長です」「情シス部長です」「平社員です」みたいな選択肢を出す。で、「平社員です」を選んだ人にだけ「いや、上司ってマジでうざいですよね」みたいな、社長に見られたらまずいけど平社員には刺さるスライドを表示する。逆に社長タグを持っている人には見せない。そういう出し分けができる。
属性別に刺すスライドだけを見せるプレゼン。営業で使うなら、相手の立場に応じて話の流れを変えられるのはかなり実用的だと思う。
作って終わりじゃない、計測できる
プレゼンを作って配るだけじゃなく、ちゃんと計測できるアナリティクス機能を内蔵した。
遷移フロー図で「どのスライドからどの選択肢に何％が流れたか」がビジュアルでわかる。視聴セッション数、CTAクリック率、平均視聴時間、完走率、途中離脱率、スライドごとにナレーションが最後まで聞かれた率。けっこう細かく取れる。
最初はGA4連携だけでやろうとしていたけど、GA4は反映が遅いし分析軸の設定がめんどくさい。なので内部アナリティクスも持ちつつ、GA4にもイベントを送れる二刀流にした。
さらに、1つのプレゼンに対して複数のトラッキングID（タグ）を作れるようにしてある。営業Aが配った分、営業Bが配った分、メルマガ経由、サイトに埋め込んだ分、それぞれにIDを振って比較できる。ID別に見る、全部まとめて見る、ID未付与だけ抜き出す、みたいな使い分けも可能。どの配り方が一番反応いいか、数字で比較できるわけで。
運用を回すために積んだ周辺機能が本体より重い
コアの仕組みだけなら確かにシンプルなんだけど、実運用を回そうとすると、周辺機能が山ほど必要になる。正直、こっちの方が実装量としては重かったんじゃないかと思う。
PDF→スライド一括生成とCSV入出力
既存のPDF資料からスライドを作りたいケースは多いはず。PDF→スライド一括生成の機能を作ったので、たとえば60ページのPDFを渡したら、60ページ分のスライド枠が自動で作られる。タイトルは「ページ1」「ページ2」みたいな仮のもの、ナレーション原稿は空の状態。
ここからCSVで書き出して、ナレーション原稿を一括で入れていく。CSVならAIに「このスライド画像に対する読み上げ原稿を書いて」と投げて自動生成もできる。書き終わったCSVを読み込めば、スライドタイトルとナレーション原稿が一括反映される。
PDF取り込み→CSV書き出し→AI原稿生成→CSV読み込み。この流れで回せば、60ページのプレゼンでもかなり短時間で形になる。
ワード出力で上司に見せる、ZIP出力で本番に移す
上司にCSVを渡すと「なんやこれ」ってなるので、ワード形式での出力も作った。スライド画像、ナレーション原稿、CTAや選択肢の設定情報が人間にわかる形で並んでいるので、これを印刷して赤入れしてもらうなり、画面上で確認してもらうなりできる。
本番移行にはZIPエクスポートを使う。画像とJSON（設定データ）をまとめてZIPに出力して、別のWordPress環境にインポートすれば一発で復元できる。デモ環境で作り込んで、上司のOKが出たら本番にZIPでポンと移す、という運用を想定している。
一括TTS生成、色の一括置換、選択肢の一括コピペ
Google Cloud TTSでの音声生成も、60ページあったら60回ボタンを押すのはだるいので、一括生成ボタンを用意した。全スライドのナレーション原稿を一気にTTSで音声化して上書き登録してくれる。
選択肢ボタンやCTAボタンの色は、同じ色コードのものを別の色にまとめて変更する一括置換機能を入れた。「やっぱりブランドカラー変えたい」みたいなときに便利。
選択肢の一括コピー＆ペーストも地味に重要で、サブセクションの「次に進む」「前に戻る」みたいな定型の選択肢セットを、4つ5つまとめてコピーして別のスライドに貼り付けられる。これがないと同じ選択肢を何十回も手入力する羽目になる。
ノードベースのビジュアルエディターは作ったけど
どのスライドからどの選択肢でどこに飛ぶかを、ノードのつながりとして視覚的に編集できるビジュアルエディターも実装した。中で何が起きてるかは私は全く理解してないんだけれども、Claude Codeが作ってくれた。
このノード遷移図をPNGで書き出す機能も一応ある。ただ、スライド数が多いと細かすぎて見てらんない。これはあんまり実用では使わないかなというのが正直な所感。作ったけど。
導入と初期設定、パスワードの話
WordPressプラグインなので、ZIPをインストールすれば動く。初期設定はプラグインの設定画面から、TTSエンジンの選択（ブラウザTTS / Google Cloud TTS）、Google Cloud TTSを使うならAPIキーの入力、GA4連携をするなら測定IDの入力。比較的楽に導入できるとは思う。
プレゼンはWordPress上で1つの投稿のようにパーマリンクが生成されるので、そのURLを共有すれば視聴してもらえる。閲覧パスワードを設定する機能もあるけど、ここは割り切りの設計になっている。
パスワードは内部で平文保持している。ハッシュ化していない。セキュリティ的にはガバガバ。ただ、そもそも機密文書を守るためのパスワードではなく「URLを知ってる人以外にはちょっとだけ見せたくない」程度の簡易用途を想定している。平文にしておけば後からパスワードを忘れた時に確認できるし、仕組みもシンプルに保てる。シビアなセキュリティが必要な用途には向いていない、そこは明確に。
バイブコーディングの光と影、ケツ持ちは誰がするんだ
ここまで機能の話をしてきたけど、一番書いておきたいのはこの話。
作れるけど理解はしてない
このプラグイン、私が中身のコードを完全に理解しているかというと、していない。Claude Codeに要件を伝えて、出来上がったものをテストして、動いたらOK、動かなかったら「ここがおかしい」とフィードバックして直してもらう。その繰り返しで出来上がった。
堅牢化はできる限りやった。別のClaude Codeセッションを立てて、批判的な目線でコード全体をチェックさせた。SQLインジェクションみたいな典型的な脆弱性は対策したつもり。「つもり」でしかないのが正直なところだけど。
公開するけど保証はしない
このプラグインは、この記事の末尾にZIPファイルで貼ってある。
ただし、私はエンジニアではないし、これを継続的なプロジェクトにするつもりもない。脆弱性は数日で状況が変わるかもしれないし、WordPressのメジャーアップデートで動かなくなるかもしれない。その時にこのプラグインがアップデートされるとは限らない。
私自身が継続的に使っていれば、個人的にアップデートして、ついでにここのファイルも差し替えるかもしれない。でもすべて「かもしれない」で、何も保証されていない。セキュリティ上のリスクは利用者の自己責任になる。
ライセンスはGPL v2 or later。WordPress本体と同じライセンス。ざっくり言うと「好きに使っていい、改変も再配布も自由、ただし作者は一切責任を取らない」というもの。無保証。ノーサポート。動かなくても、データが飛んでも、サイトが爆発しても、私は何もしない。正確には「できない」が近い。中身を完全に理解していない人間に、責任の取りようがない。GPLはそういう前提のライセンスなので、そこは噛み合っている。
バイブコーディングの課題は、自分で使う分にはいいけど、表に公開した瞬間にケツ持ちがいなくなること。コードを書いたのはAI、要件を出したのは私、でも中身を完全に理解している人間は誰もいない。この状態で配布する。それがバイブコーディングの現実。
LOOVの権利関係はAIチェックで「たぶん大丈夫」
LOOVのコードも営業上の秘密も一切持っていない。公開情報に基づいて設計して、自分が欲しい機能を載せた。AIに設計ドキュメントとLOOVの機能・特許情報を照らし合わせてもらったところ、「LOOVは動画内インタラクティブ＋動画上でのユーザー情報取得がポイント。このプラグインは動画なしのスライド分岐なので方向性が異なり、問題ないと考えられる」とのことだった。
ただし、これはあくまでAIの判断であって、資格を持った専門家が調査・判断したものではない。公開のケツ持ち問題は、ここにもある。
なお、LOOVに限らず、このプラグインが自社サービスの権利を侵害していると思われる方がいらっしゃれば、当ブログのお問い合わせフォームからご連絡ください。真摯に対応します。
そうです、これがバイブコーディングです
エンジニアでもない人間が、AIと対話するだけで、選択肢分岐、タグ制御、3種類のTTS対応、アナリティクス、ノードエディター、PDF一括取り込み、CSV入出力、ZIP移行まで備えたWordPressプラグインを作れてしまった。
理解はしてない。保証もしない。でも動いてるし、自分の用途には十分使えている。
プラグインのZIPファイルは以下に置いておく。使う方は自己責任で。でも、もし上手く使えたら、出典みたいな感じでこの記事を紹介してくれたら嬉しい。
WordPressの「プラグインを追加」画面を開いて、画面上部の「プラグインのアップロード」ボタンからアップロードすれば導入できます。
そうです。これがバイブコーディングです。面白い時代へようこそ。
ABOUT ME
地方で働く30代デスクワーカー。
新しいモノ・面白いモノが好きで、3Dプリンターやドローン、VRゴーグル等色々手を出しては一通り触って飽きて次のおもちゃに手を出してます。
忙しい毎日だからこそ、趣味で買ってるガジェットを活かして毎日をちょっと快適にしたり、ちょっとした工夫や"いいモノ"で暮らしが豊かになる瞬間が好きです。
学生時代には写真や映像の撮影編集などをかじってて、以前はYoutubeにも投稿していました。今は殆ど放置状態ですが、Youtubeへの投稿も一通り遊んだ趣味の一つです。
