Webツールを使ってUI/UXのワークフローを改善する––氾濫するデザインデータとの向き合い方

UIUXワークフローをWebツールで改善する

Kimiko Watanabe氏：みなさんこんばんは。渡邉貴美子と申します。今回は、UI・UXのワークフローというものを、社内でWebのツールを作ることによって解決した、というお話をしたいなと思っております。

私の自己紹介を軽くさせていただきます。私はワンダープラネット株式会社のタノシムスタジオというところに所属しております。「WonderPlanetはどういうところなの？」というと、ゲームの会社です。そこでUI/UXエンジニアとして入社して、UI/UXのデザイナーさんと一緒にいろいろ調査をやっております。

WonderPlanetのプロダクトには、『クラッシュフィーバー』や最近出たものですと『ジャンプチヒーローズ』、自分の所属しているタノシムスタジオが作っているものとしては『つぐme』というゲームがあります。よかったら見てください。

今日の話の内容ですが、「弊社のUIチームがどういうふうにデザインデータ作ってるの？」ということや、どんな問題点があって、どういうワークフローの改善をしていったのかという話をしていきたいなと思います。

ゲームのUIデータが管理しにくい

実際、私たちのUIチームで相当困っていたことがありまして。弊社ではゲームのUIデータはPhotoshopで管理していますが、これがすごく増えやすく管理しずらいという問題に当たっていました。

同じようなUIデータのPSDがどんどん増えていってしまって、データの管理も煩雑になっていきますし、パーツのデザインを新しいデータに変えていっても、レイアウトしている画面のデザインのほうが全く更新されていかなくて、「どれが新しいデザインなの？」というのがどんどん蓄積されて行ってしまうことが多くありまして。

「これをどうにかして減らしていきたい。どうにかして新しくしていきたい」と、私たちはAtomic Designをもとにデータの分割を行い、それをPhotoshopの機能を使って管理していこうというようなワークフローの構築を目指しました。

Atomic Designを参考に3つに分類

Atomic Designはもっと分類するのですが、私たちは「Component」と「UIParts」と「Scene」という3分類をしまして、この分割レベルで切っていくというようにしております。

まず、Componentが小さい単位ですね。ボタンとかキャラクターの絵とか、そういうのが相当します。さらにComponentを組み合わせて機能を持ったパーツを組み立てます。これをUIPartsと呼んでいます。それをどんどん組み合わせて、Sceneのほうのゲームの1枚の画面に組み立てていく、というふうな手法をとっています。

これを管理するにあたってPhotoshopの2つの機能を使っています。1つが「レイヤーカンプ」という機能なんですけれども、これはPhotoshopのレイヤーの表示状態をレイヤーカンプというプリファレンス状態で登録することができる機能なんですね。それを切り替えると、表示状態が変わって、何種類も何種類もバージョンが作れるよという機能になっています。

もう1つが、スマートオブジェクトのリンクという機能がありまして、ほかのPSDを読み込んでくる機能ですね。こちらは先ほどのレイヤーカンプを切り替えられる機能がついていまして、そちらで作ったレイヤーカンプのバージョンをこっちで切り替えて、その1つのPSDで違うバージョンのものを管理しながらほかのPSDでそれを読み込むことができるというようなことをして、さっきの3分類したものをうまく読み込む、というようなワークフローを作っております。

このワークフローを作ったときに期待しているものがあります。というのは、まずPSDのデータが、バージョンごとにいっぱい作らなくていいのですごく少なくなったり。また、その全部のPSDが、リンクされているものは元のものを編集するとリンクされている側も新しいのに変わるので、新しいのが絶対適用たりとか。

どんどんそのデータがきれいになっていくと、新規デザイナーさんもスムーズにジョインできますよねってことを期待しておりました。

PSDを開けないと中がわからない問題

ただ、結局現実問題はやっぱりあります。そもそもさっきのレイヤーカンプとかスマートオブジェクトのリンクって、どこのデータとどこのデータが紐付いているかがPhotoshopを開けないとわからないという問題があります。どんどんブラックボックス化していってしまって、「どこのデータがどこにあるの？」というのがわからなくなるんですよ。

そうすると、「このボタンいじりたいんだけど、ほかの画面に紐付いているかもしれないからいじれない。怖い」といって新しいのを作り始めちゃうというようなことがありまして（笑）。これはもう新規のデザイナーさんにとっては恐怖でしかないようなことが起こってしまいました。

じゃあ「この問題点ってなんなの？」というと、先ほど言った「PSDを開けないかぎり中のデータの実態がまったくわからない」というのが問題なんですね。

それさえ解決できれば、やっぱりレイヤーカンプとスマートオブジェクトのリンク機能はすごく強力で、またAtomic Design的なものにすごく親和性の高い機能なので、これをうまく工夫することができさえすればもっともっといいワークフローになるはず、今のワークフローが洗練されていくはずだと考えました。

UDHelperがの特徴

そこで作ったのが「UDHelper」というツールです。雑な名前なんですけれども（笑）「UI Design Helper」というのを略して「UDHelper」ですね。これを私のほうで作りました。

UDHelperはWebのツールです。うちの会社ではUIのデザインデータをgitのほうで管理していまして、このWebツールで、サーバのほうでそのgitをプルしてきて持ってきて、中のPSDの状態を全部解析して、「どことどこのPSDがリンクされているの？」というデータを全部閲覧することができるというツールです。

これからデモをするのですが、一応社外秘のデータです。今回は「特別持っていってもいいよ」ということで持ってこさせてもらったので、撮影はこのデモのタイミングだけ遠慮していただければなと思います。

こういうツールになっています。見えますかね。この左側に大きくあるのがPSDの状態ですね。右側の上のParentというのが、このPSDが紐付いている親のPSD。下がChildになっていまして、「このPSDに対して何のPSDを読み込んでいるの？」という表示が見れるようにになっています。

なので、この画面はこれらのパーツが埋め込まれているということが分かります。オレンジ色がたしかComponent、一番小さい単位ですね。この水色はUIParts、そのそれぞれがいくつか組み合わさっている状態のものですね、になっています。

例えば「じゃあこれはどう使うの？」というと、「このアイコン変更してもいいの？」というときに、「このアイコンは右側のこのParentというこのSceneに紐付いているよ」というふうに見られると。だから、ここを変更してしまうとほかの画面が変更されちゃうってことなんですね。

これを閲覧することによって、怖くない。「この画面は変わっても大丈夫だから」というのがわかりやすいので、紐づけがしっかり確認しながらできるというツールになっています。

また、先ほどのレイヤーカンプ。今プレビューの機能をつけてないんですけど、「中身なにがあるのか、どういうバージョンがあるのかわからないよね」というのが、ここに「このPSDの中に格納されているレイヤーカンプってこれぐらいあるんだよ。こういう名前のものがあるんだよ」というのを見せることによって、デザイナーさんにどこのデータがどのPSDのどのレイヤーカンプに入っているのかというのを推測してもらう、というようなツールになっております。

こんな感じになっています。デザイナーさんは「じゃあどこにデザインデータがあるの？」とかそういうのは全部UDHelperで管理されているので、それを確認してもらうと。しっかり確認してもらって、安心してPhotoshopのほうでデザインデータを作ってもらったり編集してもらうようなワークフローにすることによって、さっきの3つに分解するというのをうまくワークフローとして回せるというような中間ツールになっております。

UDHelperを導入してわかったこと

じゃあ、肝心のエンジニアが出てこないじゃないかって話なんですけれども（笑）。Unityの開発したことがある方はわかると思うんですけれども、Webとかももちろんそうなのですが、Atomicの一番小さい単位のものがそのまま素材として入ってくることがほとんどなんですね。

デザインデータがバラバラで作られていないと、それを崩すという手間がかかったりとか、それがどこに配置されるのかというのがエンジニアにはわからないとかそういうのがあったりするのですが、ちゃんと分かれていることによって、「それがどこのSceneに紐づくんだね」というのがエンジニアもさっきのツールを見てわかるので、お互いの意思疎通が図りやすいというようなことができました。

まとめですね。Atomic Designとかコンポーネントデザイン的なものは、Photoshopの機能としてとってもレイヤーカンプとスマートオブジェクトの親和性が高かったですというのが、1つご報告となります。

ただ、そのまま運用してみましたが難しいというところがありますので、工夫するとそういう機能もフルに使っていろいろな開発ができるかなと思い今回はこんな補助ツールを作ったよという話をさせていただきました。

以上で発表を終わらせていただきます。ありがとうございます。

（会場拍手）