第1回で書いた、私が2024年に味わった瞬間を覚えていますか。
Claudeを触っていたら、画面の中で動く小さなアプリが勝手にできてしまった、あの感覚。 「俺もアプリ作れるんじゃね」と思った、まさにあの瞬間です。
今日は、その感覚を、あなたにも一足先に持って帰ってもらいます。 所要時間は8分。 インストールも、難しい設定も、なし。 ChatGPTのブラウザ画面ひとつで進めます。
ㅤ
必要なものは、ひとつだけ
ChatGPTのアカウントです。
すでに使っている人は、それでOK。 まだの人は、ブラウザで chatgpt.com を開いて、メールアドレスでサインアップ。 所要時間3分です。 無料プランで構いません。
これで準備完了です。
ㅤ
今日の題材
医療現場でよく使う「保護者向けの説明ページ」を、自分の手で1枚作ってもらいます。
具体的には、解熱薬の使い方の説明ページ。 外来で何度も繰り返し説明している、あの内容です。 これを、自分専用の小さな案内として、その場で作り直します。
医師でなくても大丈夫。 看護師、薬剤師、リハ職、検査技師、医療事務。 どの職種にも、似た「ちょっと作りたい説明ページ」があるはずです。
題材は、自分の現場に置き換えて読んでください。
ㅤ
先に、通しで見てみる
これから3ステップでやる操作を、実際のChatGPT画面で録画しました。 プロンプトを打ち込み、送信し、ページができるまで。ノーカットの実操作です。
一度見ておくと、この後のステップで迷いません。 では、同じことを自分の手でやっていきます。
ㅤ
ステップ1 ChatGPTにこう書く
ChatGPTを開いて、新しい会話で、こうコピペします。
保護者向けに、子どもの解熱薬の使い方を説明する1枚のHTMLページを作ってください。
含める内容： ・解熱薬がどんなときに必要か ・6時間以上空けて、繰り返さない ・水分補給と併用する ・病院に行くべきサイン
スマホでも読みやすく、シンプルなデザインにしてください。 一枚のHTMLファイルで、ブラウザで開いたら動くようにします。
少し長く感じるかもしれません。 これがVibe Codingの「具体的な指示」です。
いい感じに、ではなく、何を、どこまで、どう書くか。 これを書ききると、返ってくるものの質が変わります。
ㅤ
ステップ2 返ってきたコードをファイルにする
ChatGPTは、HTMLファイルの中身（コード）をそのまま返します。 画面にコードがズラッと出ます。
なお、最近のChatGPTは、コードと一緒に「プレビュー」を直接見せてくれることがあります。 その場合は、カードの中でもうページが動いています。
カードの右上には、小さなボタンが3つ並んでいます。 コード表示に切り替える、プレビューを再生する、全画面で開く。この3つです。
回答の中に「HTMLファイルをダウンロード」というリンクが出ることもあります。 これを押すだけで、保存まで終わります。いちばん簡単な道です。
リンクが出なかった場合も、やることは2つだけ。
- コードの右上の「コピー」ボタンを押す
- パソコンのテキストエディタ（Macなら「テキストエディット」、Windowsなら「メモ帳」）に貼り付けて、index.html という名前で保存する
ㅤ
ステップ3 ブラウザで開いてみる
保存した index.html を、ダブルクリックします。
ブラウザが開いて、保護者向けの説明ページが表示されます。 タイトル、説明、注意事項。 全部、コードを書かずに作った、自分のページです。
スクロールしていくと、頼んだ内容がぜんぶ入っています。 「病院に行くべきサイン」も、ちゃんと危険を知らせる色になっています。
ここで一度、画面をしばらく眺めてみてください。 これは、5分前まで「自分には作れない」と思っていたものです。 変化したのは出来栄えではなく、自分の感覚の方です。
ㅤ
ここで感じてほしいこと
うまくいった人も、思ったのと違うものが出た人も、まずは深呼吸を。
ここで体験してほしいのは、出来栄えではありません。 コードを書かずに、動くものが手元に来た、という事実です。
私が2024年に感じた、あの「俺もアプリ作れるんじゃね」が、今日のあなたにも来ているはずです。
ㅤ
まだ完璧じゃない、それでいい
返ってきたページは、完璧ではないかもしれません。
- 内容が現場とズレている
- 文字が小さい
- もう少し色が欲しい
それでいいんです。 ここからの「直してもらう」工程は、第6回でじっくり扱います。 今日は「動くものが、自分の言葉から生まれた」だけを持って帰ってください。
ㅤ
今日のまとめ
3行で振り返ります。
- ChatGPTひとつで、HTML1枚のページは作れる
- 具体的に書くほど、返ってくるものが鮮明になる
- 動くものが手元にある、という感覚が、すべての出発点
ㅤ
次回予告
第3回は、地図に書いた「知っておきたい7つの言葉」の前半です。 LLM、コーディングエージェント、IDE。 今日触ったChatGPTが、なぜあれだけのことをできるのか。 全部、ポケモンの旅に例えながら見ていきます。
ㅤ
最初の1本ができた瞬間、すべての続きが見えてくる。 私はそう感じています。
ㅤ
連載の更新は、メルマガ「おかもんだより」でもお知らせします。 よかったら登録してお待ちください。
ㅤ
演習：30分の宿題
第1回の宿題は「読み終わった後で考えてみる」でしたが、第2回からは「実際に作る」に変わります。 所要時間30分。必要なものは、ChatGPTのアカウントだけです。
自分の現場で、繰り返し説明している「あの説明」を1枚にする
職種ごとに3つだけ題材を置いておきます。1つ選んで、ChatGPTに頼んでみてください。
題材A（医師向け）
自分の外来で、保護者・患者にいつも説明している内容のうち、今日も一度誰かに話したものを1つ選び、A4一枚分のHTMLページにしてください。
例：
- 解熱薬の使い方（小児科）
- 抗生剤を使わない理由（プライマリ）
- 経過観察の目安（救急）
- 退院後の注意（病棟）
題材B（看護師・薬剤師向け）
病棟・薬局で、新人や患者に繰り返し説明している手順を、シンプルなチェックリスト形式のWebアプリにしてください。
例：
- 与薬前の6Rチェック
- 服薬指導の確認項目
- 医療麻薬の管理ルール
- インフルエンザワクチン副反応の説明
題材C（PT/OT・ST・検査・栄養・事務向け）
自分の業務で、毎週・毎月のように繰り返している説明・記録作業を、入力フォーム付きの1ページにしてください。
例：
- リハビリ評価シート
- 嚥下機能チェック
- 検査前の禁忌確認
- 離乳食の進め方ガイド
- よくある問い合わせの定型回答
詰まったら
ステップ1で何を書けばいいか分からなくなったら、その状態をそのままChatGPTに伝えます。
小児科の解熱薬の使い方を保護者向けに説明する1枚のHTMLが作りたい
ですが、構成が思いつきません。
含めるべき項目を5〜7個、提案してください。
ChatGPTは構成案を出してくれるので、それを材料に本番のプロンプトを書き直す。 これで詰まりは大半解消します。
医療職別 実例ギャラリー：最初の1本
連載の読者と、私の周りの医療者が、第2回をやって作った最初の1本を3つ紹介します。
例1：小児科外来・「解熱薬の使い方」リーフレット（自分用）
私自身の最初の1本がこれでした。 A4一枚に「いつ使うか」「6時間ルール」「水分」「受診サイン」をまとめた、外来で配布する説明ページ。
実装プロンプト（コピペで動きます）:
保護者向けに、子どもの解熱薬の使い方を説明する1枚のHTMLページを
作ってください。
含める内容：
・解熱薬がどんなときに必要か
・6時間以上空けて、繰り返さない
・水分補給と併用する
・病院に行くべきサイン
スマホでも読みやすく、シンプルなデザインにしてください。
一枚のHTMLファイルで、ブラウザで開いたら動くようにします。
所要時間8分・難易度★☆☆。
例2：訪問看護・「看取りに向かう家族のための心構え」（同僚作）
緩和ケアを担当する訪問看護師が、看取り直前のご家族に渡す「これから起きること」のページ。 口頭で何度も説明していた内容を、家族が落ち着いて読み返せる形に。
「言葉で1回伝えるより、書いてあるものを家で読み返してもらう方が、家族が落ち着く」という効果があったとのこと。
例3：医療事務・「夜間救急の問い合わせフロー」（同僚作）
「いま受診してもいいか」「待ち時間はどのくらいか」など、夜間によくある問い合わせの判断フローを、3クリックで答えに辿り着くWebアプリにしたもの。 電話対応時間が、目安で1/3になったそうです。
3例とも、HTMLファイル1枚で完結しています。 データベースもサーバーも、要りません。
もっと深く：ChatGPT のモデル、どれを選ぶ？
ChatGPTには、複数のモデル（頭脳の違い）があります。 画面に表示されるモデル名は時期によって変わりますが、Vibe Codingで見るポイントは大きく3つです。
- 標準モデル / Instant系：速く返ってくる標準の選択肢。Vibe Codingの最初の1本に向いています
- 上位モデル：より深く考えるモデル。複雑な指示や大きめの修正に向いています
- 推論特化モデル：数学・論理問題・コードのバグ解析に強いモデルです
最初の1本に使うなら標準モデルで十分です。 モデルの選択肢に迷ったら、デフォルトのままで問題ありません。
ChatGPTの中で「モデル切替」を試したくなるのは、第6回（直しを話しかけるコツ）以降。 それまでは、いま開いているChatGPTがどのモデルで動いているかを気にしなくて大丈夫。
ちなみに、Claude にも複数モデルがあります（Opus / Sonnet / Haiku 系）。 これも第8回以降で扱います。
動画で見る
文字より動きで見たい人へ：
- YouTube：安野貴博「バイブコーディング超入門 第3回 ChatGPTでバイブコーディング」：タイムスタンプ 0:00〜5:00 がほぼ第2回と同じ流れ