つぶしたら爆弾!? 癒やしのはずが推理パズルになる「ぷちぷち。」｜48時間で作った出オチゲーム
紹介した作品: ぷちぷち。
ProtoPedia の作品「ぷちぷち。」を2人のMCが紹介。画面いっぱいのぷちぷちを指でつぶせる癒やしの暇つぶし……のはずが、つぶすと数字が出てきて、なぜかマインスイーパーが始まります。ハッカソンのお題「いや違う。そうじゃない。」への答え方、HTML・CSS・JavaScript だけで作られた小さな仕組みと気配り、参加者投票で特別賞を取った話、そして今日できる最小の一歩まで紹介します。
チャプター
0:00オープニング0:20ぷちぷちをつぶすゲーム……のはず1:03ストレスに、さようなら。3:03お題：「いや違う。そうじゃない。」4:17中身・見た目・動き6:44お題の発表から48時間8:05まずは1回、ぷちぷちする9:01エンディング
文字起こし(80行)
- BANNO
- ゆっくりばんのです。
- HIGEDARUMA
- ゆっくりひげだるまです。
- BANNO
- 今日もProtoPediaから、とびきり面白い作品を紹介していきますよ。
- BANNO
- その前に1つ。荷物に入っている、あの透明なぷちぷち。ついつぶしちゃいませんか？
- HIGEDARUMA
- つぶしますね。プチッという手ごたえが、妙に気持ちいいんですよ。
- HIGEDARUMA
- 今日紹介するのは、ぷちぷち。
- BANNO
- 名前のとおり、画面いっぱいのぷちぷちを、指でつぶせるゲームなんですね。
- HIGEDARUMA
- ……の、はずなんです。この「はず」が、今日のポイントなんですよ。
- BANNO
- えっ、なんだか不穏ですね。さっそく遊んでみましょう。
- HIGEDARUMA
- スマホでもパソコンでも、インターネットを見るアプリでページを開くだけで遊べます。まずはトップ画面です。
- BANNO
- 「ハロー、ぷちぷち。」「ストレスに、さようなら。」……なんだか、おしゃれな広告みたいですね。
- HIGEDARUMA
- 「情報量は最小限。爽快感はたっぷりと。」とも書いてあります。いかにも癒やされそうでしょう。
- BANNO
- では、ぷちぷちしてみます。わあ、画面いっぱいに透明な粒が並びました。
- BANNO
- 真ん中あたりを1つ、ポチッと。……プチッ。いい音です。
- HIGEDARUMA
- そうなんです、ちゃんとプチッと音が鳴るんですよ。で、画面をよく見てください。
- BANNO
- あれ？周りがいくつも一気につぶれて、2とか3とか、数字が出てきました。
- BANNO
- ぷちぷちに、数字？これ、どういうことですか？
- HIGEDARUMA
- 実はこれ、マインスイーパーなんです。昔のウィンドウズのパソコンに、最初から入っていたパズルなんですよ。
- BANNO
- 名前は聞いたことがあります。でも、遊び方は知らないかもしれません。
- HIGEDARUMA
- マス目の下に、爆弾がいくつか隠れているんです。それを踏まないように、全部のマスを開けていくゲームです。
- HIGEDARUMA
- 手がかりがさっきの数字です。たとえば2なら、そのマスのまわりの8マスに、爆弾が2つある、という意味なんです。
- BANNO
- なるほど。数字をヒントに、どこが危ないかを推理するんですね。
- HIGEDARUMA
- そうです。右上には残りの爆弾の数とタイマーが出ていて、怪しいマスには旗を立てて目印にできます。
- BANNO
- よし、ここは大丈夫そう。プチッ。……あっ。
- HIGEDARUMA
- 踏みましたね。隠れていた爆弾が一斉に姿を見せて、ゲームオーバーです。
- BANNO
- ちょっと待ってください。「ストレスに、さようなら」って書いてあったのに、めちゃくちゃドキドキしましたよ！
- HIGEDARUMA
- そのツッコミこそ、作者の狙いなんですよ。
- BANNO
- 狙いどおり、ですか？わざとツッコまれるように作ったんですか？
- HIGEDARUMA
- はい。この作品は、ハッカソンのために作られたものなんです。
- BANNO
- ハッカソンは、決められた短い期間に、テーマに沿って作品を作って発表するイベントですね。
- HIGEDARUMA
- そのときのお題が、「いや違う。そうじゃない。」とツッコまれたくなるモノ、だったんです。
- BANNO
- それで、ぷちぷちのはずが、マインスイーパー。まさに「そうじゃない」ですね。
- BANNO
- イベントの進行役をしている立場から見ると、ずらしているのが1か所だけ、というのが上手いと思います。
- HIGEDARUMA
- 1か所だけ、というと？
- BANNO
- 見た目も言葉も、本気で「癒やし」に寄せているんです。だから、数字が出た瞬間のズレが大きくなる。
- HIGEDARUMA
- たしかに。主催者の報告記事にも、「シンプルな出オチ感が好評でした」と書かれていました。
- BANNO
- しかも、最後に結果をシェアするボタンまであるんですよね。
- HIGEDARUMA
- シェアの文がまた面白くて、ゲームオーバーでも「○秒の暇つぶしができました」と言い張るんですよ。
- BANNO
- 負けても暇つぶしは成功、と。最後までボケ続けるんですね。
- BANNO
- ここで気になるのが作り方です。こういうゲームって、作るのは大変なんじゃないですか？
- HIGEDARUMA
- それが驚くほど小さいんです。使ったのはHTML、CSS、JavaScriptの3つだけ。
- BANNO
- その3つは、どう違うんでしょうか？
- HIGEDARUMA
- Webページを作る基本の道具です。HTMLが中身、CSSが見た目、JavaScriptが動きを担当するんです。
- HIGEDARUMA
- 動かす仕組みは、すべてブラウザの中。裏側で動くサーバーも、データをためるデータベースもありません。
- BANNO
- ページを開いた人のスマホやパソコンの中だけで、ゲームが動いているんですね。
- HIGEDARUMA
- そうなんです。ゲームの動きを書いたプログラムは、約7,800文字。スマホで撮った写真1枚より、ずっと小さいんですよ。
- BANNO
- えっ、そんなに小さいんですか。それをどうやって、みんなが遊べるようにしたんですか？
- HIGEDARUMA
- クラウドフレア・ページズという、ファイルを置くだけで世界中から見られるようにしてくれる、無料の置き場を使っています。
- BANNO
- 作って、置くだけ。それなら私にもできそうな気がしてきました。
- HIGEDARUMA
- 小さいだけじゃなくて、遊び心地への気配りもちゃんと入っているんです。プログラムの中身が公開されているので、読んで見つけたものを3つ紹介しますね。
- HIGEDARUMA
- 1つめ。開いた画面の大きさを測って、ぷちぷちをすき間なく敷き詰めます。爆弾は、マスの6分の1です。
- HIGEDARUMA
- ノートパソコンくらいの画面で試したら、ぷちぷちが264粒、そのうち爆弾が44個でした。
- BANNO
- 6粒に1つが爆弾。けっこう多いですね。だからドキドキしたんだ。
- HIGEDARUMA
- 2つめ。最初につぶした1粒と、そのまわりには爆弾を置かないんです。爆弾を配るのは、1粒目をつぶした後なんですよ。
- BANNO
- いきなり1回目でドカン、はないんですね。それは優しい。
- HIGEDARUMA
- 3つめが、あのプチッという音です。スマホだと、2回目から音が鳴らなくなることがあるそうで。
- HIGEDARUMA
- そこで、つぶすたびに音を新しく用意し直して、毎回ちゃんと鳴るようにしているんです。
- BANNO
- 難しい技術を見せるより、つぶす気持ちよさを大事にしているんですね。ぷちぷちの作品らしいです。
- BANNO
- 作ったのはどんな方なんですか？
- HIGEDARUMA
- セイタロウさんが、一人で作りました。
- HIGEDARUMA
- このハッカソンは、お題の発表から48時間後が作品の締め切りだったんです。
- BANNO
- たった2日で、考えて、作って、公開まで。すごい集中力ですね。
- HIGEDARUMA
- しかも、特別賞を受賞しています。
- BANNO
- 特別賞は、どうやって選ばれたんでしょうか？
- HIGEDARUMA
- 最優秀賞と優秀賞、学生賞に選ばれなかった作品の中から、参加者がもう一度投票したんです。
- HIGEDARUMA
- その投票で、ぷちぷち。が票の22.66％を集めて、1位でした。
- BANNO
- 作った人たち自身が「これ好き」と選んだ、ということですね。それはうれしいはずです。
- HIGEDARUMA
- 賞品の話も面白いんですよ。最初は、ぷちぷち1年分を贈る予定だったそうです。
- BANNO
- ぷちぷち1年分！どれくらいの量なのか、想像がつきませんね。
- HIGEDARUMA
- 主催者も量が分からなかったそうで、代わりに「いくらの醤油漬け」と「サーモンといくらの塩辛」が贈られました。
- BANNO
- ぷちぷちの粒から、いくらの粒へ。主催者さんも、ノリがいいですね。
- BANNO
- 小さなアイデアでも、ちゃんと動く形にして出したから、たくさんの人に届いたんだと思います。
- BANNO
- では最後に、今日できる最小の一歩です。
- BANNO
- まずは遊ぶ側から。スマホでぷちぷち。を開いて、1回ぷちぷちしてみてください。リンクは関連リンクに載せておきます。
- HIGEDARUMA
- 作る側の一歩は、紙1枚でできます。好きなもので「○○のはずが、××」を1つ考えてみてください。
- BANNO
- たとえば、目覚まし時計のはずが、なぞなぞに答えないと止まらない、とかですね。
- HIGEDARUMA
- いいですね。もう一歩進むなら、HTMLファイル1枚から。ボタンを押すとプチッと鳴るだけのページなら、すぐ作れますよ。
- BANNO
- 作品ページと遊べるページは、こちらです。ぜひのぞいてみてください。
- BANNO
- さて、今日紹介したのは、癒やしのはずが推理パズルになる、ぷちぷち。でした。
- HIGEDARUMA
- 次回の作品でも、ゆっくりしていってね。
クレジット
紹介した作品声
あなたの作品も、動画で紹介します
ProtoPedia の作品ページの URL を送るだけで、夜のうちに紹介動画に仕上げます。対象は CC BY 4.0 の作品です。
動画をリクエストする