🐚

【個人開発】ポケモンWordleを作った一週間の日記

2022/02/04に公開約4,600字

はじめに

ポケモンWordleというブラウザゲームを作りました。

https://wordle.mega-yadoran.jp/
2022年2月現在、全世界で大流行中の英単語当てクイズゲーム「 Wordle 」を、ポケモン版としてアレンジしたゲームです。

ルールなどについてはファミ通.comが詳しく解説してくださっているので、そちらをご覧ください。

https://www.famitsu.com/news/202201/31249716.html

そして、ポケモン公式関係者の方々、名前を勝手に使って本当にごめんなさい。
ポケモンWordleには広告も何もつけていないので利益は1円も発生していないのですが、それでも無許可で使用しているのは褒められたことではないのを自覚しております。ごめんなさい。
急にサイトが消えたら察してください。

(僕自身は家にヤドンが大量発生するくらいポケモンというコンテンツが本当に大好きです)
ヤドンタワー

そんなポケモンWordleですが、技術的には全く大したことをしていません。ただ、自分なりに工夫した点はたくさんあります。
なので技術的なことにはほとんど触れませんが、その時の自分が何を考えていたのかを後から見返せるように、日記という形でこの記事を残しておこうと思います。

0日目 (1/18 ごろ) 思いついた日

1月の中頃、Twitterのタイムラインで友人がツイートしていた「謎の四角い絵文字の羅列」を見たのが始まりです。本家Wordleの結果投稿ツイートですね。

なるほど単語当てゲームか、とプレイしてみると「これは面白い!!」と感動しました。

日本語のバージョンはあるのかな?と思って検索してみると、既に作られた方が。

https://aseruneko.github.io/WORDLEja/

こちらもプレイしてみると、面白いのですが…めちゃくちゃ難しい。
アルファベットが26文字なのに対し、日本語は清音・濁音・半濁音・拗音・長音を合わせて81文字。
しかし、それだけではない難しさも感じました。それは、

入力はひらがななのに、答えが漢字・カタカナ・ひらがなのどれになるかわからないのでイメージしづらい
という点でした。

ということは、「答えをカタカナ・ひらがなのどちらかで限定できるようなワードで絞ればもっとゲーム性が増すのではないだろうか?」と考えました。
そして、5文字という長さ。
そこでひらめいたのが「ポケモンの名前」との組合せでした。

早速「Wordle ポケモン」で検索します。日本語版はどうやらない様子。
それどころか、「ポケモンの名前」のような何らかのテーマを設定した日本語Wordleがほとんど見当たりませんでした。
「これはイケるかも」とそのとき感じました。

すぐにでもこのアイデアの実現に取り掛かりたかったのですが、当時、後に出てくる社内コンペの発表会が間近に迫っていました。
発表の準備が終わり次第すぐに着手しようと心に決めました。

1日目 (1/24) テストプレイ

社内コンペの資料準備が終わり、まず最初にしたことは「本当に面白いかどうか」を確かめるためのデモツール作成でした。
Excelの条件付き書式を使うと、いとも簡単に作成できてしまいました。Excelはすごい。
デモツール
(↑そのときのデモツール)

このデモツールで友人と一緒にテストプレイしてみて、いくつかのことがわかりました。

  • 面白いが、かなり難しい
  • 本家Wordleと同じ6回以内で答えを導き出せるかどうかは、問題運によってかなり左右されてしまう(なかなかヒットしないポケモンがお題になったら本当にヒットしない)
  • ドマイナーなポケモンが出てくると、答えを見ても「うーん…」ってなりそう

以上を踏まえて、たくさんの人に遊んでもらうにはルールの調整が必要だなと感じました。
そこで考えたルールが、

  • 12回まで回答可能にする
  • 4文字以下のポケモンでも入力可とする
  • 出題範囲を「ダイヤモンド・パール」までのポケモンに限定する

というものです。とにかくたくさん答えて絞れるようにした、という単純な発想です。
ちなみに上記は記事執筆時の「今日のお題」のルールほぼそのままですね。(12 -> 10回に変更のみ)
出題範囲は自分の周りでの認知度を軽く調査して、知ってる人が多そうな範囲で選定しました。
ちょうどダイパリメイクやレジェンズアルセウスの発売が近かったので、良いタイミングかなと思いました。

2~4日目 (1/25~27) 実装開始

次の日から仕事終わりにコツコツと作る作業が始まります。
Wordleという既にUIが完成しているゲームを模倣するので、実装はかなり楽できました。
最初のモック
最初に作った画面のモックがこんな感じ。今とはキーボードの向きが左右逆でした。
ちなみに構成は Vue+Vuetify のフロントエンド完結アプリです。
Vuetifyはすごい。CSSを全く書かずにそれなりのUIが作れちゃいます。

5日目 (1/28) 作業中断/社内コンペ

この日作業は一旦中断して、社内コンペ発表会に参加しました。
社内コンペといっても堅苦しい雰囲気のものでは全くなく

  • とりあえず何か動くアプリをつくる
  • テーマ・完成度不問
  • 優勝賞品はMacBook Pro

という夢のようなコンテストです。

僕は 馬券画像ジェネレーター というWebツールを発表しました。割とウケました。
他にも弊社代表がファミコンの実機で動くゲームを発表したりと、とても楽しいイベントでした。

6~7日目の朝 (1/29 ~ 30) 作業の鬼

この日のお昼頃から本格的に作業に集中し、翌日の朝7時頃までぶっ通しでコーディングし続けました。ランナーズハイのような状態でした。
ここまでで「今日のお題」モードの実装が完了し、あとは「遊び方説明」と「ツイート共有機能」を付けるのみとなりました。
「よし、一旦寝て起きたら作業再開しよう。多分今日中にはリリースできるだろう」
と思い、ベットに就きました。
起きたら衝撃の事実が待っていました。

7日目 (1/30) リリース

お昼の12時頃に目が覚めました。
起きてすぐに日課となった「Wordle ポケモン」の検索をすると…
なんと、前日のお昼ごろに別の方が全く同じコンセプトのゲームをリリースしているではありませんか。

ビビりました。マジで。
「まずい。完全に先を越された」
ちゅうさんが作られた Pokedle ではアニメーションが本家に近いものが再現されており、しかも物理キーボード・フリック入力に対応。
一瞬、本当に頭が真っ白になりました。

「こうなったら、先駆者の方には申し訳ないけど、あちらにはない機能をつけて差別化するしかない…」
こうして「エンドレスモード」の実装が始まりました。

ここからはもう意地でした。
「多少のバグは仕方ない。最低限の通常動作ができればよい」と自分に言い聞かせ、実装速度を最優先して機能を追加していきました。
お昼の12時~夕方の18時頃までの約6時間で

  • ローカルストレージへのセーブデータの保存
  • 遊び方説明パネル
  • ツイート共有機能
  • エンドレスモード

これらを実装しました。
そして、リリースを迎えます。
リリース直後はTwitterの通知が気になりすぎて他のことが手につかない状態になってしまい、これはいかんということで、電子端末をすべて家に置いてしばらく外に出かけることにしました。

2時間ほど外をブラブラしてから帰宅し、リリース告知ツイートを見てみると、20RT。
「まあ、そんなもんか。そりゃそうだよな」
こうしてリリースまでの一週間が終わります。

工夫したところ

ツイート共有機能

ゲーム画面から共有ボタンでかんたんにツイートできるようにしていますが、その文面に「ハッシュタグ」と「URL」は絶対に入れないといけないだろうと思って入れました。
そんなこと当たり前だと思うかもしれませんが、実は本家Wordleの共有機能で生成される文面にはハッシュタグもURLも載っていません。
これが「謎の四角い絵文字の羅列」として話題を呼んだのは間違いないと思いますが、正直、そのシステムでここまで拡散されたのは奇跡だと思っています。
(それほどまでにWordle自体のゲームシステムが素晴らしいということだとも思います)

ランダムだけど、ランダムじゃない

リリース日から記事執筆前日までの「今日のお題」のポケモンを順に記載すると

  1. コイキング
  2. キングラー
  3. エアームド
  4. ドクロッグ
  5. ビリリダマ

となっています。ランダムに問題を選んでるように見せかけて、実は最初の数日間は有名なポケモンが続くように意図的に操作しました。
方法は至って簡単で、ランダムにお題を生成するシードを200個くらい適当に作り、その中から最初の5番目までがいい感じに有名どころで固まっているものを採用しただけです。

なぜそんなことをしたのかというと、せっかくプレイしてもらえても「残念!答えは『ケイコウオ』!」ってなったら多分共有してくれないだろうな、と思ったからです。
(ケイコウオファンの人、ごめんなさい)

この作戦が功を奏したからか、無事に問題が解けたたくさんの方にTwitterで共有していただけました。

最後に

ここまで個人開発のどうでもいい開発裏話に付き合っていただきありがとうございました。
3年前に上司から言われた、個人開発における金言を1つ紹介します。

流行にイチ早く乗っかれるよう、常日頃から手を早く動かす訓練をしておけ

本当にそう思います。

この記事を書いている間にポケモンWordleの新しいゲームモードを思いついたので、僕は更新作業に戻ります。
それでは!

Discussion

ログインするとコメントできます