「これ、どう実装するん？」一枚の絵から、作れるアプリに分けていった｜おはようカノジョ #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イラストアイラ
#アカリウム