AIに作品をつくってもらうときの頼み方の例です。最初にAI向けの仕様書(/llms.txt)の中身を渡してから、下の文をそのまま(または書きかえて)送ってください。
ミニゲーム
落ちものよけ
上の仕様に沿って、1つの index.html で遊べるゲームをつくってください。
- 画面の下にいるキャラクターを、左右のキー(スマホでは画面の左右のタップ)で動かす
- 上から障害物が落ちてきて、当たったらゲームオーバー
- 時間がたつほど、落ちてくる速さと数が増える
- 生き残った秒数をスコアとして表示し、最高記録を保存する神経衰弱
上の仕様に沿って、1つの index.html で遊べる神経衰弱をつくってください。
- 4×4のカードを裏返しに並べ、2枚めくって絵が同じならそのまま、違えば裏に戻す
- カードの絵は絵文字を使う
- すべてそろえるまでの手数と時間を表示する
- カードをめくるときに、くるっと回るアニメーションを付けるタイピング
上の仕様に沿って、1つの index.html で遊べるタイピングゲームをつくってください。
- ローマ字で、表示されたひらがなの単語を打つ
- 「し」は si と shi のどちらでも正解にするなど、よくある打ち方に対応する
- 60秒で、打てた文字数と正確さを表示する
- スマホでは遊べないことを、最初の画面で伝えるツール・アート
ポモドーロタイマー
上の仕様に沿って、1つの index.html で動くポモドーロタイマーをつくってください。
- 25分の作業と5分の休憩をくり返す
- 残り時間を大きな円のゲージで表示する
- 開始・一時停止・リセットのボタンを付ける
- 切りかわるときに、短い音を鳴らす(音は Web Audio API でつくる)ジェネレーティブアート
上の仕様に沿って、1つの index.html で動くジェネレーティブアートをつくってください。
- canvas いっぱいに、たくさんの点がノイズに沿って流れ、線の跡を残す
- クリック(タップ)するたびに、色の組み合わせと流れ方が変わる
- 画面の大きさが変わったら、canvas も合わせる仕上げに効く、追加の頼み方
つくってもらったあとに、次のように頼むと、ぐっと遊びやすくなります。
| ねらい | 頼み方の例 |
|---|---|
| 最初の画面をわかりやすく | 「タイトルと遊び方を書いたスタート画面を付けてください」 |
| 気持ちよさを足す | 「得点が入ったときに、小さく跳ねるアニメーションと効果音を付けてください」 |
| スマホで遊びやすく | 「スマホの縦持ちでも、ボタンが指で押しやすい大きさになるようにしてください」 |
| くり返し遊んでもらう | 「最高記録を保存して、ゲームオーバーの画面に表示してください」 |
| サムネイル映え | 「スタート画面の背景に、ゲーム画面が動いているデモを流してください」 |
うまくいかないときは
- 動かない: ブラウザの開発者ツール(F12キー)の「コンソール」の赤いエラーを、そのまま貼り付けて「直してください」と頼みます
- 思った動きと違う: 「今は〇〇になっているけど、△△にしたい」と、今の状態とほしい状態を並べて伝えます
- 直すたびに別のところが壊れる: 「今のコードの全体を出してください」と頼んで、最新の全体を保存し直します
投稿のしかたは、はじめての作品を、AIと一緒につくって投稿するをご覧ください。