見出し画像

Claude 3.5 Sonnetを活用した「タピオカミルクティー」ゲーム開発：5時間で実現した実践体験とテクニック共有

J UNITE株式会社

こんにちは！デザイン好きなフロントエンドエンジニアのSUです。

Claude 3.5 Sonnetを活用して「タピオカミルクティー」ゲームを開発しました。
https://round-taiwan.com/game/bubbleteagame

Claude 3.5 Sonnetの画期的な機能

Claude 3.5 Sonnetで導入されたArtifactsには驚きました。右側のウィンドウで生成されたコードのUI効果をリアルタイムで確認できるんです。これにより、開発効率とユーザー体験が格段に向上しました。この新機能のおかげで、私たち開発者は今までにない便利さを体験し、アイデアを素早くプロトタイプ化できるようになりました。

プロジェクト概要：タピオカミルクティーミニゲーム

私は、AIアシスタントを活用して個人的な挑戦をしてみました。シンプルで楽しいタピオカミルクティーをテーマにしたミニゲームを作ろうと思い立ったんです。驚いたことに、開発全体にかかった時間は5時間未満。AI支援開発の効率の高さを身をもって体験しました。

開発プロセスの詳細

  1. ゲームコンセプトの構想
    まずは昔ながらの方法で、紙と鉛筆を使ってゲームのインターフェースをざっくりスケッチしました。基本機能とレイアウトを決めるこの段階が、後のAI支援開発の土台となるんです。

  2. 母国語(繁体字中国語)でのPrompt作成
    次に、母国語でゲームの要件を書き出しました。自分の言葉で表現することで、設計意図をより正確に伝えられると思ったんです。

  3. AI支援翻訳
    母国語で書いたPromptを、AIに英語に翻訳してもらいました。Claudeは英語の理解力が高いので、この手順が重要なんですよ。

  4. コード生成
    英語に翻訳されたPromptをClaudeに入力すると、初期バージョンのコードを生成してくれました。この段階では、生成されたコードの構造が自分のイメージと合っているか、まず確認することをおすすめします。

  5. 詳細調整
    生成されたコードを注意深く読み、必要に応じて微調整と最適化を行いました。ここである程度のプログラミング知識が必要になりますが、AIが大きな助けになってくれました。

  6. UI改善
    Figmaなどのデザインツールを使って、アイコンやフォントなどのUI要素をゲームに追加しました。見た目の魅力を高めるのも大切ですからね。

  7. 最終仕上げ
    すべての要素を統合し、最後のデバッグと最適化を行って、ゲームがスムーズに動くことを確認しました。

効果的なPrompt作成のテクニック

  1. 技術スタックの明確化：使用するプログラミング言語、フレームワーク、ライブラリ（ReactやTailwind CSSなど）を指定します。

  2. ページスタイルの定義：例えば、シングルページのレスポンシブウェブデザインなど。

  3. コンポーネントの詳細な説明：各ゲーム要素の機能と外観要件を明確にリストアップします。

  4. 構造化された表現：句読点やリスト形式を効果的に使用し、読みやすさを向上させます。

  5. 英語の優先使用：直接英語を使用することで、AIの理解精度を高めることができます。

Promptの例と解説

Here's the prompt reformatted into Markdown using ## for headings and - for bullet points:

## Bubble Tea Drinking Game

### UI Elements:
- Countdown timer, start button, and "I Finished!" button at the top
- Bubble tea cup represented by a div with milk tea, pearls, and ice cubes

### Interactivity:
- Straw moves based on mouse position within the cup
- Clicking simulates drinking, reducing tea level and removing pearls

### Game Logic:
- 30-second countdown starts when "Start" is clicked
- Game ends when timer runs out or "I Finished!" is clicked

### Results:
- Window shows score and social media sharing options

### Technical Requirements:
- React project with Tailwind CSS
- UI components from shadcn/ui library

このPrompt例では、ゲームのさまざまな側面（UI要素、インタラクティビティ、ゲームロジック、結果表示、技術要件）を明確に区分しています。このような構造化された記述は、AIがより正確に理解し、必要なコードを生成するのに役立ちます。

まとめ

AIを活用したゲーム開発は、想像以上に効率的で楽しい体験でした。Claude 3.5 Sonnetの新機能Artifactsは、開発プロセスを大きく変えるポテンシャルを秘めています。プログラミングの経験に関わらず、アイデアを素早く形にできる可能性が広がったと感じています。

タピオカミルクティーゲームへのリンク：
https://round-taiwan.com/game/bubbleteagame


この記事が参加している募集

#AIとやってみた

36,032件