元銀行員がAIだけでアプリを量産！「バイブコーディング実演セミナー 」

2026年6月19日@株式会社ネクストビジョン

Transcript

1. ー 元銀行員がAIだけでアプリを量産！ ー バイブコーディング実演セミナー タケムラテックラボ 武村 達也 2026年 6月 19日 @株式会社ネクストビジョン
2. 本日のアジェンダ 2 1 第1部 自己紹介（5分） 2 第2部 バイブコーディングとは何か（5分） 3 第3部 ライブデモ①「ゼロからアプリを作る」（35分） 4 第4部 ライブデモ②「既存コードの改修・拡張」（10分） 5 第5部 私の実践から学んだこと（10分） ★ 番外編 コーディング以外のClaude Code活用（3分） 6 第6部 まとめ＆明日からのアクション（5分） 7 質疑応答（5分）
3. はじめに 本日ご紹介する内容は、あくまで私個人の実践事例です。 より良いやり方やツールがあるかもしれません。 「こういうやり方もあるんだな」という視点で お聞きいただければ幸いです。
4. 第1部 自己紹介 5 min 4
5. 講師紹介 4 https://youtu.be/5moa-0SYlrs ※当日は動画を流しました
6. 講師紹介 6 武村 達也 タケムラテックラボ 代表 ／ HiBiS DX・ITトレンド研究部会 会長 1993年、広島大学経済学部卒業。同年、広島銀行に入行。 法人融資や販売戦略など、営業店・本部で28年間銀行業務に従事。 2017年〜 広島県商工労働局に出向。ハッカソン開催や 企業向けIoT人材育成講座の立ち上げなど、イノベーション推進に携わる。 2021年〜 ひろぎんHD デジタルイノベーション部にて社内DX教育を主導。 2024年〜 エル・ティー・エスに転じ、 広島県「イノベーション・ハブ・ひろしまCamps」のコミュニティ・マネージャーとして起業支援を担当。 2011年から趣味でiPhoneアプリ制作 2024年頃からAIを活用したアプリ開発を開始。スマホアプリ・Webアプリなど多数のプロダクトを個人で開発。 2026年2月〜 独立 AI・IoT・XRを活用したアプリ開発を手がけるほか、企業・商工会議所などでの講演活動にも幅広く取り組んでいる。 写真
7. 第2部 バイブコーディングとは何か 5 min 7
8. バイブコーディングとは 8 「自然言語でAIに指示して ソフトウェアを作ること」
9. ツール 9 Claude Code AIモデルと直接対話 （汎用AIアシスタント） 開発ツール ChatGPT
10. バイブコーディングと私 2022年11月30日 ChatGPT リリース 10
11. バイブコーディングと私 その3日後（2022年12月3日） 「M5StickCPlusの画面に「Hello World」を表示するプログラムを作ってください」 11 「Hello World」を表示はするけど、 センシングするなど少し高度なことをやらすと 全然ダメだった。
12. バイブコーディングと私 2024.7 Unreal Engine AIアバター 12
13. バイブコーディングと私 2024.12 自分のポートフォリオサイト 13
14. バイブコーディングと私 Andrej Karpathy, OpenAI, CC BY 3.0, via Wikimedia Commons アンドレイ・カーパシー 私が「バイブコーディング」と呼んでいる新しいタイプのコーディング があります。それは、バイブスに完全に身を任せ、指数関数的 な処理を好み、コードの存在すら忘れてしまうようなコーディング です。 （中略） 私はプロジェクトや Web アプリケーションを構築していますが、 実際にはコーディングをしているわけではなく、単に何かを見て、 何かを言って、何かを実行して、何かをコピーして貼り付けるだ けで、ほとんど動作します。 Andrej Karpathy, https://x.com/karpathy/status/1886192184808149383 2025年2月 バイブコーディングという言葉が爆誕 14
15. バイブコーディングと私 15
16. バイブコーディングと私 16
17. バイブコーディングと私 https://insta-gourmet.jp/ SNSぐるめサーチ 17
18. バイブコーディングと私 https://www.kusakari-mitsumori.com/ 草刈り見積もりサポート 18
19. バイブコーディングと私 https://www.matome-post.com/ まとめポスト 19
20. 今日のゴール 20 「帰ったら自分も作ってみよう」 と思ってもらうこと
21. 第3部 ライブデモ①「ゼロからアプリを作る」 35 min 21
22. ライブデモ① ー ここに注目してください 22 1 日本語だけで指示 コードは一切書きません。 2 エラーも対話で解決 エラーが出ても慌てない。AIに「直して」と言えばOK
23. ライブデモ① 23 ゲーム作成 ChatGPT使用 プロンプト： 「Next Visionなゲームを作って」 https://dapper-kheer-dcf167.netlify.app/ ★こちらに公開しました（スマホでも遊べます） ★コード（Github Gist) https://gist.github.com/tatsuya1970/fdd47351b7218e607ef1d239eaeb7786
24. ライブデモ① 24 リクエスト① オンラインバンキングアプリ Cursor使用 プロンプト： 「オンラインバンキングアプリを作って」 ※この画像およびリンク先は セミナー当日のものではなく、 講師が事前に作成したものです。 GitHub： https://github.com/tatsuya1970/banking
25. ライブデモ① 25 リクエスト② 株で儲けるアプリ Claude Code 使用 プロンプト： 「株で儲けるアプリを作って」 ※この画像およびリンク先は セミナー当日のものではなく、 講師が事前に作成したものです。 URL： https://lf4zbzxbezgronkwbe6w97.streamlit.app/ GitHub： https://github.com/tatsuya1970/kabu
26. ライブデモ① 26 リクエスト③ DB付きのウェブアプリ Claude Code 使用 プロンプト： 「JavaでDB付きのウェブアプリを作って」 （ポイント）Controller、Service、Repositoryなどの役割を意識しなくてもwebアプリが作成できるか？ GitHub: https://github.com/tatsuya1970/java-db-sample
27. その他皆さんのリクエストから作ったアプリ 27 RPG URL： https://tatsuya1970.github.io/nv-05-RPG-Hiroshima/ GitHub： https://github.com/tatsuya1970/nv-05-RPG-Hiroshima
28. 第4部 ライブデモ②「既存コードの改修・拡張」 10 min 28
29. ライブデモ② ー こんな経験ありませんか？ 29 「先輩が作ったコード、引き継いだけど 中身がさっぱり分からない…」 コードの理解 「このコードを説明して」→ 図解レベルの説明が返ってくる 機能追加 「ここにXX機能を追加して」→ 差分が自動生成される バグ修正 「バグを見つけて」→ 問題の特定＆修正を自動で
30. ライブデモ② 30 講演者が10年前に作ろうとして途中で挫折したプロジェクトをAIに見てもらった 「このコードを図解で説明して」 「バグを見つけて」 初見なのに数秒で全体を把握
31. ライブデモ② ー ポイント 31 新規開発だけではない ・コードレビューの補助 ・ドキュメント作成の自動化 ・テストコードの生成 ・脆弱性診断
32. 第5部 私の実践から学んだこと 10 min 32
33. 実際に作ったプロダクト 33
34. うまくいく出し方 3つのコツ 34 1 2 要件定義＋デザインを先に作る 「何を作るか」を箇条書きで整理し、 デザインはパワポで描いてスクショで渡すと精度が激変 3 CLAUDE.mdでルールを共有 プロジェクトの方針・制約・フォルダ構成を ファイルに書いておくとAIが常に参照してくれる 指示は具体的に ×「もっといい感じにして」 ◦「バトル画面のHPバーを左上に固定して、敵の名前をバーの横に表示して」
35. ハマりどころ 35 ! AIに丸投げしたら、全く違う方向のものが出来上がった ! 指示が曖昧すぎて、何度もやり直しに… ! 動いたと思ったら、見えないところでバグだらけ ! APIキーをGitHubに公開してしまい…
36. リリース前のチェック 36 ✓ 1. 機能テスト 正常系・異常系・境界値を 網羅してテスト ✓ 2. コード品質レビュー AI生成コードの可読性・ 依存関係・技術的負債を確認 ✓ 3. セキュリティ監査 認証・入力チェック・ APIキー管理など ✓ 4. パフォーマンス・信頼性 応答速度・負荷耐性・ エラーハンドリング ✓ 5. ユーザビリティ検証 初見での迷い・ レスポンシブ対応 ✓ 6. デプロイ・運用準備 監視・ バックアップ・切り戻し手順
37. 気づいた視点 37 業務理解 × AI ＝ 最強の武器 「何を作りたいか」を明確に持っている人が強い
38. 気づいた視点 業務理解 × AI ＝ 最強の武器 38 https://x.com/chomado/status/2064631914196255068?s=20 マイクロソフトちょまどさんのXの投稿より Claude Code ハッカソンで 上位 5 位のうち エンジニアはたった 1 人だった！ (弁護士、エンジニア、心臓専門医、道路の専門家、音楽家) 「今後は、コードを書くスキルより ドメイン知識を持つことの方が重要になってくるだろう」
39. 番外編 コーディング以外のClaude Code活用 3 min 39
40. AIが毎日の業務をサポート 40 1 Googleカレンダー連携 毎朝、今日の予定を自動で通知してくれる 2 Slackから閲覧・指示 スマホからAIに作業を依頼、進捗確認もSlack上で完結 3 請求書の自動管理 請求書の作成・送付管理をAIがサポート 4 SNS動画の自動生成 プロダクトに合った短尺動画を毎日自動で作成・投稿 5 資料作成 パワーポイントなどのスライド資料をAIが自動生成 MCP（外部ツール連携）で、コーディング以外のあらゆる業務を自動化
41. 私のAI社員体制 41 個人事業をAI社員チームで運営している CEO 方針決定・優先順位判断 Planner 計画・タスク分解・進捗管理 Engineer 開発・コード修正・技術調査 Sales 提案・営業文・見積 Writer ブログ・SNS・告知文 Accountant 請求・収支管理 AI-Company/ ├── CLAUDE.md（会社の方針） ├── employees/ │ ├── ceo.md │ ├── planner.md │ ├── engineer.md │ ├── sales.md │ ├── writer.md │ └── accountant.md ├── projects/（各プロジェクト） ├── accounting/（請求・収支） ├── outputs/（成果物） ├── sns-video/（SNS動画自動生成） └── memory.md（引き継ぎ記録） ディレクトリ構成
42. 第6部 まとめ・明日からのアクション 5 min 42
43. 本日のまとめ 43 バイブコーディング ＝ AIに自然言語で指示してアプリを作る手法 コードが書けなくても、アイデアさえあれば形にできる 「作りたいもの」を明確にすることが最重要 AIへの指示は「要件定義」から始められる 困ったらスクショとコピペでAIに相談 まず自分が欲しいものを作ることが上達の近道
44. まず週末に「自分が欲しいもの」を作ろう 44 業務のことよりも、まず自分の興味から始めるのが一番続く、理解が早まる 1 「何を作りたいか」を決める 自分が欲しいと思ってたものを選ぶ 2 AIと一緒に要件定義する AIに実装してもらう 3 4 困ったら全部AIに聞く。スクショとコピペが最強の武器。 誰かに見せる・公開する SNSに投稿しよう（バズるかも！） API料金がかからないアプリはネットに公開してみよう 株価分析アプリ ゴルフスコア管理 動画作成アプリ VRゲーム 家計簿アプリ 旅行プランナー
45. 最後に 45 コードが書けるかではなく 何を作りたいかが大事 AIは「難しい技術」ではなく「便利な道具」 使いながら覚えるのが一番の近道です
46. 宣伝 https://luma.com/md51c6cj 6月27日（土） 16:00〜
47. ありがとうございました タケムラテックラボ 武村 達也 47