アプリ 事例集
はじめに：どのツールから始めるべきか？
バイブコーディングで最初に作るものは、最も環境構築の手間が少なく、すぐに動かせるものが鉄則です。 まずは以下の表を参考に、自分の課題に合ったものを選んでみましょう。
| こういうときは | おすすめツール |
|---|---|
| ブラウザ上の特定作業を楽にしたい（サーバー不要） | 1. Chrome拡張機能 |
| データを一覧で綺麗に見せたい（見た目重視） | 2. ダッシュボード |
| 対話型の相談・検索ツールを作りたい（API連携） | 3. チャットボット |
| チャットで通知や操作を完結したい（コミュニティ・チーム向け） | 4. Discord Bot |
メモ✏️ 作る場所（環境）の選び方
1. Chrome拡張機能
普段ブラウザ（Chrome）で行っているコピペ作業や、特定のWebサイトを使いやすくするためのツールです。
📌 代表的なユースケース
- ワンクリック・スクレイピング: 今開いているWebページのタイトル、URL、選択したテキストを綺麗にMarkdown形式でクリップボードにコピーする。
- 社内システムのUI改善: 表示が古く使いづらい社内システムの画面に、よく使う入力定型文を挿入するカスタムボタンを追加する。
- 閲覧制限タイマー: 特定のSNSを1日合計30分以上開いたら、強制的に画面をブロックする。
💡 バイブコーディング時の指示のコツ
Chrome拡張機能は、設定ファイルである manifest.json と、画面を作る popup.html / popup.js などの複数ファイルで構成されます。AIには「ファイル構成から教えて」と頼むのがコツです。
例AIへのプロンプト例
「現在開いているページのURLとタイトルをMarkdown形式で取得し、コピーできるシンプルなChrome拡張機能（Manifest V3対応）を作りたいです。必要なファイルの構成と、それぞれのコードを教えてください。」
⚠️ つまずきやすいポイント
- Manifest V3の指定: ネット上には古い「Manifest V2」の書き方が溢れています。AIには必ず「Manifest V3で書いて」と指定してください（古い規格は現在Chromeで動きません）。
- デベロッパーモードでの読み込み: 作ったフォルダをChromeに読み込ませるには、ブラウザの「拡張機能管理（chrome://extensions/）」を開き、右上の「デベロッパーモード」をONにして、「パッケージ化されていない拡張機能を読み込む」からフォルダを選択します。
2. ダッシュボード
スプレッドシートやAPIから取得したデータを、自分やチームが見やすいように一画面にまとめるウェブ画面です。
📌 代表的なユースケース
- 売上・進捗の可視化: スプレッドシートの目標値と現在の実績値を取得し、達成率を円グラフや進捗バーで表示する。
- タスク・案件管理ボード: 進行中の案件ステータスをカンバン方式（ドラッグ＆ドロップ）で並び替えて一覧できる画面。
- 個人ダッシュボード: 今日の天気、自分のカレンダー予定、ToDoリスト、お気に入りニュースを1ページに凝縮したホーム画面。
💡 バイブコーディング時の指示のコツ
「見た目の美しさ」や「レスポンシブ（スマホ対応）」はAIが非常に得意とする分野です。モックアップ（見た目だけの試作）から作り始め、徐々に裏側のデータと接続するのがスムーズです。
例AIへのプロンプト例
「HTML/CSS/JSだけで動く、スリークなダークモードの売上ダッシュボード画面を作ってください。グラフライブラリにはChart.jsを使い、今月の目標と実績の折れ線グラフ、カテゴリー別の円グラフを表示する美しいデザインにしてください。まずは静的なHTMLファイル1つで出力してください。」
⚠️ つまずきやすいポイント
- データの接続（CORSエラー）: 外部のスプレッドシートやAPIからデータを直接ブラウザのJavaScriptで引っ張ろうとすると、セキュリティ制限（CORS）でブロックされることがあります。その場合はGASを簡易的なAPIサーバーとして中継させるなどのアプローチが必要になります。
3. チャットボット
ChatGPTやClaudeのような対話UIを、自分専用のルールやデータに基づいて構築します。本サイト右下の質問ウィジェット（画面例）も、この型で作った実例です。
📌 代表的なユースケース
- 自社データ特化のQ&Aボット: PDFの資料や社内マニュアルを読み込ませ、その内容に基づいて質問に答えてくれる社内FAQボット。
- 特定キャラクター・役割の相談相手: 経営コンサルタントや英語のネイティブ教師、あるいは特定のペルソナになりきってアドバイスをくれる壁打ち相手。
- 定型文章の自動生成ツール: 箇条書きでメモを入れるだけで、自社用のトーン＆マナーに沿ったメルマガやSNS投稿文を数秒で清書してくれるツール。
💡 バイブコーディング時の指示のコツ
APIキーをコードに直接書き込んでしまうと、GitHubなどに公開した際に漏洩するリスクがあります。最初から「環境変数（.envファイル）を使う設計にして」とAIに伝えておきましょう。
例AIへのプロンプト例
「Gemini API（またはOpenAI API）を使って、入力されたテキストをビジネスメールにリライトするシンプルなWebチャット画面（HTML/JS）を作りたいです。APIキーは環境変数から読み込むようにし、Node.jsのシンプルなサーバーを経由してAPIを叩く構成にしてください。」
⚠️ つまずきやすいポイント
- API利用料の管理: APIは利用したトークン（文字数）量に応じて課金されます。無限ループするバグなどを書かないよう、また月額の利用上限（Budget Limit）を設定しておくことを忘れないでください。
- コンテキスト（会話履歴）の維持: 単にAPIを叩くだけでは、ボットは1往復前の会話を覚えていません。過去のやり取りを配列で保持して、毎回APIに一緒に送り直すコードにする必要があります。
4. Discord bot
SlackやDiscordといったチャットツール上で、特定のコマンドに反応したり、裏で自動実行して通知を送ったりするボットです。
📌 代表的なユースケース
- コミュニティ運営の自動化: 新規メンバーがサーバーに入ってきたら、自動でウェルカムメッセージを送信し、ルール確認のボタンを押させる。
- 業務通知ハブ: システムのエラーログや、特定の問い合わせをチャンネルに読みやすく整形して投稿する。
- チャット駆動型ツール: チャット内で
/task-add [タスク名]と入力すると、裏のデータベース（Notionなど）に自動でタスクが登録される。
💡 バイブコーディング時の指示のコツ
Discord Botは、Discord Developer Portalでのボット登録作業が必要になります。AIにプログラムコードだけでなく「Discord Developer Portalでの設定手順もステップバイステップで書いて」とお願いすると迷いません。
例AIへのプロンプト例
「Python（discord.py）を使って、ユーザーが『!help』と発言したら、よくある質問のメニューをボタン付きで返すDiscordボットを作りたいです。ボットのトークンの取得手順と、ローカルで動かすためのコードを教えてください。」
⚠️ つまずきやすいポイント
- 常時起動（サーバー）の壁: パソコンを閉じるとBotも停止してしまいます。24時間動かすためには、RenderやReplit、あるいはRaspberry PiやVPSなどの「サーバー環境」にデプロイする必要があります。
- Intents（権限）の有効化: Discord Developer Portal上で「Message Content Intent」などの特定の権限（Intents）をONにしておかないと、ボットがメッセージの内容を読み取れずに反応しないというトラブルが多発します。
バイブコーディングを成功させる共通の心構え
- まずは「静的な画面（モック）」から作る
- いきなりデータベースやAPIと接続しようとすると、動かない原因が「画面のバグ」なのか「通信のバグ」なのか分からなくなります。まずは画面のボタンを押したらダミーデータが出る、といった「小さく動くもの」から作りましょう。
- APIキーは絶対にコードに直書きしない
- どんなにプライベートな開発であっても、
.envファイルにAPIキーやトークンを切り出し、.gitignoreでGitの管理から外す癖をつけておきましょう。私は.envファイル自体も持たず、1Password CLIから実行時に読み込ませています（さらに一段安全な方法です）。
- どんなにプライベートな開発であっても、
- 「一度に全部」をAIに頼まない
- 「GASとChrome拡張機能とダッシュボードが全部連携したシステムを作って」と頼むと、AIも混乱してバグだらけのコードを出してきます。「まずGASでスプレッドシートに書き込む部分だけ作る」「次にそれを取得する画面を作る」と、パズルを1ピースずつ組み立てるように指示を分解しましょう。