バイブコーディング入門：ビジネスを加速させる迅速なプロトタイピング術

AIに自然言語で指示を出すだけでコードを生成できる「バイブコーディング」は現代のビジネスパーソンにとって大きな武器となりうるスキルです。上手く使いこなせば、新規サービス開発時の迅速なプロトタイピング（検証用のアプリ開発）や、業務用のツール開発による日常業務の効率化に役立てることができます。

本セミナーでは、バイブコーディングの概念とその実用性を、専門用語を使わずわかりやすく解説いたします。簡単なアプリ開発のデモンストレーションを通じて、その手軽さと迅速性を実感していただくことができます。さらに、ChatGPTやClaudeといった主要なAIツールの特徴と、それらを効果的に活用するためのプロンプト作成の具体例をご紹介。開発における留意点や実践的なテクニックをお伝えします。

主な内容
・バイブコーディングとは？AIを用いた開発でできること
・非エンジニアがバイブコーディングをビジネスに活かすには？
・ChatGPTやClaude、Gemini等AIツールの特徴
・プロンプトの書き方のコツ
・AIをセキュアに業務利用する方法
・バイブコーディングの実演

こんな方におすすめ
・プログラミング経験はないけれど、AIを活用して業務を効率化したい方
・AIの業務利用に興味があるけれど、セキュリティ面に不安がある方
・最新のAI技術について知りたい方

Transcript

1. バイブコーディング入門 ビジネスを加速させる迅速なプロトタイピング術 NCDC株式会社 2025 / 08 / 26 NCDC Online Seminar
2. 2 藤原 啓珠 エンジニア Registered Scrum Master アプリケーションエンジニア NCDCにて、自社サービスである施工管理システム「ミエルコウジ」の 開発を行い、並行してクライアントワークに従事。 複数のプロジェクトで生成AIを活用しつつ、社内活動として生成AI利用 のルール整備などを行っている。
3. デジタルビジネス立ち上げを一元的にサポート l デジタルビジネスに必要な要素にフォーカスし、⼀元的に提供しています l スモールスタートでの検証から、本開発・継続的な改善までサポートします 3 ワークショップを中⼼とし た合理的なプロセスで、ビ ジネスモデルの検討からUX デザインまで、迅速に⾏い ます 関係者が多数いる場合の組 織横断、会社横断のファシ リテーションも得意です 新規性の⾼いプロジェクト で は M V P （ M i n i m u m Viable Product）を⽤いた 検証を⾏うなど、⽬的に応 じて段階的な開発を企画し ます 早い段階でモックやプロト タイプを⽤意してユーザの 評価を確認します ユーザとのタッチポイントとなる各種デバ イスのフロントエンドデザインから、クラ ウドサービスを駆使したバックエンドの開 発まで。多様なテクノロジーをインテグ レーションします l AI / IoT l モバイル・ウェブ アプリ開発 l クラウドインテグレーション l システムアーキテクチャコンサルティング など ビジネスモデルのデザイン スモールスタート・PoC システム・インテグレーション ユーザ視点を⼤切にした アイデア・企画 モックやプロトタイプ の開発・検証 システム・アプリ開発 継続的な改善
4. l ⻑期的な視点を持ち、お客さまと⼀緒に考え、そのプロセスも財産としていただく伴⾛型の⽀援を得意としていま す l システム開発においても、内製化の体制構築⽀援からエンジニア・デザイナーなど専⾨職のスキルトランスファー まで多数の実績があります お客さまが主役となるプロジェクト設計 4 お客さま デジタルビジネスを 強みにできる企業を⽬指す 必要なものを⾃らつくり、 改善し続けられる 体制の整備、技術の獲得 ユーザーのインサイトや テクノロジーを理解して 企画できる知識の獲得 外部依存せず、社会の変化や技術の進化に対応し、⾃⾛できるチカラの獲得 コンサルティングや 研修、ワークショッ プ スキルトランス ファー お客さまの⽬的に応じた 伴⾛⽀援のご提案 豊富なDX⽀援経験により 蓄積されたノウハウ DX戦略策定、PoC、 新規デジタルサービス企画、 UX/UIデザイン、 アジャイル開発、DevOps、 システムのモダナイズ…
5. Business 新規事業⽴ち上げからの伴⾛ 業務改⾰やIT改⾰の⽀援 Design ユーザ視点での設計 Technology 技術による課題解決 Innovation Consultant デザイナーやエンジニアと協⼒して、 新規サービス⽴案の⽀援や新規性の ⾼いシステムの要件定義を⾏う。プ ロジェクト全体のマネジメント役も 担う UX/UI designer UIデザインはもちろん、デザ イン思考やUXデザインのフ レームワークを⽤いて上流⼯ 程 （ サ ー ビ ス 全 体 の U X 設 計）を担う Engineer モバイルやWeb、クラウド、 IoTやAIなど、新しい領域の 技術に特化。つくるだけでな く技術コンサルティングがで きる知⾒を持つ者も多数在籍 l AWS サービスパートナー l AWS Lambdaパートナー l 内製化⽀援推進AWSパート ナー Tech×Design×Biz 一体でお客さまを支援 l 3領域でサービスを展 開 l 各領域のスペシャリス トを社内に揃える体制 5
6. はじめに
7. はじめに l本セミナーは、以下のような方向けに話します lプログラミング経験はないけれど、AIを活用して業務を効率化したい方 lAIの業務利用に興味があるけれど、セキュリティ面に不安がある方 lバイブコーディングをビジネスで活かす方法を知りたい方 7
8. 今日の内容 lバイブコーディングとは何か？何ができるのか？ l非エンジニアがバイブコーディングをビジネスに活かすために l各種生成AIツールの特徴と選び方 l実践的にバイブコーディングを行う方法 lAIをセキュアに業務利用するための注意点 8
9. こんな悩みはありませんか？ 9 「良いアイデアがあるのに、形にするスキルがない…」 「エンジニアとの意思疎通がうまくいかない…」
10. こんな悩みはありませんか？ 10 「良いアイデアがあるのに、形にするスキルがない…」 「エンジニアとの意思疎通がうまくいかず、 作りたいもののイメージが伝わらない… 」 バイブコーディングで 解決できるかも！
11. なぜ、AI活用がビジネスの常識なのか
12. ビジネスを変えるAIの波 lこれまで、業務の自動化やアプリケーションの開発は、専門知識を持 つエンジニアやIT部門の仕事だった lしかし、生成AIの登場によりプログラミング経験のないビジネスパーソンで も簡単なアプリやツールを作れるようになっている 12
13. ビジネスを変えるAIの波 l非エンジニアが生成AIを使いこなすことによるメリット l新規で検討しているサービスなどのプロトタイプ開発を行う際に、エンジニ アとのコミュニケーションコストが不要になる lパワポで作成していた新規サービスの画面イメージを、実際に動くものと して提示することができる l注意点 l全ての開発に適用できるわけではない l画面数が多いサービスや仕様が複雑なサービスなどは、AIが内容を理解 してくれない可能性がある 13
14. バイブコーディングとは？
15. バイブコーディングとは？ 「自然言語による指示で、AIにソフトウェアを開発させる開発手法」 「バイブ」 = 「Vibes(雰囲気・感覚)」 15
16. バイブコーディングとは？サンプル実演 それでは、実際にバイブコーディングを見ていただくために簡単な実演 をしてみます 今回は以下2つのテーマについて実演したいと思います l「オセロゲーム」 l「簡単なホームページ」 16
17. バイブコーディングとは？サンプル実演 l生成AIは「Claude」というものを使用 lChatGPTと比較すると、生成速度が速い、ブラウザ上で動作するものであ れば出来上がったものがすぐに確認できるなどの特徴がある ※詳しくは後ほど説明します 17 「claude」で検索して 出てくる「Claude」 ページをクリック
18. 簡単なホームページを実演してみて l確かにホームページを数行の指示で実装をしてくれた lしかし、果たしてこれは作って欲しいとイメージしていたHPに近いで しょうか？ l今回の場合、私は弊社のHPをイメージして作成を依頼しましたが、イメー ジとはかけ離れた成果物が生成されてしまった lこのように、作るものによっては適切な情報を指示に含めないと望んだも のが生成されない →具体的にどう指示するのが良いかのポイントについては、後ほど説明し ます 18
19. l同じ指示をAIに指示した場合でも、生成結果は異なる オセロゲームを実演してみて 19 1回目 2回目
20. サンプルを実演してみて lここまでは、あくまでバイブコーディングとは何かを知っていただくた めの簡単な実演でした l実際のビジネスに活かすための方法などは、以降のスライドで説明し ていきます lその際に、より実践的なバイブコーディングの実演を行います 20
21. バイブコーディングをビジネスに活かすために
22. バイブコーディングで何が実現できるのか l業務効率化 l日常業務の効率化を行うツールの開発など l例: GASを用いた業務効率化ツールの開発 ※GAS(Google Apps Script) Googleが提供するサービス。Gmail/Google スプレッドシートなどと連携して、業務自動化や機能拡張ができる lプロトタイピング l企画中の新規サービスのプロトタイプを開発する 22
23. バイブコーディングで何が実現できるのか - 業務効率化 例 【Before】 毎月、複数のサービス提供会社から請求書がメールで届く 以前は、メールに添付されたPDFを1つずつBoxフォルダに格納し、 さらにPDFの名前を手作業でリネームしていた ※Box=クラウドストレージサービス(Google Driveなどに似ている) 【After】 GASで、毎日、請求書の名前をリネームした上で、Boxの指定した フォルダに格納するように自動化できた 23
24. バイブコーディングで何が実現できるのか - プロトタイピング 例 【Before】 新しい経費申請システムのアイデアをPowerPointで作ったが、使いや すさが伝わらない… 【After】 「経費申請ができる画面を作って」とAIに指示することで 実際にクリックできる「動く試作品」が完成 関係者に触ってもらうことで説得力をアップできた 24
25. 生成AIツールを選ぶ前に l生成AIといってもさまざまな形式のサービスがある l①Web上で使えるチャット型の生成AIサービス l例: ブラウザで使用するChatGPT/Claude/Geminiなど l②AIが組み込まれた開発環境(エディタ) l例: VSCode + GitHub Copilot/ Cursorなど 25
26. Web上で使えるチャット型の生成AIサービス（モデル） lWeb上で使用できる主要なチャット型ツール 26 サービス 企業 無料版 特徴 ChatGPT OpenAI 有り ・生成AIを代表するサービス、国内外問わず有名 ・汎用性が高い Claude Anthropic 有り ・テキスト処理、特に長文理解・生成が得意 ・アーティファクト機能が便利、AIが生成したもの をその場で適切な形式で表示できる Gemini Google 有り ・Googleのサービス(Google Drive/YouTubeなど) との親和性が高い ・大量の文章処理が得意
27. バイブコーディングではClaudeを使用することをおすすめします lコードの生成結果の精度が高い l成果物をその場で確認できる ※全ての成果物を確認できるわけで はない、例として、モバイルアプリはその場で確認できない 27
28. より実践的なバイブコーディング
29. より実践的なバイブコーディング l テーマ 「社内用の勤怠管理ツール」 l 必須要件 l出勤・退勤の打刻ができる l現在の勤務状況(出勤・退勤)を確認できる l現在時刻が秒単位でリアルタイムに表示される l打刻履歴が確認できる l追加要件 l社員の打刻率向上のため、何らかの機能を実装したい →今回これはAIと一緒に考えたいと思います 29
30. AIへの指示のポイント lAIへの指示のことをプロンプトと言います l「社内用の勤怠管理Webアプリのプロトタイプを開発したいです〜」この文 章全体をプロンプト呼びます l適切なプロンプトをAIへ指示をすることで、生成結果の精度が変わり ます 30
31. AIへの指示のポイント l抽象的な指示をしない lBad: l 「勤怠管理アプリを作成して」 lGood: l 「勤怠管理を行うWebアプリケーションを作成してください 必須要件は以下です。 ・出勤・退勤の打刻ができる ・打刻履歴を確認できる ・現在時刻が確認できる」 31
32. AIへの指示のポイント l 一度に複雑な要求をしない lBad: l 「従業員の勤怠を管理できるアプリを作りたいです。まず、みんなが簡単にログインできるようにして、 メイン画面には「仕事はじめます」「仕事おわります」の大きなボタンを置いてください。ボタンを押し た時に、ちゃんと会社にいるか分かるように、その時の場所も記録したいです。あと、一日何時間働 いたか自動で計算して、カレンダーで過去の記録も見れるようにしてください。もしボタンを押し忘れ たら、後から修正の申請ができて、上司がそれをOKできるように。上司はチーム全員の記録を見れ て、月末には給料計算のために、みんなの労働時間を一覧で取り出せる機能も必要です。見た目は、 とにかくオシャレで使いやすい感じにしてください。」 lGood: l ①従業員の勤怠を記録するシンプルなアプリを作りたいです。まずは一番大事な画面から作りましょ う。画面に『仕事はじめます』という大きなボタンを一つだけ置いてください。 l ②次に、そのボタンを押したら『仕事おわります』という表示に変わって、時間のカウントが始まるよ うにしてください。 (省略) 32
33. バイブコーディングで作成した成果物の注意点 lAIとの対話で「動くもの」を素早く作れるのがバイブコーディングの魅 力です。しかし、それをそのまま「製品」としてお客様に提供する場合 は注意が必要 lリスク l 生成AIが生成したコードには、セキュリティ上の欠陥が含まれていること がある →最終的には、プロによるチェックが必要 l 生成AIが生成したコードは現時点ではメンテナンス性が低い可能性があ る 33
34. バイブコーディングで作成した成果物の注意点 34 AIは優秀な「アシスタント」ですが、 最終的な責任は作成者である「あなた」です
35. 生成AIをセキュアに業務利用するための注意点
36. 生成AI利用のリスク lバイブコーディングに限らず、生成AIを利用する場合はその利便性の 裏にあるリスクに注意する必要があります l主なリスク l情報漏洩 l知的財産権(IP)/著作権の侵害 l虚偽の生成結果 36
37. 生成AI利用のリスク - 情報漏洩 l生成AIに入力した内容は、AIの学習データとして使用される可能性が あります。つまり、あなたが入力した機密情報が他の人にも見える形 で出力される危険性があります 37
38. 生成AI利用のリスク - 情報漏洩 会話例 38 XXX社 Aさんの会話 YYY社 Bさんの会話 Aさん 「XXX社の新規ビジネスとして、ZZZ サービスというものを検討しており、 こんな機能やあんな機能を実現し たいです」 Bさん 「 XXX社はどのようなサービスが有 名ですか？ 」 AI 「〜というサービスが有名ですが、 ZZZサービスという新規サービスを 考えているようです。こんな機能や あんな機能が含まれるサービスで す」 AI 「素晴らしいサービスです！他にも こんな機能やあんな機能があると 良いと考えます。」
39. 生成AI利用のリスク - 情報漏洩 会話例 39 XXX社 Aさんの会話 YYY社 Bさんの会話 Aさん 「XXX社の新規ビジネスとして、ZZZ サービスというものを検討しており、 こんな機能やあんな機能を実現し たいです」 Bさん 「 XXX社はどのようなサービスが有 名ですか？ 」 AI 「〜というサービスが有名ですが、 ZZZサービスという新規サービスを 考えているようです。こんな機能や あんな機能が含まれるサービスで す」 Aさんが入力した情報が学習され Bさんへの回答として表示されてし まっている AI 「素晴らしいサービスです！他にも こんな機能やあんな機能があると 良いと考えます。」 ※情報漏洩のリスクを説明するための極端な例です。 現実的には、AIとの会話がこのように直接的に 学習され、生成結果として回答される可能性は 極めて少ないです
40. 生成AI利用のリスク - 知的財産権(IP)/著作権の侵害 l生成AIから出力されたものは結果として、知的財産権や著作権を侵 害する可能性があります 40
41. 生成AI利用のリスク - 知的財産権(IP)/著作権の侵害 会話例 41 XXX社 Aさんの会話 B社 Aさん 「新しいサービスを検討しており、そ のサービスのロゴを作成してくださ い」 「弊社サービスのロゴに酷似してい る！著作権の侵害だ！ 」 AI 「こんなロゴはどうでしょうか？」
42. 生成AI利用のリスク - 知的財産権(IP)/著作権の侵害 会話例 42 XXX社 Aさんの会話 B社 Aさん 「新しいサービスを検討しており、そ のサービスのロゴを作成してくださ い」 「弊社サービスのロゴに酷似してい る！著作権の侵害だ！ 」 AI 「こんなロゴはどうでしょうか？」 侵害が認められれば 賠償責任が発生する可能性も
43. 生成AI利用のリスク - 虚偽の生成結果 l生成AIが出力する結果には虚偽の情報が含まれる可能性がありま す（ハルシネーション） 43
44. 生成AI利用のリスク - 虚偽の生成結果 会話例 44 XXX社 Aさんの会話 XXX社 Aさんと上司との会話 Aさん 「YYY社のビジネスを参考にしたい、 どのようなサービスがあります か？」 Aさん 「YYY社ではZZZサービスという人 気のサービスがあるようです」 AI 「ZZZサービスという人気のサービ スがあります」 Aさんの上司 「YYY社ではそのようなサービスは 存在しない。その情報はどこから得 たものか？」
45. 生成AI利用のリスク - 虚偽の生成結果 会話例 45 XXX社 Aさんの会話 XXX社 Aさんと上司との会話 Aさん 「YYY社のビジネスを参考にしたい、 どのようなサービスがあります か？」 Aさん 「YYY社ではZZZサービスという人 気のサービスがあるようです」 AI 「ZZZサービスという人気のサービ スがあります」 Aさんの上司 「YYY社ではそのようなサービスは 存在しない。その情報はどこから得 たものか？」 こんなサービス は存在しない！
46. 生成AI利用のリスク - 虚偽の生成結果 会話例 46 XXX社 Aさんの会話 XXX社 Aさんと上司との会話 Aさん 「YYY社のビジネスを参考にしたい、 どのようなサービスがあります か？」 Aさん 「YYY社ではZZZサービスという人 気のサービスがあるようです」 AI 「ZZZサービスという人気のサービ スがあります」 Aさんの上司 「YYY社ではそのようなサービスは 存在しない。その情報はどこから得 たものか？」 こんなサービス は存在しない！ ・信頼を失う ・トラブルに発展する
47. 生成AI利用のリスク lこのように、生成AIを利用する際にはそれに伴うリスクがあることを認識し、 注意する必要があります l特に企業として生成AI利用を許可する場合には、適切なルール整備を行う必 要があります l例として、弊社では以下のようなルールで生成AI利用を許可しています l個人情報などの特に高機密な情報は全ての生成AIで利用不可 l上記に該当しないレベルの情報は、生成AIの利用可能 l ただし、生成AIサービスの規約で、情報が学習に使用されないと明記されている、 かつNCDCが許可するサービスのみ ※情報のレベルは社内で決めたものに従っています 47
48. Claudeの利用規約 48 生成AIに対する入力や出力が AIの学習に使用されないことが明記さ れている
49. Claudeの利用規約 49 ただし、同じ生成AIでも契約プランな どで規約が異なる場合があるので注 意が必要です また、同じ生成AI・同じプランでも規約 が変わる可能性があるため、定期的 にチェックすることをおすすめします
50. まとめ
51. 本日のまとめ lバイブコーディングとは自然言語でAIに指示して開発を行う手法 lバイブコーディングで、非エンジニアでも業務効率化やプロトタイプ開発を 行うことができる lただし、商用リリースなど一定の品質が求められる場合はプロのチェックが必 要 l仕様が複雑なアプリなどはバイブコーディングで実現できない可能性が高い l生成AIは非常に便利ですが、リスクに注意して使用することが必要 51
52. 生成AI活用に関するこんなお悩みはありませんか？ 52
53. 生成AI活用に関するこんなお悩みはありませんか？ 53