Multilingual UI

Transcript

1. 多言語化 ユーザーインタフェース 誰も教えてくれない多言語化のあれこれ
2. なんで大事なの？ UIはアプリ/ページへの入り口 - 言語Aのデザインが先にできて、言語Bの文字 が強引に入れられる - フォントが合わず、雰囲気を台無しにする - CSSの調整が多すぎて実装にオーバヘッドが かかる - 最悪の場合は顧客を奪われる 出典：IXION https://store.steampowered.com/app/1113120/IXION
3. お話しする三つのテーマ ユーザが一番最初に気づく 違和感、国の数だけフォン トの美しい使い方がある いろんな言語の長い・短い 言葉を受け止められるよう に十分な余白をもつ 大事なのはユーザが言語を 切り替えた時、自分たちの ためのUIであると感じる フォント 空間 アットホーム
4. フォント This is a pen This is a pen This is a pen This is a ペン This is a ペン
5. 同じフォントを使うべからず 日本語以外の言語にするとき、必ずその言語のため に作られたフォントを使う - 特殊文字をちゃんと表せている？ 例：e, ë - 日本語に「無い」ものはどうしてる？ - イタリック体 - スペース - 大文字小文字
6. 空間 いろんな箱 様々な長さ 短いし ありえない ぐらいに長 いかもしれ ない
7. 文字はなげぇ 一つの言語のために作られたUIのコンポーネントは 必ず別の言語で長さを超過したり持て余したりする - 基本的に±33%の文字が入れるようにする - 「保存しますか？」日本語でピッタリだけど それ以下とそれ以上の時に壊れちゃう よくある罠 - 「はい/いいえ」は言語によっては長くなる - 例：保存しますか？→「保存します」 保存しますか？ Save? A bheil thu airson an sgrìobhainn a shàbhaladh 保存しますか？
8. 言語ごとの比率 https://www.w3.org/International/articles/article-text-size.ja
9. 改行の悪魔 Clear Layer レイ ヤーを クリア レイヤー をクリア レイヤ クリア
10. アットホーム これは誰のためのUI？
11. ユーザを意識したUI UIを見るだけで、「これは自分宛ではない」と思っ てしまうのがユーザ。想像してみましょう。 - 海外のホテルでウォシュレットが無い - 飲食店がおしぼりを出してくれない - 水道の水が飲めない - 部屋に入るのが土足 これぐらいにショックを受けてしまう。 引用元：リクルート RGF（https://www.rgf-professional.jp/ja/）
12. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and infographics & images by Freepik ご清聴ありがとうございます