こちらはクソアプリ Advent Calendar 2025の記事となります。
今回が初参加です。やる気しかありません。
はじめに
皆さんは悪質広告といえば何か思いつくものはありますか？
透明な広告や偽×ボタンで謎サイトに飛ばされたり...といった体験はよくありますよね。
今回はそんな悪質広告っぽいUIを集合させてゲームにしようというコンセプトで開発しました。
どんなゲームか？
ある動画サイトにたどり着いたあなたは開いた動画の再生ボタンを押したい。
だがそこに、悪質広告達が立ちふさがる！
あなたは無事に広告達を消していき、再生ボタンを押すことができるのか。
所用時間は5分くらいだと思います。
バグやレイアウト崩れはご愛敬ということでお願いします。
なおこちらはジョークWEBアプリです。色々と笑って許してもらえるといいなー
登場するうざい広告たち
ほんとは10個まで作りたかったのですが、途中で力が尽きてしまい7個の実装となりました。(さらにうち1つは実装失敗)
Entry No.1 普通の広告
×を押せば消せる普通の広告です。
Entry No.2 偽装×ボタン広告
右上の×ボタンはフェイクです。別サイトに飛ばされます。
消すときは右下の「Close ad」を押しましょう。
Entry No.3 透明広告
見えないが確かにそこにいる。1回押したら外部サイトに飛ばされたうえで消えています。
Entry No.4 ミスリード広告
ボタン配置と色が工夫された広告。ぱっと見だと「CONTINUE」の方を押したくなっちゃいませんか？
Entry No.5 カウントダウン広告
ただただ20秒待たされるだけの広告。正直いうと一番嫌いです。
Entry No.6 逃げる広告
「Close ad」が押そうとすると逃げます。見たことないですがノリでつくりました。
Entry No.7 全画面化広告(実装失敗)
透明広告と同じだが、押すと遷移先が全画面モードになるという広告を実装したかったのですが...
Fullscreen APIは「そのドキュメント内のユーザー操作」が必要という壁が高かったです。
全画面モードはサポート詐欺に使われています。
偽セキュリティ警告を出しつつ全画面モードでユーザ操作ができなくし、画面に表示させている偽サポートに電話させるという手口です。
https://www.ipa.go.jp/security/anshin/measures/fakealert.html
おまけ（開発メモ）
Windows環境で Next.js 16（App Router）+ TypeScript を用いて実装し、AWS Amplifyでデプロイしました。
WSLと所持PCの相性がいまいち良くないので、今回はWindows環境のみで開発を行いました。使い慣れたGUIツールが素直に使えるというのが楽で、エクスプローラ、画像編集、フォント確認、UI微調整とかで楽ができました。Windows開発だとデプロイが不安だったのですが、今回は特に問題なく行われました。
おまけ（感想）
チュートリアル後にさらに簡易な説明を入れた方が親切だったなーとリリース後に反省。
特にやってみたかったことが全画面モード広告だったので、これができなかったことが特に残念でした。
あとは開発期間も時間が足りず不完全燃焼。広告も増やしたかったし、クオリティももう少し早くやれば良かったですね。
要約を作る際は、博多弁で陽気な文体で書いてください。