名刺を自分で作り直すキット

こんなときに

入社や異動のたびに名刺を作り直したいが、自分で作ると印刷所に差し戻される

できること

ブラウザで部署・氏名・連絡先を入れると、そのまま印刷所に出せる名刺データ（91×55mm、塗り足し3mm、600dpi、JPEG）を書き出します。文字が安全域から出ていないかを画面が自動で知らせ、実寸で試し刷りをしてから書き出せます。書体も同梱し、オフラインでもWindowsとMacで同じ見た目にしています。会社名・色・ロゴ・体裁は導入時に1回決めれば、以降は社員が自分でURLを開いて作るだけです。Claude Codeがあれば、今の名刺の写真から読み取って入力を済ませることもできます。入れた内容はブラウザの中だけにあり、どこにも送られません。

このキットに入っている「直し」

1. 印刷所がpngの入稿を受け付けないプリントパックの対応形式はeps・ai・pdf・jpg・psdのみで、pngでは入稿できません。書き出し形式をjpg（画質最高）にしました。
2. 連絡先の文字の輪郭が甘くなる350dpiでは名刺の小さい文字の輪郭がにじみます。600dpi相当で書き出すようにしました。
3. WindowsとMacで名刺の書体が変わる書体をパソコンの標準に任せるとOSごとに違う書体で刷られます。Noto Sans JP・Noto Serif JPを同梱し、外部をふさいだ社内ネットワークでも同じ書体で書き出せるようにしました。
4. 連絡先の文字が刷ってから読めなくなる2.0mm（約5.7pt）を下回る文字は印刷後に読みにくくなるため、連絡先の文字サイズの下限としました。
5. 帯の中の文字が安全域からはみ出す帯の高さを12mmより細くすると、中の文字が安全域の外に出てしまいます。画面がその状態を自動で知らせるようにしました。
6. グラデーションが印刷で帯状のムラになる色のぼかしは印刷でムラが出やすいため、色はベタ塗りだけに限定しました。
7. 黒文字が版ずれでにじむRGBからCMYKへ雑に変換すると黒文字が4色の黒になり、版ずれでにじみます。変換はせず、印刷所側の自動変換に任せています。
8. ロゴが画面には出るのに入稿データに入らないロゴをファイル名で参照すると起きる事故です。logo.mjs でロゴの中身ごと画面に埋め込むようにしました。
9. パソコンのカメラでは名刺の文字が読めないパソコン内蔵カメラでは名刺の文字が読める画質になりません。スマホで撮ってパソコンに送り、そこから写真を入れる手順にしました。

入っているもの

• 導入の順番（会社情報 → 道を分ける → 型を合わせる → ロゴ → 裏面 → 公開）
• 印刷所の規格（91×55mm・塗り足し3mm・600dpi・JPEG）どおりの書き出し
• 文字が安全域から出ていないかを自動で知らせる画面
• 実寸でA4に試し刷りする機能
• Noto Sans JP・Noto Serif JPの同梱書体（オフラインでも同じ見た目）
• 今の名刺の写真から読み取る手元の道具（写真は外に出ない）
• 社内向けのID・パスワードによる保護
• PDFでしか受け付けない印刷所向けの変換道具

最初に決める3つ

1. 会社名（いまは「株式会社サンプル商会」）
2. 色（いまは紺一色）
3. ロゴ（無ければ社名を文字で出します）

必要なもの

• 追加費用なしブラウザ（使う人）名刺データを作る画面はブラウザで動きます。保存先を選べるのはChromeとEdgeだけで、他のブラウザはいつものダウンロード先に保存されます
• 追加費用なしClaude Code（導入する人）最初の1回、会社情報・色・ロゴ・体裁を決めて公開するときに使います。社員が名刺を作るときには要りません
• 追加費用なし公開先のサービス（Vercel）tools/deploy.sh で社内向けの画面を公開します（npx vercel）。アカウントが必要です
• 追加費用なしNode.js と Python（道具を使うとき）ロゴの埋め込み（logo.mjs）、写真から読み取る手元版（app.mjs）、PDF変換（img2pdf.py）で使います

使い方

準備中です。公開したら、ここに貼る文が出ます。