デザインデータと本番環境の同期を試みるべきか

Twitterを見ていると、たまに「デザインデータと本番環境を合わせておくのが難しい」という意見を見る。そうしたい気持ちはよく分かるが、今では正直、それは幻想ではないかと思っている。

FigmaやXDで作ったデザインデータは、システムそのものではない、というと当たり前に聞こえるが、理解できていない人は多い。システムは有機的なもので、目まぐるしく変化するデータや操作の文脈により、無数の状態を持っている。一方で、デザインデータは、システムの特定の時間軸を切り取ったスケッチに過ぎない。

ただのテキストでも、プレーンなテキストも、APIやDBから取得したテキストも、同じものとして扱われる。本番環境を違いなく再現したように思えても、Webアプリであれば、ブラウザによってコンポーネントの見た目は変わるし、スマートフォンアプリでも、多くのデバイスサイズに悩んだ経験を持つ人は多いだろう。

つまり、本番環境の見た目というのは、1つではないのだ。よって、デザインデータと本番環境を1:1で合わせる発想から無理がある。また、デザインデータを常に正とする運用もおすすめできない。厳格なルールの下、チームの全員が管理できれば良いのだが、そうでなければ、消し忘れたレイヤーや試しに作ったレイヤーがたまたま残っており、それが誤って伝わるリスクを避けられない。

では、どうすればいいのか。デザインデータとは青写真に過ぎないという限界を理解し、正しい仕様、正しい見た目は、環境に上がっているものが全てとする。わたしは今のところ、このスタンスを取ることが多い。

繰り返しになるが、デザインデータは、システムの特定の時間軸を切り取ったスケッチに過ぎない。しかし、開発する上では、そのスケッチがチームに共通認識をもたらしてくれる。だから、たかがスケッチと卑下する必要はなくとも、その限界を把握しておくべきだろう。

一方で、そもそもデザインデータと本番環境を合わせたかった理由にも留意しておきたい。ひとつの理由としては、本番環境と対になるデザインデータがあらかじめ用意されていれば、その画面を改修する際、スムーズに検討に入れる。

そうでなければ、わざわざ既存の画面をデザインツールでトレースしたり、スクリーンショットを貼り合わせて体裁を整えてから、やっと本題の検討に入らなければならず、時間のロスにつながる。

しかし、先にも述べた通り、それは難しい。ひとつの方針としては、画面をそっくり管理するのではなく、あくまでもコンポーネントを管理するのはどうだろう。

コンポーネントさえ揃っていれば、画面の改修が入ったときにも、速やかに組み合わせて既存の画面を構築できる。画面単位で正確に管理しようとすると、実装マターの改修で見た目が変わったときや、スピード重視でデザインデータのメンテナンスの時間が取れなくなった途端に破たんする。

管理の単位をコンポーネントにしてしまえば、コンポーネントそのものはある程度の堅牢製を持っているため、画面と比べれば破たんしづらい。

だから、デザインデータとして作った画面は、あくまでも一時的な青写真用として捉えた方が良い。仕様書として常に正しいものではなく、チームの共通認識が取れて一度実装されたのなら、ただちに捨ててしまっても構わない。