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
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How GitHub (no longer) Works
holman
314
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
960
RailsConf 2023
tenderlove
30
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Unsuck your backbone
ammeep
671
58k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
4 Signs Your Business is Dying
shpigford
184
22k
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 ご清聴ありがとうございます