20251107_JDDstudy_大波千那_AIでゲームをつくった話

AIでゲームをつくった話 CONFIDENTIAL XDD S e n n a O n a mi 2025.11.07 © 2024 Japan Digital Design, Inc. 1

複数の企業で金融系を中心にいくつかのサービス のデザインを担当後、2024年にJDD入社。現在 は関西からリモートで銀行の提供サービスの UI/UXデザインに携わっています。 実装面は古文のようなhtml/cssが少し書ける程度で、今回作ったゲー ムがどういう仕組みで動いているのかさっぱりわかっていません。 大波 千那 Experience Designer Experience Design Div. CONFIDENTIAL © 2024 Japan Digital Design, Inc. 2

アジェンダ 1. ゲームをつくった話を会社でしている経緯 2. 制作手順と使ったAIサービス 3. 他にもつくってみました 4. ゲームやサービスをつくってみて CONFIDENTIAL © 2024 Japan Digital Design, Inc. 3

1 ゲームをつくった話を会社でしている経緯 CONFIDENTIAL © 2024 Japan Digital Design, Inc. 4

ゲームをつくった話を会社でしている経緯 ＼会社のPJではなく自主的な活動として共有していました ／ AIに関するナレッジや取り組みを シェアする場「3Div AI JAM」 組織全体のAIリテラシーの向上を目指すこ とを目的に、サイロ化しがちなAIに関する 情報や取り組みをシェアする活動 主な活動内容 • Slackチャンネルでの情報共有 • Teams会議での情報共有 • LT会 CONFIDENTIAL © 2024 Japan Digital Design, Inc. 5

2 制作手順と使ったAIサービス CONFIDENTIAL © 2024 Japan Digital Design, Inc. 6

制作手順と使ったAIサービス おつりチャレンジTOP 940円の代金に対して1,040円支払い 100円のおつり（正解！） おつりチャレンジって どんなゲーム？ 出された金額に対しておつりが 最小になるように支払うゲーム 例）代金 ：940円 支払 ：1,040円 おつり：100円玉 x 1 全10問、タイムアタック形式で 時間を競います！ CONFIDENTIAL © 2024 Japan Digital Design, Inc. 7

制作手順と使ったAIサービス 制作手順と使ったサービス 要件定義 chatGPT 実装&UIデザイン Bolt ビジュアルアセット Lovart CONFIDENTIAL © 2024 Japan Digital Design, Inc. 8

制作手順と使ったAIサービス Boltとは、AIを使ったWeb アプリ開発サービス • 自然言語でAIと対話しながら Webアプリがつくれる • 生成されたコードはブラウザ 上で実行でき、編集・保存も 可能 • 無料でも使える（プランに よって1日・1ヶ月に使える Maxのトークンが異なる） CONFIDENTIAL © 2024 Japan Digital Design, Inc. 9

制作手順と使ったAIサービス おつり計算ゲームの要件定義手伝って 1. chatGPTで要件定義 chatGPTに作りたいものの概要 を投げる → 要件や画面の構成案を返して くれるので、変更して欲しい内 容を投げる 実装はbolt.newでやるよ • 目的：楽しむ、ストレス解消 • ターゲット：暇つぶし感覚で脳トレをしたい大人 • ゲームロジック：お題の金額に対しておつりの硬化の枚数を最小にする金額を出す （例：お題が800円、回答が1300円、500円硬化が1枚かえってくる） • スコア・進捗表示： • タイムアタック：全20題だされるので速さを競う。回答を間違えると+3秒ペネルティが課される • 練習モード：無制限モードで連続正解数が表示される （納得がいくまで繰り返す） → Boltへのプロンプト案にまと めてもらう しっかり要件つめずにBolt上で対話しながらつくっても大丈夫！ ただしトークンの減りは早い… CONFIDENTIAL © 2024 Japan Digital Design, Inc. 10

制作手順と使ったAIサービス 初期に生成されたもの TOP 2. Boltで実装&UIデザイン プロンプトをBoltに投げる → 初期に生成されたものをBolt 上で遊んでみるも、代金の支払 い方がお財布からの自由選択で タイムアタック はなく4択になっているので修正 するようにBolt上で会話 → その後もおつりのロジック （おつりの枚数が最小だと正） が上手く行かず何度も修正 CONFIDENTIAL © 2024 Japan Digital Design, Inc. 11

制作手順と使ったAIサービス 最終的なロゴ 3. Lovartでロゴを生成 ゲームのロゴであること、メイ ンコピーとサブコピーを指定、 ポップなデザインにしてほしい 不採用となった「おつりくん」 ことを伝える → 4案中1つが気に入ったので色 違いでいくつか生成してもらう → ピンク&ブルー案が気に入っ たのでピンク&ブルー案でディ テールを何度か調整 「おつりチャレンジ」という名前はBoltが勝手につけた 「おつり計算チャレンジ」から取ったよ CONFIDENTIAL © 2024 Japan Digital Design, Inc. 12

制作手順と使ったAIサービス 4. Lovartでお金を生成 金額をわかりやすくして欲しい こと、作って欲しい紙幣と硬貨 の種類を伝える → 算数セットのような画像が生 成されるも実物とちょっと違っ て気持ち悪い → どうせ異なるならおもいっき り異なるテイストで生成 → 「円」の文字が生成されず何 コード含めすべてAIでつくるという目標を掲げていたので、 度か調整 あえてAIっぽいデザインを楽しむことに！ CONFIDENTIAL © 2024 Japan Digital Design, Inc. 13

制作手順と使ったAIサービス 5. Boltに画像を 取り込んでもらう Lovartで生成した画像をBoltの チャット欄からアップしてロゴ と紙幣・硬貨を差し替え → UIもロゴに合わせてポップに → 細かいところは具体的な色や 大きさ、角丸具合、文言等を伝 えて調整 おつりが上から落ちてくるアニメーションはBoltが勝手に生成 かわいいのでそのまま採用！ CONFIDENTIAL © 2024 Japan Digital Design, Inc. 14

制作手順と使ったAIサービス 今後の展開（！？） ランキング機能 レコードをDBに保存 → 世界中の人と競争可能に 紙幣・通貨の種類を追加 USDでよく使われる¢25を入れられていないので対応 JPY・USD以外への対応 たくさんの国の通貨をサポート リアルな通貨ver.を作成して金融教育に活用 小学生が楽しんで紙幣や硬貨を学べる機会に！ CONFIDENTIAL © 2024 Japan Digital Design, Inc. 15

3 他にもつくってみました CONFIDENTIAL © 2024 Japan Digital Design, Inc. 16

他にもつくってみました here! TOP ルーム作成 ルーム（位置情報共有画面） 位置情報共有サービス 「here!」もつくりました • 登録不要で現在地を共有 • 現在地はリアルタイムで更新 (画面を開いておく必要あり) • 現在地はランダムなかわいい 動物の絵文字で表示 • サービス内でチャットも可能 CONFIDENTIAL © 2024 Japan Digital Design, Inc. 17

他にもつくってみました 相手の位置を確認 チャット 待ち合わせ完了 実際に使用している様子 弊社CXO（表示名： サンタ） が友人との待ち合わせで使ってみ た際の画面収録 CONFIDENTIAL © 2024 Japan Digital Design, Inc. 18

4 ゲームやサービスをつくってみて CONFIDENTIAL © 2024 Japan Digital Design, Inc. 19

AIでゲームやサービスをつくってみて 所感 • 動いているからヨシッ！と技術的負債を割り切れるケース（作りきりのゲーム、 PoC 等）と相性が◎ • 「やりきる」のハードルが下がり、「やりきる力」より「やりたいことがある」 「早くやる」の価値が大きく！？ • 聞かないと教えてくれないが、聞かないとそもそも分からないこともあるため、 ある程度の知識や経験は必要 • 理想通りに生成されないことも多々あるため、理想をがっちりもたず、偶然生成 されたものを楽しめるマインドがAIと共創する上では大事 CONFIDENTIAL © 2024 Japan Digital Design, Inc. 20

＼ スマホからのアクセスがおすすめ ／ ＼ 位置情報の取り扱いにご注意ください ／ https://singular-empanada-4a1695.netlify.app/ https://vocal-gecko-9b471d.netlify.app/ CONFIDENTIAL © 2024 Japan Digital Design, Inc. 21

• https://singular-empanada-4a1695.netlify.app/
• https://vocal-gecko-9b471d.netlify.app/

Thank you. CONFIDENTIAL © 2024 Japan Digital Design, Inc. 22