PCスキル皆無の僕が、AIでアプリを作った話 #2｜くるまめくり編
みなさんこんにちは！単身赴任ヘルパー・ジークです！いつも読んでいただき、ありがとうございます☺️
先日、筋トレ記録アプリを作った話を書きました。
その後、今度は子ども向けの神経衰弱を作ることにしましま！
前回と違うのは、自分専用アプリから『家族で遊べるもの』へ、シフトしたこと。
離れて暮らす子どもがiPadで実際に遊ぶ、公開URLで誰でもプレイできる、そこまで到達するまでのやり取りが、筋トレアプリとはまた違う苦戦の連続でした。
今日はその過程と、非エンジニアがAIと試行錯誤する中で気づいたことを書きます。
💡 子どものために
筋トレアプリをつくれたので、次は子供たちが遊べるゲームを作れないかな？と考えていました
2人とも車が好きで、帰省のたびに「ぱぱトミカ欲しい！」とねだってきます😅
それなら車をテーマにした神経衰弱ゲームを作ろうと思いついて、「くるまめくり」が始まりました。
設定画面は3ステップで完結します。
まずプレイヤーの人数（1〜4人）とCPUの人数（0〜3人）を選んで、難易度(枚数)を選びます。
次にカードの裏面の色を選びます。
あか・あお・みどりの3色で、子どもが好きな色を入れました。かんたんは8ペア16枚、ふつうは12ペア24枚、むずかしいは18ペア36枚です。
子どもが自分で「むずかしいにする！」と選べる設計にしたかったからです。
ボタンを大きく、文字をひらがなで、画面をシンプルに。を、意識しました。
最初にぶつかったのが画像の問題でした。ネットにある車の写真は著作権があって使えない。それくらいは初心者の自分でも分かっていたので、生成AIで車のイラストを作ることにしました。
「アルファードを生成して」と指示を出したら、出てきたのが本物さながらのアルファード。メーカーロゴ、車種名、デザイン、全部本物そっくり。子どもが喜ぶリアルな仕上がりでした。
Claudeに見せたら、注意されました。
「実車に酷似していてメーカーロゴまで入っている画像は、商標権の観点でグレーゾーンです」という指摘でした。商標権は、メーカーの「印」を勝手に使うことへの権利の問題です。AIがリアルに作りすぎたことで、別のリスクが生まれていた。
「家族間で楽しむ、商用利用しない」という前提を伝えたら、「その範囲なら実用上問題ないけど、安全にするならイラスト調にした方がいい」という判断が返ってきました。
もし「商用利用する」と言っていたら、AIは動いてくれなかったと思います。AIは利用目的によってリスク判断を使い分けている。そのことを、最初のやり取りで知りました。
ちなみに、クロードに各種車の画像生成を依頼したらこんなヘンテコな画像ができました😅
Claudeが画像生成が苦手というのは聞いてましたが、まさかここまでとは・・・笑
💡 言葉が通じる
サンプルカードを1枚作る段階で、最初にはまったのが「AIへの画像の渡し方」でした。
チャット画面に画像を貼り付けました。見た目は表示されているのに、AIには届いていない。「なんで伝わらないんだ」と思いながら何度かやり取りして、ダウンロードフォルダのファイルを直接渡す方法で解決しました。「チャットに貼った画像」と「ファイルとして保存されている画像」は別物だと、そこで初めて分かりました。
デザインの試行錯誤は、その後でした。
最初のカードを見た瞬間、「あ、なんか違う」と思いました。車が切り取られていて全体が見えない。「車全体が収まるように」と伝えたら変わった。今度は白い余白が目立って「色名はダサいから消して」と言ったら、カード全面に画像が広がって、車名を半透明の帯で下にかぶせるデザインになりました。
この時点でちょっと驚いたんですよね。「ダサい」という一言で、レイアウトが別物に変わる。技術的な指示は一切していない。
「ダサい」が実装になる。非エンジニアがアプリ開発に関われる理由って、たぶんこれです。
💡 見えないリスク
画像が23枚揃ったところで、次の問題が出てきました。
1枚1枚の画像サイズが800KB〜1.2MB。23枚合計で約2.9MB。そんなことは全く考えていなかったんですが、「このままだと表示に時間がかかります」と指摘されました。HTMLファイルに直接埋め込んでいたので、ファイル全体が4MB近くになっていたんです。
PNG形式からJPEG形式に変換して、画像サイズも縮小してもらいました。PNGは色の情報を細かく保存するから綺麗だけど重い。。。
JPEGは多少の画質を犠牲にする代わりに軽くなる。品質78%に設定したら、2.9MBが684KBまで落ちました。HTML全体でいうと、4MBから約880KB。約75%の削減です。
セキュリティの話も指摘を受けました。
家族と共有するだけのつもりだったので、そこまで考えが及んでいなかった。「URLを知っていれば誰でもアクセスできる状態ですよ」と言われて、少しひやっとしました。「身内向けなら実用上問題ないけど、認識はしておいて」という説明でした。
著作権のリスク、ファイルサイズのリスク、セキュリティのリスク。自分では気づけなかったものを、AIが先に指摘してくれる。それがこの開発で一番ありがたかった部分でした。
💡 反復が品質を上げる
子どもとプレイしてみると、CPUがカードをめくるスピードが早すぎて、場所を覚える前に次の番になってしまう。「子どもが覚えられないから遅くして」と伝えました。
800ミリ秒（0.8秒）から1800ミリ秒（1.8秒）に変更してもらいました。でも実際に触ってみると、まだ早い。「まだ早い」と再度伝えたら2500ミリ秒（2.5秒）に。カードを2枚めくってから裏返すまでの時間も、700ミリ秒から3000ミリ秒まで伸ばしました。
3回調整してようやく「これくらいか」というテンポになりました。数字だけでは「ちょうどいい」は決まらない。実際に触って、「まだ違う」と言い続けることで初めて完成する。
カードが揃った後に位置がズレる問題も同じでした。「空いた場所はそのまま空けてほしい」と伝えて、1回目では直っていなくて。「まだ直ってない」と送ったら、今度は別のアプローチで解決してきました。
解決策は、揃ったカードを「消す」のではなく「見えなくするだけ」という方法でした。消すとスペースごとなくなってレイアウトが崩れる。見えなくするだけなら、スペースは残る。似ているようで全然違う。
「まだ違う」と率直に言い続けることが、完成度を上げていく。遠慮して「まあいいか」で止めていたら、子どもが遊びにくいままでした。
💡 テレビ電話の夜
完成してから、テレビ電話で子どもたちに見せました。
「パパ、○○と○○のために神経衰弱のゲーム作ったよ！しかも2人が好きな車の！」
そう言ったら、2人とも画面に釘付けになりました。そのままプレイして見せることにしたんですよね。わざと「あれどこだっけー」と言いながらカードを探していると、「パパ！そこじゃない！下下下！右！」とマウスカーソルを目安に2人が指示をくれて。その通りにめくったらペアが揃いました。「ほら！言ったでしょ！」と得意げな顔で。
なんとも微笑ましい瞬間でした。
「次帰ったらiPadに入れてあげるからみんなでやろうね」と言ったら、2人とも「やったー！」って。
URLを開くだけで遊べる。インストールも不要。子どものiPadに入れてあげるだけで、離れていても一緒に作ったものが形として残る。コードは一行も書いていないし、読んでもいない。でも確かに、自分が作ったものです。
もし「ここが気になる」「実際どうなの？」といったことがあれば、ぜひコメント欄で教えてください。僕の見てきたことや、これまでの体験ベースのお話にはなってしまいますが、少しでもお役に立てれば嬉しいです。皆さんと情報交換できるのを楽しみにしています！😊
📖 あわせて読む
