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
意外とフォントが大事だった話 / Font Issues on Internationaliz...
Search
fumi
September 08, 2024
Programming
220
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi
September 08, 2024
Other Decks in Programming
See All in Programming
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
nrslib
14
5.8k
Oxlintのカスタムルールの現況
syumai
6
1.2k
A2UI という光を覗いてみる
satohjohn
1
150
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
tk3fftk
5
930
Make SRE Operations Easier with Azure SRE Agent
kkamegawa
0
7.9k
コンテキストの使い捨てをやめる — ビジネスルール駆動開発と miko —
ioki
0
230
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
nrslib
4
1.5k
軽量Java基盤の設計 DIコンテナに頼らない、長期保守と1秒起動の実現 JJUG CCC 2026 Spring
macha64
0
570
さぁV100、メモリをお食べ・・・
nilpe
0
150
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
hirokunimaeta
0
620
代数的データ型って何が嬉しいの? #frontend_phpcon_do
kajitack
8
3.8k
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
mom0tomo
8
3.3k
Featured
See All Featured
Ruling the World: When Life Gets Gamed
codingconduct
0
260
Chasing Engaging Ingredients in Design
codingconduct
0
230
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
740
ラッコキーワード サービス紹介資料
rakko
1
3.7M
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.2k
Discover your Explorer Soul
emna__ayadi
2
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
170
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
190
Build your cross-platform service in a week with App Engine
jlugia
234
18k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
How GitHub (no longer) Works
holman
316
150k
Transcript
意外とフォントが大事だった話 @Global Service Meetup 2024-09-05 株式会社スタディスト 高橋史裕
Teachme Biz多言語対応の略歴 • 2019年2月(たかはしjoin時点) ◦ UI は日本語、英語、タイ語に対応 • 2019年4月 ◦
タイ語でのマニュアル検索に対応 • 2022年1月 ◦ UI対応言語にベトナム語を追加 • 2023年3月 ◦ 自動翻訳機能
フォントが大事だった話 - タイ語
フォントが大事だった話 - タイ語 Before (Tahoma) After (Sarabun)
フォントが大事だった話 - タイ語 Before (Tahoma) After (Sarabun) • Beforeのほうは、現地の人からすると traditional
な印象を受ける • 日本語だと「コースをクリックしてください」みたいなかんじ?
フォントが大事だった話 - ベトナム語
フォントが大事だった話 - ベトナム語 Before (Hiragino) After (Arial)
フォントが大事だった話 - ベトナム語 Before (Hiragino) After (Arial) • Beforeのほうは、声調記号を正しく表示できていない ◦
声調記号 = 母音(â)のイントネーションを指示する記号 ◦ 12の母音と6つの声調があるらしい
フォントが大事だった話 - ミャンマー語
フォントが大事だった話 - ミャンマー語 Before (Zawgyi-One) After (Noto Sans Myanmar)
フォントが大事だった話 - ミャンマー語 Before (Zawgyi-One) After (Noto Sans Myanmar) •
同じ文章か?っていうレベルで違う • どうして (・ω・`)
ミャンマー語フォント問題 歴史的経緯 (1/2) • ミャンマー語は文字体系が複雑で Unicode 対応が遅れた ◦ ある文字が前後の文字に応じて形を変える ◦
文字が発音される順番に並ばない • その間に Zawgyi という独自フォントが生まれ発展した ◦ フォントではあるものの独自の文字割当があり、 それ自体が文字コードのようなものになっている • 国内では Zawgyi が事実上の標準になるまで普及した • が、2019年に国が正式に Unicode への切り替えを宣言
ミャンマー語フォント問題 歴史的経緯 (2/2) • 2つのフォントには互換性がなく、旧来の Zawgyi テキストで書かれたサイ トを Unicode フォントで表示すると文字化けして見える
• Zawgyi テキストはかなり普及しているため、Unicode フォントだとまともに 表示されないサイトも多い ◦ PCショップが「善意で」Unicodeフォントをアンインストールすることもあ る • 逆に Google 翻訳は Unicode テキストを返すので Zawgyi フォントで表示 すると文字化けして見える
フォントが大事だった話 - ミャンマー語(再掲) Before (Zawgyi-One) After (Noto Sans Myanmar) •
同じ文章か?っていうレベルで違う • どうして (・ω・`)
ミャンマー語フォント問題 参考文献 ZawgyiとUnicode: 普及しすぎたミャンマーの オレオレ文字コードと国際化 Hyalinios https://techbookfest.org/product/fCgCckmBRH 8qb5BE22LVW9?productVariantID=sArJPvFs QPtyqCjgSj3wzR
(わき道)Webフォントってどうなんでしょうか? • 前述の問題はすべて「font-family の変更」と「ユーザーへのフォントインストール案 内」の合わせ技で対応した • font-family の指定は推奨フォントの提案に過ぎず、結局はデバイスフォントで表示 される •
Webフォントであればすべての端末に同じ見た目を提供できる(はず) • 一般的に言われるデメリット ◦ ファイルサイズ起因の問題 ◦ ライセンスの問題 ◦ …… • 導入の知見あれば伺いたい m(_ _)m
〆
〆 言語・文化の壁を越え、より良いコミュニケーションを目指すため 「伝える」ための細部にこだわり、より良いプロダクトを作ろう • Webサービスを多言語に展開する際、ただ翻訳するだけでは不十分かも • 適切なフォントを選ぶことは印象や情報の正確な伝達に不可欠 • 「伝えることを、もっと簡単に。」← 弊社のコーポレートミッション
ありがとうございました
話者紹介 開発本部 > TMBエンジニアリング部 > CREグループ > たかはし • 特技・趣味
◦ ペンギン ◦ 櫻坂46/欅坂46 ◦ 歩くこと ◦ 575を見つけること • さいきんのたかはし ◦ 仕事 ▪ n-gram検索対応 ▪ ベクトル検索対応 ◦ プライベート ▪ 滋賀県にいってきました