meycoのUX&UIデザイン技術メモ

@meycoがUIデザイナー&アーティストとして仕事する上で、役にたった事をひたすらまとめます。ゲームUI強めです。My portfolio site.: http://meycou.com/ noteで小説や漫画を書いています:https://note.mu/meyco

github×Sketch 3 運用のススメ

sketchアドベントカレンダー1日目! githubとsketch 3の連携についてのお話です。

デザイナーでsketch3を使っている人は多いと思うのですが、社内のデザインデータ管理は会社によると思います。

私の場合は、

  • デザイナーが私一人
  • デザインデータをまるごと誰かに渡す事がない

だったので、ローカルのHDかグーグルドライブでとりあえず行っていたのですが、

  • HDDのデータが飛ぶ
  • グーグルドライブで同期失敗 & だれかが無断で修正しても修正箇所記録取れない

という事に不安を感じていたのと、githubを毎日使い、エンジニアの作業の様子を見ていて「エンジニアもコードをgithub上に置いているのだから、デザイナーもデータをgithub上に置けるのでは?」と思い、テスト的にgithub上でデザインデータを運用してみることにしました。

なぜgithubで運用したいのか

デザインデータを修正してもデータは一つだけで済む

通常、デザイナーはデザインが本決まりするまで、一つの画面デザインに対して5〜10個ぐらいラフバージョンを作ります。 そして本決まりしてから「やっぱり過去に作ったあの時のデザインの方が整合性が取りやすくて良くない?」となる時が時々あるので、そのデータを簡単にサルベージしたいと思っていました。

今までは「日付Login_v03.psd」のような差分データがたくさんあり、プロジェクト終わるまで別なところに退避させておいたりしたのですが、githubで管理していれば簡単にデータを探し出して復帰させる事ができます。

デザインデータの変更点の記録をとりたい

実はこれが一番大事。デザインの作業は数値化するのが非常に難しいので、変更点や作ったものをすべて記録をとっておくと、自分が今週どのくらい作業したのか解りやすく、次の週の作業の見積もりがしやすくなります。 また、日報や定例などで何をやったか忘れないのも凄く強いです。

データも一つなので、何を、いつ、どう修正したのか?がわかり、作業ミスの原因や対策もつかみやすくなります。

sketchは軽いので向いているのでは?と思った

sketchデータは、今まで使っていたIllustratorPhotoshopに比べて圧倒的に軽いです。 なので、データのプッシュやプルをしても大丈夫なんじゃないかな?と思いました。

エンジニアさんとデザインデータをシェアしたい

私の作業環境は、ネイティブエンジニア6名に対し、デザイナーが私1名という構成になっています。 なので、画像のちょっとした修正作業や、「まだISSUEに載せてないんだけど、この部品はこのデザインで行きたいと思っています!!」という意思表示のための小さな修正作業を行っています。画面遷移図をこまかに更新している手間はあまりかけられません。(本当はしたいんですが・・・) なので、その小さな変更点を毎日コミットログに書いてgithub上にあげておけば、エンジニア全員が見ることが出来ます。 決定的な変更点ではなくとも、 - 「ここ変わりそう・・・よし、修正しやすいコードにしておこう」 -「ここ変更になりそうだから、まだ手を付けないで別な場所をさきにやっておこう。」

と準備をしておいてくれるのです。

また、小さな変更点でも明らかに整合性が無いデザインであれば、同じリポジトリ内にissueをたてておくことが出来ます。これは、誰でもいつでも立てることができるのです。

直面した課題

データをダウンロードしようとした場合、1ファイルずつではなくすべてのファイルがダウンロードされる

これはgithub上の仕様の問題なので仕方がありません。 ただ、幸いなのはsketchデータが軽いため、そこまでダウンロード時間がかからないという事です。

データをどこまで綺麗に作っておけばいいのか?という問題

まず、私(デザイナー)が一人でデータを共有する必要、もしくは予定が全くありませんでした。 UIデザインは、デザインで作る部分とプログラムで作る部分が混ざっています。きちんと数値とアイコンなどの画像をしていれば、データを共有する必要があまりありません。 また、テスト的に作るスピードの方が大事なので、データ自体を丁寧に作りこむのはリリース直前、またはリリース後の保存用という事もしばしばでした。

とは言っても、まだアルファ版も出来ていないような状況だったので、データを綺麗にするよりも、UIの設計を詰めた方がいいという考えもあり、いままで自分がわかるようにしかデータを作っていませんでした。 しかし、githubでデータを共有するなら人が見やすいデータ構造を作らなければなりません。そこで、少しづつデータを綺麗に作り変えたり、命名規則を定義したりという事を始めました。

また、この作業を知ったエンジニアさんたちが、時間軽減のため、進んで命名規則のルールを決めてissueに書いてくれました。これは非常にありがたかったです。

やってみて正解だった!

何の作業をしたのか?という見直しがしやすくなった

これは上記にも書きましたが、何の作業をしたのかというストリークが判るようになりました。 なので、頻繁にされる「なぜこれを削除したんですか?」「どうしてこの部品をつけたんですか?」の質問に対して、答えやすくなりました。会議やミーティングが進めやすくなります。

更新したデータから自動で画像をエクスポートできるようになった

これは完全に予想外だったのですが、UIのsketchデータをgithubに上げた後、CircleCIでアートボードのpngを書き出して、最新の全体のUI画像を自動生成できるようにしました。 これで、画面遷移図を誰でも更新できるようになりました。

伝え忘れたデザイン詳細を、自分たちで確認・ラフ実装できるようになった

エンジニアがsketchデータをダウンロードしてくる事によって、自分たちで確認できるようになりました。 基本的に行うのは、オブジェクトの色や線の確認、エクスポートの2つぐらいしかありませんが、これでけやってもらうのでもデザイナー的には非常にありがたいです。

エンジニアのデータの待ち時間がちょっと少なくなった

特にアルファ版では実装と検証のサイクルがとても重要なのですが、そこでエンジニアの画像待ち時間がちょっと少なくなりました。デザイナーの手が空かなくてエクスポート出来なかった、またわ書き出し忘れていた画像も、自分たちである程度は実装できるようになりました。

間違いに早く気づけるようになった

上記の総合的な時間短縮と効率化により、間違いやUI設計の抜けに気付きやすくなりました。

以上が、githubとsketchを運用してよかったなぁと思うところです! みなさんも是非試してみてください。