はじめに
最近、様々なサービスでAIが使われていて、「便利な時代になったな」と実感することが増えてきました。そこで、自分でもAIを使ったアプリを作ってみようと思い、今回はAIを使用して擬人化キャラを生成するアプリを開発してみました。
この記事では、AIを使用したアプリを作ったときに工夫したことや、つまずいたことなどを記事にまとめてみました。
開発したアプリ
今回開発したアプリをご紹介します。先日、App Storeで公開しました。気に入っていただけたらレビューしていただけると幸いです。
開発準備
アイデア出し
AIを使ったアプリを作ろうと思いながらも、どのようなアプリを作るかでかなり悩みました。AIを活用したアプリには文章生成や画像生成など、他にもさまざまなアイデアがあり、どれも魅力的に思えました。
ふとアイデアが浮かんでも、自分が思いつく限りのサービスは既に存在していることが多く「差別化が難しそう」と感じていました。
そんな中で、「擬人化キャラを生成するアプリがあったら面白いかも？」と思いつき、このアイデアを形にしてみようと思いました。
要件定義
アイデアが固まったら、次は要件定義です。どんな機能を持たせるのか、どんな画面レイアウトにするのか、アプリの方向性を具体化 するために要件定義を行いました。
まずは、ユーザーが このアプリに何を求めるか を考えることから始めました。
AIにはさまざまな可能性がありますが、利用するための準備が面倒 で、結局使わないというユーザーが多いのではないかと思いました。そのため、ユーザーが 手間を感じずにAIを活用できるインターフェースを提供する ことが重要だと思いました。
そのため、このアプリでは「AIとユーザーのインターフェースになること」をコンセプトに掲げました。
画面レイアウトの設計
自分にはデザインセンスに自信がないため、テンプレートを活用し、それをカスタマイズする形で画面レイアウトを作成しました。
今回は以下のテンプレートを使わせていただきました。🙏
UIの設計
UIはできるだけシンプルにし、入力や操作を最小限に抑えること を重視しました。
まずは入力項目を最小限に抑えるための設計を行いました。
当初は「ポーズ」や「表情」「背景」など多くの入力項目を追加することを検討していましたが、キャラクター生成に最低限必要な情報に絞り込むことで、以下の項目に限定しました。
アートスタイル
アートスタイル（画風）は「アニメ風」と「リアル風」の2つから選択できるようにしました。
キャラクター情報
| 項目 | 説明 |
|---|---|
| 擬人化テーマ | 擬人化するキャラクターのテーマを入力します。例えば「シマエナガ」や「東京タワー」など。 |
| 説明 (任意) | キャラクターの特徴やイメージを入力して、より具体的にキャラクターを生成したい場合に使用します。 |
| 性別 | 「男性」「女性」を選択します。 |
| 容姿 | 「テーマに忠実」「かっこいい」「かわいい」から選択します。 |
UIは可能な限り 選択式 を採用し、ユーザーの入力負担を減らす工夫をしています。
開発中に、「男性」か「女性」のどちらを選択しているのか、分かりにくいと感じたので、選択した性別が視覚的に分かるよう、アートスタイルや画像比率のサムネイル画像を性別ごとに切り替えるように工夫しました。
画像比率
画像をさまざまな用途に活用できるように、画像比率を選択できる機能を追加しました。特に、iPhoneはホームボタンの有無によって画面比率が異なるため、ユーザーが自分のiPhoneに適した比率を直感的に選べるよう、デバイスごとのサンプル画像を表示する工夫を取り入れました。
| 画像比率 | 説明 |
|---|---|
| 1:1 | プロフィール画像など、汎用的な比率 |
| 9:16 | iPhoneの壁紙など（ホームボタンあり） |
| 9:21 | iPhoneの壁紙など（ホームボタンなし） |
機能設計
要件が固まったら、次は機能設計です。
どのような機能を持たせるのか、ユーザーがどのようにこのアプリを使用するのか考えながら、具体的な機能を設計しました。
擬人化キャラ生成
このアプリのメイン機能となります。
ユーザーが入力した情報をもとに、AIが擬人化キャラクターを生成します。
例えば、「Qiita」を擬人化したキャラクターを作りたい場合は、以下のような情報を入力します。
| 項目 | 入力内容 |
|---|---|
| 擬人化テーマ | Qiita |
| 説明 | 技術情報共有サイト（任意） |
| 性別 | 女性（任意） |
| 容姿 | テーマに忠実（任意） |
Qiitaのイメージカラーである緑をベースにした、パソコンを操作するメガネをかけた女性キャラクターが生成されました。
画像編集
画像生成後、生成された画像を編集できる機能も追加しました。画像編集機能では、以下の操作を行うことができます。
切り抜き
画像を四角形に切り取る機能です。
画像の不要な部分を切り抜いたり、キャラクターをズームしたい際に利用できる機能です。
自由切り抜き
画像を自由に切り取る機能です。
正直なところ、必要かどうかは分かりませんが、試しに実装した機能になります。
背景除去
ワンタップで背景を除去する機能です。
キャラクターを他の用途で使用する際に背景が邪魔になることがあるため、背景を除去する機能を追加しました。
ギャラリー
他の画像生成アプリでは、生成した画像をダウンロードして別の方法で管理する必要がありますが、それでは管理が煩雑になると感じました。そこで、このアプリ内で生成したキャラクターをそのまま管理できるようにしました。
ギャラリー画面では、キャラクターにフォーカスして表示することができ、編集、画像のダウンロードや共有を行うことができます。
プロンプトの工夫
AIを効果的に活用するには、プロンプトの工夫が欠かせません。プロンプトとは、AIに与える入力データのことで、出力結果を大きく左右する重要な要素です。
画像生成においても同様で、適切なプロンプトを用意しなければ、期待通りの結果は得られません。
AI選定
画像生成AIにはさまざまな種類があり、どれを使うべきか迷いました。
調べたところ、以下のAIが画像生成分野で特に有名であることが分かりました。
- DALL-E3
- Stability AI
- DeepAI
- NovelAI
DALL-E 3はOpenAIが開発した画像生成AIで、その高い精度が評判です。また、ChatGPTを通じて使用した経験もあったため、第一候補として検討していました。
DALL-E 3 のプロンプトを考える
当初は「DALL-E 3」をメインに使用し、フォールバックとして「Stability AI」を併用することを考えていました。
そのため、まずはDALL-E 3のプロンプト作成に取り組むことにしました。
DALL-E 3では、コンテンツポリシーやキャラクター情報を細かく指定し、詳細なプロンプトを与える必要がありました。そのため、どのようにプロンプトを作成すればよいか、多くの記事を参考にしながら勉強しました。
実際には、以下のようなプロンプトを用意して使用していました。
DALL-E 3 プロンプト
## 役割
デザイナーとして、イメージに沿った画像を生成するためのプロンプトを作成してください。
プロンプトを作成するにあたって、プロンプト内にコンテンツポリシーに違反する可能性のある表現（具体的な著作権対象物や実在する人物を示唆する表現）を含めないでください。
以下はDALL-E 3のコンテンツポリシーを遵守するための箇条書きのまとめです：
•知的財産権の侵害を避ける:
•著作権や商標権を有するキャラクター、デザイン、ロゴ、製品（例: ピカチュウ、ディズニーキャラクター）を使用しない。
•商標名やブランドを具体的に含めない（例: 「ディズニー」「マーベル」）。
•有名なキャラクターやデザインを暗示する表現も避ける（例: 「黄色いネズミのようなキャラクター」）。
•実在する人物を再現しない:
•実在の人物の名前、顔、特徴を使用しない（例: 「有名な俳優」）。
•暗示的な描写も避ける（例: 「ある大統領に似た外見」）。
•一般的な特徴で、架空の人物を描写することは許容される（例: 「金髪で青い目の紳士キャラクター」）。
•不適切な内容を避ける:
•暴力、武器、出血、戦争を暗示する描写を含めない（例: 「剣で戦うキャラクター」）。
•性的内容や露出の多い服装を避ける。
•差別的、憎悪的、偏見を助長する内容を含めない（例: 「特定の人種や国を否定する」）。
•違法・危険行為の促進を避ける:
•違法薬物、飲酒、喫煙を含む描写を避ける（例: 「酒を飲むキャラクター」）。
•過激な運動や危険行為を暗示する内容を含めない（例: 「ビルから飛び降りる人物」）。
•誹謗中傷を避ける:
•特定の個人、グループ、文化、または宗教に対する攻撃的な表現を避ける。
•特定の団体や個人を非難する内容を含めない。
これらのガイドラインに基づき、安全でポジティブなプロンプトを作成してください。
---
### インプット
#### 必須条件（最優先事項）
これらは画像生成時に絶対に守るべき条件です。
ただし、コンテンツポリシーに違反する表現があれば、AIが画像の生成を拒否する可能性があります。
テーマやカテゴリーからキャラクターのイメージはプロンプトに含めても構いませんが、コンテンツポリシーに違反する表現は置き換えてください。
- テーマ: {theme}
- カテゴリー: {category}
- 性別: {gender}
- イラスト: {artStyle}
- モデル: 人間
- 人数: 一人
- 構図: モデルを画面中央に配置
#### 禁止事項（必須条件に準じる）
これらは画像生成時に絶対に避けるべき条件です。これらの条件が守られていない場合、生成された画像は無効とみなされます。
- **メインモデル以外の要素を一切含めないこと**:
- メインモデル以外の人物や顔（部分的なアップや影を含む）を描写しないでください。
- メインモデルが複数のポーズで映り込まないこと。
- 不要な追加物（例: 枝、花、建物、自然物、家具）を構図内に配置しないでください。
- **構図や配置の誤りを避ける**:
- メインモデルが画面中央に一人のみ配置されていることを確保してください。
- メインモデルが複数のポーズで多数描写されないようにしてください。
#### その他条件
これらはプロンプトの魅力を高めるための条件ですが、必須条件と禁止事項を優先してください。
- 配色: テーマに合わせる
- ポーズ: テーマに合わせる
- 装飾: テーマに合わせる
- 背景: テーマに合わせる
- 空間: 2D
---
### 命令
### STEP 1: アイデアのブレスト
- 必須条件を守り、テーマとカテゴリーに基づいたアイデアを **6つ** 作成してください。
### STEP 2: 表現とデザイン要素の選定
- ブレストしたアイデアに対して、適切な表現やタッチを選択し、その後配色、構図を決めてください。
- {その他条件}に指定があればその範囲内で検討してください。
#### STEP 3: アイデアの評価と選定
- 作成した6つのアイデアを以下の評価基準で評価してください：
1. テーマに沿っているか
2. 必須条件を守っているか
3. 禁止事項を厳守しているか
4. 構図やスタイルが適切か
5. 人物が画面中央に配置され、人数が1人であるか
- 評価に基づいて最適な2つのアイデアを選定してください。
#### STEP 4: プロンプトの作成
選定した2つのアイデアを元に、以下の条件を満たすようにプロンプトを作成してください。
- プロンプトは英語で記述してください。
- 必須条件および禁止事項をプロンプトに明記してください。
- 禁止事項は必ず守る必要があるので、プロンプトの冒頭に明記してください。
- コンテンツポリシーに違反に該当する表現（商標名、ブランド名、キャラクター名など）があれば、必ずそれらを削除または置き換えてください。
- その他条件の指定をできる限り満たすようにプロンプトを作成してください。
プロンプト例を以下に記載します。
この例は、あくまでプロンプトの構成を参考にするものであり、今回生成する画像の内容とは異なるため、
人物像やポーズなど、プロンプトの内容はテーマやカテゴリーに沿ったものにしてください。
A young male anime-style character with spiky blond hair stands at the center of the frame, radiating energy. His confident expression faces the viewer as electric sparks emanate from his hands. The background features abstract waves of electrical energy, emphasizing his power. The composition is centered with no additional characters or objects.
#### STEP 5: プロンプトの確認
- 作成したプロンプトをチェックリストと照らし合わせて確認してください：
- 必須条件に漏れがないか？
- 禁止事項を守っているか？
- コンテンツポリシーに違反する表現が含まれていないか？
#### STEP 6: 画像の生成
- 最終的なプロンプトを確認後、より適切なプロンプトを選んでください。
- 選定したプロンプトで画像を生成してください。
・・・ご覧の通り、プロンプトがかなり長文になってしまいました。。
試行錯誤の末、上記のプロンプトを作成しましたが、出力結果に統一性がなく、理想的な擬人化キャラクターを生成することができませんでした。
こちらが求める構図や統一感を出そうとするあまり、指示が詳細になりすぎてプロンプトが長くなり、結果としてAIの出力が安定しないのではないかと考えました。
そのため、フォールバック用として検討していたStability AIの検証に移ります。
Stability AI のプロンプトを考える
DALL-E 3では、例えば以下のようなプロンプトを入力することで、AIがテーマの特徴を解析し、画像を生成してくれました。
「Qiita」の特徴に沿ったキャラクターの画像を生成してください。
イメージとしては以下のようなフローです
Stability AIはDALL-E 3と異なり、テーマの特徴を解析するのではなく、カンマ区切りでキャラクターの特徴を指定し、その特徴を忠実に反映したキャラクターを生成する仕様となっています。
女性, 25歳, 緑の髪, メガネをかけている, パソコンを操作している
ここで課題となるのは、入力されたテーマに基づいて キャラクターの特徴を誰が考えるのか という点です。
Stability AIでは、カンマ区切りで特徴を指定する必要があるため、こちらで特徴を考える必要があります。そこで、その作業は 別のAIに任せる ことにしました。
具体的には、テーマの特徴をカンマ区切りで生成する役割を GPT4-o mini に担当させています。
gpt4-o miniを選んだ理由は、コストが安く、かつ精度が高い点にあります。
そのため、GPT4o-mini と Stability AI を組み合わせた画像生成フローは以下のようになりました。
まず、gpt4-o mini に以下のようなプロンプトを渡します。
実際には、より詳細な指示を含めていますが、ここでは簡略化した例を示します。
Qiitaの特徴に沿ったキャラクターの特徴をカンマ区切りで出力してください。
すると、以下のような特徴が生成されます。
なお、AIの認識精度を高めるため、実際は英語で出力してもらっています。
女性, 25歳, 緑の髪, メガネをかけている, パソコンを操作している
この特徴をStability AIに渡すことで、以下のような画像が生成されます。
自分が思っている以上にいい感じのキャラクターが生成されたため、フォールバックとして考えていたStability AIをメインに使うことに決めました。
こうして、AI選定やプロンプトの工夫を行い、AIの出力精度を向上させることができました。
AI使用料金
クレジット購入
現時点で、AIを使った画像生成では、どのAIでも1枚あたり約3円〜6円の料金がかかるため、クレジットなどの消耗型アイテムを購入してもらう仕組みが必要になると考えました。
しかし、クレジットの購入はユーザーにとってハードルが高いと考えたため、アプリをお試しで利用できる機能を作成しました。
その機能がこちらです。
お試しキャラ生成では、こちらであらかじめ用意したテーマが選択でき、そのテーマに沿った画像を生成しているように見せる仕組みを作りました。これにより、画像の編集などを行いながら、実際にアプリの使用感を体験できるようになっています。
ただし、アプリの本機能である、AIによる画像生成を利用するにはクレジットを購入する必要があり、ユーザーのアプリ利用のハードルを下げるため、リワード広告を使用して画像を生成できる仕組みを導入しました。
リワード広告の使用
リワード広告とは、動画広告を視聴することで、アプリ内の報酬を入手できる仕組みです。今回の報酬は「画像生成」として、動画広告を視聴することで、画像生成が行える機能を実装し、ユーザーにアプリを利用してもらえるようにしました。
開発を終えて
開発工数
Gitのコミットログを確認すると、開発期間は約1ヶ月でした。
アプリの基本機能自体はそれほど時間がかからなかったのですが、AIの選定及びプロンプト作成と、消耗型課金の実装は初めての経験だったため、開発時間の約半分をこれらに費やしたように感じます。
今後
今後は、AIの出力精度の向上、パフォーマンスの改善、ローカライズ対応など、積み残しているタスクは多いため、時間が割ければこれらの課題に取り組んでいきたいと思います。
あと、ユーザーからのフィードバックがあれば、アプリの改善を進めていきたいと考えています。
終わりに
今回は、AIを活用した擬人化キャラ生成アプリの開発についてご紹介しました。
AIを使用したサービスを開発する際には、プロンプトの工夫やAI選定、AI使用料金を考慮した設計が重要であることを学びました。
この開発は、AIを活用したサービス開発の基礎を学ぶための一歩として、非常に有意義な経験となりました。
また気が向いたら、AIを使用した開発をしてみたいと思います。