【React】日本の電子印鑑（認印・日付印・角印・篆刻）を Canvas で生成するライブラリを作った

はじめに

こんにちは。先日、sealkit.app という「無料で日本の電子印鑑を作成・ダウンロードできる Web ツール」をリリースしました。

契約書や請求書の電子化が進む中で、「電子はんこ」を手軽に作れるツールが意外と少ないと感じたのが開発のきっかけです。

そして今回、その中で使っている 印鑑描画エンジン部分を npm パッケージとしてオープンソース化 したので、この記事で紹介させてください。

📦 npm: @luohuax/seal-kit
🐙 GitHub: FollowDreams12/seal-kit
🌐 Live Demo: sealkit.app

![印鑑の 4 種類プリセット](ここに認印・日付印・角印・篆刻を並べた画像を貼る)

こんな方におすすめ

React で 電子印鑑（はんこ）ジェネレーター を作りたい
契約書 / 請求書 / PDF に押す印鑑画像を プログラムで動的生成 したい
Konva や HTML5 Canvas の実用的な使い方に興味がある
日本文化に関わる UI コンポーネントの実装例を見てみたい

特徴

🎨 4 種類のプリセット: 認印（mitomein）/ 日付印（date stamp）/ 角印（kakuin）/ 篆刻（tenkoku）
🖼️ 高解像度 PNG エクスポート: 最大 2048px、透過背景対応
🔤 柔軟なフォント管理: Google Fonts（30 種類以上の日本語フォント内蔵）+ ローカルフォント登録
📐 シンプルな API: <SealCanvas preset="mitome" text="佐藤" /> だけで印鑑が完成
🎯 プリセット駆動: すぐ使える 4 種類のテンプレート + 細かいカスタマイズも可能
📦 依存関係ゼロ（peer dependency として konva / react-konva のみ）

インストール

```bash
npm install @luohuax/seal-kit konva react-konva
```

konva と react-konva は peer dependency です。現在は React のみ対応で、Vue / Vanilla JS 版は今後追加予定です。

クイックスタート

わずか数行のコードで、本物っぽい認印が作れます。

```tsx
import { SealCanvas, registerFont } from "@luohuax/seal-kit";

// フォント登録（Google Fonts の場合）
registerFont({ family: "Noto Serif JP", google: true });

function App() {
return (
<SealCanvas
preset="mitome" // 認印プリセット
text="佐藤" // 名前 / テキスト
color="#C41E3A" // 朱色（デフォルト）
fontFamily="Noto Serif JP"
size={500}
/>
);
}
```

![認印の生成結果](ここに mitome preset で "佐藤" を生成した印鑑画像を貼る)

4 種類のプリセット詳解

1. 認印（mitomein）

日常業務で最もよく使う印鑑。苗字のみ・円形 が基本です。

```tsx

```

2. 日付印（date stamp）

上段：確認者 / 中段：日付 / 下段：担当者 の 3 段構成。承認フローの記録によく使われます。

```tsx
<SealCanvas
preset="date-stamp"
dateStamp={{
year: "2026",
month: "6",
day: "30",
topText: "承認",
bottomText: "伊藤",
}}
/>
```

3. 角印（kakuin）

会社印・法人印 として使う四角い印鑑。テキストを配列で渡すと自動でグリッドレイアウトになります。

```tsx
<SealCanvas
preset="kakuin"
text={["株式会社", "山田商事", "之印"]}
/>
```

4. 篆刻（tenkoku）

朱文（shubun）効果 を持つ芸術的な四角い印鑑。書道・落款印風の見た目に。

```tsx
<SealCanvas
preset="tenkoku"
text={["印", "公司", "之印"]}
invert={true} // 朱文：白抜き文字 + 朱色背景
/>
```

PNG としてエクスポート

ref 経由で exportPng() を呼ぶだけで、高解像度 PNG の dataURL が取得できます。

```tsx
import { useRef } from "react";
import { SealCanvas, type SealCanvasRef } from "@luohuax/seal-kit";

function App() {
const ref = useRef(null);

const handleExport = async () => {
const dataUrl = await ref.current?.exportPng({
width: 1024,
transparent: true,
});

// ダウンロードリンクを作成
const a = document.createElement("a");
a.href = dataUrl!;
a.download = "seal.png";
a.click();

};

return (
<>

PNG をダウンロード
>
);
}
```

実装のポイント

なぜ Konva Canvas を選んだのか

最初は SVG での実装も検討しましたが、以下の理由で Konva を採用しました。

にじみ（bleed）表現 — フィルター処理が Canvas の方が自然
朱文（invert）モード — マスク処理が Canvas の合成モードで簡潔に書ける
高解像度出力 — SVG → PNG 変換より Canvas 直接エクスポートの方が安定
React との相性 — react-konva があるので宣言的に書ける

フォントの動的ロード戦略

日本語フォントはファイルサイズが大きいので、遅延ロード が重要です。

```tsx
import { registerFont, loadFont } from "@luohuax/seal-kit";

// Google Fonts（内蔵マップから自動解決）
registerFont({ family: "Noto Serif JP", google: true });

// ローカルフォントファイル
registerFont({
family: "My Font",
src: "/fonts/myfont.woff2",
format: "woff2",
});

// リモート CDN
registerFont({
family: "Custom Font",
src: "https://cdn.example.com/font.woff2",
});

// オンデマンドロード
// （registered → Google Fonts → system の順に fallback）
await loadFont("Noto Serif JP");
```

内蔵の日本語フォント一覧

30 種類以上の Google Fonts を内蔵マップに登録済みです。

カテゴリ	フォント例
明朝体	Noto Serif JP, Shippori Mincho, Zen Old Mincho, Hina Mincho
ゴシック体	Noto Sans JP, Zen Kaku Gothic New, M PLUS 1p, BIZ UDPGothic
手書き	Potta One, Klee One, Yusei Magic, Zen Kurenaido
ディスプレイ	Dela Gothic One, DotGothic16, Kaisei Decol, RocknRoll One
丸ゴシック	Zen Maru Gothic, M PLUS Rounded 1c, Kiwi Maru, Kosugi Maru

朱文（invert）とにじみ（bleed）の表現

朱文（白抜き文字 + 朱色背景）は invert={true} で切り替えられます。落款印っぽさが出ます。

にじみ効果（bleed={true}）は Canvas のフィルターを重ねて実装しており、本物のはんこの「かすれ」感を再現しています。

API リファレンス

`<SealCanvas />`

Prop	Type	Default	Description
`preset`	`"mitome" \| "date-stamp" \| "kakuin" \| "tenkoku"`	`"mitome"`	プリセットテンプレート
`text`	`string \| string[]`	—	印鑑テキスト。文字列 = 縦書き / 配列 = グリッド
`color`	`string`	`"#C41E3A"`	インクの色（朱色がデフォルト）
`fontFamily`	`string`	`"Noto Serif JP"`	フォント名
`size`	`number \| { width, height }`	`500`	Canvas サイズ（px）
`borderThickness`	`number`	preset 依存	枠線の太さ
`shape`	`"circle" \| "square"`	preset 依存	形状（円 / 四角）
`border`	`"single" \| "double" \| "none"`	preset 依存	枠線スタイル
`invert`	`boolean`	preset 依存	朱文モード
`bleed`	`boolean`	preset 依存	にじみ効果
`previewScale`	`number`	`1`	プレビュー拡大率
`dateStamp`	`{ year, month, day, topText, bottomText }`	—	日付印用フィールド

`SealCanvasRef.exportPng()`

```ts
interface SealCanvasRef {
exportPng: (options?: {
width?: number; // デフォルト: 1024
height?: number; // デフォルト: width と同じ
transparent?: boolean; // デフォルト: true
}) => Promise; // dataURL を返す
}
```

実際のユースケース：sealkit.app

このライブラリを実際に使って構築したのが sealkit.app です。

✅ ブラウザ上で 認印・日付印・角印・篆刻 を無料で作成
✅ サインアップ不要、すぐ使える
✅ 高解像度 PNG（透過背景）でダウンロード
✅ PDF・契約書・請求書に押印可能

![sealkit.app のスクリーンショット](ここに sealkit.app のトップページ画像を貼る)

「脱ハンコ」の時代とはいえ、社内承認・請求書・電子契約など、電子印鑑を押したい場面 はまだ多いです。もしよければ試してみてください。

ロードマップ

React コンポーネント（<SealCanvas />）
Vanilla JS API（sealKit.render(element, options)）
Vue コンポーネント
SVG エクスポート
PDF エクスポート

おわりに

日本の「はんこ文化」は独特で、CSS や画像素材の組み合わせだけでは本物らしい表現が難しいと感じ、専用ライブラリとして切り出しました。

もしこの記事が参考になったら:

📦 npm: @luohuax/seal-kit をぜひ試してみてください
🐙 GitHub: FollowDreams12/seal-kit に ⭐ Star をいただけると嬉しいです
🌐 Web 版: sealkit.app で今すぐ印鑑を作成できます

フィードバック・Issue・PR お待ちしています！Vue 対応や SVG エクスポートなど、リクエストがあればぜひ Issue にお願いします。

最後まで読んでいただきありがとうございました 🙏