はじめに
今回の記事は、前回の記事の続編となります。
前回の記事はこちら
前回の記事では、より質の良い回答を得るためにどうしたら良いかをまとめたものになっています。
今回の記事では、実際にチャットとの会話ログを通して、実際にどのように反映されたのかを紹介したいと思います。
作ったPoCの詳細も前回の記事でまとめていますので、併せてご確認ください。
目次
会話ログで振り返る：PoCができるまでの流れ
ここからは、実際にどんなプロンプト→回答→次のプロンプトというやりとりをしたかを、フェーズごとに振り返ります。
STEP 0: 最初の要件をざっくり投げる
ユーザーのプロンプト
スマホで使える服薬アプリを作りたい。内容は以下の通りである。
・ホーム画面
・カレンダー 月、週、日で変更可能。
・その日のタスクも表示
・名前、単位、ラベルを表示し、そのカードもしくはボタンを押すと登録内容が表示され、服薬ボタンなどでタスクを完了にすることができる。
・タスク画面
・登録した薬の一覧を確認でき、薬の追加や編集ができる画面
・以下の項目は最低限
・タイトル
・単位 …（錠、カプセル、塗り薬、貼り薬、mg、ml、点眼薬 等）
・ラベル …（朝食前、朝食後、昼食前、…、寝る前）
・通知タイミング
・薬の残数
・メモ
・設定画面
・機能一覧
・通知設定
AIの回答（要約）
-
React + TypeScript + Tailwind で最低限動くアプリ一式を生成
App.tsxcomponents/BottomNav.tsxcomponents/MedicationForm.tsxtypes.tsconstants.ts
-
ホーム／タスク／設定の3画面が一通り動く状態
👉 この時点で「動くものはあるけど、UIはかなりシンプル」という状態でした。
STEP 1: 課題リスト形式で「気になるところ」を投げる
ここからが本番で、ただコードをもらうだけでなく、UIを作り込んでいきます。
ユーザーのプロンプト
以下の課題に対して改善してほしい。
課題
・全体的
・シンプルすぎる
・コントラストをもう少しはっきりさせたい。
・ホーム画面
・日付のハイライトの場所が移動しない
（次の週や次の日に移動しても、次の日にハイライトされず、13日にハイライトされてしまう）
・年と月が逆に記載されている。
・チェックをつけてタスクを完了にするが、チェックしたかしてないかがわかりにくい
・タスク画面
・追加の編集画面がウィンドウで表示されてしまう
・単位の選択ができるが、実際に何錠なのかなど個数を入力する場所がない
・長い選択項目の選択時にウィンドウを超えて項目が表示される
AIの回答（要約）
-
デザインの刷新
- 文字色を濃くしてコントラスト改善
- カードに影をつけて「シンプルすぎる」問題を緩和
-
ホーム画面
- カレンダーのハイライトロジック修正
- 日付表記を「年 月」→「2023年10月」形式に変更
- 完了タスクはカードの色変更＋取り消し線で分かりやすく
-
タスク画面
- 編集を「小さなウィンドウ」ではなく全画面モーダルに変更
- 「1回何錠か」の入力欄を追加
STEP1のポイント
-
画面ごとに課題を箇条書きしたことで、
- AIの回答も「画面ごとの変更点」として返ってきた
- 「シンプルすぎる」「分かりにくい」などの感覚的な話も、
- 「カードに影をつけて」「完了時は取り消し線」といった具体的な修正案に落ちてきた
STEP 2: 通知時間 UI を「画像ベース」で指定する
次に、通知時間の UI をiOS っぽいドラムロール式にしたくなり、スクショを使って指示しました。
ユーザーのプロンプト
・タスク画面
・通知時間の選択方法を以下の画像をライトモードにしたものに変更したい
・選択項目が多い場合、保存ボタンに重なってしまうので、保存ボタンに被らない範囲で表示し、スクロールで全てが見れるようにしたい
・編集画面で項目を横に並べられるものがあれば並べて、編集画面全体のスクロールをできるだけ減らしたい
・作ったタスクを削除したいとき、詳細画面に削除するボタンがあるが、削除されない
AIの回答（要約）
- 通知時間の UI を、
-
input type="time"→ 自作のドラムロール風 UI に変更 - 「--:-- のボタンをタップすると、中央にピッカーが出る」挙動に
-
- フォームレイアウトを調整して、
- 「1回の量＋単位」「服薬タイミング」「在庫＋通知時間」などは横並びに
- スクロール量を減らす
- 削除ボタンのロジックを見直して、削除処理が確実に動くように修正
STEP2のポイント
-
スクショを添えて「こういうUIにしたい」と指定すると、
- AIは「雰囲気」だけでなく挙動のイメージまで寄せてくれる
- 「スクロールで保存ボタンに被らないように」など、
- モバイル特有のつらさも割と伝わる
STEP 3: 微調整フェーズ ― 実用レベルに近づけるための細部の磨き込み
基本的な画面構成と主要機能が動くところまで来たので、ここからはUIの細部調整・操作性改善・情報設計の再整理といった“仕上げフェーズ”に入りました。
この段階では以下のような課題があり、それぞれを個別にAIに依頼してブラッシュアップしていきました。
修正項目
- 日表示レイアウトの修正
- 通知時間ピッカーの仕様変更（--:-- → ドラムロール式）
- 編集画面レイアウトの再構築
- 削除フロー（確認モーダル → 実削除）
- プルダウン化（1回量・在庫）
- 服薬タイミングのカスタム設定
- 設定画面に「カスタマイズ」タブを追加
- 単位・服薬タイミングの表示／非表示
これらを順番に調整していく中で、AIとの会話精度もだんだん上がっていき、UIが使いやすい状態に近づいていきました。
ユーザーのプロンプト
次の課題
・ホーム画面
・日を選択したときは、日時の表示のところは〇月〇日と表示されるようにしたい。
・タスク画面
・編集画面の通知時間の選択時は、選択されていない時は、これまで通り、細い枠で—:—を表示し、
選択したら以下のようなレイアウトで中央が固定されたドラムロールで選択したい。
・削除ボタンを押しても削除されないので、「削除します。よろしいですか？」モーダルを出して
確認後に削除されるようにしたい。
AIの回答（要約）
- ホーム画面
- 日モード時のヘッダーを「10月16日」のような自然な形式に変更。
- 通知時間ピッカー
- 初期状態は細い枠の「--:--」表示。
- タップするとドラムロール式のピッカーが開き、中央の数字が選択されるように。
- 削除ボタン
- 保存ボタンと同じスタイルの赤いボタンに変更。
- 押下時に確認モーダルを表示し、OKで削除処理を実行。
さらに細かいUIの改善（ドラムロールの挙動）
通知時間ピッカーが実装されたものの、以下の指摘を投げてさらに改善を依頼。
数字を動かしたときに黒字の部分が一緒に動いてしまっているので、
黒字の部分は中央に固定して、数字だけが上下に移動するようにしたい。
AIの対応
- 中央の黒字部分を完全固定。
- 数字リストのみがスクロールして見た目が iOS のピッカーに近づくように修正。
--:-- 表示の統一とフォーム全体の黒字化
--:-- の表示も他の項目と同じデザインに統一し、
フォーム内の文字色をすべて黒字にしたい。
AIの対応
- 通知時間の入力欄を「ラベル＋枠＋値」のスタイルに統一。
- --:-- も黒字化して統一感を出す。
プルダウン化と情報設計の調整
1回量と在庫はプルダウン選択にしたい。
服薬タイミングに「カスタム」を追加し、何日に何回を選べる専用ピッカーを用意したい。
AIの対応
- 1回量：0.5〜10 などのプルダウンに変更
- 在庫：0〜100 のプルダウン
- 服薬タイミングに「カスタム」を追加
- カスタム時は専用のドラムロールで
- 左：何日に
- 右：何回
- OKで「3日に1回」などの文字列に変換して反映
設定画面に「カスタマイズ」タブを追加
単位や服薬タイミングに普段使わないものがあるので、
設定画面でON/OFFできるようにしたい。
AIの対応
- 設定に「表示のカスタマイズ」セクションを追加。
-
visibleUnitsとvisibleLabelsを state として管理しローカルストレージへ保存。 - 編集画面では、ON の項目だけプルダウンに表示。
※既存データで使われている項目は例外的に表示されるように安全策も実装。
STEP3のまとめ
このフェーズでは、アプリとして“普通に使えるレベル”に必要な細かな操作性・UI・情報設計の調整を集中的に行いました。
特に学びが大きかったのは、
- AIに複数ファイルの修正を指示した場合は、漏れなく反映すること
- UIの動き・見え方はスクショや図で伝えると圧倒的に伝わること
- 課題は「現状」「理想」「意図」をセットで伝えること
この3つでした。
これらを押さえると、AIとの共同開発での失敗が一気に減り、
プロトタイプ開発が驚くほどスムーズになります。
まとめ
服薬管理アプリの PoC を AI と一緒に作ってみた結果、
- 動くアプリ一式（React + TS + Tailwind）はあっさり出てくる
- そこから、
- UI の細かい挙動
- 削除フロー
- カスタム服薬タイミング
- 設定画面からのカスタマイズ
- といった**「人がこだわりたい部分」も、会話を重ねることでかなりのところまで作り込める**
という手応えがありました。
ポイントは、
- 自分がプロダクトオーナー／ディレクターとして振る舞うこと
- 課題を画面ごと・機能ごとに箇条書きすること
- 「現状」と「理想」をセットで伝えること
- スクショや動画を活用して、挙動のイメージを共有すること
です。
今後さらに追加したい機能
今回は、最低限必要な項目に絞って PoC を作成してきました。
ただ、理想を言えば「ここまでできたら便利だよな」という機能はまだまだあります。
その一部をメモ的に挙げておきます。
- カレンダーの日付をタップすると、その日付に紐づいたタスクをそのまま追加できる
- お薬手帳の内容を読み取り、その情報をアプリのタスクに反映できる
- 通院頻度が高く、同じ薬を定期的にもらう人向けに、定期処方のタスクを少ないステップで登録できる
- 服薬の頻度や回数（例：○日に1回、週末だけ など）の選択肢の幅をさらに広げる
このあたりは、今後また AI と一緒に設計や実装を詰めていきたいところです。
最後に
今回の記事では、PoC作成時の会話ログを通じて、「どのような情報を渡すと、どのような回答が返ってくるのか」を実践ベースで書いてきました。
PoC作成に限らず、普段の業務や日常生活において AI を活用する場面は増えて�きています。
そんな中で、「質の良い回答を得るためにどんな情報を渡せばいいのか」という感覚が、この記事を通じて少しでも伝わっていれば嬉しいです。
- 「思ったような回答がもらえない」
- 「欲しい回答にたどり着くまでのやりとりが多い」
と感じている方は、ぜひこの記事を参考にしていただけたら嬉しいです。
ここまで読んでいただき、ありがとうございました！