Sketchファイルはどれくらいまとめてどれくらいで分割すればいいのか問題

VALU Advent Calendar 2019ついに24日目です。3記事目になりますが今回はメインのUIデザインツールとして使用しているSketchについて。

私はWebデザインを始めて今年で17年ほどになります。メインで使っていたツールは、FLASH → Photoshop → Illustrator → Photoshop → Sketchという変遷を辿っております。

Photoshopはわりと最近まで「アートボード」機能がありませんでした（確認してみたらCC2015で追加されたようです）。なのでPhotoshopのアートボードはほとんど使っておらず、正直馴染んでません。これまではデザインを作成する画面の数だけPSDファイルがありました。

Sketchを使うようになると、アートボードはそこに当たり前のようにあったので、最初からアートボード前提で画面のデザインを組むようになると、何と便利なことでしょう！！一つのファイルに複数の画面を作れて、共通のアセットを利用出来る。今のデザイナーには当たり前かも知れませんがこれも驚きの一つでした。

デザインの内容自体もPhotoshopでリッチな、スキューモーフィックなものを作っていた当時に比べ、SketchやFigmaで作るものは大分軽くなっています。ちょっとしたWebサイトや小さいサービスなどであれば、Sketchファイルは1ファイル、アートボードを複数持ち、Pageを適宜分ける感じで管理も楽です（実際、前職ではいくつかのサービスのデザインは1ファイルのみで行ってました）。しかし、それなりに大きなサイトやサービスだとどれくらいまで1ファイルでいけるんでしょうか。また、Sketchファイルを分割する場合はどの程度に分割すると効率良く作業、管理ができるんでしょうか。みなさんどうしているのか知りたいのですが、あまり出てこないのでVALUのファイル事情を紹介できる範囲で考えてみたいと思います。

VALUとFundish

VALU社にはVALUとFundishの2サービスがあります。

叶う夢を増やそう。

Fundish（ファンディッシュ）｜「美味しい」は、ファンとつくる時代へ。

VALUは2017年5月末にローンチ。WebとiOS, Androidアプリで展開しています。Fundishは今年2019年の10月にローンチ。今はまだWebのみでの展開です。2サービスとも最初からSketchでデザインされ、バージョン管理やデザイナーとエンジニアの連携はAbstractを介して行っています。2年半の歴史もあり、ブロックチェーンでFintech、SNSでもあるVALUとまだ3ヵ月弱のFundishとで、Sketchのファイル数、Page数、アートボード数をざっくり見てみます。

VALU Web
ファイル：6 +ライブラリ 1  / ページ：92 / アートボード：690
VALU App
ファイル：11 +ライブラリ 1 / ページ：37  / アートボード：263

Webは画面サイズによって複数のアートボードがあるのでかなりアートボード数が多いです... またファイルの内訳で言うと、デザインのMasterとなっているものがあり、これが1ファイルだけで67ページ、563アートボードあります... これくらいだと正直目的の画面を探すのが大変です。ここまで1ファイルにページ、アートボードをまとめない方が良いですね...

AppはWebより後のリリースです。iOSとAndroidの差はありますが、全画面2種類は作れていないのと、機能自体が幾分整理されているので多少コンパクトになっています。ファイルの分け方としては、各機能カテゴリ、フローで1ファイルを構成する感じです。

Fundish
ファイル：13 +ライブラリ 1 / ページ：24 / アートボード：85

Fundishはまだ新しく、Sketchファイルの管理の経験値も上がってきているので大分扱いやすくなっています。VALUに比べサービスもまだそこまで複雑ではないため、各ファイルには1〜2ページ、アートボードも多くても17までという構成になっています。

 AbstractでのSketchデータの管理は、バージョン管理やブランチを切ることができ、デザインデータを安全に保ちつつ、同時作業するためにも重宝していますが、あまりファイルやアートボードが増えてくると同期が重くなってきたり、コンフリクトも起きやすくなってきますが、Fundishくらいシンプルに、あまり1ファイルにページやアートボードを持ちすぎないことで、コンフリクトが起きにくく、また同期待ちも比較的短くできています。

今のところ...

ベストなファイル管理や分割の基準はまだまだ探り中ですが、Abstract連携やデータのリファクタリングのことを考えると各機能毎、フロー毎にこまめにファイルを分けるのが良さそうです。

1ファイルに複数のアートボードを持つことで、アートボードを横断してアセットを共有できるメリット

これに関しては、Sketchではシンボルを外部ライブラリファイルとすることで、複数のファイルから同じシンボルを利用することができるので問題ないです。外部ライブラリもSketchの便利な点の一つですね。

ちなみに、VALUではファイル名の頭に絵文字が入っています（順番をコントロールするために数字が一番前ですが）。VALUにジョインしてきた時、「？？」となりましたが、今ではすっかり慣れてきました。開発メンバーが全員Macかつ開発が自社で完結するからこの運用ができているんですね。受託での制作が長かった自分には新鮮でした。

ちなみにこれはMicrosoftのこちらの記事を参考にしたとのことです。

Abstracting the Microsoft Outlook Design Process

以上、どなたかの参考になれば幸いです。