じゃんけんに勝たないと記事を読ませないツール『Janken Gate Pro』をChatGPTと一緒に作ってみた

この記事を開く前に、まずはじゃんけんで遊んでもらいました。
勝ち抜けてここまで来てくれてありがとうございます ✋✌✊

今回は、そんな「じゃんけんで勝たないと記事を読ませない」ちょっと意地悪でちょっと可愛いツールを、ChatGPTの力を借りながら自作してみた話を書いてみます。

今回作ったプログラムの名前

今回作ったツールの名前は、ちょっとカッコつけて、

『Janken Gate Pro（じゃんけんゲート・プロ）』

と名付けました。

• 記事を読む前に、全画面にじゃんけんのUIが出てくる
• 勝たないと本文が解放されない（ただし何回でも挑戦OK）
• SVGアイコン＋モダンなアニメーション＋効果音付き
• 記事ごとに「オン／オフ」を切り替え可能

という、遊び心全開の WordPress 向けミニツールです。

きっかけ：コードが書けなくても「こういうの欲しい」が形になる時代

正直に言うと、僕は「じゃんけんゲートをゼロからPHPで書ける人間です！」というタイプではありません。

• ふだんからガチガチに PHP を書いているわけでもない
• JavaScript も「なんとなく見たことはある」レベル
• アニメーションやSVGアイコンなんて、デザイン面も含めるとかなりハードルが高い

プログラムコードなんて書けません。

…そんな僕でも、ChatGPT に相談しながら少しずつ組み立てていったら、ここまでのものが普通に動いてしまった、というのが今回の体験です。

実際にできたこと（機能のざっくり紹介）

『Janken Gate Pro』は、今のところこんな動きをします。

1. じゃんけんゲート機能

• 記事を開くと、画面いっぱいにじゃんけんのオーバーレイが出てくる
• グー・チョキ・パーのアイコンが、最初からくるくる回転アニメーション
• 効果音も「待機」「勝負」「勝ち」「負け」「あいこ」で鳴り分け
• ユーザーがどれかを選ぶと回転＆ループ音が止まり、CPU の手と勝負
• 勝つと派手な演出（花火のようなアニメーション＋明るいサウンド）→ 記事が解放
• 負けても何度でも再チャレンジOK（最終的には誰でも読める）

2. 管理画面からオン／オフを柔軟に切り替え

• 「設定 → じゃんけんゲート」に専用ページ
  • サイト全体ですべての記事に適用
  • もしくは「個別記事でオンにしたものだけ適用」を選べる
• 各記事の編集画面（ブロックエディター／クラシックどちらでもOK）に
  「じゃんけんゲート」メタボックスが出てきて、
  • デフォルト通り
  • この投稿だけ強制オン
  • この投稿だけ強制オフ
    を切り替えられます。

3. SEO・ユーザー体験についての注意書きも

全画面オーバーレイは、Google のガイドライン上「邪魔なポップアップ」とみなされるリスクがあるので、管理画面の説明に、

• SEOへの影響が出る可能性があること
• 重要な記事ではオフにする運用がおすすめなこと

も書いておきました。

「遊び心」と「検索対策」の両立はとても大事なので、このあたりも AI と相談しながら設計しています。

コードを書けなくても「AI＋自分のアイデア」でここまでできる

今回あらためて感じたのは、

「プログラムコードを自力で全部書けなくても、
アイデアと要望を言葉にできれば、AIと一緒にツールを作れる」

ということです。

もちろん、まったくの丸投げではなくて、

• 「こういう動きはちょっと違う」
• 「ここは色を変えたい」
• 「ここはもっとユーザーに優しく（or 意地悪に）したい」

といった自分のこだわりをどれだけ細かく伝えられるかが大事になってきます。

でも、逆に言えばそれだけです。
昔だったらエンジニアさんにお願いしないといけなかったものが、今は自分とAIだけでプロトタイプまで作れてしまう時代になりました。

もしあなたもやってみたいなら

もしこの記事をここまで読んで、

「自分もなんかこういう変な（？）仕掛けをサイトに入れてみたいな」

と思ったなら、ぜひトライしてみてほしいです。

やることはざっくりこの3ステップ

1. 「こんなことがしたい」をできるだけ具体的に文章にする
   • 例：「アンケートに答えたら記事が読めるようになる仕組みが欲しい」
     「クイズに正解したら次のページに進める、みたいなミニゲームを作りたい」など
2. その文章を丸ごと ChatGPT に投げる
   • 「PHPコードにして」と伝える
   • 気に入らない部分は「ここをこう変えて」とどんどん追記していく
3. 自分のサイトに実装して、実際に触りながら微調整する
   • デザインや文言は、自分のキャラに合わせて変えていく

これだけです。

まとめ：AIは「プログラマーの代わり」というより「共同制作者」

今回の『Janken Gate Pro』は、
「コードを書くのはAI」「アイデアとわがままは自分」
という役割分担で生まれたツールです。

• 自分ひとりでは絶対にここまで作れなかった
• でも、ChatGPTに「もっと可愛く」「もっと意地悪に」「もっと派手に」と注文を重ねていくことで、
  だんだん“自分らしいツール”になっていく

そんな感覚がすごく面白かったので、この記事もじゃんけんゲート越しに公開してみました。

もしこの記事を読んで「ちょっとやってみようかな」と思ってもらえたなら、
ぜひあなたのアイデアでも AI をこき使って（？）、
自分だけの仕掛けやツールを作ってみてください。

そして、もし『Janken Gate Pro』のようなじゃんけんゲートを自分のサイトにも入れてみたい方がいれば、
この記事をきっかけに、ぜひチャレンジしてみてくださいね ✊✌✋