FreeGraphPaper.net: ブラウザベースのベクタ PDF グラフ用紙ジェネレーター

FreeGraphPaper.net は、ブラウザ上で動作し、印刷用のベクタ PDF グラフ用紙を生成するツールです。幅広い事前設定テンプレートと、間隔・色・余白を調整できるカスタムジェネレーターを提供し、ログインやサインアップ、透かしは不要です。

技術アーキテクチャ: レンダリングの唯一の真実の情報源

ツールのコアは単一の純粋関数 buildPaper(config) に基づいて構築されており、幾何学的プリミティブ（線、円、テキスト）を出力します。このアーキテクチャにより、画面上の SVG プレビュー、ダウンロード可能な PDF、ビルド時のアセットがすべて同じロジックから生成され、出力形式間の重複が排除されます。

レンダリングパイプライン

• SVG プレビュー: renderPaperSvg() 関数がプリミティブをインライン SVG に変換し、事前レンダリングされた HTML に埋め込みます。これにより、プレビューはクライアント側の JavaScript をゼロで描画できます。
• PDF 生成: ブラウザ内でのカスタム設定では、動的インポートを介して jsPDF を使用します。ビルド時に生成される静的 PDF では、同じプリミティブを再利用する Bun スクリプトがファイルを作成します。
• PDF の精度: グリッドが実寸であることを保証するため、SVG の viewBox と PDF の単位はミリメートルで定義されています。ユーザーは正確な測定を保つために 100% スケールで印刷（「ページに合わせる」設定をオフ）することが推奨されます。
• ソーシャル画像: ビルド時に OG 画像（1200x630）とフル A4 シートが SVG から PNG に変換され、@resvg/resvg-js が使用されます。

静的生成と pSEO 戦略

サイトは完全に静的で、バックエンドやデータベースなしに Cloudflare Pages にプレーンファイルとしてデプロイされます。

生成規模

• ページ数: 約 1,900 ページが HTML に事前レンダリングされ、1,700 PDF がビルド時に事前生成されます。
• データ駆動型 pSEO: 単一のデータテーブルから ISO A/B/C 系列と US/Imperial 用紙サイズ全体にわたる約 40 種類のスタイル用ページを生成します。WebSite、HowTo、FAQ、Breadcrumb スキーマの JSON‑LD も含め、検索エンジン最適化を図ります。
• 薄コンテンツ管理: 需要の低いサイズ組み合わせには選択的に noindex タグを付与し、薄コンテンツが SEO ランキングを希釈するのを防ぎます。

テックスタック

コンポーネント	テクノロジー	テクノロジー
フレームワーク	Nuxt 4 / Vue 3	TypeScript, script setup
静的生成	Nitro (nuxt generate)	Cloudflare Pages
uma l	Bun	パッケージマネージャーとネイティブ TS ランナー
スタイリング	Tailwind CSS v4	デザイントークンを用いたスコープド CSS
PDF エンジン	jsPDF	ブラウザ側生成のための動的インポート
画像レンダリング	@resvg/resvg-js	SVG から PNG への変換

ユーザーエクスペリエンスとコミュニティの声

このツールは、正方形グリッド、ドットグリッド、等角投影、ヘキサゴン、Cornell ノート用紙など、さまざまなテンプレートを提供します。US Letter、Legal、Tabloid、そして ISO A、B、C 系列全体を含む包括的な用紙サイズに対応しています。

コミュニティの洞察

ユーザーからはいくつかの技術的問題やバグが報告されています:

"Safari（Mac）では、最初の 2 つ（標準の北‑南/東‑西グラフ）が表示されません。等角投影とヘキサゴンは表示されます。"

"グリッドをヘキサゴンに変更し、'snap to grid' がチェックされていることを確認してください。まだ元の正方形グリッドにスナップします。"

また、ペンタゴンパターン、対数直線グリッド、Smith チャートなどの追加パターンも要望されています。