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
0
170
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi
September 08, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
CSC509 Lecture 07
javiergs
PRO
0
250
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.7k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
720
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
430
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
980
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
450
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
270
Temporal Knowledge Graphで作る! 時間変化するナレッジを扱うAI Agentの世界
po3rin
1
100
One Enishi After Another
snoozer05
PRO
0
160
SODA - FACT BOOK(JP)
sodainc
1
8.9k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Typedesign – Prime Four
hannesfritz
42
2.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Six Lessons from altMBA
skipperchong
29
4k
We Have a Design System, Now What?
morganepeng
53
7.8k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
The Invisible Side of Design
smashingmag
302
51k
Code Reviewing Like a Champion
maltzj
526
40k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
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検索対応 ▪ ベクトル検索対応 ◦ プライベート ▪ 滋賀県にいってきました