次世代デザインツールはどこへ向かうのか　中編

実装を考えながら作れなかった従来のツール

6年前になりますが、 web のデザインは枠のない世界であると説明したことがあります。様々なスクリーンサイズのことを考慮して作らなければならないと頭で分かっていても、デザインツールでそれを実現するのが困難でした。10年以上大きな変化がなかったデザインツールに対して、実装側はどんどん進化し続けていました。Web だとフロントエンド技術とワークフローに大きな進展がありましたし、ネイティブアプリも　1　年おきに OS と周りの開発環境がアップグレードしています。

開発は目まぐるしいスピードで変化しているのに対して、デザイン環境は大きく変わっていなかったことが、今私たちが抱えているデザインと開発の溝の根源ではないかと考えています。2010年代はデザインツールの革命期と呼んでも良いくらい様々なデザインツールが出てきていますが、今まで遅れていた分を取り戻そうとしているのかもしれません。それくらい、デザインと実装には深い溝があります。

大小様々ですが、今でも増え続けています。

随分洗練されてきたデザインツールですが、今でもデザイナーが作った『絵』を見ながら、ゼロからコードへ転換するといった作業は発生します。PSDなどのデザインデータで作られたデザインは完成品というより、実装のための青写真に近いものです。つまり、実装しないと分からないことがあまりにも多いのにも関わらず、その絵を完成品の一歩手前として承認してしまう現場もあります。

実装のことを考慮していないデザインは主に 3 つの特徴があります。

• 情報共有不足：実装のための情報が足りなかったり不透明なところがあるため、開発者が空気を読まざる得ない
• エッジケース：情報が空の場合、エラーが発生したときなど、ある特定の状態が考慮されていない
• 技術的制約：ハードウェア、ソフトウェア、そして媒体がもつ特有の制約を理解せずにデザインされている

Overflow でユーザーの遷移全体を確認しながらデザインができるようになりましたし、Zeplinのようなデザインスペックツールのおかげでデザインファイルと睨めっこするという時間もなくなりました。

冒頭で紹介した、可変デザインの問題も Webflow、Ceros、Framer、React Studio によってある程度解決しています。これらデザインツールの特徴は高い表現力を保ちながら、コードを書き出してくれるところです。デザインツールで可変デザインができるようになっていれば、デザイナーも様々な可能性を模索しやすくなるはずです。

デザインからコードまでを受け持つツールは非常に便利ですが、ワークフローの柔軟性を奪ってしまうだけでなく、デザインツールの作法に寄り添うことになるので高いカスタマイズ性も失われます。特にエンジニアのほうは独自の進化を遂げているだけでなく、組織の環境や文化に合わせて最適化されています。デザインと実装の溝を埋めるには、様々な開発ワークフローに耐えられるツールである必要があります。

プラットフォーム化するデザインツール

Sketch が UI デザインにおいてデファクトスタンダードのような存在になれたひとつの理由は、プラグインが作れる環境を用意して早期から開発者を巻き込んだところだと思います。足りないところが多々ある Sketch ですが、現場のワークフローに合うプラグインを作ることができるのは大きなメリット。また、Sketch は JSON ファイルで構成された『オープンな』ファイル形式。だからこそ Windows で Sketch を開く Lunacy のようなツールがサードパーティから出ているのでしょう。

デザインファイルはデザイナーのパソコンにあるデザインツール上で開ければ良いというのは過去の話。複数のデザイナーが触ることもあれば、エンジニアとの連携を考えると読み書きしやすいデータ構造であることが必須になります。また、デザイン・開発ワークフローも千差万別になってきているので、今まで以上に高いカスタマイズ性が求められます。

オープンで読み込み・書き込みがしやすいデータ。必要に応じて機能拡張や他サービスと連携ができるプラットフォームのような振る舞いをするツールが増えてきています。今は Sketch だけでなく、Adobe XD、Figma、inVision Studio、Marvel、Fuse が API を公開して外部サービスやツールと連携しやすくしています。

外部サービスと連携してコミュニケーションの解像度を上げたり、デザインの効率化がしやすくしてくれるのも、デザインツールの条件です。

デザイナーであれば、手に馴染む道具を使いたいですし、表現力を高めてくれるものを求めがちです。デザインツールを選ぶ条件ではありますが、実装との溝を埋めていきたいと考えるのであれば、プラットフォームのようなデザインツールを選んだほうが良いでしょう。

連携の先にあるもの

プラットフォームのようなツールで作られたデザインは、デザインスペックの共有がしやすくなる以上の恩恵があります。その好例として Airbnb が公開した react-sketchapp があります。 React で作られた UI ライブラリを Sketch ファイルに書き出すというもの。UI ライブラリの『元』は React 上にありますが、コードが更新されたと同時に Sketch ファイルも新しく生成されるので、デザインもコードも常に最新の UI を活用することができます。

開発元である Airbnb が React を使っていることもあり、react-sketchapp は彼らのワークフローに最適化されています（つまり、扱い難いです）。それに対して html-sketchapp は特定のライブラリに依存していないので、様々な形状の HTML ファイルから Sketch ファイルを生成することができます。

今日のイベントのために WDF 仕様にしているけど、今はこういうの模索している。コードからデザインファイルを『同期』させるかんじ #wdf29 pic.twitter.com/zHLcrkBqEL

— Yasuhisa🧞‍♂️ (@yhassy) 2018年3月10日

このようにコードからデザインファイルを自動生成することで、「どちらが正規のデザイン？」「どうやって連携していく？」といった課題から解放されます。また、sketch-to-react-native のようにデザインファイルから React Native の UI コンポーネントを書き出すものもあります。SVGファイルで書き出した画面から『切り出す』というやり方なので、開発者フレンドリーではないかもしれませんが期待される手段のひとつです。

他にも様々な JavaScript ライブラリをサポートしているスタイルガイドツール Storybook と Sketch を繋げる story2sketch もあります。先述した html-sketchapp を拡張したもので、Storybook をワークフローの一部として活用しているのであれば試す価値があります。

今は Sketch との連携が多いですが、プラットフォーム化し始めている他のデザインツールでも似たようなことが起こると思います。デザインと実装との間を埋める手段が出てきましたが、こうした連携を考えなければいけないほど高い質とスピードが求められてきています。効率化が進むデザインワークの先にあるものは何でしょうか。現場に合うデザインツールをどのように選んで、広めていけば良いのでしょうか。

スケール化するためのデザインツール: 次世代デザインツールはどこへ向かうのか　後編 →