意外と知らない!?デザインの工数削減テクニック〜Photoshop編〜

今回は、アプリボットが提供するスマートフォン向け学園ライフアドベンチャーゲーム「グリモア~私立グリモワール魔法学園~」(以下:「グリモア」)の運用に携わるデザイナーに、作業効率化に結びつくPhotoshopのtipsをいくつか聞きました。

-自己紹介をお願いします!

土地:「グリモア」デザインチームのリーダーを担当しています、土地です。宜しくお願いします。現在、チーム編成は、僕を入れて2名。僕は、運用のガチャやイベントの素材の制作から、UI/UXの開発を担当しています。

▲「グリモア」のメインビジュアル


-グリモアはリリースされてから何年目ですか?

土地:今年で、4年目です。


-長いサービスですね。ゲーム内でのキャンペーン数も多いと思うのですが、どれくらいあるんですか?

土地:時期によって異なりますが、特にキャンペーンが多い年末年始だと、毎年5本くらいありますね。昨年末も、毎月実施しているゲーム内イベントが2本、クリスマスイベントが1本、年末年始イベントが1本、コラボレーション企画が1本ありました。


-2人で回すのには、とっても忙しそうですね。

土地:これらのキャンペーンの制作物を作りながら、同時にUI/UXの開発も進めるので作業はとても多いですね(笑)


-少人数で回すために取り組んでいる作業効率化のtipsを教えてください!

土地:わかりました!計4つのtips をご紹介しますね!


1.スマートオブジェクトは使わず、リンクを使う

データファイルを軽くするためにスマートオブジェクトではなく、リンクで画像の配置を行います。また、必要な画像は差し替えで済むような構成に。

①キャンペーンタイトルで分けているフォルダーに、作業用のpsdファイルとlinksフォルダーと設けます。linksフォルダーの中にバナーで使用するキャラクター素材を格納。

②1つのpsdファイルに同キャンペーンで必要なクリエイティブのアートボードを用意。

③それぞれのアートボードで、バナーやヘッダー画像を作成。キャラクター素材を必要とするとき、[ファイル]→[リンク配置]でlinkフォルダーに格納している画像を選択。(埋め込みなし)


[作業ポイント]

キャラクターの素材を差し替えるときは、リンク元のpsdを差し替えます。その際、アートボード内に、赤い丸でガイドラインをひいて、ガイドラインに沿って顔を配置します。リンク元の画像サイズを統一してるのでキャラクターを差し替えても、アートボード上の顔のサイズは変わりません。


また、キャラクター配置の基準点をアートボードの外にガイドラインを記載しておきます。


[コメント]

土地: 「グリモア」は一度に扱うキャラクターがとっても多いので、スマートオブジェクトを多用しすぎると、一つのファイルに5.6ギガ必要で地獄なんです…。でも、この対応をしたことで、文字を打つだけでもローディングが回って待ちの時間になっていた工数を削減することができました。体感ですが、削減できたのは1日から1.5日ぐらいの工数だと思います。また、キャラクターの変更があるときにラクで、差し替え漏れが出ないので安心です。


2.ライブラリーを使う

共通パーツをライブラリに登録して作業することで、チームで作業を共有する際に、ライブラリーから使えば、巻き戻ることがありません。

①アートボードに制作したバッジなどをライブラリパネルに直接ドラッグするとライブラリーに登録できます。

②使用する時は、ライブラリからpsdにドラッグすると登録した素材が使用可能です。


[作業ポイント]

「グリモア」ではパーツからpsdファイルまで、ほぼ全てのパーツがテンプレート化されており、ゲーム内で表示する画像からプロモーションで使用する画像まで対応しています。例えば、常時使用するパーツデータをライブラリに登録することで、そのパーツを使用する際に過去のpsdを開く手前を省けるようにしています。


3.レイヤーカンプを使う

デザインの状態を切り替える時に、[ウィンドウ]→[レイヤーカンプ]でレイヤーカンプを使用。

①画像を作成して、スマートオブジェクトにする。レイヤーカンプから切り替えたい内容を、新規レイヤーカンプから登録します。

②カンプ設定したデータは、[属性]→[レイヤーカンプ]の選択項目が表示されるので、使用したい状態を適応させます。


[作業ポイント]

レイヤーカンプを選択できる機能を作っておけば、スマートオブジェクト先を更新することなく、タブから状態の切り替えが可能になります。レイヤーカンプの設定はとても簡単で数分でできます。このひと手間をしておくことで更新作業は一瞬で終わりストレスなく作業できます。


4.アセットを使う

書き出しにはアセットを使用し、自動で複数の書き出しが一度でできるようにします。

①「グリモア」の場合は、同キャンペーンで同じpsdを使用。それぞれのアートボードに、「bunner_1.xxx.jpg」などの名前をつけて書き出し。

②アセットで登録された画像は全て同フォルダーに一斉に書き出しされます。

③全てのアートボードに「xxx」の表記を入れることで、のちにキャンペーン名に振られている番号に置換できるようにします。


[作業ポイント]

最初からキャンペーン名を入れておいてもいいですが、そうすると毎回キャンペーン名を差し替えないといけないため、置換する方法をとっています。また、この方法を使うと差し替え漏れを防ぐことができます。


※上記のtipsは、「グリモア」で使っている一例です。

土地:作業をしてる中で、「もっとやりやすい方法はないか」ということを日々考えています。それは、単に「仕事を終わらせて早く帰りたいから」ではなく、ルーティーンワークや無駄な工数をできる限り削減することで、デザイン作業などのクリエイティブに時間を割きたいからです。これからも良いクリエイティブを生み出して行けるよう励んでいきます!