初日50万アクセスのバズった画像メーカー、サーバー代0円
キュピーンってなってる動物の画像を簡単に作れるWebサイト作った
バズってから慌ててサーバー増強した、みたいな話ではない。そもそもサーバーがない。
構成：サーバーが「ない」
このアプリにはバックエンドサーバーがない。APIもDBもない。ユーザーがアップロードした画像はどこにも送信されない。背景除去も画像合成も、全部ブラウザの中で完結する。
超シンプルな構成でVite + TypeScriptでビルドした静的ファイルをCloudflare Pagesに置いているだけ。Reactすら使っていない。バニラTSとCanvas API。
サーバーは静的ファイルを配信しているだけで、画像データには一切触れない。
ブラウザで動くモデル
中身はONNX Runtime Web。ONNX形式のAIモデルをWebAssemblyやWebGPU上で動かすランタイムで、要するにサーバーなしでユーザーの端末上で推論が走る。初回アクセス時にモデル（約40MB）をダウンロードしてキャッシュ、2回目以降は即推論開始。
スマホのメモリ制約には、処理サイズを1024px → 768px → 512pxと自動フォールバックさせて対応した。MacBookでもiPhone SEでも落ちない。
画像を保存しないということ
画像がサーバーを通らないので、プライバシーもセキュリティもストレージも全部考えなくていい。
個人情報 → 何も取らないので管理しないでいい。安心
セキュリティ → 何も保管してないので取られようがない
ストレージ → 保存しないので何も課金されない
ペットの写真とはいえEXIFにGPS座標が入ってたり、普通に顔写真を上げる人もいる。画像アップロード機能はWebアプリの脆弱性ランキング常連だし、保存したら保存したでいつ消すかの設計もいる。データを持たなければそういうのを全部スキップできる。個人開発でこれはありがたい。
なぜCloudflare Pagesか
帯域幅が無制限で無料。これに尽きる。
50万アクセス × 約2MB = 約1TBの転送量。これを各プラットフォームで捌いた場合：
Vercelでやってたら$360（約5.4万円）の請求が来てた。同じ静的サイトを置いてるだけでこの差が出る。
WebP / PNGフォールバック
背景画像はWebP（約80KB）を優先し、非対応ブラウザではPNG（5.6MB）にフォールバックしている。WebPは元の1.4%のサイズ。50万ユーザーだと、全員PNG配信なら背景画像だけで2.8TB、WebPなら40GB。差は2.76TB。Cloudflareが無制限とはいえ、ユーザーの読み込み速度にも直結するので、ここはケチらずやっておいてよかった。
もしサーバーで処理してたら
仮にサーバーサイドで背景除去をやる設計だったら。50万アクセスのうち20%（10万回）が画像処理を実行したとして、AWS Lambda + S3で試算する。AIにドンブル勘定してもらおう。
1日で$115、約¥17,000。バズりが3日続けばその3倍。しかも画像を保存し続けるならストレージコストが毎月積み上がる。個人開発で突然この請求が来るのは普通に怖い。
つまり今回の肝は
- AI処理をONNX Runtime Webでブラウザに寄せた → サーバーの計算コストゼロ
- 画像をサーバーに保存しない → セキュリティ・ストレージの問題が起きない
- Cloudflare Pagesにデプロイ → 帯域幅無制限で無料
この3つで「バズっても壊れない、課金されない」が成立した。
UI的に良かったのはシンプルだったことだと思う。変にアスペクト比を変更できたり、明るさを変えられるようにしなかった。回転・位置調整だけ。背景もいじれないから全員のフォーマットが揃って見やすい。そして引用とリプが楽園になった。
ということで、アイディアの元になったむちゃまるさんのポストで締めたいと思います。
Want to publish your own Article?
Upgrade to Premium