メインコンテンツへスキップ
AMPL
ChatGPTで最初の1本
レッスン 5 / 15|17分で読めます

ChatGPTで最初の1本

10分で、医療現場で使える計算ツールを1本仕上げる。何を・どう・どこまで書くかが質を決める。

第2回で、保護者向けの説明ページを1枚作りました。 あれは「動くものが手元に来る」感覚を持って帰る回でした。

第5回は、もう一段だけ腰を据えて、医療現場の道具になりそうな1本を作ります。 所要時間は10分。 道具はやっぱり、ChatGPTだけ。

私が初めて作ったアプリは、子どもの体重から解熱薬の量を出すツールでした。 所要時間20分。 内訳は10分が指示の言語化、10分が直しのやりとり。 今日と次回で、その流れを順番に再現してもらいます。

ㅤ

なぜ、もう一度ChatGPTから始めるのか

理由はとてもシンプルで、いちばんハードルが低いからです。

  • アカウントを作れば、すぐ使える
  • 無料プランで、十分体験できる
  • スマホでも、PCでも、ブラウザだけでOK
  • 何かをインストールする作業がない

ここで「インストール」というのは、新しいアプリやソフトを自分のパソコンの中に入れる作業のこと。 ハマる人はここで、平気で半日溶かします。 最初の本格1本では、これを避けます。

世の中には、Vibe Coding専用のもっと強力な道具（Claude Codeなど）もあります。 それらは第8回以降で扱います。

いきなりインストールから入ると、半分の人がここで止まる。 だからまず、すでに多くの人が触っているChatGPTで、感覚を掴んでもらうのが近道です。

ㅤ

ChatGPTで作れるもの、作りにくいもの

最初に、得意・不得意を伝えておきます。

得意なこと

  • HTMLファイル1枚で完結するアプリ
  • 計算ツール、入力フォーム、簡易ゲーム、一般情報の説明ツール
  • スプレッドシートの代わりになる、シンプルな管理画面
  • スマホからも動く、軽いツール

不得意なこと

  • 大きなWebサービス（ログイン機能が必要なもの）
  • データベースが絡む本格アプリ
  • 公開して不特定多数に使ってもらうサービス

このあたりは、第8回以降のClaude Codeの出番です。 今日は「HTML1枚で完結する小さな道具」を1本、一緒に作ります。

ㅤ

作るもの：体重から、薬の目安量を計算する小さなツール

題材は、私の専門の小児科から取りました。 ただ、考え方は他のジャンルでも全部同じなので、自分の文脈に置き換えながら読んでください。

完成イメージはこうです。

  • 子どもの体重(kg)を入力する
  • 解熱薬の1回量の目安が表示される
  • 注意書きとして「医師の指示の元で使ってください」と入る
今日作る解熱薬計算ツールのワイヤフレーム。ページタイトル、体重入力欄、計算ボタン、結果表示エリア、注意書きが配置された設計図
今日のゴール。10分で、ここまで作ります。

これを、ChatGPTに作ってもらいます。

ChatGPTにプロンプトを送り、生成されたHTMLをプレビューで開いて、12kgの結果を確認するまで。

ㅤ

ステップ1　指示を書く

ChatGPTを開いて、新しい会話を始めます。 そこに、こう書きます。

子どもの体重(kg)を入力すると、解熱薬の1回量の目安を計算してくれる、シンプルなWebページを作ってください。

体重を入れると「目安量：◯mg〜◯mg」と表示されます。 計算式は、体重×10〜15mg/kgです。 ただし、最大量は500mg/回までとしてください。

注意書きとして、「これは目安です。実際の使用は、必ず医師の指示の元で行ってください」と表示します。

一枚のHTMLファイルにして、ブラウザで開いたら動くようにしてください。 デザインは、シンプルで読みやすいものにしてください。

少し長く感じるかもしれません。 でも、ここがこの回の山です。

プロンプトの4要素を解剖した図。WHAT（何を作るか）・LOGIC（計算ロジック）・CONSTRAINTS（制約）・DELIVERABLE（何で出すか）の4ブロックに色分け
この4要素を意識して書ききると、返ってくるものの精度が一段上がります。

何を、どう、どこまで、を書く。 これだけで、返ってくるものの質が大きく変わります。

第1回で書いた「いい感じに、では伝わらない」を、ここで実践します。

ChatGPTの入力欄に、解熱薬の目安量を計算するWebページを作るための長いプロンプトが入力されている実画面
プロンプト全文を貼り付けて、送信。ここからが本番です。

ㅤ

ステップ2　出てきたコードを、動かしてみる

ChatGPTは、HTMLファイルの中身（コード）をそのまま返してくれます。 画面にコードがズラッと表示されます。

ChatGPTが生成したHTMLコードが表示されている実画面。HTMLカードとコード表示ボタンが見えている
中身は読まなくていい、Copyボタンだけ押します。

中身を読まなくていいです。 やることは2つだけ。

  1. コードの右上の「コピー」ボタンを押す
  2. PCのテキストエディタに貼り付けて、index.html という名前で保存する
生成されたHTMLコードに3つの注釈（input=体重を入れる場所／button=計算ボタン／script=計算ロジック）がついた構造解説図
読まなくていいけど、もし気になったら、各部分の役割を見てみてください。

ここで「テキストエディタ」というのは、文字を書くだけの一番シンプルなアプリ。 Windowsなら「メモ帳」、Macなら「テキストエディット」が最初から入っています。 私のイメージは、白紙のノートに字を書くだけのアプリです。

Macのテキストエディットと Windowsのメモ帳を左右並列で比較したイラスト
OS標準のエディタで十分です。新しいアプリをダウンロードする必要はありません。

そして、index.html をダブルクリックして開きます。

Finder でファイル選択 → ダブルクリック → ブラウザ起動 → 計算ツール表示の3段階フロー
サーバーもインストールも不要。ダブルクリックで、ローカルアプリの完成です。

ブラウザに、入力欄と計算結果が表示されます。 体重を入れて、ちゃんと数字が動くことを確認します。

ChatGPTのプレビューで、体重12kgに対して目安量120mgから180mgが表示されている解熱薬計算ツールの実画面
自分のパソコンで、自分専用のアプリが動いた瞬間。

おめでとうございます。 今、自分のパソコンの中で、自分専用のアプリが動いています。

今日達成した5つのマイルストーン（具体的指示を書いた／コードを受け取った／ブラウザで動いた／自分の手で1本作れた／次のアイデアが浮かんだ）チェックリスト
ここまで来たら、第6回で「直す工程」へ進みます。

ㅤ

今日のまとめ

3行で振り返ります。

  • ChatGPTひとつで、HTML1枚のアプリは作れる
  • 何を・どう・どこまで、を書ききると、返ってくるものが鮮明になる
  • まずは「動いた」を確認するところまで持っていけばOK

ㅤ

次回予告

第6回は、いよいよ「直す」工程に入ります。 表示が小さい、色を変えたい、単位を表示したい。 そうした希望を、AIに上手く伝えるコツがあります。

事実 → 想定 → 直してほしい点。 この3行で書くだけで、修正の精度が変わります。

ㅤ

最初の1本ができると、世界が変わります。 私は、これを20本以上繰り返してから、それを実感しています。

ㅤ

連載の更新は、メルマガ「おかもんだより」でもお知らせします。 よかったら登録してお待ちください。

ㅤ

演習：30分の宿題

第5回は、いちばん長い宿題かもしれません。 今日のうちに、自分の現場用の1本を作ってください。

自分の現場で繰り返す数値計算を、入力フォーム化する

職種ごとに3つだけ題材。1つ選んで、第5回と同じ流れで作ります。

題材A（医師向け）

自分の専門領域で繰り返し計算する数値（薬用量・輸液量・栄養必要量・蘇生薬量・スコアリング）から1つ選び、入力フォーム化してください。

例：

  • 小児輸液量計算（体重から維持量・補正量）
  • 抗生剤の用量計算（体重・腎機能から）
  • GCS入力＋判定
  • APACHE II スコア計算

題材B（看護師・薬剤師向け）

検査値の正常域チェックや、与薬時の確認項目を、入力フォーム化してください。

例：

  • 検査値の正常域チェック（年齢・性別から）
  • インスリン用量計算（血糖・体重から）
  • 与薬前の6Rチェック
  • 服薬指導記録テンプレ

題材C（PT/OT・ST・検査・栄養・事務向け）

自分の業務で繰り返すスコアリングや、チェックリスト作業を、スマホで使えるアプリにしてください。

例：

  • リハビリ評価（FIM・Barthel Index）
  • 嚥下機能スクリーニング
  • 栄養必要量の計算（年齢・体重・活動レベル）
  • 患者問い合わせフロー判定

完成度70%で十分

第2回で書いた「完成度70%でいい」が、ここでも効きます。 完璧を狙わず、今日のうちに動くものを手元に残してください。

医療職別 実例ギャラリー：賢の運用ツール3つ

私が外来で実際に毎日使っている3つのツール。すべて、第5回と同じ要領で作ったものです。

例1：小児輸液量計算ツール

体重を入れると、維持輸液量・補正輸液量・最大投与量が一覧で出る。 小児科救急外来で、毎日3〜5回使っています。

実装プロンプト（コピペで動きます）:

小児の輸液量を計算するシンプルなWebページを作ってください。

入力：体重(kg)
出力：
- 維持量（4-2-1ルール）：mL/時間
- 5%脱水補正量：mL/24時間
- 10%脱水補正量：mL/24時間
- 維持量+補正量の合計：mL/時間

注意書きとして「臨床判断は医師の指示に従う」と表示。
スマホで読みやすいデザイン、HTMLファイル1枚で完結。

所要時間15分・難易度★☆☆。

例2：希釈計算ツール（注射薬）

「○○mgを生食何mLで希釈すると、何mg/mLになる？」を一発で出すツール。 注射薬の希釈ミスを防ぐためのチェック用。

例3：年齢別の予防接種スケジュール早見

子どもの生年月日を入れると、その日に打てるワクチン候補が出るツール。 保護者からの問い合わせに即答できるようになりました。

3つとも、HTMLファイル1枚で完結。データベースもサーバーも、不要です。

もっと深く：ChatGPT のモデル選択

ChatGPTには複数のモデルがあります。モデル名は時期によって変わりますが、Vibe Codingで使う観点では次の3つだけ見れば十分です。

標準モデル / Instant系：

  • 速く返ってくる
  • 第5回のような「HTML一枚もの」なら、これで十分
  • 迷ったらまずはこれ

上位モデル：

  • より深く考える、複雑な指示に強い
  • 標準モデルより応答が遅いことがある
  • 第11回以降の「複数機能を持つアプリ」で強み発揮

推論特化モデル：

  • 数学・論理問題・コードのバグ解析に強い
  • 最初の1本では、過剰スペック
  • 詰まったときの相談相手として有用

迷ったら デフォルトのモデル で。 モデル選択の最適化に時間を使うより、自分の手で1本作る方が、はるかに学びが大きいです。

動画で見る

参考・出典

  • 安野貴博「バイブコーディング超入門講座 第3回 ChatGPTでバイブコーディング」（YouTubeチャンネル「安野貴博の自由研究」、2026年4月）
  • OpenAI「ChatGPT」 https://chatgpt.com