プロジェクトのデザイン管理を改善した話
佐藤 一輝
プロジェクトのデザイン管理を改善した話
こんにちは。レストランボードでiOS開発を担当しているいちきです！
突然ですが、皆さんのプロジェクトではデザインファイルをどう管理されていますか？
今回はデザイナー、エンジニア協働で取り組んだデザインのファイル管理改善についてお話したいと思います。
はじめに
僕が配属された当時のレストランボードのデザイン共有フローです。
- デザインファイルは会社の共有ドライブで管理している
- 案件ごとにフォルダーを作り、デザインをしたらそこに追加していく
- 新案件がある度に前のデザインから必要な要素を取ってきてデザインする
- エンジニアとの共有は画像データに書き出して渡す(エンジニアはデザインファイルの場所を把握していない)
- デザイナーはプロジェクトに1名(現在は2名)
必要なデザインがあればデザイナーにお願いをしてデザインの画像を受け取っていました。
見えてきた課題
デザインを確認したい時にはデザイナーへ依頼をする必要があり、エンジニアとしても課題を感じていました。。
また、デザイナーは依頼されたらデザインの画像を生成する必要があったため、作業負担が多い状態でした。
課題と発生事象をまとめたものが下記です。
| 要因要素 | 課題 |
|---|---|
| 社内の共有ドライブに置かれた個人フォルダーで管理 | 最新版のデザインファイルがいつ更新されたか把握がしづらい デザインファイルの管理がデザイナー頼みになっている |
| Photoshopの活用 (Photoshop自体が悪いわけではないですが。。) |
エンジニアが閲覧できない ちょっとしたデザインの変更でもデザイナーに頼む必要があり、デザイナーの負担が大きくなってしまう |
| 別ファイル(psd)で切り出した共通パーツ | 共通パーツの管理が難しく、メンテナンスできていない |
将来的に目指していきたいところ
目指していきたいところとしては、上記の課題を解決するためにエンジニア、デザイナー間で発生しているコミュニケーションコストを削減することです。
私はエンジニアですがこの問題をプロジェクトとしての課題と捉えていたため、デザインファイルを管理する手間を減らして運用していける状態を目指しました。
打ち手
上記の目指したい方向を踏まえて、検討した打ち手は以下です。
| 現状 | 理想 | 打ち手 |
|---|---|---|
| 最新版のデザインファイルがいつ更新されたか把握がしづらい デザインファイルの管理がデザイナー頼みになっている |
最新のファイルがどこにあるか誰でもすぐに参照できること | バージョン管理 Git、GitHubの導入 |
| ちょっとしたデザインの変更でもデザイナーに頼む必要があり、デザイナーの負担が大きい | ちょっとしたデザインの変更ならエンジニアでもできるようにすること | Sketchへの移行 |
| 共通パーツの管理が困難 | 共通パーツの管理、更新が簡単にできること | Sketch Libraryの活用 |
ファイルの管理はGit、Githubでバージョン管理を行い、デザイン、共通パーツの管理はSketchを活用します。GitHub上で管理をすることでデザイナーに依頼をせずに誰でもファイルを取ってこれることを目指しています。
ツールの導入理由
次に打ち手の導入理由です。
Git、GitHub
最初に最新版のデザインファイルがいつ更新されたか把握がしづらいという課題があったため、バージョン管理の導入をすることに決めました。バージョン管理にはログからデザインの経緯、歴史が把握できるというメリットもあります。
現在はAbstractなどデザイナー向けに作られたバージョン管理システムがありますが、Githubに決めた理由は以下です。
- 社内の別プロジェクトで導入事例があった
- エンジニアが使い慣れていたため、導入の敷居が低かった
Sketch
Sketchの導入を決めた理由は
- ファイルが軽く管理がしやすかった
- エンジニアでも利用している人が多かった
- Sketchに完全移行した方が今後の運用や管理がしやすくなる
一方でデメリットとしては、
- Sketchへ乗り換えなければならない
- Macでしか使えない(プロジェクト内では全員Macだったので特に問題なし)
もともとPhotoshopを活用してデザインをしていたため、Sketchへ乗り換えなければならないというデメリットもありましたが、移行するメリットの方が大きいと考え、導入を決意しました。
Sketch Library
Sketch Libraryについては以前Qiitaの記事を書いたのでこちらを見ていただけると良いと思います。
Atomic Design × Sketch Libraryを用いてデザインファイルを作る
Sketch Libraryを導入した初期の頃はInVisionが出しているCraftを使って共通パーツの管理をしていました。
ですが、共通パーツの変更差分が把握がしづらかったため現在はSketch Libraryへ移行をしています。
Sketch Libraryを導入した理由は以下があります。
- 共通のSymbolの更新が柔軟に対応できる
- 共通パーツの参照が楽
- Sketchファイルで完結できるため、管理がしやすい
導入してみて
現在はまだPhotoshopからSketchへ移行途中ではありますが、あらためて導入して良かった点をまとめます。
Git、GitHubの導入してみて
こちらが実際にデザイナーがつくったPull Requestです。
Git、GitHubを導入したおかげで以前はファイル管理がデザイナー頼みになっていましたが、最新版のデザインファイルがすぐに分かりどういった変更が入ったのか把握がしやすくなりました。
また検討ごとにコミットをしているため、デザインの経緯、歴史を他の人でも知ることができます！
Sketch Libraryを導入してみて
共通パーツの更新が楽になった
※ 以下のGIFではサンプルとしてサイドメニューからひとつ列を削除しています。
Sketch Libraryを活用してデザインファイルをつくっていた場合、元のSketch Libraryが更新されたかSketchが検知してくれるため、変更されたLibraryに対してボタン一つでアップデートできるようになりました。
ヘッダー、フッター、サイドメニューなど共通のパーツに対して変更があった場合には変更がすごく楽になっています。
共通パーツの参照が速くなった
Libraryを登録しておくだけでどのSketchファイルからもレストランボードのLibraryを参照して利用できるため、参照をするのがすごく速くなりました。
さいごに
デザインファイルの管理方法はプロジェクトによって異なると思いますが、デザインのファイル管理そのものはすごく重要だと思っています。
今回自分が話した内容やツールの選定は必ずしも正解ではないので参考程度にしていただき、プロジェクト内で話合って最適なツール、管理方法を見つけていただければと思います。それではまた！