AIを使った開発の実績

近年ますますの発達を遂げ、私たちの生活の一部にもなりつつあるAI。
自社開発チームUniQooOneでも、数年前よりAIを開発に取り入れはじめ、AI活用の実績やノウハウを積み上げています。
具体的にどのような開発製品・工程で取り入れたのか、また、どんなAI・モデルを活用しているのか、簡単にご紹介したうえで、AIと開発を進めるうえでの留意点や気づきを、デモ開発をもとに説明します。

目次

開発の工程でAIを活用した事例

設計や実装、レビューなど、エンジニアの開発業務のサポートのためにAIを取り入れた事例をご紹介します。

スクロールできます
プロジェクト名概要使用AI/モデル役割
名刺アプリ
(自社開発)
名刺情報を管理するアプリの開発Agent: GitHub Copilot / Model: Claude・GPT・GeminiAI支援を活用した実装・テスト作成・コードレビュー・設計/仕様書作成
経費精算アプリ
(自社開発)
経費精算システムの開発Agent: GitHub Copilot / Model: Claude・GPT・GeminiFigma設計をもとにMCP連携(※)で画面実装、MCP連携で一部API設計、実装、コードレビュー
旅行会社予約サイト
(受託開発)
旅行会社の予約サイトにおけるマーケティング施策の開発および保守・改善Agent: GitHub Copilot / Model: Claude・GPT・Gemini既存コード解析・設計・実装・テスト生成・コードレビュー・バグ修正

※MCP: AIと外部ツールを連携するための仕組み

開発製品にAIを組み込んでいる事例

システムやアプリ自体にAIを組み込み、検索や読みとりの機能を持たせている事例を紹介します。

スクロールできます
プロジェクト名概要処理の流れデータソース使用技術スタック役割
社内ドキュメント検索アプリ
(自社開発)
社内ドキュメントを検索して回答できるアプリの開発(RAG)AWS Knowledge Bases を使った検索連携社内ドキュメントAWS Knowledge Bases / Amazon Nova要件整理・設計・実装・検証
名刺アプリ
(自社開発)
名刺画像の読み取り・情報抽出機能の開発(画像読み込み)Amazon Bedrock を用いた画像解析構成名刺画像Amazon Bedrock / Claude要件整理・設計・実装・検証
経費精算アプリ
(自社開発)
レシート画像の読み取り・情報抽出機能の開発(画像読み込み)Amazon Bedrock を用いた画像解析構成レシート画像Amazon Bedrock / Amazon Nova要件整理・設計・実装・検証
旅行会社予約サイト
(受託開発)
修正チケットを自動作成し、チケット内容を基に修正まで行う仕組みを構築タスク管理システムの詳細取得 → Amazon Bedrock(Amazon Nova)で解析 → GitHub Issue自動作成 → GitHub Copilotで修正対応タスク(チケット)管理システムAWS Lambda / Amazon Bedrock / Amazon Nova / GitHub Issues / GitHub Copilot要件整理・設計・Lambda実装・解析ロジック設計・Issue連携実装・検証

※RAG: 社内資料などを検索して,その内容を使ってAIが回答する仕組み
※Amazon Bedrock: AWS上で生成AIモデルを利用するためのサービス
※GitHub Issues: 改修内容を管理するためのチケット

AIエージェントを組み込んだ開発プロセスのデモの紹介

UniQooOneチームが行ったAIエージェントによる開発のデモを一部ご紹介します。

実際の開発工程にいくつかAIエージェントによる生成を組み込み、精度を測ったうえで改善点を検討しました。

Demo1.要件定義の作成

エンジニアが作成した要求事項をもとに、AIに要件定義書を作成してもらいます。

<用意するもの>

・要求事項ファイル
⇒今回の開発でほしい機能などを記したマークダウンファイル(左画像参照)

・共通指示ファイル
⇒プロジェクトの概要、参照すべきドキュメントや、コーディングルール、頻繁に使うコマンドなどを書いて おくファイル。これをAIに渡しておくことで、プロンプトのたびにいちいち指示をする必要が無くなります。作成してほしい要件定義のフォーマットなども指示できます。(右画像参照)

<AIに流すプロンプト(命令文)>

「要求事項.md から 要件定義.md を作成してください」

<生成結果:◎>

期待通りの物が生成されました!

最初にAIに参照させる「要求事項.md」が重要!
AIが理解しやすい記載(構成や文面)になっているかどうかで、生成の精度が変わってきます。

Demo2.フロントエンド実装

エンジニアが作成した画面設計をもとに、AIに実装を行ってもらいます。
(※画面設計は「Figma」というブラウザ上のデザインツールを使用しています)

<用意するもの>

・画面設計(Figmaのリンク)

<AIに流すプロンプト(命令文)>

「https://www.figma.com/design/….. このリンクのページを○○コンポーネントを参考に作成してください。ヘッダー・サイドバーは○○にあるので、サイドバーの勘定科目を押下でページ遷移出来るようにしてください。」

※設計リンクを提示したうえで、参照にするべき部品名の指定や、期待する動作を明記しています。

<生成結果:△>

概ね期待通りでしたが、とことどころ文字の配置がズレてしまっていました。

↓設計した画面

↓生成された画面 (赤枠内の文字配置のズレがとことどころ生じています。)

こういった、文字配置などの微妙なデザインの齟齬を防ぐためには、設計時の要素の配置方法が肝になってきます。
要素を配置するときに自由配置(ピクセル指定)ではなく、flex指定やgrid指定を活用することで、左右揃えや中央揃えがAIにも伝わりやすくなります。

まとめ

今回のデモ調査の中では、上記で紹介した2つの生成事例のほかに、API設計・DB設計・バックエンド生成などのデモも実施しました。
その結果、比較的シンプルで簡単なものであれば問題なく生成できていました。

しかし、より複雑な構成・仕組みの開発でAIを活用するためには、正確な指示(プロンプト)はもちろん、参照データについても工夫が必要になってきます。

活用するうえでのポイントは3つ。

  • 共通指示ファイルと関連ドキュメントを整備して最新に維持しておくことで、短いプロンプトで、誰が指示をしても、生成の精度を保つことが出来ます!
  • 関連ドキュメントはexcelやword、PDFなどよりもテキスト系のファイルなどAIが読みやすいフォーマットで!
  • 最後は人間がレビューや評価を行い、品質を保証しましょう!

上記結果を踏まえ、UniQooOneチームでは、今後も様々なAIエージェントを活用した研究・開発を行っていきます。

目次