シルギア

連絡先QRコードの作り方|メール・電話・SMS・vCardの仕組み

公開日:2026年9月30日 更新日:2026年9月15日 運営:シルギア(Analyzegear, Inc.) 対象ツール:連絡先QRコード作成

「連絡先QRコード作成」は、メール・電話・SMS・vCard(電話帳登録)の4種類のQRコードを、宛先や氏名を入力するだけで作れるツールです。スマホの標準カメラでかざすと該当アプリが立ち上がり、名刺やチラシ、店頭POP、イベント掲示に貼れば、相手は文字を打ち込む手間なく連絡や登録ができます。

QRコードは「文字列」を運んでいるだけ

まず押さえておきたいのは、QRコードそのものに「メールを開く機能」があるわけではない、という点です。QRコードは短い文字列を格納する入れ物にすぎません。カメラアプリがその文字列を読み取り、先頭の書き分け(スキーム)を見て「これはメールだ」「これは電話だ」と判断し、対応するアプリに渡しています。連絡先QRの作成とは、読み取り側が解釈できる書式の文字列を組み立て、QRに変換する作業に他なりません。本ツールは入力内容を種類ごとに次の4つの書式へ組み立てます。

  • メール:mailto:宛先?subject=件名&body=本文
  • 電話:tel:番号
  • SMS:SMSTO:番号:本文
  • 連絡先:vCard(BEGIN:VCARD … END:VCARD)

結果欄には生成された文字列がそのまま表示され、何が埋め込まれるかを確認できます。

メールQR:mailtoとパーセントエンコード

メールはmailto:スキームを使います。宛先だけなら「mailto:info@example.com」、件名と本文を付けるとクエリが続き、たとえば件名にHiを入れると「mailto:a@example.com?subject=Hi」となります。ここで問題になるのが、日本語やスペース、「&」「?」といった記号です。これらは本文にそのまま置くとURLの区切り文字と衝突し、途中で本文が切れたり文字化けしたりします。

そこで本ツールは、件名と本文をencodeURIComponentでパーセントエンコードしてから埋め込みます。たとえば件名「お問い合わせ」は「%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B」に、本文中のスペースは「%20」、記号「&」は「%26」に置き換わります。こうすれば区切りと混同されず、メールアプリ側で元の日本語・記号に戻して表示されます。宛先はエンコードせずそのまま使い、「@」が無いときは注意メッセージで入力ミスを知らせます。

電話とSMS:番号の正規化とSMSTO

電話はtel:番号という単純な形です。ただし人が入力する番号にはハイフンや空白が混ざりがちなので、本ツールは数字以外の文字を取り除き、先頭に国際表記の「+」があるときだけそれを残す正規化を行います。たとえば「03-1234-5678」は「tel:0312345678」に、「+81 3 1234 5678」は「tel:+81312345678」になります。区切り文字が残ると発信に失敗することがあるための前処理です。

SMSはSMSTO:番号:本文という書式を使います。これはQRコードリーダで広く解釈される記法で、「SMSTO:09012345678:資料希望です」のように番号のあとにコロンで区切って本文を続けます。番号は電話と同じく正規化され、本文が空のときは「SMSTO:09012345678」と番号までを埋め込みます。かざすと、その番号宛の新規メッセージ(本文入りは下書き状態)がSMSアプリで開きます。

vCard 3.0の項目とエスケープ

連絡先モードは、電子名刺の標準であるvCard 3.0形式で組み立てます。1行目と最終行をBEGIN:VCARD/END:VCARDで挟み、2行目にVERSION:3.0を置き、その間に各項目を並べます。行の区切りはvCardの規定どおりCRLFです。姓「山田」・名「太郎」・組織「株式会社サンプル」・携帯「090-1234-5678」・メール・URLを入れると、次のような中身になります。

  • N:山田;太郎;;;(姓;名;ミドル;敬称接頭;敬称接尾)
  • FN:山田 太郎(表示名。日本語順で「姓 名」)
  • ORG:株式会社サンプル
  • TEL;TYPE=CELL:09012345678
  • EMAIL;TYPE=INTERNET:taro@example.com
  • URL:https://example.com

FN(表示名)はvCardの必須項目で、本ツールは姓と名を半角スペースでつないで作ります。氏名が空で組織名だけなら組織名を表示名に流用するため、姓・名・組織のいずれか一つでも入っていればQRを生成できます。未入力の欄は出力に含まれません。また、値の中に「,」「;」「\」や改行が含まれると、vCardの規則に従い「\,」「\;」「\\」「\n」へ自動でエスケープします。これにより、住所や組織名に記号があってもレイアウトが崩れず、電話帳アプリが各項目に正しく分解できます。

名刺・店舗・イベントでの使いどころ

連絡先QRが活きるのは、相手にタイプさせたくない場面です。名刺の裏にvCardのQRを刷れば、受け取った人はかざすだけで氏名・電話・メール・サイトをまとめて電話帳に登録できます。店頭POPやチラシに問い合わせ用のメールQRを載せ、件名をあらかじめ入れておけば、どの案件からの問い合わせか判別しやすくなります。掲示に電話QRやSMS QRを添えれば、その場で連絡してもらえます。保存はPNG画像で約256px〜約2048pxから選べ、名刺やチラシなら中サイズ、掲示用に大きく印刷するなら大・特大が向きます。

ブラウザ内で完結し、送信しない

QRコードの生成と文字列の組み立ては、すべてお使いの端末のブラウザ内で行われます。入力した宛先・本文・氏名・電話番号などが外部サーバーへ送られることは一切なく、オフライン環境でも動作します。連絡先という性質上この非送信は安心材料になりますが、注意点も二つあります。一つは、印刷して掲示すると不特定多数の目に触れる点で、埋め込んだ連絡先が公開してよい内容かを事前に確認してください。もう一つは、かざして自動でアプリが立ち上がるかは端末やカメラアプリの対応状況による点です。配布前に実機のカメラで読み取って挙動を確かめておくと確実です。

「連絡先QRコード作成」を使ってみる →

ほかの記事

CSSアニメーション(@keyframes)入門|作り方と緩急の付け方 CSSカラー名⇔HEX変換の使い方|148色と最近傍色の仕組み cron式の書き方入門|5フィールドと記号を図解で理解する Flexboxの効き方を目で理解|主軸・交差軸から生成CSSまで CSS Grid入門|fr・minmax・gap・整列を実例で解説 色覚シミュレーションの使い方|配色が色弱でどう見えるか確かめる

記事一覧をすべて見る →