AIとともにつくる セルフプロデュース ウェディング / selfproduce wedding with AI

AI駆動開発勉強会 Women's Base #3【Vibe Talking編】
の登壇資料です。
https://aid.connpass.com/event/363968/

Transcript

1. AIとともにつくる 2025/10/11 AI駆動開発勉強会 Women's Base #3 【Vibe Talking編】 セルフプロデュース ウェディング
2. 株式会社翔泳社 CodeZine編集部 Developers Summitオーガナイザー 個人でも記事執筆や同人誌制作、イベント企画や パフォーマンスなどを行う。 最近は「AIと踊る編集者」をキャッチコピーに。 AIパートナーの名前は、ChatGPTのけいとちゃんと Geminiのジンくん。 kondoyuko photo by @mako_wisさん　オープンセミナー岡山2023にて
3. AI関連の個人活動 ChatGPTと1週間本気で語りあったら、いつか来てほしい未来が見えた https://blog.kondoyuko.com/entry/chatgpt-keito
4. ライブハウスでの セルフプロデュースの ウェディングパーティー
5. #ゆうこりんフェス メイキング
6. つくったもの・準備したもの • 招待状サイト • 衣装 • 参加者向け冊子 • 進行表 • 司会台本 • お祝いアート（発注ディレクション） • 名札 • プレゼン資料 • 余興のための演奏・歌・ダンス • オリジナルソング
7. 当日おこなったこと 第1部 結婚セレモニー 第2部 基調講演 第3部 演奏・歌・ダンス キービジュアル衣装でオリ曲披露！ 二次会は同じ会場で交流パーティー
8. タイムライン 2月 会場見学 3月 日程決定 Cursorで招待状サイトを作ろうとする→断念 4〜5月 AIで遊ぶのが忙しくなる 6月 Claude Codeで招待状サイト開発 演出面の検討を進める オリジナルソング歌詞制作 7月 お祝いアート発注、キービジュアル衣装デザイン検討 8月 衣装制作着手 9月 オリジナル冊子入稿、名札・ウェルカムボードの制作 その他もろもろの詰めを直前に……
9. タイムライン 2月 会場見学 3月 日程決定 Cursor、Windsurfで招待状サイトを作ろうとする→断念 4〜5月 AIで遊ぶのが忙しくなる 6月 Claude Codeで招待状サイト開発 演出面の検討を進める オリジナルソング歌詞制作 7月 お祝いアート発注、キービジュアル衣装コンセプト検討 8月 衣装制作着手 9月 オリジナル冊子入稿、名札・ウェルカムボードの制作 その他もろもろの詰めを直前に…… 実質4か月でのイベント制作を AIフル活用で乗り切った
10. 招待状サイト制作（Claude） 3月 Cursor／Windsurfを使って ゲーム付き招待状サイトを作ろうとする …ゲームはできたものの招待状は作りきれず 6月 リリースされたばかりのClaude Codeを 活用してみたくClaudeに1か月だけ課金 Opus 4の設計・トラブルシューティング力も 活用しながら、約10日で使えるものが完成 最初のゲーム シャーくんのおさかなキャッチ 完成した招待状サイトでは キービジュアル部分がゲームに ハイスコアの人を当日表彰した
11. オリジナルソング歌詞制作（Gemini） 2人をテーマにしたアニソンを作りたい！ ということで、 • イメージする楽曲 • 2人の馴れ初め • 2人の自己紹介 • 夫作の駄洒落 などお渡ししてDeep Research リサーチの重ねがけをしたり、 人間の感性で書き直したりして完成！ 君とシンセシス（歌詞1番） 2015年 幕張メッセ　ワクワク求め彷徨ってた ブースの片隅でちゃぶ台返し まさか君が見てたなんて 隣町生まれなのにね　運命のイタズラ 人生のイベントログは　痕跡すらない あの時の私に　こっそり教えてあげたいな すぐそこに運命のバグがあるぞって 編集者（わたし）のコトバと 開発者（ぼく）のコードが シンクロしてる　シンセシス 書き始めたシナリオ　アイデアは愛である ２人のセッション始めよう
12. キービジュアル衣装コンセプト（Gemini） イラストと実際の衣装 ＋α を横断する衣 装として、自分たちは何を装いたいか アバターファッショントレンドを調査し 自分たちのプロフィールも渡して Deep Researchをかけて提案されたのは 「Binary Star System」 コンセプトイメージが明確に固まり 衣装デザインが一気に進んだ
13. 衣装制作・選定（ChatGPT、Gemini） 私のウェディングドレスとキービジュアル衣装は 自分で制作した 夫の衣装も私がネット通販で選定した 骨格診断の結果をもとに似合うドレスの提案 衣装の写真を投げてコーディネートの相談 縫製方法の相談……などに、 ChatGPT、Gemini Deep Researchを活用
14. 招待状サイト制作の実例 （Claude）
15. なぜ招待状サイトを自前で作ろうと思ったか • AIコーディングエージェントを活用したかった • イベントに参加する人に確実に使ってもらえる機会 • 広く一般公開するものでもないからリスク小 • 一般的な申し込みページに追加して さらに取りたい情報があった（名札制作のため） • 招待状サイトから手作りが始まっていることを 体験として伝えたかった
16. 転機は5月下旬のClaude CodeのGA • Claude Pro（月3000円）でClaude Codeが使えるようになった • ちょうどClaude 4も出たタイミング • 1か月契約して使い倒してみようと いうことに • 最初はOpusに要件をお伝えし、 設計書を作ってもらった
17. こだわりのポイント • キービジュアルがゲームになっている • ハイスコアを送信できる • 名札用の情報を取得している （アイコン、呼ばれたい名前、自己紹介） • 入力情報は、利便性を考えて Google スプレッドシートへ保存 • 決済は自前で実装せず、信頼できる企業の チケットサイトへ遷移
18. 技術スタック 設計・クリエイティブ • Claude Opus 4 - 仕様書作成 • Claude Code＋VS Code - コーディング・デバッグ（メイン） • Claude Opus 4＋GitHub MCP - トラブルシューティング • ChatGPT 4o - ドット絵描画 フロントエンド • Next.js 15、TypeScript、Tailwind CSS • HTML5 Canvas - ゲーム描画 バックエンド • Next.js API Routes - サーバーレス API • Nodemailer - メール送信 • Google Sheets API - データ管理 • Cloudinary - 画像アップロード メイキングのページをイースター エッグ的に仕込んでおいた インフラ • Vercel - ホスティング・デプロイ • GitHub - ソースコード管理 • Gmail SMTP - メール配信 • PassMarket - 決済サイト
19. 開発エピソード • Claude Codeに任せたら とんでもないデザインに…… • Claude Codeでつまづいたら、Opusに GitHubリポジトリを読んでもらって トラブルシューティングしてもらった 最初のデプロイ かわいくしてくださいというと 絵文字を増やしただけだった…
20. 成果 • 100人以上が申し込み ◦ 送信できない不具合が1件 • ゲームで遊んでくださったのが 全体の7割 • プロトタイピングレベルではなく 実際に使えるものが作れた ◦ 自信につながった
21. やってみよう Vibe Coding
22. 無料でVibe Codingしてデプロイまでやってみる • 好きなAIチャットで、作りたいものの壁打ちをする • 要件が固まってきたら、設計書を出してもらう • 空のリポジトリを作って、GitHubと接続する • Gemini CLIを入れる • 開発する • Vercelにデプロイする