Claude Codeで自分専用の「動きの図鑑」アプリを作った話

2026年9月2日

どうも、ハヤトワンです。

大阪でブレイキンをやっているダンサーで、以前はフロントエンジニアをしていました。

今はショーケース出演やレッスンなどが本業で、それに伴いショート動画作りや毎日ラジオなどいろいろやってます。

2024年から動画生成AI×ダンスの映像でくだらないショート動画を作ってはいろいろ遊んできました。

今日はここ2ヶ月くらい、裏でずっと作っていたものの話です。

Claude Codeで、自分専用の「動きの図鑑」ウェブアプリを作りました。

名前はFlow Geometry Atlas。略してFGA。

売り物ではないです。

自分の踊りと、レッスンと、映像づくりのために作った、自分用のやつです。

ただ「どうやって作ったか」は自分だけのものにしててもしょうがないので、ここに残しておこうと思います。

先に言っておくと、僕は元エンジニアですが今はダンサーです。

なので技術的な話はあくまで”僕の場合はこうだった”の範囲内です。

※Claude Codeというのは、Anthropic社のAI（Claude）に、会話しながらコードを書かせるツールです。僕はこれをほぼ全部の作業に使っています。

▼そもそも何を作ったのか

一言でいうと「動きを作る人のためのヒント集」です。

中身は3つの図鑑と、それを混ぜる実験室。

・幾何学パターン95種（螺旋、等高線、格子、帯の紋様など、動きに使える”形”の図鑑）

・動作学の事典132種（関節の動き、物理の動き、アニメーションの原則、ストリートダンスの技法）

・ダンス音楽理論97種（拍、裏拍、ジャンル別のリズム。75種は実際に音が鳴る）

・組み合わせLab（形×動き×音楽を混ぜて、動く合成を見る実験室）

で、全部の幾何学パターンが3Dで見れます。

「2Dの絵をそのまま立体にした」のではなくて、

螺旋なら「進むほど上がるコイル」、等高線なら「内側ほど高い地形」、帯の紋様なら「体幹の円柱に巻いた帯」。

形の”意味”を解釈して立体にする、という作りです。

▼なぜ作ったのか

きっかけは、自分のレッスンです。

生徒に「動きのイメージ」を伝えるとき、言葉だと限界があります。

「波が体を通り抜けるように」と言っても、伝わる人と伝わらない人がいる。

じゃあ、動きの元になる形と、動きそのものと、それに合う音楽を、一箇所で見せられたらどうか。

そう思って作り始めたのが7月でした。

最初のバージョンを実際にレッスンで生徒と使ってみて、

「合成した動きが本物の動きに見えない」「音楽の理論も入れてほしい」

という反応があり、そこから仕様を書き直しました。

つまり、使う人（＝自分と生徒）の不満から作ったアプリです。

▼どうやって作ったか（AIへの頼み方）

ここが本題です。

コードは、ほぼ全部Claude Codeが書いています。

僕がやったのは「何を作るか」「何が良くて何がダメか」を決めることです。

2ヶ月やってみて、効いたと思う頼み方が6つあったので並べます。

1. 決めることは4点セットで即答する

AIが「価格は？販路は？期限は？自分でほしい？」と聞いてくるので、

「B案。Stripe。9月6日。全然使える。」

みたいに、全部まとめて返すようにしました。

これをやるとAIが止まらずに一気に進みます。

逆に一個ずつ返してると、毎回”待ち”が発生してめっちゃ遅い。

2. 「なんか機能してない」を数字にしてもらう

デザインが気に入らないとき、「なんか機能してない」としか言えなかったんですよね。

そこで、「金継ぎ」というスキルを使いました。

画面の文字の色の濃さ・文字の大きさ・角丸の種類・スマホで崩れていないかを、スクリプトで数えて採点してくれるものです。

感覚ではなく数字で「ダサさの原因」を出してくれます。

https://brmk.io/mCPWtn

結果は、

文字の色が薄すぎて基準を割っている箇所が643件、

スマホで4つ目のタブが画面の外に消えている、

など、具体的な数字と場所で返ってきました。

感覚を数字に翻訳してもらう。これは今後も使います。

3. 品質の”定義”を自分の言葉で言う

3D機能を最初に作ってもらったとき、出てきたのは平面の絵を奥にずらしただけの3Dでした。

僕が求めていたものとは違ったので、

「これ、それぞれの幾何学の意味を捉えたうえで再現してる？ただ2Dをそのまま3Dにしただけになってない？」

と言いました。

この一言で、3Dの仕組みごと作り直されました。

螺旋はコイルに、等高線は地形に、点の格子は結晶の格子に。

AIは”良い”の定義を持っていない。定義を渡した瞬間に変わる。

これが一番の学びでした。

ただ、結局いまだに再現しきれていない3Dモデルもありますが。

4. 止める

3Dができたあと、僕はこう伝えました。

「正直売り物になるとは思えない。破綻してるところもある。特典としてはありかもしれないけど、これ単体で売るのは気が引ける」

これで、単体販売はいったん止まりました。

そして、ここで止めたことで、次の作り直しに入れました。

5. 「全部改善して」の時は評価軸を例で見せる

そのあと「改善できるところは全部改善して、商品としてリリースするうえで申し分ない品質にして」と頼みました。

このとき、

「例えば、各パターンの3Dが意味通りか、モーションの3D、Labの組み合わせの正確さ、そもそもの網羅性に不備がないか」

と、見てほしい軸を4つ添えました。

そしたらAIが、”全部の3Dを自動で撮影して、一覧の画像にして、目で見て直す”という検査の仕組みを自分で作りました。

それを5周回して直していきました。

僕がやったのは、送られてきた一覧画像と実際のアプリを見て、判断することです。

軸を渡すと、AIは検査の道具から自作します。

6. 仕様書に「決めたこと」を残す

7月の時点で、AIに仕様書を書かせて、その冒頭に「決定事項」を書く、というのをやっていました。

これがあとで効きました。

2ヶ月後に読み返しても、なぜそう作ったかが分かる。

チャットで決めたことは流れて消えるので。

▼失敗したこと

いいことばかり書いてもしょうがないので、無駄だった部分も書きます。

・同じものを3回作った。 3Dを「とりあえず」で作って、「意味が違う」で作り直して、「破綻がある」でまた直した。最初から”良いの定義”と”見る道具”があれば1回で済んだはずです。

・謎のバグで半日近く使った。 アプリが真っ白になる現象を追いかけて、いろんな設定をいじって、結局の原因は昔入れた「キャッシュ優先の仕組み」が古いファイルを配り続けていたことでした。しかもこれは、もし売っていたら「買った人にアップデートが一生届かない」という不具合でした。売る前に見つかった形です。

・検証のあと音が止まっていなかった。 AIが動作確認で再生ボタンを押して、そのままにして、僕のPCからずっとリズムが鳴っていました笑。「止めました」と言われて、止まっていなかったやつです。

・画面を見ずに作っていた。 AIは数字で「壊れていない」を証明できるけど、「良い」は証明できない。絵を撮って見るまで、破綻は誰にも見えませんでした。

まとめると、AIに作らせるときの落とし穴は「動く」と「良い」が別物なことです。