難しくないデザイン効率化のすすめ

ガールフレンド（仮）とは

「ガールフレンド(仮)」とは、ユーザーが主人公となり、様々な女の子と出会っていく学園恋愛カードゲームです。

Adobe Photoshop スマートオブジェクトを使ったアイコン類の作成

ガールフレンド（仮）では、１枚のカード追加につき、UIで使用するアイコン・サムネイルなど7種を作成しています。1ヶ月で追加されるカードは150～200枚程度あるので、毎月1000以上の画像を作成・登録する必要があります。

以前は画像の数だけPSDファイルを作成し、一つ一つ手動で書き出していました。

このフローをファイルの数だけ繰り返します。気の遠くなるような作業です、、、、

そこで、１枚のカードで作成する画像を１つのPSDファイルにまとめて、スマートオブジェクトを使ってまとめて管理するテンプレートを導入しました。あらかじめ画像の種類によって縮尺、位置を調整したテンプレートです。スマートオブジェクトの差し替えだけでガールの画像が全て置き換わる仕組みになっています。

このテンプレートの導入で書き出しフローは下記の様に。

毎回ファイルごとに画像を差し替え、サイズや位置の調整をしていたフローが必要なくなり、作業効率が3～4倍アップしたことでタイトなスケジュールに対応できる様になりました。

さらに、
・まとめて書き出すことで作業の抜け漏れがなくなったこと
・書き出す画像の種類が増えても作業量はほとんど増えないこと
など、今後の運用にも大きなメリットがあります。

■難しくないポイント
新しいツールの導入ではないので勉強会いらずで敷居が低い！

モジュール化と簡易HTMLを使ったページデザインの管理

イベントページやガチャのランディングページの作成について、基本的にページの数だけPSDファイルを作成していました。
下記の画像のように情報パネルのモジュールだけ複数のパターンが存在する場合、パターンの数だけファイルを作成して管理していることもあります。

このようなページ単位のPSDデータが複数あると、例えばヘッダーのロゴに修正が入ったときに全部のファイルを修正しなければなりません。

また、上記の3つのファイルの中から、例えば「未エントリー」のモジュールデザインが欲しい場合、3つのファイルを開いて中を見てみないと探せません。

ファイルが3つなら問題ありませんが、これが10ファイル、100ファイルということもあり得るとしたら？？　特に新しくチームに入ったメンバーへの負担が膨らんでいました。

そこで、ページごとに作っていたPSDデータをモジュールごとに分割、さらにモジュールごとに書き出した画像データを簡単なHTMLで再現するフローを導入しました。

先ほどのページ単位で作成していたデータに適応してみると、、、

モジュールごとにファイルを分けたことで、ロゴに修正が入っても 01.jpg を上書きすれば全ページに修正が適応されます。モジュールの縦幅が変わっても修正した画像ファイルの上書きだけでページの体裁が保たれるのも効率的です。

また、下記の様に画像ファイルと元データのフォルダ構成をあわせておき、画像のパスからPSDファイルの場所が割り出せる様にしたことで、欲しいモジュールに素早くアクセスできるようになりました。

さらに、
・ブラウザ上で簡易的に遷移を確認できること
・メニューページを作成して一覧性をもたせられること
・モジュール単位でデータを渡せるのでマークアップ担当者にもやさしい
など、今後の運用にも大きなメリットがあります。

■難しくないポイント
HTMLはあえて単純に！
イメージ画像を積んだだけのHTMLにしておくことで、マークアップの経験がないメンバーがパニックにならないようにしておくことも大切なポイントです。

最後に

効率化だけを考えてしまうと逆に非効率になってしまうことがあります。
スマートオブジェクトのテンプレートを導入した際に、よかれと思いスマートオブジェクトを入れ子にするテンプレートも作成したのですが、わかりにくく不評だったので破棄したことがあります。特に運用のフェーズでは、難しくしないことが正義かなと、ガールフレンド（仮）の運用に携わったことで感じた次第です。

最後まで読んでいただきありがとうございました。
何かのヒントに少しでもなれば幸いです。

そしてぜひガールフレンド（仮）で遊んでみてください！