サイトアイコン Tech Inside Drecom

Photoshopスクリプトでローカライズ作業を効率化する

尾﨑春菜
こんにちは、ドリコムにてUIデザイナーをしている尾崎です。
今回はPhotoshopスクリプトを使用し、日本語から多言語へのリソース書き出し作業を効率化した事例をご紹介します。
スクリプティングそのものについては長くなるため割愛いたしますが、実際に困っていた事例と、有用なスクリプトを作るためにどのように要件を定義したかを詳しくお伝えできればと思います。
膨大な単純作業に困っているデザイナー諸氏、またはそんな状況に手を差し伸べたいエンジニア諸氏の参考となれば幸いです。

なお、Photoshopスクリプト自体の立ち位置や有用性については、わかりやすい別記事がありますので、ぜひ合わせて読んでみてください！

スクリプトでPhotoshopの作業を自動化する

概要

事例のプロダクトでは、 新規UIの実装の際にこのような文字入りのリソースについて、下記のようなフローで国内版から海外版へのリソース展開をしていました。

  1. 国内版でリソースを作成・実装
  2. 文字の入った画像リソースをリストアップ
  3. 文字部分を翻訳
  4. 各言語向けに同名でリソース書き出し
3.までは可読性を保ってローカライズするために1px単位での調整をする必要が出てくる場合もあり、手作業で行わざるを得ません。ここを自動化するのは現状費用対効果が薄いので置いておきます。
が、4.の項目についてはただひたすら同じ作業の繰り返しなうえ、書き出し漏れなどの人的ミスが起こりかねないため、地味につらい作業となっていました。

4.各言語向けに同名でリソース書き出し

ので、今回は主にこの部分を自動化できないか？と考えました。
一連の問題点を洗い出すと下記のようになっていました。

要件定義

問題点を踏まえて仕様を決定します。
「効率化しようとしたらかえって面倒になった」という悲しい事態を避けるため、まずは運用方法を変えて解決できそうな部分は変えることにします。

運用体制で解決できそうなところを解決したうえで、スクリプトで自動化すべき箇所を洗い出していきます。
今回は下記のようになりました。

ようになりました。
これにより、書き出し作業に手間が取られなくなったため、
「作業PSDを1つにまとめる」運用が可能になりました。
また、 「各言語それぞれ個別のPSDに書き出せる」ことで、リリース後に特定の言語に調整が入った場合にもPSDの分離がしやすくなりました。

仕様決定時に気をつけること

要件が決まったら、スクリプト化する上で詰めるべき仕様を決定します。
大量のpsdからそれぞれを多言語に書き出すため、今回大きく決めるべき箇所は2点です。

人間が自分で作業する際は自分で考えて判断できますが、スクリプトに任せるにあたっては「もし～なら＊＊」くらいの簡単な条件で判断ができるくらいまで人間がおぜん立てをする必要があります。
ただ、おぜん立てが面倒臭すぎると結局作業が滞ってしまうので、なるべくスクリプトを使うためだけにしなくてはいけないような作業が少なくなるよう仕様を決定します。
今回は、それぞれ

のようにしました。
レイヤ名での判定は、レイヤ名変更作業のしやすさ・直感的なわかりやすさも手伝って運用しやすいのでお勧めです。

スクリプト実行例

例として実際の構成に近いフォルダを用意して実行してみます。
画像青枠部分のassetフォルダが作業ファイルのフォルダです。実際はもっと多くのファイルを制作しますが、今回は3つのpsdをフォルダ内に配置しています。そのうち「mission_completed_03」はさらに1つ下のフォルダの中に配置しました。
できあがったスクリプトを実行すると黄枠のような構成のファイルが書き出されます。
減色前-〇〇フォルダは組み込み用リソースのフォルダ 、asset-〇〇フォルダは自動で書き出された各言語の作業ファイルのフォルダです。
assetフォルダと同様のファイル名やフォルダ構造で、英語のファイルが書き出されるようになりました。
また、PNG書き出し、PSD書き出しの片方だけを使用したい場合に対応するため、チェックボックスで書き出し対象を指定できるようにしました。
「特定の言語だけを書き出したい」など運用に伴って増えてくるニーズもありそうなので、適宜オプションを追加して整備していけると良さそうですね。

注意点

Photoshop スクリプトは Photoshop のバージョンアップに伴って突然使えなくなる可能性があるので、作成したスクリプトについては仕様や実装内容を引き継ぎ、メンテナンスができる人員を確保できると、化石化を防ぐことができます。

おわりに

以上になります。
このスクリプトはチームメンバーにも好評を貰っており、作成した甲斐があったと思います。
Photoshopでのデザイン作業をスクリプトで効率化する際、普段からPhotoshopを触っているタイプのエンジニアさんならともかく、そうでない場合は作業者であるデザイナー以外には作業フローがわかりづらい部分も多いかと思います。
デザイナー自身がスクリプトを組めるとスムーズですが、そうもいかない場合もあるかと思いますので、一つの制作フロー例としてご参考になりましたら幸いです。
願わくば、どうせわからないだろうし‥と作業者間や職掌間で情報をクローズドにせず、情報をオープンにして様々な問題を解決できたら幸せですね。
ドリコムでは一緒に働くメンバーを募集しています！
募集一覧はコチラを御覧ください！

Related posts:

  1. デザイナーの作業自動化にまつわるエトセトラ
  2. デザイナーがゲーム開発ソフトを触ってみること
  3. スクリプトでPhotoshopの作業を自動化する
  4. 年の瀬Photoshopスクリプト大掃除録
モバイルバージョンを終了