『自分の取扱説明書』を作れるアプリを思いついた話 ──個人開発の構想を AI とどう詰めたか

あなたの取扱説明書、見たことありますか？

ぱっと見はクールなのに、実は朝が極端に弱い。
頼まれごとは全部「はい」と返してしまうけど、半分は忘れる。

そういう、自分でも持て余している「仕様」みたいなものが、もし紙の取説に書かれていたら、人ともう少し気楽に付き合えるかもしれません。

そんな思いつきから、Webアプリ『わたし型番』を作りました。

20問の質問に答えるだけで、あなただけの「型番（001〜999）」と、それ専用の「取扱説明書」、そしてオリジナルのピクセルキャラが生成されます。

今回からは、このアプリを構想から公開まで作りきった工程を、3回に分けてまるごと記録していきます。

• 第1回（今回）：構想編 ── アイデアを AI と練り上げる

• 第2回：実装編 ── 決定論的ハッシュとピクセルアートの設計

• 第3回：公開と拡散編 ── GitHub・Vercel・OGP・X 戦略

「個人開発、始めてみたい」
「AIコーディングと一緒にどこまでやれるのか知りたい」
そんな方の参考になれば嬉しいです。

『わたし型番』というアプリ

公開しているWebアプリの全体像から先に共有します。

『わたし型番』は、20問の質問に答えると、あなたの「型番」と「取扱説明書」、そしてオリジナルのピクセルキャラが生成される、無料の診断系Webアプリです。

特徴は次の3つです。

• 型番は 001〜999 の3桁。同じ名前で同じ回答をすれば、何度やっても同じ型番が出ます

• 5段階のレアリティ。一番レアは「Legendary（伝説級・出現率 0.9%）」

• 999通りの個性的なピクセルキャラ。型番から自動生成される、唯一無二の見た目

ふざけたアプリですが、診断結果はそれぞれの選択肢ごとに細かく書き分けています。

この記事は、こんなアプリをどう思いつき、どう形にしていったか。
「個人開発をやってみたい」「AIコーディングと一緒にどこまで作れるのか試したい」
そんな方向けに、構想・実装・公開の3部に分けて記録していきます。

取扱説明書、書けたら面白くないですか？

『わたし型番』を作ろうと思った最初のきっかけは、ふと「自分の取扱説明書があったらいいな」と思ったことでした。

人間関係って、お互いの仕様がわからないせいで揉めることが多い気がします。

「この人、急かすと固まる人だったのか」
「この人、お願い事は紙に書かないと忘れちゃう人だったのか」

そういう細かい個性って、家電なら必ず取扱説明書に書いてあるんですよね。

これを人間に置き換えたら、絶対面白いはずだと思いました。

しかも、ただ性格診断するだけじゃつまらない。
診断結果に「希少性」が加わると、人はシェアしたくなります。ガチャ的な要素を入れて、最高レアを引いた人が思わずスクショを撮りたくなる構造。

このふたつの掛け合わせが、私の作りたいアプリの輪郭でした。

アイデアを「3つの要素」に整理する

頭の中のぼんやりした思いつきを、まずは3つに分解しました。

① 型番

001〜999 の3桁の数字。
同じ入力には必ず同じ番号が出る、決定論的な計算で出します。
家電らしさを出すために、表示は「WK-007」のように接頭辞をつけました。

② レアリティ

型番に5段階の希少性を持たせます。

| レアリティ | 範囲 | 出現率 |
|---|---|---|
| Legendary（伝説級）| 001〜009 | 0.9% |
| Epic（超希少）| 010〜049 | 4.0% |
| Rare（希少）| 050〜149 | 10.0% |
| Uncommon（やや希少）| 150〜399 | 25.0% |
| Common（標準）| 400〜999 | 60.1% |

ガチャの黄金比ですね。
レアが出にくいから、出たときのシェアモチベが跳ね上がります。

③ ピクセルキャラ

型番ごとに違う見た目のキャラを生成します。
これは型番という「数字」に、視覚的な顔と名前を与えるための要素。

体・目・口・カラーパレットの組み合わせで、見た目の総数は1万通り以上。
カタカナで造語の名前も自動でつきます（例：「ザクリムス」「キピーペ」）。

「型番 × レアリティ × キャラ」の三位一体。
これが『わたし型番』の中核設計です。

AIコーディングエージェントを相棒にする

ここから実装フェーズに入るわけですが、私は正直、フロントエンド開発の経験がそこまで深くありません。

そこで、Anthropic の Claude Code（CLI型のAIコーディングエージェント）を相棒にすることにしました。

ChatGPT のような対話型 AI と違うのは、Claude Code は ファイルを直接読み書きできて、テストやビルドも自分で実行できる ことです。

最初に与えた指示はとてもざっくりしたものでした。

ここから Claude が「設問の例を出しましょうか」「型番のレアリティ配分は？」と提案してくれて、決まったところから順に実装が進んでいきます。

AI を「考えてくれる人」ではなく「叩き台を出してくれる相棒」として使う。
私が決めることと、AI に任せることを明確に分けるのが、いちばんスムーズでした。

たとえばこんな分担です。

• 私が決めること

  • 世界観・トーン

  • 設問のテーマ

  • UI のテイスト

  • レアリティ配分の思想

• Claude に任せること

  • 実装の細部

  • TypeScript の型設計

  • テストコード

  • デプロイ手順

「全部 AI に任せる」でも「全部自分でやる」でもない、中間の距離感を意識しました。

仕様が固まる瞬間

何往復かのやり取りで、最終的な仕様は次のように着地しました。

| 項目 | 仕様 |
|---|---|
| 設問数 | 20問（各4択）|
| セクション数 | 5（警告・推奨動作環境・使用上の注意・推奨される使い方・特殊機能）|
| 型番 | 001〜999（FNV-1aハッシュで決定論的に算出）|
| レアリティ | 5階層（出現率合計 100%）|
| キャラ生成 | 体8種 × 目8種 × 口8種 × パレット12種 ＝ 約6,000パターン |
| 名前生成 | カタカナ造語（頭40 × 中28 × 尾28 ＝ 約31,000通り）|

決定論的アルゴリズムなので、サーバーは不要。
すべてブラウザ内で完結する設計にしました。
これなら静的サイトとしてどこにでも置けます。

このルールが、アプリの「再現性」と「占いっぽくない真面目さ」を担保しています。

次回以降の予告

ここまでが構想と仕様の話です。
次回からは、実装と公開のリアルな手順に入ります。

• 第2部：実装編
  決定論的ハッシュの仕組み、ピクセルキャラの生成ロジック、取説テキストの設計など、コアの中身を細かく書きます。

• 第3部：公開と拡散編
  GitHub→Vercel→OGP整備→X戦略まで、「動くものを世に出す」工程をスクショ付きで全部見せます。

このマガジン全体を通して伝えたいのは、「個人開発は、ひとりじゃなくなった」 ということです。

AI とふたりで、企画から公開まで持っていける時代。
そのリアルな手触りを、最後まで記録していきます。

第1部、読んでくださってありがとうございました。

「いいな」と思っていただけたら、スキやマガジンフォローで応援してもらえると、第2部・第3部を書く励みになります。

実際に作ったアプリも、よければ触ってみてください。
あなたの型番が何になるか、見てみると楽しいと思います。
#わたし型番
でXなどで拡散していただけると嬉しいです。

あと、もしよければ私のポートフォリオのぞいてみてください
ニッチな市場で、誰かの「ちょっと便利」や「ちょっと楽しい」を
目指して開発しています。