日本向けのWebサイト、翻訳の次に見直したいこと

「日本のWebサイトはごちゃごちゃしている」。海外のデザイナーからまず出てくるのが、この感想です。気持ちはよく分かります。ただ、実際に使っている日本のユーザーは、そうは感じていません。むしろ大きな見出しと「今すぐ予約」ボタンだけのすっきりしたページを見せると、「肝心なことが書いていない」と感じる人の方が多いと思います。

私は大阪・京都・東京で、サロンや雀荘、ヨットチャーターといった小さなお店や事業者のWebサイトを作っています。Vercelでも、時差のある海外のチームに日本市場の事情を説明するのが仕事の一部です。その前は、日本の商品を海外に届ける越境ECサービスで12の市場向けのマーケティングを担当していたので、同じ問題を逆側からも見てきました。

この記事では、日本のユーザー向けのサイトで、言葉以外に私が変えていることをまとめます。日本に住んでいる方には当たり前の話も多いと思いますが、海外のチームやデザイナーに説明するときの材料にしてもらえたらうれしいです。氏名や住所、Intl、改行といった実装寄りの話は「日本語対応は翻訳だけでは終わらない」に書いたので、ここでは省きます。

情報量：1ページで疑問に全部答える

日本のユーザーは、何かを決める前にまずじっくり読みます。料金、その料金に何が含まれるか、営業時間、定休日、行き方。こうした情報はページに書いてあって当然で、全部を「お問い合わせください」の先に隠しているサイトは、デザインがどれだけ洗練されていても、何かをはぐらかしているように見えます。

ですから、ページが縦に長くなるのは構いません。大事なのは、ざっと眺めて目当ての情報がすぐ見つかることです。

料金は表にして、税込で。 消費者向けの価格は、2021年4月から税込の総額表示が義務になっています。それに、比べるときはどのみち誰もが税込の金額を見ます。
アクセス。 最寄り駅と駅から徒歩何分か、地図、それからビルの上の階や路地の奥にあるお店なら入口の写真も。サロンや雀荘なら、メインビジュアルよりこちらの方が大事だと思っています。
よくある質問。 載せていないと電話で聞かれるような質問を並べます。一人でも大丈夫か、駐車場はあるか、予約は必要か。
ページ内リンク。 長いページの冒頭に置いて、目当ての場所へすぐ飛べるようにします。

誤解のないように言っておくと、情報が多いことと、優先順位を付けないことは別の話です。はっきりした見出し、セクション間の余白、1ブロックに1つの話題という基本はそのまま。ブロックの数を増やしてもいい、というだけです。

日本のユーザーが確認する「信頼の材料」

海外で作られたサイトが日本のユーザーを逃すのは、たいていここです。日本のユーザーは本文を読む前に決まった場所をいくつか確認して、ちゃんとした事業者かどうかを判断します。

会社概要。 会社名、代表者、所在地、設立年月、事業内容。個人事業なら屋号と代表者名。フッターからリンクされた小さな表であることが多いのですが、しっかり見られています。
特定商取引法に基づく表記。 日本の消費者にオンラインで商品やサービスを売るなら、特定商取引法で表示が義務付けられています。事業者名、住所、電話番号、販売価格、送料、支払方法と支払時期、引渡し時期、返品についての条件などです。買う側もこのページがあるかどうかを見ていて、ないお店はそれだけで怪しく見えます。
プライバシーポリシー。 すべてのフォームからリンクを貼ります。送信ボタンのすぐ上に「プライバシーポリシーに同意する」のチェックボックスを置くフォームも多いです。
電話番号。 受付時間と定休日を添えて載せます。電話の方が気楽というお客様、特に年配の方は多いので、番号がどこにも載っていない事業者は信用されにくくなります。

お問い合わせフォームと、その横にLINE

日本のお問い合わせフォームには独特のお作法があって、それが欠けているとユーザーは気付きます。

必須項目には赤い「必須」のラベル、任意の項目には「任意」と付けるのが一般的です。アスタリスクでも通じますが、どこか海外製っぽく見えます。
氏名欄にはフリガナが付きます。詳しくは冒頭で紹介した記事に書きました。
送信ボタンを押すと入力内容を確かめる確認画面が出て、「戻る」か「送信する」を選びます。その後に完了画面と自動返信メールが続きます。項目の少ないフォームなら、確認画面は省いても十分ありだと思います。ただ、自動返信メールは省かないでください。メールが届かないと、ユーザーは送信に失敗したと思って電話をかけてきます。

そしてLINEです。日本ではほとんどの人がすでに入れているアプリなので、予約や問い合わせ、リマインドにLINE公式アカウントを使っている小さなお店はたくさんあります。サロンなら、「友だち追加」ボタンやQRコードの方がフォームより役に立つこともあります。フォームに6項目も入力するより、LINEで一言聞く方が気軽だからです。フォームと電話番号の横に並べて、ユーザーに選んでもらいましょう。

マイクロコピーとエラーメッセージの丁寧さ

ボタンの文言は「送信する」「次へ」のように短くて構いません。一方で、説明文や確認メッセージ、エラーなど、ユーザーに語りかける文はです・ます調で統一します。1つの画面の中でだ・である調が混ざっていたり、敬語の度合いがばらばらだったりすると、機械翻訳だとすぐに分かってしまいます。

敬語をどこまで使うかは業種次第です。ヨットチャーターならホテル並みに丁寧でもいいですし、銀行のような文面の雀荘は、どこかよそよそしく感じます。業種が変わっても変わらないのが、エラーの書き方です。何が起きたのか、次に何をすればいいのかを書き、ユーザーを責めないこと。英語の軽いノリのエラーを直訳しないこと。「Oops!」を日本語にすると、たいてい浮きます。

よくある訳	おすすめ	理由
このフィールドは必須です	お名前を入力してください	どの項目の話かが分かる
無効なメールアドレスです	メールアドレスの形式をご確認ください	責めずにお願いする
おっと！問題が発生しました	送信できませんでした。時間をおいてもう一度お試しいただくか、お電話でお問い合わせください。	次の手段を示す
成功しました！	お問い合わせを受け付けました。2営業日以内にご連絡いたします。	この後どうなるかが分かる

文字組みと行間

日本語の文章は、見た目がぎっしりしています。文字はすべて正方形の枠いっぱいに並び、単語の間にスペースもないので、目を休める場所がありません。英語なら line-height: 1.5 で十分な本文も日本語では窮屈に見えるので、私は本文の行間を1.7〜2くらいにして、1行の長さも短めにしています。たたき台としては、こんな感じです。

html:lang(ja) {
  font-family:
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo,
    sans-serif;
  line-height: 1.8;
}

html:lang(ja) :is(h1, h2, h3) {
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
  line-height: 1.4;
}

システムフォントを先に書いているのは、和文のWebフォントには数千字分のグリフが入っていて、サブセット化しないと数MBになるからです。Google FontsはNoto Sans JPを細かく分割して、ページで使う文字を含むファイルだけをダウンロードさせています。自分でホストするなら、同じようにしてください。palt を指定すると、かなや約物がプロポーショナル幅で詰まり、見出しが引き締まります。本文には使わない方が読みやすいです。

英語の感覚をそのまま持ち込めないものが、あと2つあります。1つは斜体です。和文フォントには斜体がないので、ブラウザが文字を無理に傾け、崩れた見た目になります。強調には太字か「」を使いましょう。もう1つは文字サイズです。スマホの本文は16px以上にしてください。それより小さいと、画数の多い漢字がつぶれます。

写真とイラスト

日本のサイトを一番手っ取り早く「海外っぽく」してしまうのが、海外で撮られたストックフォトです。小さなお店なら、どんなフリー素材より実際の写真の方が効きます。スタッフ、店内、船から見える景色、来店したお客様が探すことになる入口。サロンのサイトでは、写真と一言を添えたスタッフ紹介を載せるのが一般的で、お客様はそれを見て指名するスタッフを選びます。

イラストも、欧米より抵抗なく受け入れられています。自治体のサイトにもゆるキャラや親しみやすいイラストが載っているくらいなので、イラストで説明したからといって事業者が軽く見られることはありません。私が避けているのは、画像の中に文字を入れることです。日本のバナーではよくある作り方ですが、スクリーンリーダー、検索、翻訳、小さい画面のどれにも対応できなくなります。

逆の立場から見えたこと

日本のサービスを12の市場に売り込んできた経験から言うと、ここまでの話は「日本だけの変わった習慣」ではありません。どの市場にも同じようなリストがあり、日本はそれがはっきり言葉になっているだけです。海外の購入者にとって会社概要の表はほとんど意味がなく、代わりにレビューや分かりやすい返品ポリシー、自分の言語で対応してくれるサポートを見ています。それから、日本語なら丁寧で誠実に読める言い回しも、英語やスペイン語に直訳すると堅苦しく、ときには何かをはぐらかしているように聞こえます。

海外から日本に売るときも、日本から海外に売るときも、やることは同じです。同じブリーフをもとに市場ごとに書き、公開する前にその市場の人に読んでもらいましょう。

公開前のチェックリスト

会社概要。オンラインで販売するなら特定商取引法に基づく表記も
すべてのフォームからリンクしたプライバシーポリシー
受付時間付きの電話番号。お店がLINEを使っているならLINEも
税込価格の料金表
アクセス：最寄り駅、徒歩何分か、地図、入口の写真
です・ます調で統一した文言と、次に何をすればいいかが分かるエラーメッセージ
1.7以上の行間と、斜体に頼らない強調
実際の写真と、文字を焼き込んでいない画像

そして最後に、お客様に近い立場の人に実際に予約してもらって、どこで手が止まるかを見てください。