Slide 1

Slide 1 text

AIとともにつくる 2025/10/11 AI駆動開発勉強会 Women's Base #3 【Vibe Talking編】 セルフプロデュース ウェディング

Slide 2

Slide 2 text

株式会社翔泳社 CodeZine編集部 Developers Summitオーガナイザー 個人でも記事執筆や同人誌制作、イベント企画や パフォーマンスなどを行う。 最近は「AIと踊る編集者」をキャッチコピーに。 AIパートナーの名前は、ChatGPTのけいとちゃんと Geminiのジンくん。 kondoyuko photo by @mako_wisさん オープンセミナー岡山2023にて

Slide 3

Slide 3 text

AI関連の個人活動 ChatGPTと1週間本気で語りあったら、いつか来てほしい未来が見えた https://blog.kondoyuko.com/entry/chatgpt-keito

Slide 4

Slide 4 text

ライブハウスでの セルフプロデュースの ウェディングパーティー

Slide 5

Slide 5 text

#ゆうこりんフェス メイキング

Slide 6

Slide 6 text

つくったもの・準備したもの ● 招待状サイト ● 衣装 ● 参加者向け冊子 ● 進行表 ● 司会台本 ● お祝いアート(発注ディレクション) ● 名札 ● プレゼン資料 ● 余興のための演奏・歌・ダンス ● オリジナルソング

Slide 7

Slide 7 text

当日おこなったこと 第1部 結婚セレモニー 第2部 基調講演 第3部 演奏・歌・ダンス キービジュアル衣装でオリ曲披露! 二次会は同じ会場で交流パーティー

Slide 8

Slide 8 text

タイムライン 2月 会場見学 3月 日程決定 Cursorで招待状サイトを作ろうとする→断念 4〜5月 AIで遊ぶのが忙しくなる 6月 Claude Codeで招待状サイト開発 演出面の検討を進める オリジナルソング歌詞制作 7月 お祝いアート発注、キービジュアル衣装デザイン検討 8月 衣装制作着手 9月 オリジナル冊子入稿、名札・ウェルカムボードの制作 その他もろもろの詰めを直前に……

Slide 9

Slide 9 text

タイムライン 2月 会場見学 3月 日程決定 Cursor、Windsurfで招待状サイトを作ろうとする→断念 4〜5月 AIで遊ぶのが忙しくなる 6月 Claude Codeで招待状サイト開発 演出面の検討を進める オリジナルソング歌詞制作 7月 お祝いアート発注、キービジュアル衣装コンセプト検討 8月 衣装制作着手 9月 オリジナル冊子入稿、名札・ウェルカムボードの制作 その他もろもろの詰めを直前に…… 実質4か月でのイベント制作を AIフル活用で乗り切った

Slide 10

Slide 10 text

招待状サイト制作(Claude) 3月 Cursor/Windsurfを使って ゲーム付き招待状サイトを作ろうとする …ゲームはできたものの招待状は作りきれず 6月 リリースされたばかりのClaude Codeを 活用してみたくClaudeに1か月だけ課金 Opus 4の設計・トラブルシューティング力も 活用しながら、約10日で使えるものが完成 最初のゲーム シャーくんのおさかなキャッチ 完成した招待状サイトでは キービジュアル部分がゲームに ハイスコアの人を当日表彰した

Slide 11

Slide 11 text

オリジナルソング歌詞制作(Gemini) 2人をテーマにしたアニソンを作りたい! ということで、 ● イメージする楽曲 ● 2人の馴れ初め ● 2人の自己紹介 ● 夫作の駄洒落 などお渡ししてDeep Research リサーチの重ねがけをしたり、 人間の感性で書き直したりして完成! 君とシンセシス(歌詞1番) 2015年 幕張メッセ ワクワク求め彷徨ってた ブースの片隅でちゃぶ台返し まさか君が見てたなんて 隣町生まれなのにね 運命のイタズラ 人生のイベントログは 痕跡すらない あの時の私に こっそり教えてあげたいな すぐそこに運命のバグがあるぞって 編集者(わたし)のコトバと 開発者(ぼく)のコードが シンクロしてる シンセシス 書き始めたシナリオ アイデアは愛である 2人のセッション始めよう

Slide 12

Slide 12 text

キービジュアル衣装コンセプト(Gemini) イラストと実際の衣装 +α を横断する衣 装として、自分たちは何を装いたいか アバターファッショントレンドを調査し 自分たちのプロフィールも渡して Deep Researchをかけて提案されたのは 「Binary Star System」 コンセプトイメージが明確に固まり 衣装デザインが一気に進んだ

Slide 13

Slide 13 text

衣装制作・選定(ChatGPT、Gemini) 私のウェディングドレスとキービジュアル衣装は 自分で制作した 夫の衣装も私がネット通販で選定した 骨格診断の結果をもとに似合うドレスの提案 衣装の写真を投げてコーディネートの相談 縫製方法の相談……などに、 ChatGPT、Gemini Deep Researchを活用

Slide 14

Slide 14 text

招待状サイト制作の実例 (Claude)

Slide 15

Slide 15 text

なぜ招待状サイトを自前で作ろうと思ったか ● AIコーディングエージェントを活用したかった ● イベントに参加する人に確実に使ってもらえる機会 ● 広く一般公開するものでもないからリスク小 ● 一般的な申し込みページに追加して さらに取りたい情報があった(名札制作のため) ● 招待状サイトから手作りが始まっていることを 体験として伝えたかった

Slide 16

Slide 16 text

転機は5月下旬のClaude CodeのGA ● Claude Pro(月3000円)でClaude Codeが使えるようになった ● ちょうどClaude 4も出たタイミング ● 1か月契約して使い倒してみようと いうことに ● 最初はOpusに要件をお伝えし、 設計書を作ってもらった

Slide 17

Slide 17 text

こだわりのポイント ● キービジュアルがゲームになっている ● ハイスコアを送信できる ● 名札用の情報を取得している (アイコン、呼ばれたい名前、自己紹介) ● 入力情報は、利便性を考えて Google スプレッドシートへ保存 ● 決済は自前で実装せず、信頼できる企業の チケットサイトへ遷移

Slide 18

Slide 18 text

技術スタック 設計・クリエイティブ • 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 - 決済サイト

Slide 19

Slide 19 text

開発エピソード ● Claude Codeに任せたら とんでもないデザインに…… ● Claude Codeでつまづいたら、Opusに GitHubリポジトリを読んでもらって トラブルシューティングしてもらった 最初のデプロイ かわいくしてくださいというと 絵文字を増やしただけだった…

Slide 20

Slide 20 text

成果 ● 100人以上が申し込み ○ 送信できない不具合が1件 ● ゲームで遊んでくださったのが 全体の7割 ● プロトタイピングレベルではなく 実際に使えるものが作れた ○ 自信につながった

Slide 21

Slide 21 text

やってみよう Vibe Coding

Slide 22

Slide 22 text

無料でVibe Codingしてデプロイまでやってみる ● 好きなAIチャットで、作りたいものの壁打ちをする ● 要件が固まってきたら、設計書を出してもらう ● 空のリポジトリを作って、GitHubと接続する ● Gemini CLIを入れる ● 開発する ● Vercelにデプロイする