← トップ
ノートパソコンと、手描きのラフスケッチが置かれた机

いろいろなAIが使えるようになって、ちょっとしたゲームやツールを作るのが本当に楽になりました。 このサイトに置いてあるものも、ほとんどがそうやって作ったものです。 やりながら「こうすると早いな」と思ったことを、いくつか書いておきます。

目次

どのAIを使うか

自分は Claude を使って作ることが多いです。ときどき Gemini を使ったり、ChatGPT を使ったりもします。どれも善し悪しがあって、これがいちばんと言い切れるものではありません。

ただ、どれを使うにしても、頼み方のコツはだいたい同じでした。ここから先に書くことは、特定のAIに限った話ではありません。

パソコンからやったほうがいい

画像や動画を作る場合は別ですが、そうでないもの――ゲームやツールのたぐいを作るなら、パソコンからやったほうがいいと思います。ブラウザでもアプリでも、どちらでも構いません。

理由は単純で、出てきたものをその場で試しやすいからです。HTMLのファイルが出てきたら保存してすぐ開けますし、直してほしいところをその場で書き足せます。スマートフォンだと、この行き来がどうしても面倒になります。

長い文章より、箇条書き

これがいちばん効きます。思いついたら、できるだけ箇条書きで書いていくことです。

長い文章で書こうとすると、書いている自分のほうが途中で同じことを繰り返しはじめます。そうなると、読むほうも何が言いたいのかわからなくなります。人間が読んでもわかりにくいものは、AIが読んでもやはりわかりにくいようで、見当違いのものが出てきます。

つい書いてしまう頼み方
「なんか暇つぶしになるゲームを作りたいんだけど、スマホでも遊べて、そんなに難しくなくて、でも簡単すぎてもつまらないから少しは頭を使う感じで、あと見た目もかわいいほうがよくて、記録が残ったりするといいかなと思っていて……」
箇条書きにした頼み方
  • スマホの縦画面で遊ぶゲーム
  • 神経衰弱。カードをめくって同じ絵を揃える
  • 難易度は3段階(12枚・16枚・24枚)
  • クリアまでの時間とめくった回数を記録
  • 子どもでも読めるよう、ひらがな中心
  • HTML1ファイルで完結させる

箇条書きにしたほうは、ほぼそのままの形になって出てきます。上の長い文章のほうは、たいてい何度か作り直すことになります。自分では同じことを言っているつもりでも、結果はかなり変わります。

うまく箇条書きにできないときは、それはまだ自分の中で決まっていない、ということでもあります。書き出してみて初めて「難易度は何段階にするんだっけ」と気づくことも多いです。

絵を見せると早い

言葉で説明するより、ラフな絵を見せるほうが手っ取り早いことがあります。紙に描いて写真を撮ったものでも十分です。

方眼ノートにボールペンで描かれた、アプリ画面のラフスケッチ
これくらいで通じます。上に入力欄、真ん中に表示エリア、下にボタンが3つ、という配置がひと目でわかります。

絵の中に文字を書き込んで、「ここは入力欄」「ここを押すと保存」と説明を入れてしまっても構いません。むしろそのほうが確実です。きれいに描く必要はまったくなくて、四角と丸と矢印で足ります。

作りたいものに近い画面を見つけたときは、その画像を見せて「こういう感じ」と言うのもよく効きます。

何を伝えるといいか

毎回だいたい同じことを書いています。ざっくりこのあたりを埋めておくと、話が早いです。

頼むときに書いておくこと

  • 何をするものか(ひとことで)
  • どんな機能があるか
  • ボタンは何があって、押すとどうなるか
  • 画面にどう並んでいるか
  • スマートフォン向けか、パソコン向けか
  • 記録を残すのか、その場かぎりでいいのか

とくにスマートフォン向けかどうかは、最初に言っておいたほうがいいです。ここを言わないと、パソコンの横長の画面を前提にしたものが出てきて、あとから直すことになります。指で押すボタンの大きさも変わってきます。

ボタンの種類を書いておくのも地味に効きます。「音のオン・オフ」「やりなおし」「最初に戻る」くらいを先に決めておくと、あとで「これがなかった」と気づく回数が減ります。

言葉にできないときは、聞いてもらう

やりたいことを言葉にするのが、いちばん難しいところです。頭の中にはあるのに、どう書けばいいのかわからない。これはよくあります。

そういうときは、こちらから説明しようとするのをやめて、わからないところを質問してもらうのが早いです。

自分 こういうものを作りたいけど、うまく説明できない。足りないところを質問して。
AI 何人で遊びますか。得点は必要ですか。終わりはどう決めますか。……

聞かれたことに答えていくだけで、必要なことがひと通り出そろいます。自分では思いつかなかった論点――終わり方をどうするか、間違えたときにどうなるか――が向こうから出てくるので、そこで初めて決まることも多いです。

不具合の伝え方

できあがったものを試して、おかしなところがあったら、そのまま伝えれば直してくれます。このとき、どういう操作をするとおかしくなるのかを書くのがコツです。

伝わりにくい
「なんか動きが変です」
伝わりやすい
「ボタンを長く押しっぱなしにすると、ゲージが最大を超えてゼロに戻ってしまいます」

「変です」だけだと、向こうも当てずっぽうで直すことになります。どこをどういじるとそうなるのか、そこまで書けば、たいてい一度で直ります。

直したつもりで別のところが壊れることもあるので、直してもらったら、前に動いていたところももう一度触ってみたほうがいいです。

どこまでできるか

Claude Code のような開発向けの道具を使わなくても、ふつうのチャットで頼むだけで、たいていのAIがHTMLのファイルを作ってくれます。保存してブラウザで開けば、それで動きます。

ブラウザで動くもの以外は難しいのですが、逆にいえばブラウザの中でできることは、思っているよりずっと広いです。簡単なお絵かきソフトや、音楽をつなげるようなものまで作れてしまいます。このサイトに置いてあるゲームツールも、全部ブラウザだけで動いています。

いきなり大きなものを作ろうとせず、小さいものをひとつ作ってみるのがいいと思います。ボタンを押したら何か起きる、くらいのところから始めても、案外そこそこのものになります。


まずは触りはじめとしては、こんな感じでいいんじゃないかなと思います。 わからないことがあれば、メールで聞いてください。答えられる範囲でお返事します。

ここに書いたのは、あくまで自分がやってみて感じたことです。 AIのほうも短い間隔で変わっていくので、しばらくすると事情が変わっているかもしれません。 実際に作ったものはつくったもののページに置いてあります。