Snapchat Web Lensesを使えば、普通のHTML5ゲームのビルドをzipにまとめて、SnapchatのLens（レンズ）として公開できます。最初のユースケースはゲームで、機能はベータ版です。どのWebフレームワークでも使えますが、SnapはPlayCanvasを推奨しており、ドキュメントでも全面的にPlayCanvasを使っています。Lens Studioを開く必要は一切ありません。
PlayCanvasは2026年10月23日にこの対応を発表し、同時に最初の4本のゲームがすでに公開されています。このガイドでは、Web Lensとは何か、ビルドが満たすべき厳格な制限、Web Lens APIでできること、そしてWebビルドから、名前やSnapcodeでプレイヤーが見つけられるゲームになるまでの実践的な5ステップを解説します。
Snapchat Web Lensesの概要
| 概要 | zipにパッケージしてSnapchatのLensとして公開するWebアプリ |
| 対応環境 | iOS版・Android版Snapchat |
| 画面 | 全画面の縦向き、9:16（横向きは非対応） |
| エンジン | どのWebフレームワークでも可。SnapはPlayCanvasを推奨 |
| パッケージサイズ | zipは最大8 MB、zipのルートに置くindex.htmlは最大1 MB |
| ランタイム | WebAssembly（マルチスレッド含む）、Web Workers、eval()に対応 |
| サンドボックス | ネットワーク、カメラ、マイク、モーションセンサーは使用不可 |
| Snapchatの機能 | Web Lens API経由でリーダーボード、Bitmoji、Storage |
| ステータス | ベータ版。仕様は変更される可能性あり |
Webゲーム開発者が注目すべき理由
Snapの2026年第2四半期決算によると、Snapchatは毎月9億7100万人に利用されており、Snapは同社のGame Lensesが毎月1億7500万人以上に遊ばれていると報告しています。Web Lensesなら、アプリストアへの掲載もインストールもなしに、Web開発者がこの巨大なユーザー層にリーチできます。プレイヤーは普段Lensを試すのと同じ感覚でゲームを起動します。
最初の開発者たちが公開した初期の数字から、どれだけの可能性があるかが見えてきます。
| ゲーム | スタジオ | ジャンル | 開発者の報告 |
|---|---|---|---|
| Bloom | NOWWA | 癒やし系ガーデンパズル | 1セッション平均約260秒、翌日に戻ってくる人が約30% |
| Ball Smasher | MetaM | ストリートバスケットボールシューター | 数時間でプロトタイプ完成、数日で数百万プレイ |
| Snake Showdown | Elanra Studios | スネークバトル | 最初の4週間で180万人のプレイヤーが700万回プレイ |
| Bitmoji Ski | Snap | スキーアーケード | 1日で制作、1日600万インプレッション |
収益化については、SnapのLens+ Payoutsプログラムを使うと、条件を満たすクリエイター（18歳以上、対象国在住）がLensをLens+およびPlatinumの加入者限定に設定し、エンゲージメントに応じた収益分配を受けられます。さらにSnapは、オリジナルのWeb Lensゲームの企画を開発資金つきで募集しており、リーダーボードのようなソーシャルなループを軸にしたゲームを優先しています。
ビルドが守るべきルール
アップロードが却下される原因の多くは、ごく少数のパッケージングミスです。ゲームのコードを書く前に、これらを押さえておきましょう。
- 縦画面のみ。 Lensは9:16の全画面で動きます。カメラ、HUD、ボタンは最初から片手操作を前提に設計しましょう。
- zipは8 MB以下。 この制限は圧縮後のアップロードに適用されます。目標ではなく上限と考えてください。zipが小さいほど読み込みが速く、最初に遊べるまでの時間が何より重要です。
index.htmlはルートに置き、1 MB以下に。 ビルドフォルダそのものではなく、フォルダの中身をzipにします。index.htmlは軽いエントリーポイントにとどめ、バンドル全体や大きなdata:URLをインラインで埋め込まないようにします。- パスはすべて相対パスに。 HTMLでも実行時の
fetch()呼び出しでも、/a/game.jsではなく./a/game.jsを使います。Viteならbase: './'を設定します。 - zip内のパス区切りはスラッシュに。 WindowsのPowerShellの
Compress-Archiveはバックスラッシュで書き込むため、パスが壊れます。エクスプローラーの「ZIPファイルに圧縮する」、zip -r、またはarchiverパッケージを使ったNodeスクリプトで作成し、unzip -lで確認しましょう。
サンドボックス：Web Lensにできないこと
Web Lensは自己完結型です。ネットワークにアクセスできず、カメラやマイクも使えず、モーションセンサーも読めません。また、localStorageとIndexedDBは起動のたびに空の状態から始まります。実際には次のような意味になります。
- スクリプト、モデル、テクスチャ、フォント、サウンドはすべてzipに同梱する必要があります。
- アナリティクスの送信、リモート設定、オンラインマルチプレイのバックエンドは使えません。
- 進行状況はWeb Lens APIのStorage機能で保存する必要があります。
Web Lens API：リーダーボード、Bitmoji、ストレージ
SnapのAPI（npmパッケージ@snap/web-lens-api）がゲームとSnapchatをつなぎます。起動時にinit()を一度呼び、各機能を使う前にisSupported()で確認します。Snapchatの外、つまりパソコンやローカルの開発サーバーでは、APIは組み込みのスタブがサンプルデータで応答するので、スマホなしでも開発できます。ただし、機能が使えない場合でもゲームが遊べる状態を保つようにしましょう。
| 機能 | できること | 注意点 |
|---|---|---|
| リーダーボード | スコアを送信し、Snapchat純正のリーダーボード画面を開く | スコアは整数のみ。タイムアタックは昇順を使う。スコアを抜かれたときに友だちへ通知が届くことがある |
| Bitmoji | プレイヤーのBitmojiを、リグ付き3D GLBまたは2Dの胸から上の画像として読み込む | URLは約5分で失効。Bitmojiにアニメーションは付属しない。デフォルトのキャラクターを必ず同梱する |
| Storage | プレイヤーのアカウントに紐づく小さなキーバリューストア | 各値は最大32 KiBのJSON、1つのLensにつきプレイヤーごとに合計100 KiB。進行が変わったときとページが非表示になったときに保存する |
良いリーダーボードは、正確さ、速さ、生存時間など、プレイヤーが伸ばしたくなる要素を評価し、もう一回挑戦するのをワンタップで済ませます。進行状況の保存も同じくらい考える価値があります。セッションをまたいで残すべきもの（ベストスコア、解放したステージ）と、リセットしても問題ないものを決めておきましょう。
Webビルドから公開まで5ステップ
- ワークフローを選ぶ。 PlayCanvas Engineを使った通常のJavaScriptプロジェクト（AIコーディングアシスタントとの相性が抜群）を
npm create playcanvas@latest my-lens -- --starter web-lensで作るか、ブラウザで動くPlayCanvas Editorを使います。EditorはEditor MCP Server経由でAIアシスタントと連携できます。スターターには、縦画面レイアウト、セーフエリア、相対パス、パッケージング、Web Lens APIの設定が最初から組み込まれています。 - PlayCanvas Skillsを追加する（任意）。
npx skills add playcanvas/skillsを実行すると、対応するAIコーディングエージェントが、PlayCanvasでのシーン、アニメーション、HUD、エフェクトの組み方を覚えます。 - スマホ向けにビルドする。 Snapchatは上部付近に独自の閉じるボタンを表示するので、HUDは
env(safe-area-inset-*)の内側に収めます。動きは経過時間に応じてスケールさせ（多くのスマホは120 Hzで動作します）、オーディオはユーザー操作をきっかけに開始し、Lensが非表示になったら一時停止します。エンジンのクラスは名前を指定してimportし、バンドラーが未使用コードを削れるようにします。テクスチャは圧縮し、ソースマップは含めません。 - APIを組み込む。 ゲームオーバー時にスコアを送信し、必要ならBitmojiを読み込み、Storageで進行状況を保存します。
- パッケージ化、アップロード、申請。 スタータープロジェクトでは、
npm run packageでビルドし、Snapのルールに沿っているかzipをチェックできます。その後My Lensesにサインインし、Web Lensを作成してzipをアップロードし、名前、512 × 512のPNGアイコン、5秒間の720 × 1280プレビュー動画を追加します。審査を通過すると、プレイヤーは名前やSnapcodeでゲームを見つけられるようになります。
コードを書きたくない場合は、SnapのAI Lens作成ツールEasy Lensが、テキストのプロンプトからPlayCanvasベースのWeb Lensゲームを作れるようになりました。Easy Lensのweb版で、Lens+の加入者が利用できます。
Web Lensに向いているゲームは？
| 向いている | 向いていない |
|---|---|
| 片手で遊べるアーケード、パズル、スコアアタック | 横画面やキーボード・マウス前提のゲーム |
| 短いセッションとすぐにやり直せる設計 | サーバーに依存する長時間のセッション |
| 小さく圧縮されたアセット | 実行時の大容量アセットのダウンロード |
| リーダーボードで競う仕組み | リアルタイムのオンライン対戦 |
まずは起動から遊べるまでが短い小さなプロジェクトから始めましょう。タッチ操作、画面端、オーディオ、一時停止、リスタートは実機のスマホでテストし（npx vite preview --hostを使えば、スマホのブラウザでビルドを開けます）、プラットフォーム固有の変更はすべてメモしておけば、後のアップデートで元に戻してしまうのを防げます。
公式の詳細は、SnapのWeb Lensesドキュメント、プラットフォーム要件、PlayCanvasの発表記事をご覧ください。
よくある質問
Snapchat Web Lensとは何ですか？
Web Lensは、SnapchatのLensとして動くWebアプリです。Web技術で作り、ビルドをzipにしてMy Lensesからアップロードします。Lens Studioは必要ありません。
PlayCanvasを使わなければいけませんか？
いいえ。どのWebフレームワークでも使えますが、SnapはPlayCanvasを推奨しており、ドキュメントではPlayCanvasとViteの組み合わせを使っています。
Web Lensのゲームはどのくらいの大きさまで作れますか？
圧縮後のzipは最大8 MB、そのルートにあるindex.htmlは最大1 MBです。これはベータ版の制限なので、アップロード前に最新の要件を確認してください。
Web Lensでインターネットやマルチプレイサーバーは使えますか？
いいえ。Web Lensはネットワークにアクセスできないため、アセットはすべて同梱する必要があり、オンラインマルチプレイのバックエンドは使えません。その代わり、リーダーボードはWeb Lens API経由で利用できます。
プレイヤーの進行状況はどう保存しますか？
Web Lens APIのStorage機能を使います。通常のブラウザストレージは、Lensを開くたびに空の状態から始まります。
Web Lensのゲームで収益を得られますか？
条件を満たすクリエイターはLens+ Payoutsに参加でき、Lens+およびPlatinumの加入者限定に設定したLensの収益分配を受けられます。また、Snapは資金提供つきのゲーム企画も受け付けています。
