この記事は KLab Creative Advent Calendar 2019 の 19日目の記事になります。

こんにちは。UIデザイナーをしている、ちいやまです。

今回は、バナー制作コスト削減の取り組みの一環で、バナー生成ツールの開発をした件について紹介します。
実装の詳細についてはエンジニアさんに開発してもらったので書くことができませんが、
デザイナー視点での業務効率化への取り組みについて書いていきます。

どんなツール?

キャラクター用のバナー画像（テキストが多め）のキャラクター等のデータをPhotoshopで手動で入力するのではなく、
マスターとゲーム内辞書からキャラクターの情報を取得し、自動で入力して画像として出力するUnity拡張機能です。

配置などが変動しないテンプレート化できるバナーを作成することができ、
ゲーム内辞書・マスターのキャラクター情報からデータを取得できるので手動ミスが発生しなくなる、再生成するのにも時間がかからないので、パラメータ変更とか文言変更に対応しやすくなるツールです。

なぜツール作ることになったのか

テキストが多く含まれるバナーの制作コストが高く、その上で多言語に制作するコストも高くなっていたので、この作業を効率化できないかということがきっかけでした。

その中で、ゲーム内で使っているデータを直接引用し、出力できたら、
人為的ミスの削減、文言変更などにも対応できるのではということで、
バナー生成ツール（Unityの拡張機能）を作ることになりました。

そもそも、なぜそのままのデザイン構成でゲームのUIに組み込めなかったかと言うと...

UIにそのまま組み込めなかった理由

使用されているバナーが一箇所で使用されているのではなく、複数箇所の画面構造を作り変えるというのはかなり工数がかかる、という点もありましたが、
Photoshopで作られたデザインの中には多分にフチやシャドウ・グラデが含まれます。

そのままの表現でUI化した場合、処理負荷が上がりローディング時間が長くなることが見込まれ、ユーザー体験が下がるため、という点と
反対に処理を優先してテキスト表現をシンプルにしたり、テキストを完全に外に出してしまう場合、
現在の画像の品質から大きく落ち、訴求力が落ちるという点があるためです。

（人は整理された芸術的なデザインよりも、チラシのような非芸術的なデザインを選ぶ傾向があるという研究や、読みづらい文字（角度がついていたり）や見慣れた文字が記憶に残りやすいという研究もある）

という理由があり、
出力する媒体は「画像（png）」という部分は変えず、Unityでテキスト部分・ステータス等を動的に取得し半自動化しようという開発方針になりました。

仕組み・作業の流れ

①画像の作成・Unityに取り込み

汎用的なアイコンやフレーム、背景などを作成します。
新規で登場するキャラクターやバッジ等はここで作成し、更新のたびに追加していきます。

②Unity上でバナー生成ツールの使用

（モザイクが多くてなんのこっちゃという感じですが）画像のようにシーンを実行しながら、ツール画面にキャラクターIDなどの情報入力、テキスト折返しの位置指定します。必要に応じてテキストのグラデーションを調整したりもします。

③画像の生成

画像出力ボタンを押すと画像が保存されます。
最後に、制作したプレハブ・画像をGitで共有して完了です。

改善された点

・実際にゲーム内で使用されているマスターデータを参照して画像を生成できるので、手入力による記入ミスの減少や、多言語に対応する制作コストを下げることができた。
・簡単に画像を出力することができるようになるので、画像制作コストを下げることができた。

運用をしてみて

今回ツールを作成後、実際にテスト的に運用に乗せてみたのですが、機能が不足している点など運用してみて初め気付くことがたくさんあり、仕様出しの難しさを痛感しました。
現在は完成にむけて絶賛修正中という段階です。

今回のバナー生成ツール開発ではデザイナーが泥臭くやっていた作業を、プログラムの力を借りて
効率化をしようという試みでした。忙しい中、開発をしてくれたエンジニアの皆さんにこの場を借りてお礼致します・・！

この記事が、同じような問題を抱えてる方のヒントになったら幸いです。
以上、最後までお読みいただきありがとうございました。