概要

「広告が多すぎるサイトって、どこまで作れるんだろう」という思いつきから、100万個の広告を並べたサイトを作りました。

現時点でこのサイト単体で 950円 の収益が発生しています。

この記事では、100万個の広告をどうやってブラウザに表示したのか、その技術的な工夫についてまとめます。

課題：100万個の広告をそのまま表示するとブラウザが死ぬ

最初は「広告を100万個並べれば完成じゃん」と考えていました。当然ながら、HTMLに100万個配置すると以下の問題が発生します：

何も工夫しないと、サイトを開いた瞬間にブラウザがクラッシュします。

採用した手法は 仮想スクロール（Virtual Scrolling） です。

シンプルに言うと、「見えている範囲だけ表示する」だけです。

[画面外 - 削除] [画面外 - 削除] [表示中] [表示中] [表示中] [画面外 - 追加予定] ...

結果として、100万個の広告が存在しているように見えますが、実際にDOM上に存在するのは表示範囲の約10倍程度 です。

ブラウザのレンダリングコストはDOMノード数に大きく依存します：

仮想スクロールでDOM上の要素数を常に数十〜数百に抑えることで、これらの処理コストを実用的なレベルに保ちます。

これにより、100万個の広告がありながら、かなり軽快にスクロールできます。

広告配信には 忍者AdMax を使用しました。

サービス	審査	導入の容易さ
Google AdSense	厳しい	審査通過後に利用可能
忍者AdMax	なし	登録後すぐに利用可能

思いつきで作ったネタサイトでも、審査なしですぐに広告を掲載できる点で忍者AdMaxが適していました。

現時点の収益：950円

「こんなサイトでも収益が発生するんだ」というのが一番の驚きでした。大きな収益ではありませんが、技術デモ兼ネタサイトとしては十分面白い結果です。

このプロジェクトを通じて得られた技術的知見：

「面白そう」と思ったら、とりあえず作ってみることの大切さを実感しました。ネタから始まっても、得られる技術的知見は本物です。

デモサイト: 日本一（たぶん世界一）広告が多いサイト

スクロールすると広告が延々と出てきます。ぜひ遊んでみてください。

もし変なアイデアを思いついたら、とりあえず作ってみるのがおすすめです。