【React】日本の電子印鑑（認印・日付印・角印・篆刻）を Canvas で生成するライブラリを作った
はじめに
こんにちは。先日、sealkit.app という「無料で日本の電子印鑑を作成・ダウンロードできる Web ツール」をリリースしました。
契約書や請求書の電子化が進む中で、「電子はんこ」を手軽に作れるツールが意外と少ないと感じたのが開発のきっかけです。
そして今回、その中で使っている 印鑑描画エンジン部分を npm パッケージとしてオープンソース化 したので、この記事で紹介させてください。
- 📦 npm: @luohuax/seal-kit
- 🐙 GitHub: FollowDreams12/seal-kit
- 🌐 Live Demo: sealkit.app
こんな方におすすめ
- 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・契約書・請求書に押印可能
「脱ハンコ」の時代とはいえ、社内承認・請求書・電子契約など、電子印鑑を押したい場面 はまだ多いです。もしよければ試してみてください。
ロードマップ
-
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 にお願いします。
最後まで読んでいただきありがとうございました 🙏