Geminiを用いたAI駆動開発(4)
※この本文はGeminiに書かせています。記載内容はおおむね事実と思われますが、誤りが含まれている可能性が大きいです。
前回までのあらすじ
本プロジェクトでは、Nuxt 3とNuxt UIを活用し、特定の用途に特化したWebアプリケーションの開発を進めています。前回までは、プロジェクトのベースとなるUIコンポーネントの選定や、基本的なヘッダー構造の構築を行い、開発の土台を整えました。
1. 今回の進捗：ビジュアル面の整備
アプリケーションの「顔」となるメインキャラクターの作成と、それに合わせたロゴバナー、faviconの整備を行いました。
2. メインキャラクター「ひつじの執事」
本システムのコンセプトを象徴するキャラクターをGeminiで生成しました。
- 設定: 知的で誠実な印象。
- 特徴: 執事服を着用し、本を手にしたひつじ。
- デザイン: Nuxt UI의 テーマカラー（EmeraldやSlate）に馴染むトーンで統一。
3. favicon作成：AI素材と外部ツールの連携
Geminiで生成したキャラクター画像をベースに、外部のfavicon生成サイトを利用して、各種デバイスに対応したアセットを作成しました。
- 成果物:
favicon.ico、apple-touch-icon.png、site.webmanifestなど一式。 - 実装: Nuxtの
publicディレクトリに配置し、nuxt.config.tsで一括管理するように設定しました。
4. AI駆動開発で直面した課題
実際にAIとデザインを進める中で、いくつかの実用的な教訓を得ました。
画像生成のコントロール（回転方向など）
キャラクターに「斜めを向いて」といった具体的なポーズを指示しても、意図した通りの角度を正確に出力させるのは非常に難易度が高いと感じました。何度も試行を繰り返す忍耐が必要です。
テキスト挿入は「手動」が最適解
AIに画像内へテキストを入れさせようとすると、綴りのミスやデザインの崩れが発生しやすいため、現時点では「AIに文字を入れさせるのは諦める」のが得策です。
- 解決策: AIには「キャラクター」と「十分な余白」だけを作らせ、テキストはMacのプレビュー機能などで手動で挿入するのが、最も早く確実です。
画像保存のエピソード
Geminiで生成された画像を直接ダウンロードできない場面があり、今回は「クリップボードにコピーした画像を、Macの『プレビュー』アプリの『クリップボードから新規作成』機能で保存する」という回避策をとりました。
5. まとめ
ヘッダーに「メインバナー」が設置され、faviconも設定されたことで、アプリケーションとしての体裁が大きく前進しました。 AIは素材作りには強力ですが、レイアウトの細部や実用的なファイル形式への変換は、人間や専用ツールの手助けが必要であることを再確認したステップとなりました。
