NFC名刺を自作してみた。カード購入からデザイン、シール印刷まで全部やってみた話
こんにちは 人材育成室 育成メンバーチームで 研修中の はすと です。
最近、オフラインの勉強会やカンファレンスに参加する機会が多いため、現地で仲良くなった人と連絡先を交換する機会がよくあります。
SNSのアカウントを交換する際に、自分のプロフィールページを開いて、IDを教えて入力してもらうという作業は結構時間がかかります。QRコードを出す場合でも、SNSアプリをお互いに開いて、作業が必要です。
そんな時に革命的なものを教えてもらいました。
ある方に、謎のカードを出してスマホでタッチしてくれと言われ、スマホをかざしてみると、なんとその人の連絡先や、ホームページが出てきます。これが NFC（近距離無線通信）を使った名刺でした。「なんて便利なんだ、、欲しい！」 と思った私は自分も作ってみることにしました。
早速、どうやるんだろーと、Claudeとおしゃべりしてたら意外と簡単にできちゃうみたいだったのでサクッと作ってみた話です。
まずはカードを注文
NFCカードにはいくつか種類があり、タイプによって書き込めるデータサイズが異なります。主要なタイプは以下の3つです。
| タイプ | ユーザーメモリ | 用途の目安 |
|---|---|---|
| NTAG213 | 144バイト | 短いURL1つ程度 |
| NTAG215 | 504バイト | URL＋テキスト情報 |
| NTAG216 | 888バイト | 複数URLや長文データ |
今回は、プロフィールページのURLを1つ書き込む用途なので NTAG213 でも足りますが、将来的に書き込む情報を増やすことも考えて NTAG215（504バイト） を選びました。
NFCカードついては、ctunk のものを購入しました。Amazonでも気軽に買えるためすぐに買っちゃいましょう。
ctunk NFCタグカード NTAG215（Amazon）
NFCカードに書き込む
初期状態の NFCカードではかざしても何も起こらないため、専用のアプリを使って入れたいものを書き込む必要があります。
NFC Tools アプリは色々ありますが、私は下記を使いました。
アプリをダウンロードできたら、以下の手順で書き込みを行います。
アプリを起動すると、「読む」「書く」「その他」「保存済みのタグ」の4つのメニューが表示されます。今回は、NFCカードに情報を書き込みたいので「書く」を選択します。
「書く」の画面では「レコードを追加」をタップします。
すると、書き込める情報の種類がいくつか表示されます。今回はプロフィールページのURLを書き込みたいので「URL / URI」を選択します。
URL入力欄に、NFCカードをかざしたときに表示させたいURLを入力します。
URLを登録すると「書く」画面に戻ります。登録したレコードとデータサイズが表示されるので、内容を確認したら「書き込み」をタップします。
「書き込み」をタップすると、iOSのNFCスキャン画面が表示されます。この状態でスマホの背面をNFCカードにかざすと書き込みが完了します。
書き込みが完了したら、実際にスマホをカードにかざしてみましょう。NFCタグが読み取られると、Chromeで開くかどうかの通知が表示されます。
通知をタップするとブラウザが開き、登録したURLのプロフィールページが表示されます。
これでNFCカードへの書き込みは完了です。
カードデザインの作成
無地のカードではつまらないので、Claude Code を使ってカードのデザインを作っていきます。
最終的には、作成したデザインデータをもとに、シールを印刷しカードに貼ります。
今回作成したデザインデータとスクリプトは GitHub リポジトリで公開しているので、ぜひ使ってみてください。
Claude Code にデザインを作ってもらう
Claude Code に「NFC名刺のデザインをSVGで作って」とお願いしました。プロンプトで指定したのは以下のような内容です。
- 名刺サイズ（86mm × 54mm）
- 左半分にプロフィール画像（円形クリップ）
- 右半分に名前・所属・職種・スキル・SNSアカウント
- ダークテーマ（背景はほぼ黒）
- フォントは Space Mono（Google Fonts）
細かい部分は適時修正指示をして、いい感じのデザインを生成してくれました。
今後も汎用的に使えるようにスキル化を行ったので、詳しい内容は skills を参照ください。
SVG から PDF に変換する
コンビニのシール印刷では SVGファイルを直接扱えないため、PDFに変換する必要があります。変換には Playwright を使いました。
仕組みとしては、SVGをHTML内に埋め込み、ブラウザのレンダリングエンジンを通してPDFとして出力しています。わざわざブラウザを経由しているのは、Google Fonts の読み込みや、SVG内の画像参照の解決、そしてCSSによる色味補正を一括で処理できるためです。
コンビニのシール印刷では画面で見るより色が薄くなってしまうため、スクリプト内でCSSフィルター（彩度・コントラストの強調）をかけて、印刷後の仕上がりが綺麗になるよう調整しました。
サイズは L判（89mm × 127mm）の用紙サイズでPDFを出力し、名刺サイズ（86mm × 54mm）のカードデザインを中央に配置しています。背景色はカード本体と同じ黒（#0a0a0a）にしているため、印刷後にカードサイズにカットする際、多少ずれても目立ちません。
変換は以下のコマンドで実行できます。
pnpm run convert
convert script の詳細はこちら
シールを印刷する
先ほどのステップ作成したPDFファイルを使ってシール印刷していきます。
印刷方法
手軽に印刷したかったため、コンビニの印刷機でシール対応している店舗を探しました。
探したところ、現在シール印刷に対応しているのは ローソン・ファミリーマート・ミニストップ に設置されているシャープ製マルチコピー機のみのようで、セブンイレブンではシール印刷に対応していないので注意が必要です。
スマホからコピー機へのデータ送信には、シャープの無料アプリ PrintSmash を使いました。印刷したいファイルをアプリに登録して、表示されるQRコードをコピー機に読ませるだけで印刷できるのでとても手軽です。
手順は以下の通りです。
- PrintSmash アプリに 印刷するPDFファイル を登録
- コンビニのマルチコピー機で「シール紙にプリント」を選択
- PrintSmash に表示されるQRコードをコピー機で読み取り、データを送信
- L判サイズで印刷（1枚200円）
FNCカードにシールを貼る
印刷したシールをカードサイズに合わせてカットし、NFCカードに貼り付ければ完成です。
いい感じにできました！ ただ、実際にシールを印刷して貼ってみると、見た目の面でいくつか気をつけたいポイントがあったので、次のセクションでまとめておきます。
やってみてわかった注意点
実際にやってみて気づいた注意点がいくつかあります。
シール印刷ではデザインがカードより小さくなる
PrintSmash からPDFを印刷する際、コピー機の画面で「用紙に合わせる」か「用紙に合わせない」かを選択できます。「用紙に合わせる」を選ぶとPDFが用紙サイズに合わせて自動縮小され、「用紙に合わせない」を選んでも用紙のフチ（余白1〜2mm）の分だけデザインが欠けます。いずれにしても、印刷されたシールはカードの面積より若干小さくなります。
対策として、PDFの背景色をカード本体の色と同じにしておくのがおすすめです。シールがカードより少し小さくても余白部分が目立たなくなります。
色味がシール印刷では薄くなる
コンビニのシール印刷では、画面で見るよりも色味が薄く出る傾向があります。PDFを作成する段階であらかじめ色を濃いめに調整しておくと、印刷後の仕上がりが綺麗になります。
平行に貼るのが難しい
シールをカードに対してまっすぐ平行に貼るのも意外と難しいです。ある程度カードのサイズに合わせてカットしたら、端から少しずつ貼っていくと比較的うまくいきます。また、シールの粘着力は思ったより強いため、少しずつ貼ることをお勧めします。
まとめ
今回、NFC名刺を自作してみて、NFCカードの購入からデザイン作成、シール印刷まで意外と簡単にできることがわかりました。特に、デザイン部分を Claude Code に任せたことで、素早く自分の納得のいくデザインに仕上げられたのは非常に満足でした。
コンビニのシール印刷では色味やサイズに多少の誤差が出るものの、背景色を合わせるなどの工夫でカバーできます。実際にやってみないと気づけないポイントが多くあったので、次回作るときは今回学んだことに気をつけて、印刷しようと思います。
技術イベントや勉強会に行かれる方は、ぜひ自分オリジナルデザインのNFC名刺を作って参加してみてはいかがでしょうか。
参考
