AIでデザインファイルの扱い方が変わった

AIによって、コードに近い形でデザイン画面を生成できるようになった今でも、Figma や Sketch のようにキャンバスを備えたデザインツールは必要です。細かな調整や試行錯誤を重ねたり、複数のアイデアを並べて比較・検討したりするアイディエーションの場として、キャンバスは非常に優れています。紙のノートにも、同じような自由さがあります。

ただ、キャンバスが必要だからといって、そのキャンバスをひとつに固定する必要はありません。

エンジニアとデザイナーのツール選びには、大きな違いがあります。エンジニアは、VimからVS Code、さらに Cursor へと環境を移行しても、これまで書いてきたコードをそのまま活用できます。一方、デザインツールでは、別のツールに乗り換えるとデータの移行が難しく、変換ツールも十分に整っていませんでした。そのため、デザイナーは一度選んだツールを使いこなすと、よほどの事情がない限り、長く使い続けてきました。私もその一人です。

AIファーストのデザインツール

この前提が、AIによって崩れつつあります。ひとつは、デザインツールそのものが、ここ2、3年で大きく変わったことです。新しいツールが次々に登場し、AIモデルとの関わり方も変わり続けています。 従来のデザインツールでも AI 機能はありますが、ここ最近できたツールは AI の組み込み方が少し異なります。 そして、その違いが UI やインタラクションにも表れています。

Pen や Paper には、従来のデザインツールと同じように、レイヤーパネルやインスペクターパネルがあります。ただし、それらを使って一から操作するというよりは、エージェントが生成したデザインを確認したり、微調整したりするための補助的な機能として位置づけられています。実際、これらのツールではデフォルトでレイヤーパネルは表示されず、代わりにエージェントと対話するためのチャット画面が開いています。

Claude Design も良い例です。プロンプトからスタートするというのも特徴的ですが、そのあとのデザインの微調整のしかた、そしてデザインシステムの適用のしかたは従来のデザインツールとは異なります。Wonder もキャンバスを使うメインユーザーは エージェントで、人はそれを監督するかのような役割になっています。 豊富な書き出し形式をサポートしているのも、デザインを一つのツールに縛られずに済む可能性を感じられます。

今でも増え続けている『AIファースト』のデザインツールですが、これだけ変化が速いと、早い段階でワークフローを一つのツールに固定するのは危険です。

AIが読み書きできるファイル形式

AIが崩した前提のもうひとつは、ツールの間でデータを移しやすくなったことです。最近のデザインツールには、AIが読み書きしやすい形式でデータを保存するものが増えています。多くは、その構造を説明したドキュメントも公開しています。

• Pen
• Penpot
• penna
• Polotno
• Excalidraw
• tldraw

Figma APIは非常に優れていますし、figma-use スキルは私も使っています。デザイン生成もコード化も出来ます。ただ、データの構造がドキュメントで分かれば、特定のツールを通さずに、別フォーマットのデザインファイルを生成することもできます。

以前は「このファイルは開けない」といった変換上の問題や、「このツールは使いたくない」といった不満もありました。しかし、AIの進化により、こうした課題は解消されつつあります。たとえば、PowerPointで受け取った資料をFigJamに移して検討し、そこで作ったワイヤーフレームをPenpotで仕上げる、という流れを AI で組めます。その時々で、自分が使いやすいと思える道具を選べるようになってきました。

デザインがツールの間を行き来するようになって、デザインファイルの見方も変わりました。

以前から、コードとデザインファイルのどちらを Single Source of Truth（SSoT）とするべきかという議論はありました。デザインファイルは実装の前に合意を取るためのものだったので、そちらを正としたい理由もあります。また、証跡を残す義務がある職場もあります。ただ今は、デザインから実装までの距離が短くなったので、合意はキャンバスで試行錯誤しながら取り、実装されたあとは実装を正として、必要であればデザインファイルにも記録する、というワークフローを組めます。記録したいときはその時点の実装から取り込めばよいので、デザインファイルを手作業で直し続けて最新の状態に保つ必要もありません。

修正前後を比べるツールを作ってみた

読める形式の利点は、ツールの間のやりとりだけではありません。ツールが用意していない機能を、自分で作れるようになります。その一例が、修正前後の比較です。

デザインレビューで、「修正しました。ご確認ください」というメッセージを受け取ることがあります。しかし、どこをどのように確認すればよいのか分からない場合も少なくありません。コメントや補足説明が添えられていても、修正前と比べて何が変わったのか、把握しづらいことがあります。

コードであれば、Diffを使って修正前後の違いを簡単に比較できます。一方、デザインには同様の比較ツールがほとんどありません。デザインファイルの中身が読める形式であれば、変更箇所を比べる仕組みを自分で作れます。

この動画は、Penで作ったデザインを比較するために AI で作ったカスタムツールです。Penはファイルの構造がドキュメントで説明されているので、AIは迷わずにファイルを理解できます。どの画面がどれくらい変わったかが一目で分かる UI で、コードの Diff と近いです。これまで見えにくかった変更が、見えるようになりました。

デザイナーは一つのツールにコミットするしかない。ファイルを行き来できないから、選ぶ余地はない。長いあいだ当たり前だったこの前提は変わりつつあります。特にここ数年で出てきたデザインツールの多くは、AIが読み書きしやすい形式になっています。一つのツールにコミットせずに幾つか試し、自分のワークフローに合わせて組み合わせることもできます。 半年後には、また大きく変わっているかもしれません。それでも、AIが読み書きできる形式のツールを選んでおけば、乗り換えるときにデザインの引き継ぎは楽になります。