「てまぬい」とは手縫いで作るぬいぐるみのこと。てまぬい図鑑ジェネレーターは、大切なてまぬいの紹介カードを図鑑風のデザインで作れるWebアプリだ。写真をアップロードしてテキストを入れるだけで、SNSに投稿しやすい1280×960pxのカード画像が完成する。手作り作家のコミュニティから依頼を受けて制作した。
こんな場面で使える
- 自分で縫ったてまぬいを、プロフィールカードのように紹介したいとき
- イベントや交換会で、うちの子の「出会い」や「チャームポイント」をまとめて見せたいとき
- 作品の記録として、写真と説明文を同じフォーマットで残しておきたいとき
主な機能
- 写真のトリミング: ピンチやドラッグで拡大・移動し、カードの写真枠にぴったり収まるよう調整できる。
- AI背景除去: ブラウザ内で写真の背景を自動で取り除き、てまぬいだけを切り抜いてカードに配置する。オフにして元の写真のまま使うことも可能。
- 3つのテキスト欄: 「出会い」「特徴」「アピールポイント」を入力すると、それぞれの枠の中央に自動で配置される。
- 7種類のフォントと文字装飾: 「まる」「ぽわぽわ」「てがき」「すっきり」「ふんわり」「レトロ」「ポップ」から、てまぬいの雰囲気に合わせて選べる。太字・文字サイズ（小・中・大）・文字色も変更可能。
- PNG書き出し: 完成したカードを1280×960pxの高解像度PNGとして保存できる。
使い方
- てまぬいの写真をアップロードし、「次へ：写真を調整」に進む。
- 写真の位置と大きさを調整し、「次へ：文字を入力」に進む。
- 出会い・特徴・アピールポイントを入力し、フォントや文字色を選ぶ。
- カードを生成したら、PNGとして保存するかXでシェアする。
技術構成
フレームワークやビルドツールを使わない、HTML・CSS・バニラJavaScriptだけの静的サイトで、Cloudflare Pagesから配信している。カードの描画はCanvas APIで、プレビューと書き出しを同じ描画関数で処理しているため、画面で見たままの仕上がりで保存できる。背景除去には@imgly/background-removalを使い、必要になった時点でCDNから読み込む。
工夫した点
背景除去のAIモデルはブラウザの中で動くので、写真がサーバーに送られることはない。大切な作品の写真を安心して扱えるようにしたかった。ただしこの方式にはSharedArrayBufferが必要で、そのためにCOOP/COEPという特別なHTTPヘッダーをCloudflare Pagesの_headersで設定している。テンプレート画像の写真枠やテキスト枠の座標は、専用のキャリブレーションツールをクリックするだけで測り直せるようにし、デザイン変更にも素早く対応できるようにした。スマホでも操作しやすいように、4つのステップに分けた画面構成にしている。テンプレート画像は@metewo_shooting氏によるもの。
よくある質問
無料で使えますか？
無料で、アカウント登録も不要。ブラウザでページを開くだけで使える。
写真はサーバーに送られますか？
送られない。背景除去もカードの作成も、すべてブラウザの中で処理している。
背景除去に時間がかかるのはなぜ？
初めて使うときに、背景除去用のAIモデルをブラウザにダウンロードするため。処理は端末の中で行うので、端末の性能によっても時間が変わる。
背景がうまく消えないときは？
背景と被写体の色がはっきり分かれた写真ほどきれいに切り抜ける。うまくいかない場合は背景除去をオフにして、元の写真のまま使うこともできる。
