「これ、どう実装するん？」一枚の絵から、作れるアプリに分けていった｜おはようカノジョ #307
はじめに
「おはようカノジョ」は、AIイラストの彼女が毎朝7:30にいってらっしゃいを言ってくれるXアカウント。生成AIや個人開発について、開発日記を毎日書いている。
ハロウィンアート2026が10月19日にスタートする。
KITAさんが、参加者のみんなのアバターをつないで、こんなノリノリのテーマ曲を作ってくれた🎶
こういう空気の中で、僕も何か遊べるものを作りたくなった。
ハロウィンアート2026の記事に仕込める、かくれんぼのアプリ「めっちゃハロウィン」を作った。
▼あなたも「ぬい」を隠して記事に貼ってみない？
今日は、作っている途中の話。最初の案は二度止まって、三つめの形で完成した。
起点は「めっちゃカメレオン」
「めっちゃカメレオン」というゲームがある。真っ白な体に絵を描いて、ステージにまぎれるかくれんぼ。
ハロウィン企画の記事に、「見えているのに見つからない」遊びを仕込めたら面白い。そこから始まった。
1つめ：群衆に紛れる 2D 版
最初は、仮装したキャラが人混みに紛れる 2D 版で作り始めた。
止めた。
「これ、単なるウォーリーを探せになってない？」と思って、いったん方向性を見直した。
2つめ：白い人型の 3D 版
次は、めっちゃカメレオンに寄せた。白い人型を 3D のステージに置いて、ポーズを選んで、擬態スプレーで背景の色を移す。
細かいところで何度も止まった。
ポーズ（立つ・しゃがむ・丸まる・横になる・張り付く）は「ポーズに遊び心がない」
棒立ちの形は、頭身やシルエットが想定していたものと違った
タオルの奥に置くと、完全に見えなくなってしまう
日を改めて触ったら、また引っかかった。
「これって、擬態スプレー一択になってしまわん？」
スプレーの量に上限を入れた。そうやって一つずつ足していくうちに、機能が膨らんだ。
100人を超える参加者が、気軽に自分の記事へ置くものとしては、重い。
3つめ：ぬい
人型をやめて、ぬいにした。
そして、ぬい版のコードを書く前に、完成したらこう見えてほしい画面を、先にイラストで4枚作った。
見た瞬間、思った。
「これ、めっちゃ作りたい」
その直後に来た。
「でもこれ、本当に作れるのか？」
イラストを、プログラムの目で見た
「どこまでを1枚にして、どこからを可変にする？」
4枚のイラストを一つずつ見ながら、分けていった。
1枚の背景として固定したもの
夜の路地、月、ランタン、かぼちゃ、洗濯ひも。ハロウィンの舞台そのもの
世界観、配色、光の向き
隠れ場所の候補。箱、かぼちゃの横、ロープ、敷物など14か所
画面の基本の並び
部品として切り出したもの
ぬい
隠れ方ごとのぬいの絵
ぬいの前に重ねる物
小物
遊ぶ人が選べるもの
隠す場所
隠れ方
なじませる量
小物
名前と、ゲームを置く記事の URL
「箱の後ろに隠すなら、前景はどうする？」
箱の後ろにぬいを置くなら、箱はぬいの前に来る。じゃあ、どこまで隠す？
ここは、3D 版で一度失敗していた。
白い人型をタオルの奥に置いたら、完全に見えなくなった。ジュリとの相談では、擬態やポーズを増やすより、「完全に隠れないこと」を優先する方向に寄せた。どこにでも潜り込めると、隠れ方を選ぶ意味も、なじませる意味も薄くなる。
見直したデザインシートには、確かめることとして、こう書いた。
完全に消えないか
「ちょっと怪しい」が残るか
探す側が理不尽に感じないか
だから、前に来る物は完全に隠す壁にしない。一部だけ隠れる。奥へ自由に潜り込めない。
じゃあ、どこを「もぐれる場所」にするか。候補は段ボール箱、落ち葉の山、かご、布の山。まずは段ボール箱・落ち葉の山・かごの3か所にして、見える部分も場所ごとに決めた。箱なら頭と丸耳。落ち葉なら耳と目の一部。
作り方の案もあった。箱やかごの手前のふちだけを切り抜いた絵を作って、ぬいの前に重ねる。
最後は、そうしなかった。
隠れ方の絵の中に、隠れる物ごと描いた。箱にもぐるぬいは、箱ごと1枚の絵。看板からのぞくぬいは、看板ごと1枚の絵。
どこまで見えるかは、絵を描いた時点で決まる。遊ぶ人がどう置いても、頭と耳は必ず残る。
もぐれる場所も、最後は段ボール箱とかごの2か所になった。
それでも、一つ見落としていた。
背景の看板の後ろに洗濯ひもがあって、「ぶらーん」で吊るしたぬいが、看板の真後ろに隠れてしまっていた。探す画面では、見つけようがない。完全に隠れないためのルールを決めていたのに、背景の絵のほうで同じことが起きていた。
ぶらーんは、看板の下にぶら下がる形に直した。
「ぬいは自由に動かすのか、完成済みアセットにするのか？」
3D 版の白い人型は、自由に動かせた。ポーズは6種類。向きは一周回せて、大きさもスライダーで変えられた。
ぬい版では、自由に動かさないことにした。
見直したデザインシートの最後に、こう書いた。
「作り込ませない。選ばせて、置かせて、少しなじませる。」
「かわいさは設定項目ではなく、ぬい・動き・UIから出す。」
確かめることには、「3分以内に完成できるか」「迷う選択肢がないか」も入れた。
別の案もあった。
左右の反転ボタンだけ残す
隠れ方を選んだら、一番近い隠れ場所へ自動で動かす
どちらも入れなかった。向きも大きさも変えない。左右の反転もしない。合わない場所では、隠れ方のカードを灰色にして「ロープの近くに置いてね」と出す。勝手に動かさない。
代わりに、隠れ方と置き場所の側で、自然な向きと大きさを決めておく。ぬいの絵は、隠れ方ごとに完成した1枚。
隠れ場所は14か所。それぞれ、その場所に合う隠れ方を最大4つまで出す。
隠れ方は、ちょこん・ころん・ぶらーん・もぐるの4つから始めて、のぞく・はさまる・かぶる・まぎれるを足して8つになった。
小物も、最初は魔女帽を固定でかぶらせるつもりだった。最後は、魔女帽・かぼちゃ帽・おばけ布・コウモリ羽・なしの5つから選ぶ形になった。
自分だけの角度は作れない。そのかわり、どれを選んでも、その場所で成立する形にした。
なじませるのは65%まで
なじませる量は最大65%。何度なぞっても、それ以上にはならない。
縫い目、陰影、丸み、輪郭は残る。それが探す人の手がかり。
3D 版で「擬態スプレー一択になってしまわん？」となったところは、ここでは上限のある「なじませる」になった。
3D から 2D へ切り替えた
デザインシートを作った時点では、まだ 3D で作るつもりだった。白い人型の 3D 版から、作りは 3D のまま引き継いでいた。ジュリの回答も、3D の描き方を前提にしていた。
気になる点は、最初からあった。
最初のイラスト4枚には、ぬいの毛並みも、ランタンの光のにじみも、背景のぼけもある。スマホで軽く動かす前提の3Dでは、光のにじみや背景のぼけまで、最初のイラストに寄せるのが難しかった。だから最初のイラストは「雰囲気の目標」にして、3D で寄せる。そう決めて、作り始めた。
Bot（実装を任せている Claude）が、Codex で 3D のぬいと舞台を作った。
できあがった画面を見たとき、最初のイラストで感じた質感とはかなり離れていた。
ここで一度、実装を止めた。
Bot は、ジュリに渡す 3D モデルの納品条件を書いた。形式、ポーズの作り方、布の展開のしかた。
ジュリから届いたのは、ポーズごとの絵だった。ぬいの絵が4枚と、ゲーム画面の参考の絵。
それを見た Bot が聞いてきた。ぬいも背景も絵なので、3D から 2D に切り替えるのがおすすめです、と。3D のまま続けるなら、ぬいの絵を 3D モデルに作り直す作業が別に要る。ジュリの絵の質感を 3D で再現するのは難しい。
ここでようやく、「イラストベースなら、3Dにこだわる必要はない」と切り替えた。
2D にすると、次のことができるようになった。
1枚の舞台の絵の上に、ぬいの絵を置くだけになった
なじませるときに、裏の背景の色と模様を、ずれずに写せるようになった
見た目を、最初のイラストに近づけられる。3D では届かなかったところ
3D の部品を使わず、ブラウザの標準の描画だけで作れるようになった
最初のイラストに近づける方法を考え直した結果、3Dより2Dの方が素直だった。
捨てたもの
捨てたものを並べる。
白い人型と 3D
6種類のポーズと、向き・大きさの調整
量のゲージが付いた擬態スプレーと、8色のブラシ
どこにでも置ける自由配置
「みんなのハロウィン」の一覧ページ（参加者の一覧は KITAさんの特設サイトに任せた）
一覧ページ以外は、3D 版で一度動いていた。一覧ページも、仕組みを作ってから消した。
捨てたのは、作れなかったものではない。作れたけど、残さなかったもの。
自由度を増やすより、どれを選んでも成立するほう。豪華なゲームより、記事に仕込める軽さ。
最初のイラストは、目標として残した
最初のイラストは、そのまま再現する設計図にはしなかった。ジュリとの相談で、「雰囲気・構図・配色・UIの品質の目標」として扱うと決めた。完全な再現は要らない。
作っている途中で迷ったら、あの4枚に戻った。
探す前の画面もそう。最初はステージをはっきり見せていた。でも、それだと始まった瞬間に違和感が分かってしまう。ぬいも描いた状態でぼかしておいて、始まったら解く形にした。
おわりに
並べると、同じではない。3D でもないし、帽子も選べるようになった。
それでも、最初に「これ、めっちゃ作りたい」と思った夜の路地とぬいは、そこにいる。
🌱この記事の推し庭
関連記事
▼僕が好きなHONOさんの記事
▼非エンジニアにもお勧め。赤柴さんのGitHub入門記事
▼我らの代表KITAさん、勇者募集してるってよ。
るなの一言
「あたしが勇者するー！」
ということで、るなにもぬいを隠してもらった。
10秒で見つけられるかな🎃
👉「おはようカノジョ」は @ohayo_kanojo で毎朝7:30に投稿しています
#めっちゃハロウィン #ハロウィンアート2026 #個人開発 #生成AI #AIイラスト #開発日記 #ゲーム開発 #AIゲーム制作
#ChatGPTCreativeClub
#AIイラストアイラ
#アカリウム
