Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
苦労が多かった多言語対応をFigmaで楽にした話
Search
Pioneer
PRO
December 06, 2024
Design
740
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
苦労が多かった多言語対応をFigmaで楽にした話
Pioneer
PRO
December 06, 2024
More Decks by Pioneer
See All by Pioneer
Integration Testでテスト工数削減した話
pioneer_devrel
PRO
0
37
優しいPR文化を広め、1ヶ月250件 爆速でレビューを回した話
pioneer_devrel
PRO
0
66
仕様統合の難しさ ~ナビと音声コンテンツ、どっちが喋るかで悩んだ話~
pioneer_devrel
PRO
0
55
新卒研修から学んだこと
pioneer_devrel
PRO
0
88
ゴール設定におけるリーダーの心得
pioneer_devrel
PRO
0
97
エンジニア駆動でデザインツールの刷新ができた
pioneer_devrel
PRO
0
65
約1年間、SRE活動を通して感じたこと
pioneer_devrel
PRO
0
57
Other Decks in Design
See All in Design
デザインとフロントエンドの境界が融ける Claude Code × Figma
littlebusters
2
3.5k
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
tinykitten
1
470
“なんとなくFigma”から一歩先へ。AI時代も活きるWeb制作フロー
ayumidesign
0
220
The Art of Caring
klemens
0
450
トランジションの冒険 自分と世界を変える冒険の書 / Transition Adventure
dmattsun
2
450
Webデザイナー中田美穂_ポートフォリオ
omy
0
120
ISO 9241-171:2025っていうのがあってな
shosira
1
290
20260309_3月ICTデザイン勉強会_地域創生2.0
a2k
0
180
Debiasing Your Software Design Decision-Making @ Flowcon '26
baasie
1
170
Look Dev Meetup #50
baku89
1
480
分散するデザイン組織をつなぐ デザインミートアップの取り組み/nikkei-tech-talk49
nikkei_engineer_recruiting
1
200
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
380
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.6k
How GitHub (no longer) Works
holman
316
150k
Building Flexible Design Systems
yeseniaperezcruz
330
41k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
4.7k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
370
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.6k
The Limits of Empathy - UXLibs8
cassininazir
1
650
Building the Perfect Custom Keyboard
takai
2
870
Done Done
chrislema
186
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Transcript
苦労が多かった多言語対応を Figmaで楽にした話 モバイル開発部2グループ 方波見 梨沙
2 自己紹介 方波見 梨沙(かたばみ りさ) 直接お会いできないので お写真の貼り付け お願いします! Androidの開発と技術広報のお仕事してます 好きなこと、得意なこと:
・愛犬(2匹)を溺愛してます。 ・クラフトビールが大好き! ・木村さんたちとお店検索アプリを作ってます(Flutter製)
3 Agenda Confidential 01 パイオニアと多言語 02 開発工程 03 開発チームが主体で改善したこと 04
まとめ
4 01 パイオニアと多言語 5つの地域に11カ国の会社があります 米州 アメリカ Pioneer Elecrtronics (USA) Inc.
パナマ Pioneer International Latin America, S.A. ブラジル Pioneer do Brasil Ltda. 欧州 ベルギー Pioneer Europe NV 中東・アフリカ U.A.E Pioneer Gulf, Fze. アジア・オセアニア インド Pioneer India Electronics Private Ltd. オーストラリア Pioneer Electronics Australia Pty. Ltd. シンガポール Pioneer Electronics Asiacentre Pte. Ltd. タイ Pioneer Electronics (Thailand) Co., Ltd. 中国 Pioneer China Holding Co., Ltd. 香港 Pioneer (HK) Ltd. 主な海外のグループ会社
5 01 パイオニアと多言語 • 車載器とBLEやWi-Fiで通信を行い、リモコン部分をカスタマイズ・操作で きるアプリ • 開発フレームワークはFlutterでAndroid・iOSそれぞれ提供しています。 今年リリースしたPxLink
6 01 パイオニアと多言語 PxLinkが対応している言語数は何言語でしょう? • 6言語 • 15言語 • 30言語
クイズです A: PxLinkは30言語に対応しています。 一般的な多言語対応は5~10言語と言われており、30言語以上は世界中の幅広 いユーザーにリーチするためのサービス(SNSなど)で対応する言語数です。
7 02 開発工程 1. デザインを作る 多言語対応したアプリが完成するまでの流れ 2.仕様書&翻訳を作る 3.実装する 5. 現地メンバーが確認
4.実装したアプリを配る 6. 修正リクエスト 1つの言語で1箇所の修正でも 30言語対応しているため30箇所の修正になる
8 02 開発工程 1. デザインを作る 多言語対応したアプリが完成するまでの流れ 3.実装する 5. 現地メンバーが確認 4.実装したアプリを配る
6. 修正リクエスト 2.仕様書&翻訳を作る
9 02 開発工程 1. デザインを作る ボトルネックになっていたところ 5. 現地メンバーが確認 デザインデータと 仕様書の内容が
あっておらず、実 装時の手戻りが多 い 文字効率が良い日 本語で作成してい るため、高確率で 見切れる 工程がかなり終盤 のため、1発でパ スできない場合は 必ず手戻りになる 2.仕様書&翻訳を作る
10 02 開発工程
11 03 開発工程
12 03 開発チームが主体で改善したこと Figma PluginのContext Switchを活用しよう
13 02 開発工程 1. デザインを作る 改善できたところ 2.仕様書を作る 5. 現地メンバーが確認 デザインデータで
一元管理になった ため、作業自体が 不要になった 文字効率が悪い言 語で見れるため、 事前にデザイン調 整が可能になった 工程が上流になっ たため、多少の手 戻りがあっても期 日に余裕が生まれ た
14 03 開発チームが主体で改善したこと 1. デザインを作る 4.実装する 2. 現地メンバーが確認 5.実装したアプリを配る 3.
修正
15 03 開発チームが主体で改善したこと • Figma上のテキスト欄にどんな ID(ルール)をつけるかをあらかじめ、 デザイナーさんと調整しておく必要がある • プラグイン実行にはEditor権限が必要になるため、費用面での調整が必要 •
データテーブルをアプリに組み込める形にするには一工夫必要 • PxLinkではスプレッドシート&Google Apps Scriptを活用しました 活用する際に気をつけること
16 余談 • Android14では性別で文法が変わる言語(フランス語など)への対応が可能にな りました • 設定方法は国ごとの言語対応とあまり変わらない(性別のsuffixをつける)の で簡単にできそう Googleの傾向 出典:
https://developer.android.com/about/versions/14/features?hl=ja#grammatical-inflection
17 04 まとめ • 課題を解決するにはプラグインの活用も大事 • 合わせて工程の見直しもするとなお良です • 多言語化は国だけに収まらず、性別でも変えることができるようになっている
Confidential