CRAIDでブリッジエンジニアをしているKakeyaです。今回は、Figmaのプラグインを開発してUIデザインの翻訳コストを大幅に削減した方法について紹介します。
はじめに
オフショア開発では、オフショアメンバーにプロジェクトの概要やサービスの仕様を伝達するために、ドキュメントの作成や翻訳を行います。弊社のオフショア開発では、ドキュメント類の作成・翻訳だけでなく、UIデザインに対する翻訳を行うこともあります。UIデザインの翻訳を行う主な理由としては、以下になっています。
- コミュニケーションの円滑化
- UIデザインに含まれる日本語の文言を翻訳することで、非日本語話者の開発メンバーとのコミュニケーションが円滑になります。これにより、ミスの防止や作業効率の向上を図っています。
- オフショアメンバーの理解度向上
- UIデザインの意図や機能を、オフショアメンバーが自身の言語で理解できるようにすることで、製品の品質向上に寄与します。
※ 前提としてUIデザインツールはFigmaを使用しています。
※ 今回紹介する翻訳手順はあくまで下訳ですので、翻訳後の修正は必要です。
Figmaプラグイン開発の背景
まず、UIデザインの翻訳方法としては、テキスト付近に翻訳後のテキストを設置しています。
オフショアメンバーはUIデザイン内の日本語テキストをコピーして使用するため、UIデザイン内のテキストを翻訳して直接置き換えることはしていません。
実際の翻訳作業の手順としては、以下となります。
- 翻訳
- テキストボックスを設置
- 翻訳後のテキストを入力
- 背景色を変更
- UIデザインと区別するため
これらの作業は、数画面であれば少しの労力で実行可能ですが、数十、数百画面となると、膨大な時間と労力が必要になります。
そこでこれらの作業を自動化したいと考え、Figmaプラグインの活用を考えました。ただ、既存のプラグインのみでは実現が困難だったので、不足部分を補うためのプラグインを開発することになりました。
Figmaプラグイン開発
実際に開発したプラグインがこちらです。
このプラグインは、選択したテキストを背景色ありで複製することができます。
使用方法としては、複製したいテキストを選択後、下記を設定して実行します。
- 複製後のテキストの配置を選択
- 上部 or 下部
- 文字の大きさを選択
- 文字の色を選択
- 背景色を選択
次に紹介する、Figmaプラグインを使用した翻訳手順の不足部分を補うためだけに作成したプラグインなので、単体だけでどういう需要を満たせるかわかりませんが、誰かの役に立つことを願っています。
Figmaプラグインを使用した翻訳手順
翻訳作業には開発したプラグインを含めて、以下の3つのFigmaプラグインを使用します。
- FilterTextLayers（既存）
- 選択されたフレーム内の全てのテキストのみを選択することができる。
- Easy Text Duplicate（今回開発）
- 選択されたテキストをを背景色をつけて複製する
- Deepl translate（既存）
- 選択されたテキストを翻訳する
実際の翻訳手順が以下になります。
- 翻訳したい画面を選択する
- FilterTextLayersを使用し、画面内のテキストのみを全て選択する。
- Easy Text Duplicateを使用し、テキストを複製する。
- 複製後は自動でテキストが選択された状態になっている。
- Deepl translateを使用して翻訳する。
また、翻訳語のテキストは一つのグループに追加されるので、一括で表示/非表示を切り替えることができます。デザインの修正や確認をする際に役に立ちます。
おわりに
Figmaプラグインの開発により、数時間かかる作業が数十秒で完了するようになりました。現在Figmaを使用し、UIデザインを今回のような条件で翻訳する必要がある方は、ぜひ今回紹介した翻訳手順を試してみてください。また、開発したプラグイン「Easy Text Duplicate」に関するご意見やご質問がありましたら、お気軽にお寄せください。
最後に、今回紹介した翻訳方法はツールを使用した翻訳になりますので、翻訳後は修正する必要があります。少しのニュアンスの違いで仕様に対する勘違いが生じる可能性があるので、不適切・曖昧な表現やプロジェクト内共通で使用されている単語があれば、都度修正してください。
