日本郵便の新API『デジタルアドレス』、Framerで動かしてみた話

2025年5月、日本郵便から「デジタルアドレス」という新しい仕組みが提供開始されました。住所を7桁の英数字で表現する、いわば住所の進化系。

「これコーポレートサイトの問い合わせフォームに入れたら、めっちゃ便利になるんちゃう?」と思い立ち、VISKのサイト（Framer製）に組み込めるか検証してみました。

結論から言うと、完全無料で本番接続まで動きました。その記録です。

デジタルアドレスって何？

ざっくり言うと、こういうもの。

• 7桁の英数字で住所を一意に特定できる（例: A7E-2FK2）

• 郵便番号より細かい単位で住所を表現できる（部屋番号レベルまで識別可能）

• 個人ならスマホアプリで5分で取得できる（無料）

• 法人も「ビジネスデジタルアドレス」として取得可能

郵便番号は「町域」までしか特定できへんので、結局そのあと番地・建物名・部屋番号を手入力する必要がありました。デジタルアドレスはそこまで含めて一発で住所が確定します。

※ 実際に荷物を送るときは、これまで通り住所・氏名・郵便番号の記載が必要です。デジタルアドレスは「住所を引くためのキー」という位置づけ。

何ができるん？

公式が提供している API でできることは、シンプルに3つ。

つまり、1つの API で郵便番号もデジタルアドレスも両方使える。フォームに「郵便番号またはデジタルアドレス」という入力欄を1つ置くだけで、ユーザーがどっちを入れても住所が自動入力される、という体験が作れます。

検証した構成

VISKコーポレートサイトは Framer で構築されているので、Framer のフォームコンポーネントから API を叩く形で検証しました。

ただし、日本郵便の公式 API は CORS の制約・送信元IPの固定が必要 などの理由で、フロントエンドから直接叩けません。なので Supabase の Edge Functions を中継サーバーとして挟んでいます。

構成: Framer → Supabase Edge Functions → 日本郵便公式API

この構成のメリット:

• API のクライアントID・シークレットをフロントに露出させずに済む

• トークンの取得・キャッシュをサーバー側でできる

• CORS 制約も Edge Functions 側で吸収できる

Edge Functions の中身

中継サーバーはざっくりこんな感じです。Supabase の Edge Functions は Deno ベース。

// 認証情報は環境変数から取得（フロントには露出させない）
const CLIENT_ID = Deno.env.get("JAPANPOST_CLIENT_ID")!;
const SECRET_KEY = Deno.env.get("JAPANPOST_SECRET_KEY")!;
const BASE_URL = Deno.env.get("JAPANPOST_BASE_URL")!;

// トークンキャッシュ（10分有効なので使い回す）
let cachedToken: string | null = null;
let tokenExpiry: number = 0;

async function getToken(): Promise<string> {
  const now = Date.now();
  if (cachedToken && now < tokenExpiry) return cachedToken;

  const response = await fetch(`${BASE_URL}/api/v2/j/token`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-forwarded-for": "127.0.0.1",
    },
    body: JSON.stringify({
      grant_type: "client_credentials",
      client_id: CLIENT_ID,
      secret_key: SECRET_KEY,
    }),
  });

  const data = await response.json();
  cachedToken = data.token;
  tokenExpiry = now + (data.expires_in - 60) * 1000;
  return cachedToken!;
}

async function searchAddress(code: string) {
  const token = await getToken();
  const cleanedCode = code.replace(/-/g, "");

  const response = await fetch(
    `${BASE_URL}/api/v2/searchcode/${cleanedCode}`,
    {
      headers: {
        "Authorization": `Bearer ${token}`,
        "x-forwarded-for": "127.0.0.1",
      },
    }
  );
  return await response.json();
}

Deno.serve(async (req) => {
  const { code } = await req.json();
  const result = await searchAddress(code);
  return new Response(JSON.stringify(result), {
    headers: { "Content-Type": "application/json" },
  });
});

ポイントはトークンキャッシュ。日本郵便の API は OAuth 2.0 で、10分有効なトークンを取得してから検索 API を叩く流れになっています。毎回トークン取得してたら遅いし API 呼び出し回数も無駄に増えるので、メモリにキャッシュして使い回します。

Framer 側

Framer は Code Component として React/TypeScript が書けるので、フォームに住所欄を追加して、上の Edge Function を叩くだけ。

const searchByDigital = async (code: string) => {
  const res = await fetch(JAPANPOST_API_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ code }),
  });
  const data = await res.json();
  if (data.addresses?.length > 0) {
    const r = data.addresses[0];
    const address = `${r.pref_name}${r.city_name}${r.town_name}`;
    setForm((prev) => ({ ...prev, address }));
  }
};

入力欄に7桁打ち終わったタイミングで自動的に検索が走るようにしているので、ユーザーは「検索ボタンを押す」みたいな手間がありません。

動作確認

実際に動かした結果がこちら。

郵便番号での検索

郵便番号 550-0025→ 大阪府大阪市九条南

デジタルアドレスでの検索（テスト用サンプル）

公式が用意しているテスト用デジタルアドレスで検証。

A7E-2FK2 → 東京都千代田区丸の内

QN6-GQX1 → 福岡県福岡市博多区博多駅中央街

自分のデジタルアドレスで検索（本番接続）

最後に、自分が個人で取得したデジタルアドレスで本番 API を叩いてみました。ちゃんと自宅の住所が返ってきます。

自分のデジタルアドレスから自宅住所が返却

コスト感

検証で使ったサービスのコストはこんな感じ。

初期費用も月額費用もゼロ円で本番運用できる構成。法人としての登録手続きさえ済ませれば、あとはコード書くだけ。

導入で気をつけたいポイント

ええことばっかりではなく、いくつか押さえておく必要があります。

法人/個人事業主限定

API を使うには「郵便番号・デジタルアドレス for Biz」への事業者登録が必要。個人では利用できません。

バックエンドが必須

CORS 制約と送信元IPの絡みで、ブラウザから直接 API を叩くことはできません。必ずサーバー（今回は Supabase Edge Functions）を挟む必要があります。

デジタルアドレスの普及はこれから

2025年5月にスタートしたばかりのサービスなので、ユーザー側がまだデジタルアドレスを持っていないケースが多いです。当面は「郵便番号も使える」併用フォームにしておくのが現実的。

まとめ

• 日本郵便の新サービス「デジタルアドレス」、公式 API 経由でちゃんと動く

• 構成は Framer + Supabase Edge Functions + 日本郵便 API

• 完全無料で本番接続まで実現可能

• 既存の郵便番号入力欄に併設するだけで UX が一段階上がる

VISK のコーポレートサイトでも本格導入を検討中です。問い合わせフォームの住所入力が「7桁の英数字を入れるだけで完了」になる体験、結構インパクトあると思います。

「自社サイトでも試してみたい」という方は、まずは個人でデジタルアドレスを取得してみるところからどうぞ。郵便局アプリから5分で取れます。