React×TypeScriptでAI占いを作ってみた！開発記録

はじめに

「タロット占いをAIで作れたら面白いんじゃないか？」
そんな軽い発想から、ふわりんゲーム第2弾にタロット占い機能を追加してみました。
👉 実際に体験してみたい方はこちらからどうぞ！
http://huwarin.com/game/tarot/

今回はその開発記録として、ReactとTypeScriptを使ったフロントエンド構築、そしてChatGPTなどのAI技術を組み込んだ体験づくりの過程を紹介します。

占いというと、どうしても“スピリチュアル”なイメージを持たれがちですが、今回はあくまで**「技術的にどこまで遊べるか」**という実験的なチャレンジです。
カードの意味づけ、レイアウト調整、デザインの生成、そして引いたカードの結果をAIが要約までしてくれる──そんな仕組みを、React＋TypeScriptをベースに構築しました。

個人開発でも、AIを活用すればここまで面白い機能が作れるんだ！という実感があったので、同じようにフロントエンド開発に取り組む方のヒントになれば嬉しいです。

ふわりんゲームのトップページはこちら👉 http://huwarin.com

AIタロット占いとは？

ふわりんゲーム第2弾に実装した「AIタロット占い」は、シンプルな操作で本格的（風？）な占い体験ができるコンテンツです。

プレイヤーは「占いたいテーマ（恋愛・仕事・人間関係など）」を選び、カードをシャッフルし、AIによって導き出された3枚のカードを引きます。それぞれのカードにはAIが自動で意味づけしたメッセージが込められており、カードの配置や並び順も含めてAIが判断・調整しています。

さらに、占いの最後には「今回の占いの要点」として、AIが全体のメッセージを要約してくれる機能も実装。たとえば、「あなたの今の状況は○○、これから△△な展開がありそう」といったアドバイスが、まるで人間の占い師が語るかのように自然な形で表示されます。

👇 実際にプレイしてみる

http://huwarin.com/game/tarot/

「占い」という少し抽象的で主観の入る分野こそ、AIの言語処理能力と相性が良いのでは？という仮説のもと、今回の機能を構築しました。
実際、カードの内容や表現が毎回異なるため、「占いっぽい！」という感想を多くいただいています。

技術構成と開発プロセス

今回のAIタロット占いは、React + TypeScriptをメインに、ChatGPT APIを活用することで構築しています。
ここでは、技術スタックや設計の考え方、AIとの連携の具体的なアプローチを紹介します。

技術スタック一覧

• フロントエンド：React（Hooksベース）＋TypeScript
• スタイリング：CSS Modules（一部カスタムアニメーションあり）
• AI連携：OpenAI API（ChatGPT）
• カードデザイン：AI画像生成（Stable Diffusionなども検討）

バックエンドは今回設けず、クライアントから直接AI APIにリクエストを送り、レスポンスを処理するシンプルな構成です。

カード生成と意味付けロジック

ユーザーがカードを引いた際、選ばれたカードとその配置をもとに、ChatGPT APIにプロンプトを投げて意味付けを行っています。

const prompt = `
あなたはタロット占い師です。
次の3枚のカードに対して、それぞれの意味を簡潔に説明し、全体としてどんなことが読み取れるかまとめてください。
カード1: ○○
カード2: △△
カード3: □□
`;

プロンプト設計のポイントは、「あくまで自然な口調・主観のある解釈をさせること」。あえて抽象的なニュアンスを含め、占いらしい雰囲気を出す工夫をしました。

レイアウトとデザインもAIにおまかせ

カードの配置パターン（例：過去・現在・未来）も、ランダムではなくAIに対して「どの順番・意味合いで並べると良いか」を尋ねる形にしました。
その結果、占いとしてのストーリー性がぐっと増し、より納得感のある演出に。

また、カードのビジュアルはAI画像生成ツールを活用。プロンプトに「ファンタジー風・占い用カード・淡い色合い」などを指定し、テーマに合うビジュアルを多数作成しました。

結果要約の仕組み

最後に、3枚のカードを踏まえた全体のメッセージを要約して表示する部分は、ChatGPTの「要点抽出能力」を活用しています。
感情のこもった占いらしい口調で、「今のあなたに必要なアドバイス」を自然に出せるよう、温度感や語尾もチューニングしました。

開発を通して感じたのは、「AIと一緒に作ると、単なるプログラムでは表現しきれなかったニュアンスが出せる」ということ。
とくにタロットのような“曖昧で解釈の余地があるコンテンツ”には、AIの柔軟さがぴったりはまりました。

つくってみて感じたこと

今回の開発を通して、一番の発見は「AIとのコラボは、開発そのものをクリエイティブにする」ということでした。

これまでもReact＋TypeScriptでいろいろなUIを組んできましたが、「AIをどう活かすか」を考えるだけで設計の発想がガラッと変わる感覚がありました。
たとえば、カードの意味づけひとつ取っても、「自分で固定メッセージを書く」のではなく「その都度AIが文脈を読み取って生成する」というプロセスに変えるだけで、まったく違う体験が生まれます。

また、フロントエンド開発の文脈でAIを取り入れることで、「ロジック」だけでなく「表現」の部分まで遊べるようになるのが大きな魅力だと感じました。
AIがまとめた結果メッセージが思いのほか“占いっぽく”なる瞬間には、自分でも驚かされました。

副業や個人開発では、どうしても工数や工夫の幅に限界を感じがちですが、AIを味方にすれば、自分ひとりでもかなり豊かな体験が作れるという実感を持てたのも大きな収穫です。

おわりに

AIを活用したタロット占いは、技術的にも発想的にもとても楽しいチャレンジでした。
React＋TypeScriptという馴染みのある技術の中に、AIを自然に組み込むことで、**「プログラムで表現する幅」**がぐっと広がるのを体感できました。

これを読んで、「自分でもやってみたい！」と思ってもらえたなら嬉しいです。
ReactやTypeScriptに慣れてきたけど、もっと自由に面白いことをしてみたいという方には、AIとの連携は本当におすすめです。

今後は、さらにカードの種類を増やしたり、複雑なスプレッド（展開方法）に対応したりするなど、占いとしての深みも出していけたらと考えています。
もちろん、ちょっと笑える要素や意外性のある機能も追加していく予定です。

ぜひ遊んでみてください！👇
🔮 AIタロット占いはこちら：http://huwarin.com/game/tarot/
🎮 ふわりんゲーム公式ページ：http://huwarin.com