はじめに
こんにちは、フロントエンドエンジニアの佐川です。
今回は、社内のAIを利用した研究開発として、生成AIを活用して「敬語に変換くん」というWebアプリケーションを1日で開発した経験について共有させていただきます。
アプリケーションのデモは以下のURLでご覧いただけます：
https://gd-keigo-app.pages.dev/
※Gemini APIは無料枠を使用しており、必ず正常に動く保証はできませんので、あらかじめご了承ください。
スクリーンショット
アプリ制作の目的
このプロジェクトの主な目的は以下の2点でした：
- 社内でAIツールを使用した開発プロセスの検証
- 生成AIの実践的な利用方法の探求
開発者のバックグラウンド
- フロントエンドエンジニア兼デザイナー
- 日常的にChatGPTなどのAIを質問のために使用
- 生成AI APIの使用経験なし
- VSCodeをメインのエディタとして使用
- Cursorを活用した開発は初めての経験
なぜ敬語変換アプリを選んだのか
弊社はLINEアプリの開発に強みがあります。
そこで、まずLINEプラットフォーム上で便利に使えるアプリケーションを考えました。
日常的に、目上の方とLINEでコミュニケーションを取る機会がある方は多いと思います。その際、適切な敬語を使用することが重要ですが、正しい敬語を考えたり確認したりする作業が煩わしいと感じることがありました。
そこで、AIを使って文章を自動的に敬語に変換するアプリケーションがあれば便利だと考えました。ただし、今回は完成度よりも開発速度を重視し、社内でのAIアプリ開発事例の実績作りを優先したため、LINEアプリ化は見送りました。
使用技術
- bolt
- Next.jsプロジェクトの作成
- UIの出力
- Cursor
- 開発用IDE
- コード生成のComposer機能をメインに活用
- Next.js AppRouter
- shadcn/ui
- Supabase
- 変換履歴保存するデータベース
- Googleログインの認証機能
- Gemini API
- 敬語に変換する用の生成AI
- Cloudflare Pages
- ホスティング
開発プロセスと良かった点
Cursorの活用
Cursorを使用して敬語変換画面を実装していく中で、特に印象的だったのはComposer機能です。コード量が増えてきた際、Composerにコンポーネント分割を指示したところ、瞬時にエラーのない分割を行ってくれました。
Cursorの主な利点：
- プロジェクト内のコードを参照し、質問や編集が可能
- Cursor Composerに指示を与えるだけで、高品質なコードが出力される
- 開発者自身が実装する部分が大幅に削減され、開発速度が向上
boltの便利さ
boltを使用することで、初期セットアップの時間と実装を大幅に短縮できました：
- shadcnが組み込まれたNext.js AppRouterプロジェクトを簡単に作成
- プロンプトを使って気になる箇所を修正し、コードをダウンロード可能
- コード出力だけでなく、プレビュー機能も備えている
ただし、細かい調整には限界があるため、ある程度の段階からはCursorでの開発に移行するのが効率的だと感じました。
アプリケーションの概要
「敬語に変換くん」の主な機能：
- 変換したい文章を入力
- 「会社の上司」などの敬語を使用する対象を選択
- 変換ボタンを押すと、シーンに合わせた敬語に変換
追加機能：
- 過去の変換履歴をSupabaseのDBに保存し、閲覧可能
- SupabaseのGoogle認証を実装
直面した課題
最大の課題は敬語変換の精度でした。
無料枠のあるGemini APIを使用しましたが、結果の質にばらつきがありました：
- 成功例：「新しい企画を考えてきて」→「ご検討いただける新企画をご提案いただけますでしょうか」
- 失敗例：「ありがとう」→「お世話になっております」
プロンプトエンジニアリングをさらに改善することで、精度向上の余地があると考えています。
まとめ
AIツールを活用することで、1日という短期間でWebアプリケーションを開発することができました。特にCursorとboltの組み合わせは、開発速度と品質の両面で大きな助けとなりました。
今後は、敬語変換の精度向上や、LINEアプリへの展開など、さらなる改善を検討しています。
AIを活用した開発に興味のある方は、ぜひ試してみてください。
