Adding Japanese to your app is mostly a translation job. Making your sign-up and checkout forms work for Japanese users is not — it's a form-design job, and it's where many products quietly lose Japanese customers.
I'm a native Japanese developer. I built and published a checkout plugin for Japanese online stores, so I've spent a lot of time on these fields. Here's what to change, with code you can copy.
1. Name: family name first, in two fields
Japanese names are written family name first: 山田 太郎 = Yamada (family) Taro (given). Japanese forms ask for 姓 (family name), then 名 (given name).
<div class="name-row"> <label>姓 <input name="family_name" autocomplete="family-name" required></label> <label>名 <input name="given_name" autocomplete="given-name" required></label> </div> Store them separately, and print them family-name-first everywhere: emails, receipts, shipping labels.
2. Furigana: the reading of the name
Kanji names can often be read several ways, so Japanese forms ask for the reading in katakana (フリガナ). Shops use it for phone calls, sorting customers and delivery slips.
<div class="name-row"> <label>セイ <input name="family_name_kana" pattern="[ァ-ヶー ]+" required></label> <label>メイ <input name="given_name_kana" pattern="[ァ-ヶー ]+" required></label> </div> The pattern accepts full-width katakana, the long-vowel mark (ー) and spaces. Many users type hiragana by mistake, so a friendly error helps (see section 6) — or convert hiragana to katakana for them.
3. Address: postal code first, large to small
Japanese addresses go from large to small:
postal code → prefecture → city → town and block number → building and room.
<label>郵便番号 <input name="postal_code" autocomplete="postal-code" inputmode="numeric" placeholder="123-4567"></label> <button type="button" id="fill-address">住所を自動入力</button> <label>都道府県 <select name="prefecture" autocomplete="address-level1"> <option value="">選択してください</option> <option>北海道</option><option>青森県</option><!-- … all 47, in the standard order … --> </select></label> <label>市区町村 <input name="city" autocomplete="address-level2"></label> <label>番地 <input name="address_line1" autocomplete="address-line1"></label> <label>建物名・部屋番号 <input name="address_line2" autocomplete="address-line2"></label> Japanese users expect the address to fill in from the 7-digit postal code. Japan Post publishes the postal code data for free, so you can build the lookup yourself or use a library that wraps it. Keep building and room on its own line — a lot of people live in apartments.
4. Accept full-width input (and fix it quietly)
Japanese keyboards often type full-width characters: １２３－４５６７ instead of 123-4567. Don't reject it — normalize it:
const clean = (value) => value.normalize('NFKC').trim(); clean('１２３－４５６７'); // "123-4567" clean('ｶﾀｶﾅ'); // "カタカナ" (half-width katakana → full-width) Do the same for phone numbers, and accept them with or without hyphens (090-1234-5678 / 09012345678).
5. Prices: say that tax is included
Japanese shoppers are used to tax-included prices, marked 税込. Show it, and show the shipping fee before the last step.
const yen = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }); `合計（税込）${yen.format(3300)}`; // "合計（税込）￥3,300" Note that ja-JP formats the yen sign as full-width ￥. That's fine — it's what Japanese sites show.
6. Words: polite, consistent, not literal
Most of the "this was machine-translated" feeling comes from a handful of strings. A few I see again and again:
| English | Literal (avoid) | What Japanese sites say |
|---|---|---|
| Place order | 注文を置く | 注文を確定する |
| Submit | 提出する | 送信する |
| Your information | あなたの情報 | お客様情報 |
| Invalid input | 無効な入力 | 入力内容をご確認ください。 |
| ZIP code | ZIPコード | 郵便番号 |
Keep the polite form (です／ます) everywhere, and write errors as a polite request rather than a judgement:
const messages = { required: '入力してください。', // "Please fill this in." kana: '全角カタカナで入力してください。', // "Please use full-width katakana." postal: '郵便番号は7桁で入力してください。', // "Please enter a 7-digit postal code." }; 7. Dates and fonts
Japanese dates go year → month → day:
new Intl.DateTimeFormat('ja-JP', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'short', }).format(new Date(2026, 10, 20)); // "2026年11月20日(金)" And tell the browser your Japanese pages are Japanese. Without it, some kanji can be drawn with a Chinese font, and a few characters look subtly wrong to Japanese readers:
<html lang="ja"> :lang(ja) { font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", sans-serif; } Checklist
- [ ] 姓 → 名, two fields, printed family-name-first
- [ ] フリガナ (セイ／メイ) in katakana
- [ ] 郵便番号 first, auto-fill, prefecture drop-down, building/room on its own line
- [ ] Full-width input normalized with
NFKC; phone with or without hyphens - [ ] 税込 prices, shipping shown before the last step
- [ ] Polite, consistent wording; no literal translations
- [ ] Japanese date format,
lang="ja", Japanese font
None of this is about translation. A product can have perfect Japanese text and still feel "made for somewhere else" because of the form. The good news: these are small changes.
I wrote a less technical version of this for product people on Medium: 7 Mistakes Foreign Developers Make When Launching in Japan.
There's also a free, printable checklist with 31 points (language, names, addresses, checkout, layout and store pages): Free Japan-Ready Checklist. And if you'd like a native Japanese developer to look at your actual screens, I do reviews.
Not legal advice — if you sell to customers in Japan, check the legal requirements for your business with a professional.
