ぼくのメッセージカード と ぼくのいるところ に、日本語と英語の切り替えを入れました。
ヘッダーに EN / JP のプルダウンがあります。初めて開いたときは、ブラウザの言語が ja なら日本語、それ以外は英語にします。一度選んだら、その端末の localStorage に覚えておきます。ぼくのメッセージカードとぼくのいるところでキーは分けてあるので、片方だけ英語、もう片方は日本語、という状態にもなります。サイトごとに覚えておく、くらいの割り切りです。
英語のときの名前は、ぼくのメッセージカードが My message card、ぼくのいるところが My place です。「ぼくの。」のまま英語UIに置くと空気が合わなくて、短く呼び替えることにしました。完璧な訳というより、画面に置いたときに変じゃない呼び方、という感覚です。
なぜやったか
最初は日本語だけで出していました。自分用の道具から始めたので、それで足りていたんです。
ただ、QRやURLで渡すアプリなので、受け取る側が英語環境、ということは普通に起きます。作る側が日本語でも、相手のブラウザが英語なら、画面の説明が読めない。待ち合わせの地図や、開封のパスワード入力で止まられるのは、いちばん避けたいところでした。
「世界中の人に使ってもらう」みたいな大きな話ではなくて、渡した相手が一歩で詰まらないようにしたかった、に近いです。翻訳サービスを挟むほど大きくはない。でも「UIの言葉だけは、相手の言語で読める」状態にはしたかった。
やり方は小さく
React の i18n ライブラリは入れていません。フロントは Vite の薄い SPA なので、辞書オブジェクトと t("key") で十分でした。
辞書は ja と en のふたつ。文言を足すときは両方にキーを足す。プレースホルダは {n} や {clock} みたいな差し込みだけ。サーバーから返ってくるエラーは、コードを見てクライアント側で訳すようにしています。英語の長いエラー文をAPIに載せる必要がなくて、楽でした。
静的な about / privacy も、同じ考え方の小さなスクリプトで揃えています。SPAだけ英語で、運営者情報だけ日本語、というのは避けたかったです。見た目は揃えてあるのに、言語だけ途切れると「別サイトっぽい」ので。
ぼくのいるところを先に入れて、ぼくのメッセージカードはほぼ同じ型を写しました。両方ともヘッダー／フッタ／ランディング／作成／閲覧、という流れが似ているので、二回目は「どこで言語切替を隠すか」を決める作業が中心でした。
英語のときは縦書きを出さない
ぼくのメッセージカードには縦書きがあります。日本語の手紙っぽさを出したくて入れた機能です。
英語UIのときは、この選択そのものを消し、保存もプレビューもリーダーも横書きに固定しました。英語で縦書きを選ばせるのは、自分でも説明しにくい。言語と表示モードが食い違うと、渡した相手が困るだけなので、「英語なら横書き」と決めてしまいました。
日本語に戻すと、いつもの縦書き／横書きがまた選べます。言語に合わせて、できることを変える。機能のオンオフを、ロケールに寄せた形です。ここがいちばん「翻訳しただけ」では済まなかったところだと思います。
共有したあとは、言語をいじらない
作成直後の QR 画面や、受け取った側の閲覧画面では、言語切り替えを出していません。
理由は単純で、その画面は「渡す／読む」に集中してほしいからです。ぼくのいるところの地図は Leaflet で描いていて、言語変更のたびに画面を組み直すと地図が壊れる。ぼくのメッセージカードの読書中も、ページ送りの途中でレイアウトが吹っ飛ぶと困る。言語を変えた瞬間に「全部やり直し」になるのは、体験としてきつい。
なので、言語を変えるのはランディングや作成の手前まで。共有URL自体は言語非依存で、開いた人の端末の設定（またはその人が前に選んだ言語）で UI が出ます。送り手が日本語で作っても、受け手が英語なら英語の説明が出る。ここは最初からそうしたかったところです。
メッセージの本文や、ぼくのいるところのひとことは、もちろん翻訳しません。ユーザーが書いたものは、書いたまま届く。UIのラベルだけを持ち替える、という線引きです。
いまの感触
正直、辞書を埋める作業は地味です。同じ意味の文を、トーンを崩さないように二言語で書く。英語の SEO 用の長い文も、日本語の言い回しをそのまま直訳すると変になるので、用途から書き直したりしました。「をおとどけします」みたいな日本語の余白は、英語では短い副題に寄せています。
まだ荒いところはあると思います。変な訳や、英語だと通じにくい説明があれば直します。ライブラリを厚くするより、まず「相手が読める」ところまで持っていく、という順番でした。
よければ英語ブラウザでも、ぼくのメッセージカード と ぼくのいるところ を開いてみてください。変なところがあれば、X かお問い合わせから教えてもらえると助かります。