Webサイトやアプリの画面をAIで作るときは、まず一つの案を出し、気に入らなければ指示を変えて作り直すのが一般的です。ただ、何度もやり直していると、前の案と比べにくくなり、かえって時間がかかることもあります。

「pen.dev」は、こうした手間を減らすために作られたデザインツールです。

開発したのは、Adobe XDの共同創業者Tom Krcha氏。pen.devでは、作りたい画面の内容を文章で伝えると、複数の案が同じ画面上に並びます。

たとえば、一つはシンプルなデザイン、もう一つは写真を大きく使ったデザイン、別の案は情報を多めに見せる構成、といった具合です。利用者は一つずつ作り直す必要がなく、並んだ案を見ながら、その場で比較できます。

感覚としては、何人かのデザイナーがそれぞれ案を持ち寄る「デザイン案の比較」に近いものです。気に入った案を選ぶだけでなく、別々の案から良い部分を取り入れて修正することもできます。

pen.devは、デザインだけで終わるツールではありません。CursorやVisual Studio Codeなど、開発者が普段使う環境でも利用できます。デザインファイルをコードと同じプロジェクト内に置けるため、デザイナーと開発者が別々の場所で作業する必要がありません。

これまでの現場では、デザイナーが作った画面を見ながら、開発者がコードで作り直すことが多くありました。その過程で、余白や色、ボタンの大きさなどが少しずつ変わってしまうこともあります。pen.devは、デザインと開発を同じ流れの中で進めることで、こうしたズレを減らそうとしています。

Krcha氏はAdobe XDに関わった後、ビデオ会議サービスのAroundを創業しました。Aroundはその後、Miroに買収されています。今回のpen.devでは、再びデザインと開発の間にある問題に取り組んでいます。

もちろん、複数の案をすぐに作れるからといって、デザイナーが必要なくなるわけではありません。どの案が使いやすいのか、ブランドに合っているのか、本当に必要な画面なのかを決めるのは人です。

pen.devが目指しているのは、デザインを人の代わりに決めることではなく、案を出して比べるまでの時間を短くすることです。最終的に選ぶのは、あくまで利用者です。