GovTech東京で生成AIプラットフォームの利活用推進に携わっているワタベです！
令和７年４月に練馬区区政改革担当部区政改革担当課区政改革担当係からGovTech東京に派遣され、派遣前は企画系の部署で総合計画策定や公共施設のマネジメント等に携わっていました。それまでデジタル系の部署にもいたことはなく、AIもあまり活用できていなかったのですが、派遣された現在ではAI漬けの日々を送っています。
今回は、生成AIプラットフォームを活用して開発した、AIアプリモックをバイブコーディング（AIに自然言語で指示しながらコードを書き上げる進め方）で作成できるツールを紹介します。
チャット形式でのAI利活用は自治体でも徐々に浸透し始めていますが、次のステップとして、業務にフィットしたアプリケーションの実装に至っているケースはまだ少ないのが現状です。
生成AIプラットフォームを活用すると、非エンジニアの自治体職員でも内製で、業務フローに組み込む可能性を検証するためのAIアプリモックを作成できますので、この記事ではその可能性について紹介します。
AIアプリモックの開発環境
AIアプリモックとは
この記事では、フロントはローカルで稼働させたHTML、バックエンドは生成AIプラットフォームのワークフローで実装した、「ウェブアプリ風生成AIアプリのプロトタイプ」を、「AIアプリモック」と呼んでいます。
ローカルのHTMLであればブラウザさえあれば稼働するため、ツールやソフトの導入にハードルがある自治体環境でも比較的トライしやすいかと思います。
構成図
フロント側のHTML/CSS/JavaScriptはバイブコーディングで作成し、バックエンドでは生成AIプラットフォーム（Dify）をノーコード・ローコードで組むことで、非エンジニアでも簡単に作成することができます。
私自身GovTech東京に来るまではほとんどHTML系に触れたことはなかったのですが、同じグループの都派遣ICT職の方に教えていただきながら、AIを活用して動くものを作れるようになりました。
開発ツールの紹介
実際にAIアプリモックを作成している環境を紹介します。こちらの開発ツールも、バイブコーディングで作成し、AIアプリモックと同じ構成で動作しています。
自然言語でAIに指示を出すと、HTML/CSS/JavaScriptのコードを生成し、リアルタイムでプレビューできます。UIの編集やバックエンドの生成AIプラットフォームとの接続も、HTMLの知識がなくとも作成可能です。コードへの理解がある場合は、直接コードを編集することもできます。
開発ツール画面
AIにドロップダウンリストの追加を指示した結果
うまく動かない時などは、AIにコードを前提とした質問ができるため、コードのブラックボックス化も防ぐことができます。
AIに質問した結果（作成する文章の種類が、APIでうまく裏側に送れない）
技術詳細
開発ツールをローカルで開き、操作を行うとバックエンドの生成AIプラットフォーム（Dify）のAPIをJavaScriptで呼び出します。コードと修正指示・質問を渡すことで、修正後のコードや質問を受け取り、フロントに表示させています。
Dify側では、モデルの選択機能を実装している他、単純なプロンプトのみでHTMLコードを返すシンプルな構成になっています。プロンプトは非常にシンプルですが、この程度でも十分に求める結果が返ってくるため、生成AIの進化・発展を感じました。
バックエンドの生成AIプラットフォームのコード修正フロー
JavaScriptのフェッチ部分も、Difyの公式APIドキュメントにコールやレスポンスの形式があるため、これをコピペしてAIに指示するだけでAPI連携が可能です。
AIアプリモックの紹介
実際にバイブコーディングで作成したAIアプリモックをいくつか紹介します。
チャットベースの生成AIではなく、実際の業務にフィットするようなUIや挙動を実現するAIアプリをバイブコーディングで簡単に作成できます。
文章作成アプリ
参照したい文章のファイルやフォルダを指定して、作成したい内容を入力すると、参照ファイルのニュアンスに沿って文章を作成するアプリです。以下のサンプルでは、既存の通知文を”生成AI”をテーマに修正させる処理を行っています。
作成した文章をそのまま修正したり、さらにここからAIに指示を出して再修正することが可能です。
参考にしたいファイルを指定し、作成したい文章の内容を記載
行政でよく作成する別の自治体に向けた通知文をアップロードし、参照した文章の形式に沿って指定の内容を作成（AIによる再編集も可能）
審査アプリ
補助金の申請書等の内容に誤りがないか審査を行うケースで、審査対象のファイルが格納されたフォルダを指定し、そのファイルから抽出する項目と、それに対して行う審査項目を入力すると、全てのファイルに対して一括で審査を行うアプリです。
フォルダを指定し、審査対象と審査内容を記載
審査結果をCSVで出力
抽出モードに設定すると、対象のファイルから特定の項目を抽出することが可能です。OCRにも対応しているため、ファイル形式や様式がバラバラの書類を、一括して構造化出力することが可能です。
抽出モード
CSV出力結果（※サンプルのため、存在しない住所を読み込ませています。）
資料作成アプリ
文章や画像を投入すると、その内容を元にHTML形式で資料を作成するアプリです。
生成された資料は、AIによる再編集が可能なほか、直接入力で内容を編集することが可能です。
アプリ画面
サンプルとして書いた私の綺麗な板書画像を投入
内容をLLMが画像認識し、HTML形式の資料として出力（これは本当に驚きました）
自治体×生成AIの可能性
自治体で生成AIを活用する可能性
生成AIは今までの仕事の進め方や組織のあり方を大幅に変えていくポテンシャルを持っており、人材不足が進む自治体においてもその活用は必須です。
一方で、個々人の自発的な利用に任せたチャットベースでのAI活用には限界があるため、業務フローの中にAIを組み込むような設計を行わないと、利活用は進んでいきません。
今回紹介したバイブコーディングによるAIモックは、まさに実際の業務フローに即したAIアプリを内製でクイックに構築できるため、業務にフィットさせたAIの利活用の検証に最適であると感じました。
今後の自治体職員に求められること
行政のデジタル化は基本的にアウトソーシングが中心で、行政側に知見が溜まりにくい状況にありましたが、今回紹介したように、非エンジニアの自治体職員であってもバイブコーディングで簡単にAIアプリモックの内製ができるような時代になりました。今までとは異なり、行政側でもプロトタイプの内製を行い、仕事や組織でどのような活用ができるかをクイックに検証することも可能となりました。
AI時代においては、人手不足に対応し、質の高い行政サービスを提供し続けるためにも、AIレディな組織体制に変革していくことが求められています。ただし、利活用の手法やセキュリティの問題等、生成AI自体への正しい理解なしに、仕事の進め方や組織のあり方を変えていくことはできません。
今回のツールを実装する中で、生成AIを行政で活用する可能性と、行政側で実際に手を動かして実装する可能性を体感し、今後の自治体職員には、ドメイン知識である行政に関する知見だけでなく、生成AIを含むデジタルに関する知見も高めていくことが求められていると改めて強く感じました。
この記事が、自治体で生成AIの利活用を進めていくための参考になれば幸いです！
東京都が設立した外郭団体「GovTech東京」のテックブログです。GovTech（ガブテック）は、Government×Technologyの融合させた言葉。このブログでは、行政DXへの技術的挑戦、現場で得た知見、そして組織のカルチャーを発信していきます。govtechtokyo.or.jp
Discussion