Web制作のヒアリング整理を行うAIツールを試作してみました

最近、OpenAI API と Google Apps Script を使って、Web制作のヒアリング内容を整理するAIツールを試作していました。

もともとHTML/CSSだけしか触っていなかった訳ではなく、PHPやJavaScriptのカスタマイズは普段から行っていたのですが、「AI APIを実際に接続して動かす」というところまでは今回が初挑戦。

今回作っていたのは、クライアントのヒアリングメモを入力すると、

・必要ページ
・必要機能
・確認事項
・見積項目

などをAIが整理して返してくれるツールです。

例えば、

「外国人観光客向けに地域のお土産を紹介したい。英語対応したい。Instagramとも連携したい。」

のような曖昧な相談内容から、Webディレクション的な観点で要件を整理していくイメージです。

このツールは、制作担当者だけではなく、営業担当者にも役に立つのではないかと思います。

ヒアリングメモを入力しボタンをクリックすると↓内容を整理してページ構成や要確認事項などを表示してくれます。

実際に作ってみると、単純にAIへ文章を送れば終わり…という訳ではなく、

・fetch通信
・JSON形式の制御
・Google Apps Script 側のデバッグ
・OpenAI API の quota エラー
・再デプロイ忘れ
・ブラウザキャッシュ問題

など、かなり試行錯誤しました。

特に難しかったのは、「AIにJSONだけ返させる」部分。

AIは普通に人間向けの文章を書きたがるので、API側の制御やプロンプト設計を調整しながら、ようやく安定して返るようになりました。

まだ試作段階ですが、「Web制作 + AI」の可能性をかなり感じています。

今後は、

今後更に色々なことに応用できそうなので、引き続き色々試してみようと思います。

※ 現在はクローズドな試作版として運用しています。