※ 本稿は Tech Inside Drecom に掲載された記事、「Photoshopスクリプトでローカライズ作業を効率化する」の Qiita 出張版です。
こんにちは、ドリコムにてUIデザイナーをしている尾崎です。
今回はPhotoshopスクリプトを使用し、日本語から多言語へのリソース書き出し作業を効率化した事例をご紹介します。
スクリプティングそのものについては長くなるため割愛いたしますが、実際に困っていた事例と、有用なスクリプトを作るためにどのように要件を定義したかを詳しくお伝えできればと思います。
膨大な単純作業に困っているデザイナー諸氏、またはそんな状況に手を差し伸べたいエンジニア諸氏の参考となれば幸いです。
なお、Photoshopスクリプト自体の立ち位置や有用性については、わかりやすい別記事がありますので、ぜひ合わせて読んでみてください！
概要
事例のプロダクトでは、 新規UIの実装の際にこのような文字入りのリソースについて、下記のようなフローで国内版から海外版へのリソース展開をしていました。
- 国内版でリソースを作成・実装
- 文字の入った画像リソースをリストアップ
- 文字部分を翻訳
- 各言語向けに同名でリソース書き出し
3.までは可読性を保ってローカライズするために1px単位での調整をする必要が出てくる場合もあり、手作業で行わざるを得ません。ここを自動化するのは現状費用対効果が薄いので置いておきます。
が、4.の項目についてはただひたすら同じ作業の繰り返しなうえ、書き出し漏れなどの人的ミスが起こりかねないため、地味につらい作業となっていました。
4.各言語向けに同名でリソース書き出し
ので、今回は主にこの部分を自動化できないか？と考えました。
一連の問題点を洗い出すと下記のようになっていました。
- 大量のPSDを開いたり閉じたりしながら作業する必要があり時間がかかる
- 国内版のPSDのデザインに変更が入った際に各言語に変更を反映する作業が発生し、時間がかかる
- 数が多いと書き出し漏れが発生しそうで怖い
- PSDの数が膨大になるので、ローカルPCの容量が圧迫される
- 組み込みリソースに合わせてフォルダに分配するのに時間がかかる
要件定義
問題点を踏まえて仕様を決定します。
「効率化しようとしたらかえって面倒になった」という悲しい事態を避けるため、まずは運用方法を変えて解決できそうな部分は変えることにします。
- 作業PSDは1つにまとめる運用に
- ローカルPCの圧迫を回避できる
- PSDを閉じたり開いたりする手間が削減できる
- ただし、一部のリソースや特定の言語だけ個別のPSDを操作できるようにしてほしい
- 文字の長さが大きく変わる場合・1言語分だけでファイルサイズが膨大になる場合などに対応するため
- リリース後に言語別に調整が入る場合があるため
運用体制で解決できそうなところを解決したうえで、スクリプトで自動化すべき箇所を洗い出していきます。
今回は下記のようになりました。
- 1つのPSDにすべての言語が入っているファイルから
- PNGを全言語分、同じ名前・フォルダ構造でまとめて書き出せる
- 各言語それぞれ個別のPSDに書き出せる
ようになりました。
これにより、書き出し作業に手間が取られなくなったため、
「作業PSDを1つにまとめる」運用が可能になりました。
また、 「各言語それぞれ個別のPSDに書き出せる」ことで、リリース後に特定の言語に調整が入った場合にもPSDの分離がしやすくなりました。
仕様決定時に気をつけること
要件が決まったら、スクリプト化する上で詰めるべき仕様を決定します。
大量のpsdからそれぞれを多言語に書き出すため、今回大きく決めるべき箇所は2点です。
ファイルを書き出すときのフォルダ構造はどうやって判断させる？
PSD内のレイヤーがどれがどの言語のものかをどうやって判断させる？
人間が自分で作業する際は自分で考えて判断できますが、スクリプトに任せるにあたっては「もし～なら＊＊」くらいの簡単な条件で判断ができるくらいまで人間がおぜん立てをする必要があります。
ただ、おぜん立てが面倒臭すぎると結局作業が滞ってしまうので、なるべくスクリプトを使うためだけにしなくてはいけないような作業が少なくなるよう仕様を決定します。
今回は、それぞれ
- 書き出すときのフォルダ構造
- 作業ファイル自体をフォルダ分けし、そのフォルダ分けにそのまま準拠する
- そもそも格納時に行うフォルダ分け作業なので手間が省ける
- PSD内のレイヤーがどれがどの言語のものか
- 対象になるレイヤ名・レイヤグループ名に「2文字の言語名」をつけ、レイヤ名から判定できるようにする
- 人間が見分けるうえでも行う作業なのであまり手間にならない
のようにしました。
レイヤ名での判定は、レイヤ名変更作業のしやすさ・直感的なわかりやすさも手伝って運用しやすいのでお勧めです。
スクリプト実行例
例として実際の構成に近いフォルダを用意して実行してみます。
画像青枠部分のassetフォルダが作業ファイルのフォルダです。実際はもっと多くのファイルを制作しますが、今回は3つのpsdをフォルダ内に配置しています。そのうち「mission_completed_03」はさらに1つ下のフォルダの中に配置しました。
できあがったスクリプトを実行すると黄枠のような構成のファイルが書き出されます。
減色前-〇〇フォルダは組み込み用リソースのフォルダ 、asset-〇〇フォルダは自動で書き出された各言語の作業ファイルのフォルダです。
assetフォルダと同様のファイル名やフォルダ構造で、英語のファイルが書き出されるようになりました。
また、PNG書き出し、PSD書き出しの片方だけを使用したい場合に対応するため、チェックボックスで書き出し対象を指定できるようにしました。
「特定の言語だけを書き出したい」など運用に伴って増えてくるニーズもありそうなので、適宜オプションを追加して整備していけると良さそうですね。
注意点
Photoshop スクリプトは Photoshop のバージョンアップに伴って突然使えなくなる可能性があるので、作成したスクリプトについては仕様や実装内容を引き継ぎ、メンテナンスができる人員を確保できると、化石化を防ぐことができます。
おわりに
以上になります。
このスクリプトはチームメンバーにも好評を貰っており、作成した甲斐があったと思います。
Photoshopでのデザイン作業をスクリプトで効率化する際、普段からPhotoshopを触っているタイプのエンジニアさんならともかく、そうでない場合は作業者であるデザイナー以外には作業フローがわかりづらい部分も多いかと思います。
デザイナー自身がスクリプトを組めるとスムーズですが、そうもいかない場合もあるかと思いますので、一つの制作フロー例としてご参考になりましたら幸いです。
願わくば、どうせわからないだろうし‥と作業者間や職掌間で情報をクローズドにせず、情報をオープンにして様々な問題を解決できたら幸せですね。
Tech Inside Drecom の最新の情報は Facebook や Twitter からお届けしています、フォローよろしくおねがいします！
- Twitter: @DRECOM_TECH
- Facebook: tech.inside.drecom
※ その他の Tech Inside Drecom の記事は、コチラからお探しいただけます！