コード化プロセスのどこにAIは介在する？

　Figmaのような先進的なデザインツールはすでにデザインをコード化するプロセスを効率化され、高品質な出力をサポートしています。そんななか、AIはどこに介入できるのでしょうか。

コード品質向上のためのデザインファイル最適化

　前述のとおり、Figmaや各種ツールを使うことでデザインファイルを比較的高精度にコード化できるようにはなりましたが、デザインツールを使ううえで不要レイヤーや無駄なグループ、削除し忘れた要素、規則性のない数値など、デザインデータ自体が雑な場合は意図したデータを出力することができません。

　AIを使うことで、これらのファイルを検知／推測し、適切な値におきかえるようなサジェッションが可能です。具体的には次のようなサジェッションが考えられます。

• 不要レイヤー、オブジェクトの削除
• オートレイアウトの適用・提案
• レイヤー名の置き換え
• 色や書体などのトークン置き換え提案

　どんなにきれいなコードを出力したりオススメしてもらったとしても、もとのデザインデータが正しく作られていなければ、コードの品質自体良くはなりません。コード出力に直接介入というよりも、コード化前のデザインデータの最適化に使用するパターンです。

　実際にこれらの機能を実現しているツールとしては「Locofy.ai」が代表に挙げられます。

Locofy.ai とは

　Locofy.ai は、Figma で作成した UI デザインから React.js のコードを自動生成するサービスです。Figma、XD、Sketch のデザインをモバイルおよびウェブのフロント用コードとして出力することができ、React、React Native、HTML/CSS、Next.js といった複数種類のコードに変換することができます。 

　また、真偽は不明ですが、AIを使用してフロントエンド開発を加速し、プロダクトの開発速度を 5～10 倍速くできると謳っている新しいツールです。

　Locofy.aiでは「Optimise design」や「Auto-Tagging」という機能で、レイヤー名の置き換えやグループの解除、AutoLayout化をサジェスチョンしたり修正を提案したりすることが可能です。現時点では筋の良いサービスのひとつと言えるでしょう。

デザインファイルを介在せずに実装コードを出力する

　「Text to UI」と言われる、UIを出力するプロンプトからデザインファイルをはきだすサービスは以前から紹介していますが、最近ではプロンプトから直接UIのコードを出力できるサービスが登場しています。このアプローチはどちらかといえばエンジニア向けと言えるでしょう。プロンプトテキストで指示を出すことで、自動的にウェブのUIやページのコードを作成し、さらに指示すると細かな修正も行ってくれる点が特徴です。

　直近もっとも話題なのはNext.jsを開発しているVercel社がリリースした「v0」でしょうか。生成AIに自然言語のプロンプトを与えることでウェブのユーザーインターフェースを自動生成してくれるサービスで、現在ベータ版が公開されています。

　v0で出力されるUIデザインはHTMLとCSSで作成されており、スタイルはTailwind CSSとShadcn UIがベースになっています。

　プロンプトから出力されるコードは基本的に定形のUIで、カスタマイズされたスタイルは適用できません。しかし、出力されたコードに追加でプロンプトを与えてインターフェースを改修したり、カラースキームを変えたりするといった根本的な改修は可能です。

　この「Text to UI」のアプローチにおける活用のベストプラクティスはまだない状態ですが、たとえばv0で出力したコードをもとに、デザイナーがスタイリングし、実装工数を減らしたり、プロトタイピングとしてデザイナーが介在せずにエンジニアのみでインターフェースを組み立てて設計したり、といった動きも考えられます。

おわりに

　いかがでしたでしょうか。今回はデザインを実装につなぐAIの可能性を調査しながら紹介しました。

　デザインツールから出力されるコードはなかなか使いづらかった側面もありますが、ツール自体の進化と生成AIの登場で、より実用的かつ生産性の高い「ハンドオフ（※）」を実現できるでしょう。（※：開発プロセスにおいて、開発者が完成したデザインを実装するプロセスのこと）

　ちなみに「Text to UI」の登場によってデザイナーが不要になるのかという意見や不安があるかと思いますが、個人的には逆のことが起きると考えています。簡易にデザインが扱えるようになった分、各プロダクトとの差をつけることが、今後ますます難しくなってくるでしょう。そうなったときに、優秀なデザイナーの力は今後さらに必要になってくるはずです。

　技術が進化する中で、デザイナーの役割もより深化していくでしょう。この変化の時代にチャレンジしていきませんか？