VRChat個人開発集会発！缶バッジ作りの魔法「CanBadge」開発秘話
詳細情報
2025年9月11日、VRChatの「個人開発集会」で、のりちゃんさんが「NT東京に出展 CanBadge開発レポート」という、なんともワクワクする発表をしてくれました！
今回は、お蔵入り寸前だったアイデアが、どのようにして多くの人を笑顔にするイベントデビューを果たしたのか、その開発の裏側と、リアルイベントでの技術の可能性について、皆さんと一緒に探っていきましょう。
開発者「のりちゃん」さんの挑戦
発表者ののりちゃんさんは、「ゆるふわプロンプトエンジニア」として、テクノロジーで世界をちょっと便利にすることをミッションに掲げている方です。
Python（Django）を駆使してWebサービスを個人開発し、販売しているとのこと。そんなのりちゃんさんが今回挑んだのは、リアルイベントでの「CanBadge」という体験型サービスでした。
きっかけは「お蔵入り危機」！？
「CanBadge」の出展のきっかけは、きなこさんからの声かけと、VketRealへの出展を逃したことによる「このままではお蔵入り」という危機感だったそうです。
皆さんも、せっかくのアイデアが日の目を見ないままになってしまうのは寂しいですよね。そんな危機感が、のりちゃんさんをNT東京への出展へと突き動かしたとのこと。この情熱が、後の成功へと繋がっていくのです！
その場で缶バッジが作れる魔法のサービス「CanBadge」
「CanBadge」は、その場でオリジナルの缶バッジが作れる体験サービスです。
ホームページ（https://canbadge.kojin.works/）も公開されています。来場者は、好きな画像を選び、それを印刷し、プレス機で加工することで、あっという間に世界に一つだけの缶バッジを完成させることができます。
どんな技術が使われているの？
この魔法のような体験を支えているのは、SvelteKitという技術スタックです。
NeverClearさんの勧めがきっかけでSvelteKitを採用したとのこと。Svelteの「代入するだけでUIが更新される」という思想が、開発をスムーズに進める上で大きな力になったそうです。まるで魔法のように画面が変化していく様子は、開発者にとっても楽しい体験だったのではないでしょうか。
画像編集の秘密
CanBadgeでは、選んだ画像を回転、拡大縮小、移動させることができます。
これはCanvas変換という技術を使って実現しているそうです。モバイルではピンチズームや2本指回転、PCではスライダーUIで直感的に操作できるとのこと。そして、最終的な出力は円形マスクでトリミングされ、PNG画像として生成されます。まるでプロのデザイナーになった気分で、自分だけのバッジをデザインできるのは嬉しいですよね。
印刷の工夫
印刷には、L判（89×127mm）用紙が使われています。
缶バッジの仕上がり直径は48mmで、CSSの物理単位でレイアウトを調整しているとのこと。管理画面から新規ウィンドウを開き、window.print()で印刷する仕組みだそうです。印刷時には「等倍」「余白なし」「ヘッダー・フッター非表示」といった細かな設定がされており、美しい仕上がりを追求するこだわりが感じられます。
リアルイベントでの試行錯誤と改善
CanBadgeは、NT東京での出展前に2回のオフ会でテストを行い、そこで得られたフィードバックをもとに改良が加えられたそうです。
ユーザーの声から生まれた改良点
L判1枚に2絵柄印刷できるようにしたり、重い画像で画面が重くなる問題に対してページネーションを導入したりと、ユーザー体験を向上させるための工夫が凝らされています。実際に使ってもらうことで見えてくる課題を、一つ一つ解決していく開発者の姿勢は、私たちも見習いたいですね。
まだまだ進化するCanBadge！
現在の課題としては、管理画面でページをまたいだ複数選択ができないことや、テザリング環境だと画像の読み込みが重くなる点が挙げられています。
これらに対しては、アップロード時の画像リサイズなどが検討されているとのこと。常に最高の体験を届けようとする、のりちゃんさんの探求心には頭が下がります。
数字で見るCanBadgeのインパクト
CanBadgeは1個500円で販売され、材料コストは1個あたり約69円（印刷39円＋パーツ30円）だったそうです。
NT東京では22個の缶バッジが作られ、売上は11,000円に達しました。粗利益は約9,480円とのこと。しかし、初期費用としてマシンとプリンターに62,750円がかかっており、実質は赤字だったそうです。それでも、この経験が何物にも代えがたい価値があることは間違いありません。
会場は大盛り上がり！
会場では、子どもから大人まで、多くの人がCanBadge作りを楽しんでくれたそうです。
完成した瞬間の満足感はひとしおで、参加者の笑顔が目に浮かびます。NT東京にはVRChat関連のブースが約7つ出展されており、ZinさんのPoE Tシャツ、よなさんのZ80、ChokuwoさんのMetamoryなど、他の個人開発集会のメンバーも個性豊かな出展で会場を盛り上げていたとのことです。
リアル体験×開発の無限の可能性
のりちゃんさんは、今回の経験を通して「リアル体験×開発は面白い！」と強く感じたそうです。
即座にフィードバックが得られ、改善点が見えるのは、開発者にとって大きな喜びですよね。NT東京は「面白いモノが集まる祭」であり、「見ても楽しい、出すともっと楽しい」という言葉が印象的でした。皆さんも次回はぜひ、遊びに行ったり、あるいは自ら出展して、このお祭りの一員になってみてはいかがでしょうか。
個人開発集会としても、また出展したいと意気込んでいるとのこと。これからも、のりちゃんさんや個人開発集会の皆さんが、どんなワクワクする体験を届けてくれるのか、今から楽しみでなりませんね！
個人開発集会の他の発表もチェック！
個人開発集会の開催情報・参加方法
個人開発集会
開催日: 2025年09月11日
開催時間: 21:00 - 22:00
開催曜日: 木曜日開催周期: 隔週(グループA)
個人開発にまつわる話でワイワイする集会です。 個人開発をやっている方も初めてみたい方も大歓迎！ 企画・技術・マーケティング・保守・運用など 技術的なことに限らない幅広い分野を想定しています。 個人開発に興味がある方はぜひ遊びに来てください！