AIアプリ高速開発シリーズ 第2回「AIアイコンジェネレーター」

2024-10-25
佐川 恭平
#
#
#

はじめに

こんにちは、フロントエンドエンジニアの佐川です。

今回は、社内のAIを利用した研究開発として、生成AIを活用して「AIアイコンジェネレーター」というWebアプリケーションを開発した経験について共有させていただきます。

スクリーンショット

アプリ制作の目的

このプロジェクトの主な目的は以下の4点でした:

  1. 社内でAIツールを使用した開発プロセスの検証
  2. 生成AIの実践的な利用方法の探求
  3. 画像生成AIの活用
  4. 仕様書駆動開発を試してみる

開発者のバックグラウンド

  • フロントエンドエンジニア兼デザイナー
  • 日常的にChatGPTなどのAIを質問のために使用
  • 画像生成AI APIの使用経験なし
  • VSCodeをメインのエディタとして使用
  • Cursorを活用した開発は初心者

開発の意図

今回の開発の意図は3つありました:

  1. 画像生成AIの試用:ユーザーが入力したパラメーターを元に、プロンプトを作成し、SNS用のアイコンをOpenAIのDALL-E3を使用して生成するアプリを作成しました。
  2. Cursor Composerのフル活用:CursorのComposerをフル活用して、どこまで完成度の高いアプリを作成できるかを試しました。前回はboltを使用しましたが、今回は差分を見るためCursorのみを使用しています。
  3. 仕様書駆動開発の実践:プロジェクト内に/docsディレクトリを作成し、仕様書を作成してから開発に取り組みました。これにより、Cursorが仕様書を読み込んで、スムーズに開発が行えると予想しました。

使用技術

  • Cursor(開発用IDE、コード生成のComposer機能をメインに活用)
  • Next.js AppRouter
  • shadcn/ui
  • OpenAI DALL-E3(画像生成用AI)
  • Cloudflare Pages(ホスティング)

アプリケーションの概要

「AIアイコンジェネレーター」の主な機能:

  1. 生成したい画像のパラメーターを入力
  2. アイコンを生成ボタンを押すと、パラメーターを元にプロンプトを生成し、プロンプトを元にDALL-E3が画像を出力
  3. 画像をダウンロード

開発プロセスと良かった点

OpenAI DALL-E3

DALL-E3は非常に品質の高い画像を出力してくれます。主な利点は以下の通りです:

  • 高解像度で鮮明な画像生成
  • 複雑な指示にも対応可能
  • 多様なスタイルや芸術的表現の再現性が高い
  • テキスト要素の正確な描画

しかし、背景を指定したものにならないなど、ちょっとした問題はありますが、概ね満足しています。

Cursor Composer

Cursor Composerは非常に強力な機能であると再認識しました。

主な利点は以下の通りです:

  • プロジェクト内の仕様書を元に、必要な機能を実装してくれる
  • パラメーターを調整するためのフォームが多く、手作業で実装すれば時間がかかるが、仕様書をもとに一瞬で実装してくれた
  • 開発者自身が実装する部分が大幅に削減され、開発速度が向上
  • コードの一貫性が保たれ、品質の高い実装が可能
  • エラー修正や最適化の提案も行ってくれる

仕様書駆動開発

仕様書を書いてから実装に取り掛かる仕様書駆動開発を試みました。

主な利点は以下の通りです:

  • 最初にAIと壁打ちしながら仕様書を作成したことで、アイデアの整理ができた
  • 仕様書を作成するうちに、仕様が固まってきて良かった
  • 仕様書をCursorに読み込ませると、生成のブレが少なかった
  • 最終的にコードが仕様書と違う形になったときは、Cursorがプロジェクト全体を読み込んでいるため、コードに基づいて不整合の内容に仕様書を変更してくれる
  • これにより、コードと仕様書の整合性を保った状態にできる

直面した課題

実は、最初のアイデアは、自分の顔写真を指定した画風(例えばアニメ風)などに変換し、SNSで使用できるアイコンにAIを使用して変換するというものでした。

しかし、既存画像を変換する画像生成AIのうち実現可能そうなのが、Stable DiffusionのImg2Imgモデルくらいしかありませんでした。

Stable DiffusionのImg2Imgモデルを試してみたところ、理想の画像を出力するのに、かなり考え込んだプロンプトを用意しなければならず、かなり難しいものでした。

さらに、アニメ風の画像を出力するために、LLMモデルが著作権がある画像データを学習している場合があり、個人利用ならいいが、企業かつ商用利用はかなり難しいと感じました。

総合的に判断して、このアイデアは捨て、今回のようなアプリとなりました。

また、今回はboltを使用せず、Cursor Composerをフル活用して開発を行いましたが、初回のUIデザインの提案はboltのほうが良かった気がしました。また、プロジェクト作成などのセットアップは、boltのほうが速いので、プロジェクトのセットアップとUIはboltに任せ、その後の実装はCursorで行うのがいいと感じました。

まとめ

AIアイコンジェネレーターの開発を通じて、画像生成AI、Cursor Composer、そして仕様書駆動開発の可能性と課題を探ることができました。

特に、DALL-E3の高品質な画像生成能力とCursor Composerの効率的なコード生成機能は、開発プロセスを大幅に加速させました。

仕様書駆動開発は、アイデアの整理から実装、そして最終的なドキュメンテーションまで一貫性を保つのに役立ちました。

また、AIを活用する際には著作権や法的問題にも注意を払う必要があることも学びました。

今後のAI開発では、これらの学びを活かしつつ、さらに効率的で創造的なアプリケーション開発に挑戦していきたいと思います。AIツールは急速に進化しており、定期的に新しい可能性を探求することが重要だと感じました。

株式会社Grandreamでは、フルリモートであなたのスキルを活かし、活躍できるエンジニアを募集しております。 詳しくは採用ページをご確認いただき、お気軽にお問い合わせください。

株式会社グランドリームでは、AWSを駆使した開発からUI/UXデザインまで、Webアプリケーションに関するすべての要望に応えます。
まずは一度お気軽にご相談ください。

お問い合わせはこちら