Codexでトレカ開封アプリの作り方
こんにちは、ハヤシモンです。
オプチャ参加者限定で、Codexデスクトップを使って制作中の「トレカパック開封アプリ」の作り方をこっそり公開します。
こちらが、そのアプリについて投稿したXのポストです。
以下本文は、開発中のCodexプロジェクトに対して「このアプリの作り方を1から説明してほしい」と直接指示を出し、その回答内容をそのまま貼り付けたものです。
なぜこの形にしたかというと、私自身の記憶をもとに説明するよりも、実際に開発しているプロジェクトに機械的に回答してもらった方が、より正直で再現性のある内容になると考えたためです。（補足だけ加筆しています）
恐らく、アプリ開発の中級者以上の内容になるかと思います。
専門的な言葉も出てくるかと思いますが参考になったら嬉しいです。
0からプロンプトで作る場合の工程
同じような「3Dカードパック開封アプリ」をAIに作らせるなら、最初から完成形を一気に頼むのではなく、フェーズごとに分けて作るのが重要です。
フェーズ1：コンセプトを決める
最初に、アプリの核を決めます。
ここでは「カードゲーム」ではなく、「パックを開ける快感」を主役にする、と定義します。
プロンプト例:
カードバトルではなく、カードパックを開封する体験そのものを主役にしたWebアプリを作りたいです。 高級TCGアプリのような世界観で、ユーザーがパックを開けたくなる演出を重視します。 まずコンセプト、主要画面、体験フローを整理してください。
この段階ではコードを書かせるより、何を作るかを明確にします。
フェーズ2：最小構成のWebアプリを作る
次に、React / Viteなどで最低限のWebアプリを作ります。
最初から3Dや豪華演出を入れず、画面遷移だけを作ります。
作る画面はこのくらいで十分です。
ホーム
パック開封画面
結果画面
図鑑画面
プロンプト例:
React + Viteでカードパック開封アプリの最小構成を作ってください。 画面はホーム、パック開封、結果、図鑑の4つです。 まずは2D UIで構いません。 カードは仮データで5枚出るようにしてください。
ここで大事なのは、アプリ全体の流れを先に完成させることです。
フェーズ3：カードデータと抽選を作る
次に、カードの定義とレアリティ抽選を作ります。
カードには以下の情報を持たせます。
名前
画像
レアリティ
属性
説明文
ステータス
色パレット
プロンプト例:
カードデータ構造を作ってください。 1パック5枚構成で、common, spark, rare, ultra, crown のレアリティを持たせます。 5枚目ほど高レアが出やすい重み付き抽選にしてください。
この段階で、開封結果が毎回変わるようになります。
フェーズ4：パック開封の基本操作を作る
次に、開封操作を作ります。
最初は3Dではなくてもよく、上方向にドラッグしたらパックが開く、という基本だけ作ります。
プロンプト例:
パック開封画面で、ユーザーが上にドラッグすると開封が進むようにしてください。 一定以上ドラッグしたら開封成功となり、カードを1枚ずつ表示する状態に移行してください。 クリックではなく、ドラッグ操作で開ける体験を重視してください。
この段階で「自分で開けている感覚」が生まれます。
フェーズ5：Three.jsで3D化する
基本の流れができたら、Three.jsで3D化します。
ここで初めて、3D空間、カメラ、ライト、パック、カードを作ります。
プロンプト例:
現在のパック開封画面をThree.jsで3D化してください。 Reactコンポーネント内にThree.jsのCanvasを作り、3D空間にパックとカードを配置してください。 ドラッグ操作でパックが開き、カードが上に引き抜かれるようにしてください。
最初は簡単なBoxGeometryで構いません。
いきなりGLBモデルを使うより、動きの仕組みを先に完成させます。
フェーズ6：GLBモデルを導入する
3Dの動きができたら、パックのGLBモデルを読み込みます。
プロンプト例:
パック表示をBoxGeometryではなく、/models/card.glb のGLBモデルに置き換えてください。 モデル内に開封用メッシュがある場合、そのメッシュを上方向のドラッグに合わせてY軸移動してください。 GLBが読み込めない場合は、既存の簡易パック表示にフォールバックしてください。
ここで、実際のパックらしい見た目になります。
※GLBモデルというのはトレカパックの3Dモデルになります。
こちらはAIではなく、自作で作成しました。
フェーズ7：カードを3Dカードにする
次に、カードも単なる画像ではなく、3Dカードにします。
プロンプト例:
カードを3Dオブジェクトとして作ってください。 角丸のカード形状、表面、裏面、厚み、エッジを持たせてください。 カード表面にはCanvasで生成したカードテクスチャを貼ってください。
この段階で、カードが「板」ではなく「カード」らしく見えます。
フェーズ8：カード画像とUIを作り込む
カード表面をCanvasで生成します。
プロンプト例:
カード表面テクスチャをCanvasで生成してください。 カード名、レアリティ、属性、イラスト、ATK、GUARD、AURAを描画してください。 高級TCG風の枠、グロー、レアリティ色も入れてください。
ここで、カード1枚1枚に商品感が出ます。
※カードのアートデザイン自体はGPTimage2.0で別途作成しています。
フェーズ9：ホログラムを追加する
次に、レアカードらしい光り方を作ります。
プロンプト例:
カード表面の画像を見やすく保ったまま、半透明のホログラムShaderを重ねてください。 細かいプリズムタイル、虹色の反射、角度によるフレネル光を表現してください。 レアリティが高いほどホログラムを強くしてください。
重要なのは、画像を白く潰さないことです。
ホログラムはカード画像の上に薄く乗せる形にします。
フェーズ10：開封演出を強化する
ここで、光、粒子、カメラ揺れ、衝撃波を足します。
プロンプト例:
パック開封時に演出を追加してください。 パーティクル、光のフレア、衝撃波、ビーム、カード周囲のHaloを入れてください。 ただし派手すぎず、AAAゲームのように上品で高品質な演出にしてください。
このフェーズはやりすぎやすいので、何度も調整します。
フェーズ11：図鑑を作る
開封したカードを保存し、一覧で見られるようにします。
プロンプト例:
開封したカードをlocalStorageに保存してください。 図鑑画面ではカードをサムネイル一覧で表示し、タップすると3Dカードプレビューを表示してください。 未入手カードはLOCKED表示にしてください。
これで、開封に継続目的が生まれます。
フェーズ12：ホーム画面を作り込む
最後に、アプリ全体の顔になるホーム画面を作ります。
プロンプト例:
ホーム画面を高級ダークファンタジーTCGアプリ風にリデザインしてください。 背景ビジュアル、プレイヤー情報、通貨表示、菱形メニューを配置してください。 Pack, Card, Shop, Event の4項目を表示し、PackとCardは実際に遷移できるようにしてください。
ホーム画面はアプリの印象を決めるので、最後に世界観を整えます。
フェーズ13：モバイル対応
Webで体験が固まったら、スマホで確認できるようにします。
プロンプト例:
Expoでモバイル確認できるようにしてください。 Web版をWebViewで表示し、AndroidエミュレーターとiPhone実機のExpo Goで確認できる構成にしてください。
フェーズ14：実機確認と調整
最後に、実機で見たときの崩れを直します。
よく調整する点は以下です。
カードが大きすぎる
ホーム画面が縦に収まらない
文字が小さい
パックが暗い
プロンプト例:
Android/iPhone実機で見たときにホーム画面が縦に収まるよう、モバイル専用CSSを調整してください。 背景、タイトル、菱形メニュー4つが1画面内に見えるようにしてください。
まとめ
このようなアプリは、一気に作るより段階的に作る方が成功します。
おすすめの順番は次です。
コンセプト
最小画面構成
カードデータ
抽選
2D開封操作
Three.js化
GLBモデル導入
3Dカード化
ホログラム
開封演出
図鑑
ホームUI
Expo対応
実機調整
特にパック開封は、最初から豪華に作るのではなく、まず「上にドラッグしたら開く」という体験を作るのが重要です。
そのあとに3Dモデル、カード演出、光、ホログラムを重ねることで、完成度の高い開封体験になります。