【ブラウザで完結】ベクトルPDF形式の方眼紙ジェネレーターを作ってみた！

ブラウザ上で直接レンダリングできる、ベクトルPDF出力対応の方眼紙ジェネレーターを開発しました。印刷してもボケない高品質な方眼紙がサクッと作成可能です。

方眼紙を印刷できるサイトを使っていたけど、縮尺がずれていたり、PDFをダウンロードするのにサインアップが必要だったり、勝手に透かしが入ったりすることにうんざりしてね。だから、無料でログイン不要、しかも正確な縮尺で印刷できるサイトを自分で作ってみたよ。

個人的に一番面白いと思ったのはアーキテクチャの部分かな。buildPaper(config)っていう純粋関数が、線や円、テキストといった幾何学的なプリミティブを出力するようにして、画面上のSVGプレビュー、ブラウザ内のPDF、ビルド時のPDFやOG画像の生成まで、すべてそこから派生させているんだ。出力形式ごとに描画ロジックを重複させることがないから、新しい紙のスタイルを追加するのもレンダラー関数を1つと、1行程度の登録を数回するだけでOK。そうすれば、ライブプレビュー、ダウンロード可能なPDF、OG画像、さらには各サイズのSEOページまで自動的に生成される仕組みさ。

すべて正確な縮尺になっていて、SVGのviewBoxとPDFはどちらもミリメートル単位で指定しているから、100%で印刷すれば5mmの方眼は紙の上でもきっちり5mmになるよ。

完全に静的なサイトで、バックエンドもデータベースもランタイムも一切なし。約1,900ページがHTMLとして事前レンダリングされ、約1,700個のPDFがビルド時に生成されている（ブラウザと同じ描画ロジックを使い回しているよ）。これらすべてが静的ファイルとしてCDNにデプロイされているんだ。

技術スタック:

• Nuxt 4 / Vue 3 (script setup, TypeScript), Nitro静的生成 (nuxt generate)
• Tailwind CSS v4 ＋ 小さなデザイントークンシステムによるスコープCSS
• 紙エンジン: buildPaper() -> プリミティブ出力。スタイルごとに1つのレンダラー。プレビュー、PDF、画像すべてで単一の正実（Single source of truth）
• プレビュー: renderPaperSvg() -> 事前レンダリングされたHTMLに埋め込まれたインラインSVGだから、クライアント側でJSを動かさなくてもプレビューが表示される
• PDF: ブラウザ側での自由なカスタム設定にはjsPDF（動的インポート）、静的PDFの事前生成には同じプリミティブを使い回すBunスクリプトを使用
• SNS用画像: @resvg/resvg-jsを使ってビルド時にSVGからPNGへ変換（スタイルごとに1200x630のOG画像とフルサイズのA4シート）
• データ駆動型pSEO: ISOのA/B/C全サイズとUS/インペリアル規格の約40スタイルに対応し、1つのデータテーブルから約1,900ページを生成。JSON-LD（WebSite/HowTo/FAQ/Breadcrumb）にも対応。需要の低いサイズの組み合わせはnoindexにして、薄いページでサイトの評価が下がらないようにしている
• ツール: Bun（パッケージマネージャー兼、すべてのジェネレーター用のネイティブTSランナー）
• ホスティング: Cloudflare Pages、完全静的（Workerは不使用）

間隔や色、余白を調整してエクスポートできるカスタムエディタや、仮想方眼キャンバスにお絵描きできる機能もあるよ。描画ロジックとピクセルバッファを切り離しているから、どんなDPR（画素密度）でもぼやけずに綺麗に表示されるはず。

ひとつ失敗談を。Cloudflare PagesはURLの末尾にスラッシュを付けて配信する仕様なんだけど、僕のルックアップテーブルのキーがスラッシュなしだったせいで、サーバーサイドでは正しくレンダリングされているのに、クライアントサイドのルーターに読み込まれた瞬間に404エラーになるっていう罠があったんだ。まさに「JSを切ると動くのに、JSを入れると壊れる」っていう古典的なやつだね。

レンダリングパイプラインや静的生成のセットアップについて何か質問があればいつでもどうぞ。

最高だね！作ってシェアしてくれてありがとう！

すごくいいね。

ただ、MacのSafariだと最初の2つ（標準の縦横方眼）が何も表示されないな。

等角図法や六角形の方はちゃんと見られるよ。もしかして線が細すぎるか薄すぎるのかも？

キレのいい素晴らしいツールだね。あらかじめ設定されたスタイルをたくさん用意してくれて助かるよ！