Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Multilingual UI
Search
ベサリディダ
May 07, 2024
0
28
Multilingual UI
ベサリディダ
May 07, 2024
Tweet
Share
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Being A Developer After 40
akosma
90
590k
Writing Fast Ruby
sferik
628
62k
Thoughts on Productivity
jonyablonski
69
4.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
KATA
mclloyd
30
14k
Six Lessons from altMBA
skipperchong
28
3.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
Side Projects
sachag
455
42k
Transcript
多言語化 ユーザーインタフェース 誰も教えてくれない多言語化のあれこれ
なんで大事なの? UIはアプリ/ページへの入り口 - 言語Aのデザインが先にできて、言語Bの文字 が強引に入れられる - フォントが合わず、雰囲気を台無しにする - CSSの調整が多すぎて実装にオーバヘッドが かかる
- 最悪の場合は顧客を奪われる 出典:IXION https://store.steampowered.com/app/1113120/IXION
お話しする三つのテーマ ユーザが一番最初に気づく 違和感、国の数だけフォン トの美しい使い方がある いろんな言語の長い・短い 言葉を受け止められるよう に十分な余白をもつ 大事なのはユーザが言語を 切り替えた時、自分たちの ためのUIであると感じる
フォント 空間 アットホーム
フォント This is a pen This is a pen This
is a pen This is a ペン This is a ペン
同じフォントを使うべからず 日本語以外の言語にするとき、必ずその言語のため に作られたフォントを使う - 特殊文字をちゃんと表せている? 例:e, ë - 日本語に「無い」ものはどうしてる? -
イタリック体 - スペース - 大文字小文字
空間 いろんな箱 様々な長さ 短いし ありえない ぐらいに長 いかもしれ ない
文字はなげぇ 一つの言語のために作られたUIのコンポーネントは 必ず別の言語で長さを超過したり持て余したりする - 基本的に±33%の文字が入れるようにする - 「保存しますか?」日本語でピッタリだけど それ以下とそれ以上の時に壊れちゃう よくある罠 -
「はい/いいえ」は言語によっては長くなる - 例:保存しますか?→「保存します」 保存しますか? Save? A bheil thu airson an sgrìobhainn a shàbhaladh 保存しますか?
言語ごとの比率 https://www.w3.org/International/articles/article-text-size.ja
改行の悪魔 Clear Layer レイ ヤーを クリア レイヤー をクリア レイヤ クリア
アットホーム これは誰のためのUI?
ユーザを意識したUI UIを見るだけで、「これは自分宛ではない」と思っ てしまうのがユーザ。想像してみましょう。 - 海外のホテルでウォシュレットが無い - 飲食店がおしぼりを出してくれない - 水道の水が飲めない -
部屋に入るのが土足 これぐらいにショックを受けてしまう。 引用元:リクルート RGF(https://www.rgf-professional.jp/ja/)
CREDITS: This presentation template was created by Slidesgo, and includes
icons by Flaticon, and infographics & images by Freepik ご清聴ありがとうございます