MATSUTOMODEVMDV-001

matsutomo=# \c matsutomo.dev

Mmatsutomo.dev
相談する商品ゲーム
ログイン
← 記事一覧へ戻る
MATSUTOMODEVLOG
matsutomo=# \x on-- published 2026-09-24
2026年9月24日無料X でシェア

イラストを入れるだけで、アイロンビーズの図案ができる道具「粒 TSUBU」を作った

画像を取り込むと、アイロンビーズの図案・必要な粒数・印刷用の紙までまとめて作れる単一HTMLの道具「粒 TSUBU」の制作記。

アイロンビーズで好きなキャラクターや絵を作ろうとすると、最初にぶつかるのが「図案づくり」です。

方眼紙にマスを塗って、色を決めて、何色が何粒いるか数えて……。作るより前の準備に、けっこうな時間がかかります。

そこで、画像を1枚入れるだけで、図案・必要な粒数・印刷用の紙まで一気に作れる道具を作りました。名前は「粒 TSUBU(つぶ)」です。

できること

  • 画像から図案を自動で作る:イラストや写真を読み込むと、ビーズの粒の図案に変換します。ドラッグ&ドロップや貼り付けにも対応。ドット絵やブロック風のキャラも、そのまま図案にできます。
  • 背景を自動で消す:イラストの白い背景は自動で取り除きます。絵の内側の白(目の光など)は残します。
  • 必要な粒数を色ごとに数える:「グレー 70粒、あお 32粒……」と、準備するビーズがひと目で分かります。
  • 1マスずつ手直しできる:ペン・消しゴム・塗りつぶし・スポイト。色をまとめて別の色に置き換えることもできます。
  • A4・A5で印刷:マスに記号が入るので、白黒印刷でも作れます。大きな図案はプレートごとのページに自動で分けます。
  • 原寸印刷:1マス5mmで印刷すれば、透明なプレートの下に敷いてそのまま並べられます。
  • 図案ライブラリ:作った図案は、小さな画像つきの一覧でアプリの中に保存できます。

使い方は3ステップ

  1. 画像を開く(またはドロップ)
  2. 大きさ(よこの粒の数)と、使う色の数を決める
  3. 必要なビーズを確認して、印刷する

プレート1枚(29×29)ならできあがりは約14.5cm角。大きさを変えると、プレートが何枚いるか、できあがりが何cmになるかもすぐに表示されます。

こだわったところ

「人の目で見て近い色」を選ぶ

画像の色を、手持ちのビーズの色に置き換えるとき、単純にRGBの数値が近い色を選ぶと「数字は近いのに、見た目は違う」ということが起きます。

粒 TSUBU では、人の目の感じ方に近い色の物差し(Lab色空間)で「いちばん近い色」を選んでいます。

イラスト向けは「多数決」で色を決める

イラストを小さくすると、輪郭のまわりに中間色がにじみます。平均をとると、ぼやけた色のビーズが増えてしまいます。

そこで「イラスト向け」モードでは、1マスの中でいちばん多く使われている色を採用するようにしました。くっきりした図案になり、使う色の数も減ります。写真のようなグラデーションには「写真向け」モード(ディザ対応)を用意しています。

背景は「外側からだけ」消す

背景を消すとき、白を全部消すとキャラクターの目の光まで消えてしまいます。

粒 TSUBU は、画像のふちから同じ色が続いている部分だけを背景とみなして消します。囲まれた内側の白は残るので、手直しの手間が減ります。

色数を絞れる

子どもと一緒に作るときは、色が多すぎると準備も作業も大変です。「使う色の数」の上限を決めると、よく使われている色だけで図案を組み直します。手持ちにない色はOFFにしておけます。

単一HTMLファイルで動く

粒 TSUBU は、これまでの道具と同じく HTMLファイル1つ で動きます。

  • インストール不要、ブラウザで開くだけ
  • サーバー不要、月額0円
  • 画像も図案も外に送信されず、自分のパソコンの中だけで完結

図案ライブラリもブラウザの中に保存されます。バックアップ用に「まとめて書き出し」、別のパソコンへ移すための「読み込み」もあります。

生成AIと一緒に作った

今回も、生成AI(Claude)と対話しながら作りました。

「イラストからアイロンビーズの図案を作りたい」「A4とA5で印刷したい」「図案を一覧で残したい」と、欲しいものを言葉で伝え、AIがコードを書き、実際にブラウザで動かして確かめる。その繰り返しで、初日に形になり、その日のうちに図案ライブラリまで追加できました。

作りたいものがはっきりしていれば、道具は買うより作るほうが早い場面が増えています。

注意点

  • ビーズの色は実物に近い色の目安です。メーカーの色番号とは対応していません。
  • 原寸印刷は、印刷時の倍率を100%(実際のサイズ)にしてください。
  • 図案ライブラリはブラウザの中に保存されます。閲覧データを消すと消えるので、ときどき書き出しでバックアップしてください。

入手について

(配布方法は準備中です)


製作・著作 © 江口松友 / 粒 TSUBU v1.1

この記事をシェアX でシェア

毎日の制作記は X に置いています

作ったもの、作り方、現場で気づいたことを、平日は毎日書いています。

X でフォローする(@matsutomo_e)

実装を相談したい人へ。30 分の相談から、課題の解き方を一緒に見つけます。

FDE に相談する →
MATSUTOMOLOGEOFEND OF PAGE
matsutomo=# COMMIT;-- THANKS FOR READING
商品ゲームFDE作っている人有料相談を予約お問い合わせログイン特定商取引法プライバシー利用規約返金X @matsutomo_e
-- matsutomo.dev · MDV-001© matsutomo.dev
MATSUTOMODEVMDV-001