はじめに
ChatGPT を使ったちょっとした事例紹介です。
2025/10/04 (土) の朝、目覚めると熱が出ていて、喉も痛い状態でした。近くの内科で検査を受けると、残念ながらコロナ陽性でした 🦠
薬を処方してもらいました。以下はお薬手帳アプリのスクリーンショットです。
これだといつ (朝・昼・晩・寝る前/食前・食後) 何の薬を飲めばいいのかよくわかりません。熱で朦朧とした頭では特に 🤒
そこで ChatGPT (GPT-5 Thinking) に以下のフォーマットの図を生成してもらうことにしました。
やったこと
ChatGPT に上記の 2 枚の画像を添付し、以下の内容で指示しました。
1 枚目の画像はお薬手帳のスクリーンショットです。
・薬の名前
・1 回に飲む用量
・飲むタイミング (朝・昼・晩・寝る前/食前・食後) が記載されています。
これをもとに 2 枚目の手書きの図のフォーマットの HTML にしてください。
そうすると HTML を生成してくれました。それを Chome で開いて描画したものが以下の図です。
うーん、フォーマットに従いすぎており、薬が 4 種類あるのに列が 3 列になってしまいました。そこで追加で以下を指示しました。
図の列数は薬の数によって増減させてください。 今回のケースではトラネキサム酸カプセルとデカドロン錠で列をわけてください。
これで理想的な図になりました！
- 服用する錠数を分かりやすくする
- 薬の情報をハイパーリンクにする
などもっと改良したい気持ちもありますが、まだ体調が悪いのでいったんここまで 🛌
ChatGPT が生成した HTML
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>薬を飲むタイミング表（薬ごとに列分割）</title>
<style>
:root {
--line: #222;
--muted: #666;
--bg: #fff;
}
body {
font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
background: var(--bg);
color: #111;
margin: 24px;
}
.wrapper {
max-width: 960px;
margin: auto;
}
h1 {
font-size: 20px;
margin: 0 0 12px;
}
.meta {
font-size: 12px;
color: var(--muted);
margin-bottom: 16px;
}
/* 列 = [時刻 | 薬1 | 薬2 | 薬3 | 頓服] */
.grid {
display: grid;
grid-template-columns: 110px repeat(3, 1fr) 220px;
border: 2px solid var(--line);
border-right: none;
}
.grid>div {
border-right: 2px solid var(--line);
min-height: 64px;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.head {
font-weight: 700;
font-size: 15px;
line-height: 1.4;
flex-direction: column;
gap: 4px;
}
.sub {
font-size: 12px;
color: var(--muted);
font-weight: 500;
}
.time {
font-size: 20px;
letter-spacing: .2em;
}
.circle {
width: 42px;
height: 42px;
border: 2px solid var(--line);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.cell {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
.prn {
align-items: flex-start;
text-align: left;
font-size: 14px;
line-height: 1.6;
}
@media print {
body {
margin: 0;
}
.wrapper {
margin: 0 12mm;
}
}
</style>
</head>
<body>
<div class="wrapper">
<h1>薬を飲むタイミング</h1>
<div class="meta">作成日：<span id="today"></span></div>
<!-- ヘッダ -->
<div class="grid">
<div class="head"></div>
<div class="head">
<div>麻黄附子細辛湯エキス顆粒（ツムラ）</div>
<div class="sub">5g/日・食前</div>
</div>
<div class="head">
<div>トラネキサム酸カプセル 250mg「トーワ」</div>
<div class="sub">6カプセル/日・食後</div>
</div>
<div class="head">
<div>デカドロン錠 4mg</div>
<div class="sub">2錠/日・食後</div>
</div>
<div class="head">
<div>頓服</div>
<div class="sub">カロナール錠200（200mg）/ 発熱時 2錠/回（5回分）</div>
</div>
<!-- 朝 -->
<div class="time">朝</div>
<div class="cell"><span class="circle">前</span></div>
<div class="cell"><span class="circle">後</span></div>
<div class="cell"><span class="circle">後</span></div>
<div class="prn"></div>
<!-- 昼 -->
<div class="time">昼</div>
<div class="cell">—</div>
<div class="cell"><span class="circle">後</span></div>
<div class="cell">—</div>
<div class="prn"></div>
<!-- 晩 -->
<div class="time">晩</div>
<div class="cell"><span class="circle">前</span></div>
<div class="cell"><span class="circle">後</span></div>
<div class="cell"><span class="circle">後</span></div>
<div class="prn"></div>
<!-- 寝る前 -->
<div class="time">寝る前</div>
<div class="cell">—</div>
<div class="cell">—</div>
<div class="cell">—</div>
<div class="prn"></div>
</div>
<p style="font-size:12px;color:#666;margin-top:10px;">
○の「前/後」は食前/食後。実際の服用は処方指示に従ってください。
</p>
</div>
<script>
const d = new Date();
document.getElementById('today').textContent =
`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
</script>
</body>
</html>
追記
最終的に、手動で少しだけ手直して以下の図になりました。
