第13回で、自分のアプリをGitHubに上げました。 今日は、それを世界中の誰でも見られる状態にします。
ここまでで作ったアプリ、家族に見せましたか。
私の場合、最初に見せたのは妻でした。 「これ、僕が作ったやつ」とURLを送って、開いてもらった瞬間。 あの顔を、今でも覚えています。
第14回（今日）は、その瞬間を作る回です。
自分のパソコンの中だけで動いていたアプリを、ネット上に出す。 これを、デプロイすると言います。 家族や友人や同僚に、URLで送れる状態にする。 所要時間5分、費用ゼロ。
そして後半で、もう一段先のキーワード「MCP」を、概念だけ紹介します。
ㅤ
今日のゴール
- 第13回でGitHubに上げたアプリを、Vercelというサービスで公開する
- 自分専用のURL（例：my-tool.vercel.app）を取得する
- 家族や友人にそのURLを送って、開いてもらう
ここで「Vercel（バーセル）」というのは、Webアプリを無料で公開できる代表的なサービスです。 個人開発でいま一番人気の選択肢で、複雑な設定なしで使えます。 私のイメージは、誰でも無料で借りられる、ネット上のショーケースです。
ㅤ
ステップ1 Vercelに連携する
ブラウザで vercel.com を開きます。 「Sign Up」から、GitHubアカウントを使ってログインします。 これだけで、VercelからGitHubのリポジトリが見えるようになります。
「New Project」を押すと、自分のリポジトリ一覧が出てきます。 第13回で作った「my-first-vibe-app」を選んで、「Import」をクリック。
設定画面が出たら、Project Name、Application Preset、Root Directory を確認します。 最初は何も変えなくて大丈夫です。
数十秒〜1分待ちます。 画面が緑になって、「Congratulations」のようなメッセージが出ます。 そこに、自動で発行されたURLが表示されています。 例えば、my-first-vibe-app.vercel.app のような形です。
ㅤ
ステップ2 ブラウザで開く
別タブで、そのURLを開きます。 家のパソコンで動いていたアプリと同じ画面が、ネット上に表示されているはずです。
これで、デプロイ完了です。
ㅤ
ステップ3 家族に送る
URLを、家族や友人にLINEやメールで送ります。
「これ、自分で作ったアプリ。試しに使ってみて」
返事が返ってくる体験は、何度味わってもいいです。
ㅤ
更新したくなったら
アプリを直したくなったとき、流れはとてもシンプルです。
- 自分のPCで、Claude Codeに変更を頼む
- 「commitしてpushして」と頼む
- Vercelが自動で気づいて、新バージョンを公開する
第13回で覚えた commit と push が、ここで毎回出番です。 3工程目のVercelの再公開は、勝手にやってくれます。 人間がやることは、変更を頼むことと、commit/push を頼むこと。それだけです。
ㅤ
ここまでで、Vibe Codingの基本は揃いました
振り返ると、ここまでで、
- アイデアを言葉にする（第5回）
- 動くものに変える（第5〜10回）
- 育てる（第11〜12回）
- 公開する（第13〜14回）
の流れを、最後まで通して体験しています。
これで、自分のためのアプリを作って、世に出すところまで、自力でできる状態になりました。
ㅤ
もう一段先に行きたい人へ MCPという仕組み
ここからは、概念紹介です。 今日中に試さなくても大丈夫です。
最近、Vibe Codingの世界で「MCP（エムシーピー）」という言葉をよく聞くようになりました。
MCPは、Model Context Protocol（モデル・コンテクスト・プロトコル）の略。 日本語にすると「AIモデルとサービスをつなぐ約束ごと」、くらいの意味です。 私のイメージは、AIと外のサービスをつなぐ、共通プラグの規格。
何ができるかというと、ChatGPTやClaudeに、外部のサービスやデータを直接「使わせる」ことができます。
例えば：
- カレンダーを見て、予定を読み取って提案する
- 自分の家計簿を見て、節約案を出す
- PubMed（医学論文の世界最大のデータベース）から論文を探す
- 国土交通省のデータから、不動産価格を取り出す
実際に、国土交通省は2026年初頭に、MCPサーバ（外部とつなぐ窓口）を公開しています。 医療なら、PubMedのMCPサーバも公開されています。
これらをVibe Codingに組み込むと、自分のアプリが「ただの計算ツール」から「世の中のデータを使えるアシスタント」に化けます。
ここから先は、最終回（第15回）で、これからの学びの道筋として案内します。
ㅤ
今日のまとめ
3行で振り返ります。
- 公開（デプロイ）は、5分・無料で終わる作業
- VercelとGitHubの2つのアカウントだけで、世界に出せる
- 家族にURLを送る瞬間は、何度味わってもいい
ㅤ
次回予告
最終回の第15回は、振り返りです。
半年で20本以上アプリを作って、私が本当に大事だと思った3つだけを、最後にまとめます。 そして、これからどう学び続けるか、何を作り続けるか。
ㅤ
家のパソコンで動くツールを作るのは、自己満足。 URLで誰かに渡せた瞬間、それは、誰かのためのものになる。
ㅤ
連載の更新は、メルマガ「おかもんだより」でもお知らせします。 よかったら登録してお待ちください。
ㅤ
演習：30分の宿題
第14回は、自分のアプリを世界に出す回。
宿題1：Vercel に連携してデプロイ（15分）
第13回で GitHub に上げた自分のアプリを、Vercel で公開します。
- vercel.com で「Continue with GitHub」サインアップ
- New Project → 自分のリポジトリを選択 → Deploy
- 数十秒待つ → URL が発行される
- 別タブで URL を開いて、動くのを確認
宿題2：URL を、家族か同僚か、誰か1人に送る（5分）
「これ、自分で作った」と一言添えて、URL を1人に送ってください。 反応をもらう体験は、Vibe Coding の真骨頂です。
宿題3：1機能だけ更新して、自動デプロイを体験する（10分）
Claude Code に、ボタンの色か、タイトルか、何でもいいので1箇所だけ変更を頼む。 そして「commit して push して」と頼む。
数十秒後、Vercel のダッシュボードで「deploying...」が走り、自動で新バージョンが公開される。 これが継続デプロイの感覚です。
医療職別 実例ギャラリー：賢のVercel公開アプリ3選
私が実際に Vercel で運用している3アプリ。
例1：minaton.net
港区の子育て情報サイト。 1ヶ月で462記事、月1万PV 超。 Vercel無料プランで運用中（月100GB帯域以内に収まっている）。
例2：bac.amplinc.com
Business Athlete Club（ビジネスアスリート向けの健康ジャーナル）。 Volume I 〜 XXVI まで連載中、72枚のオリジナル画像付き。 これも Vercel 無料プラン。
例3：解熱薬計算ツール（非公開URL）
外来でiPad/iPhoneから使う社内ツール。 URL を知っている人だけアクセスできる、半閉じた運用。 Vercelの環境変数機能で、簡易パスワード認証を実装。
3本とも、無料プランで十分回っています。 個人医療職レベルなら、Vercel 有料プランは必要ない、というのが私の現時点の感覚です。
もっと深く：無料Vercel と有料Vercel の分岐点
Vercel無料プラン（Hobby）には、以下の制限があります。
- 帯域：月100GB
- ビルド時間：月6,000分
- チーム機能：なし（個人利用のみ）
- 商用利用：原則NG（個人プロジェクトのみOK）
- カスタムドメイン：制限ありだが基本OK
無料を超えたら Pro プラン（$20/月・2026年6月時点） に上がります：
- 帯域：1TB
- ビルド時間：24,000分
- チーム機能：あり
- 商用利用：OK
- 解析機能：詳細
個人医療職の使い方なら、無料で十分。 無料を超えるのは、月数万PV以上のサイトを運用する場合だけ。 最初から有料プランを契約する必要はありません。
「有料プランは、課題が見えてから」が、節約と学習効率の両立。
動画で見る
- YouTube：Vercel 公式チュートリアル
参考・出典
- Vercel公式 https://vercel.com
- GitHub公式 https://github.com
- Anthropic「Model Context Protocol」 https://www.anthropic.com/news/model-context-protocol
- 国土交通省「MLIT DATA PLATFORM MCP Server」（2026年）