9体のAIキャラに人生相談できるアプリを作りたい
「仕事のやる気が出ません」
こんな悩みを、性格バラバラな9体のAIキャラに相談できたら面白いんじゃないか。ふとそう思って、ai&のAPIを使ったミニアプリを作ることにしました。
名付けて 「悩み相談ルーレット」。ボタンを押すとガチャが回って、ランダムで1体のキャラ（LLMモデル）が選ばれ、その子が相談に乗ってくれる。そんなおみくじアプリです。
今回はこのアプリを2回に分けて作ります。この記事（第3回）では、AIの回答部分はまだダミー（固定文言）のまま、見た目とガチャ演出だけを完成させます。本物のai&のAPIに繋ぐのは次回（第4回）です。
ai&では複数のモデルをAPIひとつで叩くことができる
このアプリを思いついた理由は、ai&の特性にあります。
ai&は1つのAPIキーで複数のモデルを切り替えて使えるプラットフォームです。DeepSeek、Qwen、GLM、Kimi、gpt-oss……普通ならモデルごとに別のサービスと契約してAPIキーを管理しなければいけないところを、ai&ならコードの中でモデル名を指定するだけで呼び出すモデルを変えられます。
#キャラAは DeepSeek pro
completion = client.chat.completions.create(model="deepseek-ai/deepseek-v4-pro", ...)
#キャラBは Qwen（無料）
completion = client.chat.completions.create(model="qwen/qwen3.6-27b", ...)
modelの文字列を変えるだけで、中身がまったく別の会社の、別の性格を持ったAIに切り替わる。これって、「1人9役のキャラクターを演じ分けられるAI」を作れる、ということでもあります。
だったら、9体のモデルに、それぞれ別のキャラクターを演じてもらうアプリを作ったら面白いんじゃないか。これが「悩み相談ルーレット」を作ろうと思ったモチベーションです。
なぜ「ダミーのまま」作るのか
AIツールでアプリを作ろうとするとき、多くの人は「見た目もAI機能も全部いっぺんに」お願いしがちです。でもこれ、実は失敗しやすいやり方です。
理由は、うまく動かなかったときに「見た目の問題」なのか「AI接続の問題」なのか切り分けにくいから。APIキーの設定ミスなのか、デザインの指示が悪かったのか、両方同時だと原因がわかりません。
そこで今回は、要件定義を2つのフェーズに分けました。
フェーズ1（今回）：見た目・ガチャ演出・ダミー回答だけを完成させる
↓
フェーズ2（次回）：ダミー部分を、本物のai&のAPIに差し替える
フェーズ1では外部のAPIに一切繋ぎません。ネットワークもAPIキーも不要。だからこそ、AI（コーディングAI）に投げてすぐ「動くもの」ができます。まず成功体験を積んでから、本番のAPIに進む、という順番です。
要件定義書を作る
まずはチャット（Claude）で要件定義書を作りました。今回のポイントは、「フェーズについて」という項目を先頭に置いたことです。
## 0. フェーズについて
このアプリは2フェーズに分けて作る。
- フェーズ1（このドキュメント）：見た目・演出・ガチャロジックを完成させる。
AIの回答部分はダミー（固定文言を返すだけ）にする。
- フェーズ2（次のドキュメント）：ダミー部分を、実際にai&のAPIを叩く
本物の処理に差し替える。
これをコーディングAI（今回はGitHub Copilot Studentを使用）に伝えておくことで、「今回はAPIを繋がなくていい」という前提が明確になり、余計な実装をされずに済みます。
キャラクター設定はこんな感じで9体分、モデル名とセットで定義しました。(絵文字を入れちゃうところがなんともClaudeらしい。)
| キャラ名 | 絵文字 | 中身のモデル（次回使用） | キャッチコピー |
|---|---|---|---|
| ろんりは博士 | 🐉 | DeepSeek flash | 論理派 |
| あっさり先生 | 🦉 | Qwen（無料） | あっさり系 |
| ていねい姫 | 🌸 | GLM 5.2 | 丁寧系 |
| ハイスペ院長 | 🧠 | DeepSeek pro | じっくり考える系 |
| さくさく忍者 | 🥷 | gpt-oss-120b | 手短系 |
| ほんわか和尚 | 🍵 | GLM 5.1 | 和風・落ち着き系 |
| ロジカル軍師 | ⚔️ | Kimi k2.6 | 戦略家系 |
| コード忍者 | 💻 | Kimi k2.7-code | エンジニア寄り |
| フレンドリー博士 | 🤖 | Gemma | フランク系 |
ここで重要な設計判断があります。まだAPIを繋いでいないこの段階で、各キャラに「中身のモデル名」を持たせておいたことです。今回は使いませんが、次回この情報がそのまま活きてきます。
const characters = [
{ name: "ろんりは博士", emoji: "🐉", model: "deepseek-ai/deepseek-v4-flash", tagline: "論理派" },
// ...以下9体分
];
「今は使わない情報でも、後で使うと分かっているなら先に仕込んでおく」。これが、フェーズを分けても手戻りを減らすコツです。
GitHub Copilot Studentに投げて完成
要件定義書ができたら、あとはコーディングAIに投げるだけです。今回はGitHub Copilot Studentを使いました。
執筆時点（2026年7月）で、Copilot Studentを含む一部プランは新規サインアップが一時停止中とのことです。これから始めたい方は、無料のCopilot Free（月2,000回のコード補完・50回のチャット）でも、今回くらいの規模のアプリなら十分実装できるはずです。
指示した内容はざっくりこんな感じです。
- 悩みを入力する欄と「相談する」ボタン
- ボタンを押すとガチャ演出（キャラがくるくる切り替わるアニメーション）
- 演出後、選ばれたキャラの絵文字・名前・キャッチコピーを表示
- その下に固定文言の回答を表示（フェーズ1はここがダミー）
- 「もう一度」ボタンで再挑戦できる
できあがったのがこちらです。
「仕事のやる気が出ません」と入力してガチャを回すと、「フレンドリー博士」が登場。ダミーの固定文言ですが、キャラごとに一言だけ口調を変えてあるので、雰囲気は掴めます。
画面上部には「Phase 1 / Dummy AI」というバッジも付けました。今どの段階のアプリを見ているか、ひと目で分かるようにしています（これは地味に便利で、後述しますがフェーズ2に進んだときにこのバッジを更新し忘れる、というミスもやらかしました）。
ガチャ演出（ボタンを押した瞬間にキャラがくるくる切り替わる部分）も、CSSアニメーションだけでちゃんと動きました。
まとめと次回予告
今回は、要件定義を2フェーズに分けることで、外部APIに一切繋がずに「動くもの」を先に完成させるという進め方をやってみました。
- 見た目・機能・AI接続を一気に作ろうとすると、うまくいかない原因の切り分けが難しい
- 先に「ダミーで動くもの」を作ると、成功体験を積みながら進められる
- 後で使う情報（モデル名など）は、使わない段階でも先に仕込んでおくと手戻りが減る
次回はいよいよ、このダミー回答を本物のai&のAPIに差し替えます。9体のキャラに、実際に相談できるようになります。同じ悩みでも、キャラによって回答がどう変わるのか——お楽しみに。
続きは投稿し次第ここにリンクを追加します。