ペットや推しキャラクター、ぬいぐるみなど「うちの子」の証明写真風画像を作れるブラウザアプリ。写真をアップロードすると背景を自動で取り除き、証明写真らしい無地の背景と枠に並べてくれる。かしこまった構図と「うちの子」のギャップが楽しい、SNS映えする1枚が手軽に作れる。
こんな場面で使える
- ペットの写真を、ちょっと笑える証明写真風にしてSNSに投稿したいとき
- 推しのぬいぐるみやアクリルスタンドで、「推しの証明写真」を作りたいとき
- 複数の写真を同じフォーマットで並べ、成長記録やコレクションとして残したいとき
主な機能
- 7枚の画像に対応: お手本となるメインの1枚と、証明写真として並べる6枚をアップロードできる。
- 自動背景除去: 写真の背景をブラウザ内のAIで自動的に取り除く。
- 位置とサイズの調整: ドラッグで位置を、スライダーで拡大率を調整し、顔の位置を揃えられる。
- 背景色とレイアウトのカスタマイズ: 証明写真らしい背景色や、枠線のレイアウトを選べる。
- 高解像度PNGで保存: 完成した画像を高解像度のPNGとしてダウンロードできる。
- Xでシェア: 作った画像をそのままX（Twitter）でシェアできる。
使い方
- お手本画像と証明写真用の画像をアップロードする。
- 背景除去が終わったら、各写真の位置と大きさを調整する。
- 背景色やレイアウトを選び、プレビューで仕上がりを確認する。
- PNGとしてダウンロードするか、Xでシェアする。
技術構成
フレームワークを使わないHTML・CSS・JavaScriptで作り、Cloudflare Pagesで配信している。画像の合成はCanvas APIで行い、背景除去にはブラウザ内で推論する@imgly/background-removalをCDNから読み込んで使う。フォントはGoogle FontsのZen Maru GothicとM PLUS Rounded 1c。背景除去ライブラリのライセンスに合わせ、プロジェクト全体をAGPL-3.0で公開している。
工夫した点
ペットや家族の写真は、できればどこにもアップロードしたくないものだ。そこで背景除去をサーバーではなくブラウザの中だけで完結させ、写真が外部に送られない設計にした。ブラウザ内でAIを高速に動かすにはSharedArrayBufferが必要で、そのためにCOOP/COEPという特別なHTTPヘッダーが欠かせない。Cloudflare Pagesの_headersファイルでこのヘッダーを設定し、ビルド工程のない静的サイトのまま実現している。7枚分の背景除去は時間がかかるので、処理中の状態を表示して待ち時間のストレスを減らすようにした。
よくある質問
無料で使えますか？
無料で、アカウント登録も不要。ブラウザでページを開くだけで使える。
写真はサーバーにアップロードされますか？
されない。背景除去も画像の合成も、すべてブラウザの中で処理している。
どんな写真だときれいに仕上がりますか？
背景と被写体の色がはっきり分かれていて、顔が正面を向いている写真ほどきれいに切り抜けて、証明写真らしく仕上がる。
背景除去に時間がかかるのはなぜ？
初めて使うときに、背景除去用のAIモデルをブラウザにダウンロードするため。さらに最大7枚分を端末の中で処理するので、端末の性能によっても時間が変わる。
