CITRON AIのエンジニアSです。
前回の記事では「コードを書けなくても、AIの支援でプロトタイプを構築できる」という体験を綴りました。今回はその続編として、どのようにして“実装フェーズ”へ移ったのか、そしてAIとどう協働したのかをご紹介します。
アプリの開発背景
医療予診サポートアプリとは
患者と医療従事者の“予診コミュニケーション”を、シンプルで確実なものにすることを目的としたWebアプリです。
このアプリでは、AIがユーザーに症状について質問し、それに答えていくことで情報が整理され、”まとめ”として出力されます。ユーザーはそれを印刷・保存して医師に提示することができます。
診察室での問診時間は限られており、症状を正確に伝えることが難しいケースが多くあると思います。体調不良、緊張、お子さまの同席などがコミュニケーションを阻害することもあります。後になって「あの症状も伝えればよかった」と不安になることもあるかもしれません。このアプリは、そうした場面を少しでも減らすことを目指しています。
開発の背景
社内メンバーとの雑談の中で、医師目線のSNS投稿が話題になっているという話が挙がりました。
内容は、ChatGPTなどを使って症状を事前に整理してくる患者が増えており、正確性に課題はあるものの診察の助けになっている、というものでした。
その投稿には「専用のアプリがあれば便利」といった一般ユーザーの反応もあり、患者側からのニーズも感じられました。
こうした背景から、AIによる事前整理を支援する専用アプリがあれば、医師・患者の双方にとって役立つのではないかという考えに至りました。
私自身は開発経験が浅い立場でしたが、AIの力を借りればサービス開発にも挑戦できるのではと考え、プロトタイプ制作に踏み出しました。
アプリの利用イメージ
操作手順
- チャット画面で症状を入力
- AIが追加の質問を投げる → ユーザーが回答
- 回答の蓄積に応じて「症状まとめ」ボタンが有効化
- 症状まとめがチャット上に出力 → 印刷・保存可能
- 「会話記録」ボタンから全対話履歴を閲覧 → 印刷・保存可能
「症状まとめ」や「会話記録」はいつでも出力し直すことができます。
チャット画面の様子
「症状まとめ」押下時の様子
整理されたものを見ると、「ついでに相談したかったこと」などの思い出しにも繋がるかもしれません。
伝え忘れた症状に気付いた場合は、情報を追加して、何度でも「症状まとめ」を再出力することができます
出力された “まとめ” の右下には、「印刷」アイコンと「保存」アイコンが表示されます
会話記録画面の様子
全ての会話記録を印刷したり、保存したりすることが可能です
開発プロセス：AIとの開発の進め方
要件定義とChatGPTの活用
ChatGPT（ChatGPT 4o）は、自然言語での仕様整理や構成案の生成に役立ちました。 Slackの会話ログや画面構成のスクリーンショットをそのままAIに渡して、「ここから仕様を読み取って要約して」といった使い方をしながら、実装方針を定めていきました。
Git Hub Copilotに“指示を渡す”ためのプロンプト設計
実装準備段階では、ChatGPTと一緒に Copilotに貼り付けるコメントプロンプト を設計しました。
【例】
// Vue3 + ChatGPT API を用いた、医療相談向けチャットアプリを作成する
// 対話は AI → ユーザー → AI …の順で進行し、症状を整理して「まとめ」を生成
// OpenAIのAPIキーは .env から取得し、環境変数として使う
// UIはスマホ対応、印刷・保存ボタンあり …（以下略）このように具体的な要件を整理してCopilotに渡すことで、機能に沿ったコードを安定して提案してもらえるようになりました。 API連携を含むベース機能は、数分のやり取りで立ち上がり、チャット画面や記録表示、印刷・保存まで一通りの実装が整いました。
GitHub Copilotを利用した実装
今回の実装では、GitHub Copilot の「Agent」モード＋「Claude Sonnet 4」モデルを使用しました。
Copilot にプロンプトを送信し、出力されたプロジェクトの 設定ファイルを少し調整するだけですぐに動作しました。初期段階で必要な機能の大部分が実装されており、あとは UIの細部調整や挙動のニュアンス修正を行だけ、という状態まで短時間で持っていくことができました。
ChatGPT 4.1利用時に吐き出されたプロジェクトの様子
試しにChatGPT 4.1で初期実装を行いましたが、UIの崩れや未完成のロジックが目立ち、Claude Sonnet 4利用時と比べて完成イメージまで「道のりが遠い」という印象でした。
Claude Sonnet 系は、GPT系と比較して UIやUXへの理解度が高く、視覚要素に強い傾向があり、プロトタイプの立ち上げや簡単なWebアプリケーション作成に適していると感じました。
AI利用時の壁と工夫
意図のズレとタイムロス対策
Copilot（特にagentモード）に指示を出すと、私が意図した範囲を超えてコードを大幅に変更しようとすることがありました。 その場で修正内容の意味を理解できないと、元に戻して再指示する必要があり、時間的なロスに繋がります。
→ 指示時に「すぐに修正せず、処理の意図・影響範囲をまず説明すること」と明示することで対応しました。
外部の技術リソース提案とリスク判断
Copilotが提案してくるコードの中には、見慣れないライブラリや外部リソースが含まれていることがありました。
→ リスクの観点から、「出典（公式かどうか）」「提供元（信頼できるか）」は必ず確認するようにしていました。
また、明らかに過剰な設計（例：印刷1つのために大型ライブラリを導入しようとする 等）は採用せず、目的に必要な最小限の実装を心がけました。
とはいえ、セキュリティ・保守性・重さ（パフォーマンス）など、まだまだ自己調査やレビューを通じて意識すべき課題は多く残っています。
デザイン・UIの試行錯誤
AIがやろうとしているデザインが不完全
一例ですが、AIが出力したUIでは、吹き出しチャット形式にも関わらず、ユーザーとAIの発言が同じ方向に表示されていました。
→ 軽微なニュアンスのズレについては、AIとのやり取りに時間をかけるよりもCSSやHTMLを直接修正したほうが早く、確実でした。
実装しようとしているが機能していないパーツ
AIが文字装飾などの機能を実装しようとした痕跡がありましたが、実際には機能していませんでした。
→まずは意図された処理をAIに完遂させて内容を確認し、そのうえで不要と判断した機能は、影響範囲をAIから聞き出したうえで手動で削除しました。
AI出力が“無難すぎる”デザインに偏る
自然言語でデザインコンセプトを伝えた場合、Copilot（Sonnet 4）は “Sonnet 4” の定番色に寄りすぎ、特徴がない印象でした。
→ メインカラーとサブカラーの色コードを具体的に指定することで、生成されるUI全体に統一感が生まれ、細部（ボタンや装飾）まで調和が取れるようになりました。
AIを“アプリの一部”として制御する工夫
このアプリでは、ChatGPTを内部の“思考エンジン”として組み込んでいます。単なるチャット機能ではなく、「医療相談支援に特化した振る舞い」をさせるために、以下のような「systemプロンプト」設計を施しました。
会話時のAI制御
- 医療相談に特化し、関係のない話題を排除
- 医師に変わって診断するような言動を禁止
- 会話構成のテンプレート化
- トーン・文量・反応パターンの指示
これにより、AIは雑談や無関係な話題をスキップしつつ、医療相談支援を継続する振る舞いをするようになりました。
症状まとめ生成時の制御
- 出力フォーマットを厳密指定
- 文量・語調・不要情報の排除
- 会話の正規化ルールを指示
- 無関係な話題の扱いをルール化
このように、ChatGPTがアプリの一部として意図通りに振る舞い、不要な出力や誤動作を最小限に抑えるよう工夫しました。
工夫を終えた所感
この制御設計によって、AIが“万能な何でも屋”として振る舞うのではなく、限定された目的に忠実な専門支援役として動作する状態を作ることができました。
これは「プロンプトの精緻化＝アプリ設計の一部」として、重要な工程になったと感じています。
おわりに
今回の開発を通して、「AIに任せれば作れる」だけでなく、「AIと相談しながら自分の理解を深めていける」ことの面白さを強く感じました。
私は技術的にはまだまだ未熟ですが、AIを活用すれば、アイデアと責任を持って進める意思があれば開発という領域にも関わることができそうです。
一方で、AIの提案を受け入れるには「自分の設計意図を持つこと」と「出力を検証する力」が今後ますます求められると実感しました。
※このアプリは現在、デモ段階での開発が完了したところです。サービスの公開日は未定です。
