QRコードの編み図ジェネレータを作りました——新刊より先に公開したツールの話
※当サイトには広告（Google AdSense等）およびアフィリエイトリンク（Amazonアソシエイト等）が含まれる場合があります。詳細は免責事項とプライバシーポリシーをご確認ください。
【読了時間：約14分 / 要約のみなら3分】
この記事で分かること（3行まとめ）
- 新刊が文フリ・技書博に間に合わず、代わりに編み図ジェネレータを先に公開しました
- 作ったのは文フリ前日〜当日。会場に向かう前の数時間にデプロイ完了しました
- そもそもジェネレータを構想していたのは、「QRコード自体が編み図です」が伝わらなかったから
新刊『編めるQRコード Vol.1』は、文学フリマ東京42と技書博13での頒布を目指していました。
原稿が終わらないと分かったのは、GWの最中です。4月の技術書典20でも落としているので、これで2度目でした。
結論：文フリ当日の朝に、ジェネレータだけ先に出した
文フリ・技書博の時系列は下記の通りです。
| 日付 | 出来事 |
|---|---|
| ~5/3（日） | GW中に新刊を断念。この日は、何を出せるか試行錯誤 |
| 5/4（月・祝） | 朝に編み図ジェネレータを公開 → 昼から文学フリマ東京42 |
| 5/10（日） | 技書博13 |
何も新しいものを出さないのは…と、苦し紛れになんとかジェネレータだけは新刊より先にリリースしました。
最終更新のタイムスタンプは8時40分。そのあとデプロイ完了！
文学フリマ東京42は12時開場——。会場に向かう前の数時間でした。→ QRコード編み図ジェネレータ
好きな文字やURLを入れると、棒針編み用の編み図がその場で出てきます。登録も不要、ブラウザだけで動きます。
「新刊なし」をどうリカバリするか
新刊が間に合わないと決まった時点で、選択肢は2つでした。
- 既刊のみ：『QRコードを編む』と『推しキャラを召喚！LINE BOTで実現する日常』の2冊はあります。編み物サンプルも持っていく
- 代わりに何かを渡す：Vol.1の予告編になるものを用意する
新刊を落とすのが2回目になることもあり、新刊を待ってくれている人には何も渡せないのはよくないなぁ、と悩んでいました。
選んだのは2つ目です。フライヤーを配って、その中で実際に試せるWebツールに誘導することにしました。
編み図を自動生成するツールは、本と並行して作るつもりだと4月の出展レポートに書いていました。 しかしながら、原稿が終わらないと分かったので、いっそこちらを先に出そう、と切り替えたのが文フリ前日です。
余談：本当は、少ないページ数で自分で印刷してでも新刊を出すか？？
と、GWに入る前は思っていたのですが、関西に帰省したり、帰省先で人に会ったりしていたら、あっという間にGWが終わってました。（移動中の新幹線で合計5時間も書く時間があるやん！とか思っていた私を罵って欲しい…）
作ったジェネレータをお伝えするためにフライヤーを刷りました！
フライヤーは合計 約60枚 配ることができました。（お家の複合機が久しぶりにフル稼働してくれました）
フライヤー表面。右下がジェネレータの出力した編み図です。
「あ、この実物が、この編み図で編んだやつ？」「URL入れたら編み図がでてくるのー、へー。」
と興味を持ってもらえる場面が何回かありました。 本がなくても、QRコードを編んでみた体験を面白がってくれた人たちが「編んでみたい」と思ったらやってみることができる（やってみるハードルが下がる）！
この誘導は、思った以上に話のきっかけになりました。
「QRコード自体が編み図になる」は、実際に編んで検証した記事を書いたときから言ってきたことです。それでも、編み図の実物を見せたときの反応は、言葉で説明したときとは明らかに違いました。
なぜでしょうか。
そもそも、なぜこのジェネレータを作ろうとしていたのか
『QRコードを編む』という技術同人誌を出してから、たびたび聞かれることがあります。
「どうやって編むんですか？」「編み図はどうしているんですか？」
そのたびに「QRコード自体が編み図なんですよ」と答えるのですが、返ってくるのは「QRコードを印刷してから編み図に起こしてるんですね、なるほどー」というような言葉——。
実はそんな作業はしていないんだけどな、と思っていました。このずれが何なのか、しばらく分かりませんでした。
技術書典20のブースで気づいたこと
4月の技術書典20に、編んだQRコードのサンプルを並べていました。棒針編み、かぎ針編み、アフガン編み、ビーズ編み、ミサンガ編みの5種類です。
ブースの様子。技法が違うと、同じQRコードでも質感がかなり変わります
「これ、毛糸ですよね？読み取れるんですか？」
そのたびに「スマホで読み取れますよー。読み取ってみてください」と答えて、実際に読み取れると驚いてもらえました。
その場で読み取ってみせる。緑地に白のQRコードも問題なく読めます
「この本買ったら、僕もQRコードを編めるんですか？」と言ってくださった方や、編み物興味あるんですよと声をかけてくださった人もいました。
その方たちのやり取りで、さっきのずれの正体が分かった気がしました。
編み物をしたことがない人には、白黒のマスの並びから完成形が想像できないのです。
編める人にとっては「1つのセルを2目×2段として、色を変えて編むことができますよー」だけで通じます。QRコード自体が編み図になる、も感覚的に理解できます。
でも編んだことがなければ、制作には編み図（=設計図）が必要なはず、と思うみたいです。
だから「印刷して編み図に起こしている」と受け取ったのだと理解しました。QRコード（図）とQRコードの編み図の間に何かしら変換があるはずだ、と思われているわけです。
実際の編み図は、QRコードの図とほとんど変わりません。でも編み図がどういうものかを知らなければ、その差も分かりません。
だったら、次の本には編み図を載せよう！そう決めていましたが、間に合いませんでした。
間に合わなかった理由は、文章を書くのは慣れていても、手芸本を作るノウハウがなかったのが大きいです。
編み上がったサンプルを撮って、慣れないレイアウトツールを操作して——文章を書く以外の作業が想像よりずっと多く、そこで時間が溶けました。
ただ、答えは分かっていました。口で説明するより、編み図そのものを見てもらったほうが早い。 本に載せるのはもちろん、その場ですぐ出せるものがあればいい——ジェネレータの出発点は、ここでした。
編み図ジェネレータの使い方
QRコードの編み図ジェネレータの使い方のステップは3つです。
- 好きな文字やURLを入れる（自分の名前でも、お好きなURLでも）
- QRコードかMicroQRか選ぶ：URLにする場合は、QRコードを選んでください（MicroQRは入れられる文字数が少ないです）
- パターンを選ぶ：「縁あり」か「縁なし」か（縁は左右がなわ編み、上下がガータ編み。メリヤス編みが丸まりにくくなるための施策）
編み図は、表編みと裏編みの記号で描かれます。 あとは、出てきた編み図を見ながら編むだけです。
「縁あり」で編むと、こうなります。
小さい白いものが「縁あり」。まわりのなわ編みが縁です。大きい深緑のものは、リバーシブル編み（ダブルニッティング）という技法で編んだもの
どれくらいの大きさになるか
QRコードの1マスを、2目 × 2段 で編みます。いちばん小さい21×21のQRコード（バージョン1）だと、こうなります。
| パターン | 目数 × 段数 |
|---|---|
| 縁なし（プレーン） | 58目 × 58段 |
| 縁あり | 68目 × 74段 |
MicroQRは規格が別で、入れる文字数によってマス数が変わります。
| バージョン | セル数 | 縁なし（プレーン） | 縁あり |
|---|---|---|---|
| M1 | 11×11 | 30目 × 30段 | 36目 × 38段 |
| M2 | 13×13 | 34目 × 34段 | 40目 × 42段 |
| M3 | 15×15 | 38目 × 38段 | 44目 × 46段 |
| M4 | 17×17 | 42目 × 42段 | 48目 × 50段 |
大きさは糸と針で変わります。私が使ったのは、ラベル表記が23〜24目・31〜32段（5〜6号）の糸でした。5号針とこの糸の組み合わせだと、だいたいこれくらいでした。
| 実寸のめやす | |
|---|---|
| MicroQR 最小（30目 × 30段） | 約 13cm × 10cm |
| 通常のQR 縁なし（プレーン）（58目 × 58段） | 約 25cm × 19cm |
| 通常のQR 縁あり（68目 × 74段） | 約 30cm × 24cm |
コースターと鍋敷きくらいの大きさの差があります。
編み目は縦より横に広いので、編み上がりは少し横長になります。厳密な正方形にはなりませんが、それで読み取れなくなることはありませんでした。編み方・技法によって差はあって、リバーシブル編み（ダブルニッティング）で編んだときのほうが、より横長になります。
編む時間は、MicroQRなら数時間です。リバーシブル編み（ダブルニッティング）で通常のQRコードを編んだときは、1日かかりました。
ただしMicroQRは、現時点では通常のスマホカメラで読み取れません（2026年8月時点、iPhoneの標準カメラで試した限りでは読めませんでした）。読むには対応したアプリが要ります。iOSそのものはMicroQRを扱える仕組みを持っているので、規格として読めないわけではないのですが、標準のカメラアプリがその機能を使っていないようです。
ちょっとCM：
MicroQRを読めるアプリが欲しいなと思い、niji code というiOSアプリを作りました。MicroQRの読み取りと生成ができます。無料で、広告もアカウント登録もありません（Android版は準備中です）。
とはいえ、編んだものを多くの人に見せて読んでもらうなら、通常のQRコードのほうがいいでしょう（相手にアプリを入れてもらう手間が要らないので）。
余白は自動で入る
QRコードは、周囲に余白がないと読み取れません。「クワイエットゾーン」と呼ばれる決まりで、通常のQRコードなら4マス分、MicroQRなら2マス分が必要です（詳しくはQRコードの仕組みを解説した記事を参照）。
ジェネレータはこれを自動で設定します。編み図の外側にある余白は、飾りではなく読み取りに必要な部分です。
面白いのは「縁あり」のほうで、丸まりにくくするためのなわ編みの装飾が、そのまま余白を兼ねています。縁の幅は、左右が片側13目（なわ編み12目＋境目の裏目1目）、上下が16段（ガータ編み）。マスに換算すると左右が6マス半、上下が8マスで、どちらも必要な4マスを超えています。飾りに見えて、機能を果たしています。
そのほかの設定
誤り訂正レベルを L（約7%）／M（約15%）／Q（約25%）／H（約30%）から選べます。数字は「どれだけ汚れても読めるか」の目安で、上げるほどマスが増えて編み図も大きくなります。初期値はMです。
編み図は画面上で拡大しても線が潰れません。スマホで拡大しながら編めるようにしたかったので、そこは譲れませんでした。1目ずつ追っていくので、拡大して潰れると使えません。
ブラウザだけで動くようにした
最初は Python で作るつもりでした。QRコードのライブラリも揃っているし、ローカルで動くツールならすぐ作れます。
ただ、このジェネレータを使ってもらおうとすると、話が変わってきます。
「フライヤーのURLから、その場で試せること」
気楽に試してもらうなら、ブラウザで動かすのがいちばん確実です。
そうすると、Python だとちょっとマッチしません（fukabori.dev は静的サイトですし、このためにAPI化・サーバを建てるのもな…です）ので、ブラウザの中だけで完結する作りに変更しました。
QRコードの生成には、C言語で書かれたライブラリ（libqrencode）を WebAssembly に変換して使っています。サーバを持たないので、入力した文字やURLがどこかに送られることはありません。
実装の詳細はZennに書きました。なぜC言語のライブラリを選んだのか、それをブラウザで動かすまでの手順、編み目記号をSVGで描く話はこちらです。→ QRコード編み図ジェネレーターを Astro + WASM で実装した話（Zenn）
【時間がない方へ】 基本編はここまで。要点だけ知りたい方は「まとめ」へどうぞ。以下の深掘り編では、なぜ1マスを2目×2段で編むのかを数字で追いかけます。
【深掘り】なぜ1マスを「2目×2段」で編むのか
QRコードを編んだときは1セルの比率をそこまで計算していませんでしたが、この記事を書くために調べ直したところ、メリヤス編みの縦横の比率が少し面白かったので載せます。
前提として、実は1目×1段の幅と高さ（横と縦の長さ）は正方形ではありません。メリヤス編みの目は縦より横に広くなります。
毛糸ラベルにはゲージ（10cm × 10cmあたりの目数と段数）の表示があるのですが、例えば、「23目31段」の場合、この糸だと1目の幅は4.35mm、1段の高さは3.23mm。幅は高さの1.35倍あります。
このQRコードを編んだ毛糸のラベル。「標準ゲージ 23〜24目 31〜32段」——この数字から縦横比を出しています
QRコードのマスは正方形なので、1マスを何目×何段で編むかを決めた時点で、編み地は必ずどちらかに歪みます。
| 1マスの割り付け | 縦横比 | 21×21のQRだと | 面積 | 実寸 |
|---|---|---|---|---|
| 1目 × 1段 | 1.35（35%横長） | 29目 × 29段 | 0.25倍 | 約13×9cm |
| 2目 × 2段（このジェネレータ） | 1.35（35%横長） | 58目 × 58段 | 1.0倍 | 約25×19cm |
| 2目 × 3段 | 0.90（10%縦長） | 58目 × 87段 | 1.5倍 | 約25×28cm |
| 3目 × 4段 | 1.01（ほぼ正方形） | 87目 × 116段 | 3.0倍 | 約38×37cm |
まず、1目×1段はQRコードの認識率が極端に下がるので選べません。面積は4分の1で済むのですが、1目でセルを表現すると編み目の歪みがそのままマスの歪みになります。メリヤス編みの目はV字になりますが、黒のVと白のVが1つずつ並んでいるだけだと、明暗の差がはっきり現れにくくなり読み取りが不安定になります。
そもそも、QRコードの読み取り処理で、ファインダーパターンを認識しないと画像をQRコードとして認識しないのですが、少しの歪みがファインダーパターンを認識できずその後の処理にいけないことが多くなります。決して読めないわけではないのですが、認識率がかなり落ちます（実際に編んで比べた記事に条件ごとの結果を書きました）。
2目×2段にすると、Vが4つ集まって面になります。コントラストの差が1目×1段よりはっきりするため、QRコードとして認識されます。ここまでは、既刊を書いたときに分かっていたことでした。
計算して意外だったのは、3目×4段です。 縦横比1.01で、ほぼ正方形になります。 ただし面積は3倍。実寸で38cm角になります。鍋敷きのつもりが、クッションカバーくらいの大きさになります。
2目×3段も、数字の上では2目×2段より歪みが小さい（10%縦長 vs 35%横長）ですが、選ばなかったのは、段数が1.5倍になるうえ、メリヤス編みで色を替えるルールが1段ぶんずれて、編むときの負荷が上がるからです。
つまり、当時の私は歪みではなく、編む手間と仕上がりのサイズで選んでいました。 鍋敷きやミニマットとして使えるくらいの大きさに収めたかったからです。 （小さい方が編む時間が短いのと、コースターや鍋敷きなど、身近なアイテムとして使うアイデアも出そうと思ったからです。副次的に頒布会場のイベントスペースに色々と並べられるメリットもありました）
——ただ、最適な割り付けは糸によって変わります。この糸では3目×4段がほぼ正方形でしたが、別の糸なら答えが違います。ジェネレータが2目×2段に固定しているのは、そこを割り切った結果です。割り付けを選べるようにするのは、次にやることかもしれません。
これから：Vol.1 は技書博14で
新刊『編めるQRコード Vol.1』棒針・かぎ針編は、技術書同人誌博覧会14（2026年9月13日） で頒布予定です。その後、技術書典21 にも出そうと思ってます（オフラインは11月23日・池袋サンシャインシティ、オンライン会期は11月21日〜12月6日）。
当初は5技法を1冊に詰め込む構想でしたが、どれも中途半端になりそうだったので、Vol.1（棒針・かぎ針）の予定です。残りのアフガン編み・ビーズ編み・ミサンガ編みは Vol.2 に回しました。この経緯は技術書典20の出展レポートに書いています。
ジェネレータのほうは本の発売後も使い続けられるように、引き続きメンテナンスする予定です。 → QRコード編み図ジェネレータ - /tools/qr-knit/
——と、頒布予定を書いておいてなんですが、この記事を書いている時点で、まだ入稿できていません。3度目にならないよう、いま進めています。
まとめ：入口が、本より先にできた
新刊が間に合わなかったのは残念でしたが、動的に変更できる編み図ジェネレータが公開できたのは嬉しい副産物でした！
本はまだ出せていません。でも、QRコードを編んでみる入口のほうは、本より先にできました。
好きな文字を入れて、編み図を出してみてください。編んで読み取れたときは、ちょっと嬉しいですよ。
参考情報
イベント
- 技術書同人誌博覧会14（2026年9月13日）：新刊『編めるQRコード Vol.1』を頒布予定
- 技術書典21：オフラインは2026年11月23日（月・祝）池袋サンシャインシティ 展示ホールD／オンライン会期は11月21日〜12月6日
- 編みながらXXする会：Peatixで定期開催中
関連書籍
- 『QRコードを編む』（megusunuLab）：糸と針でQRコードを編み、スマホで読み取れるかを検証した既刊。Vol.1はこの続編にあたります
- 『QRコードの奇跡——モノづくり集団の発想転換が革新を生んだ』 小川進（東洋経済新報社）：QRコードがなぜ世界標準になったかの開発史
参考URL
- QRコード編み図ジェネレータ：本記事で作ったもの
- QRコード編み図ジェネレーターを Astro + WASM で実装した話（Zenn）：実装の詳細
- megusunuLab on minne