先日、グッドパッチ社が買収を発表して話題となったUIデザイン生成ツールのLayermate。会社の買収と聞くと、大きな会社をもっと大きな会社が買うような構造をイメージされるかもしれませんが、実はこのLayermateは開発者が一人で作ったプロダクトであるということを知る人は少ないかもしれません。
さらに驚きなのが着手から2025年5月のリリースまで6ヶ月、開発工数にすると約1人月と、プロダクトとして市場に価値を届けるまでの期間が非常に短いこと。そして、市場投入からグッドパッチによる子会社化までは5ヶ月と、これもまた驚きのスピード感。その裏には、生成AIをフル活用したプロダクト開発のプロセスがありました。これまでのプロダクトデザインの常識を覆す、同プロダクトの開発についてLayermateの生みの親である池上さんにお話を伺いました。
デザインと開発の順序が逆？これまでの常識を覆す、AIをフル活用したプロダクト開発のプロセス
―― SNSでは「しゃなはす」さんとしてご存知の方も多いかもしれませんが、改めて自己紹介をお願いします。
Layermateの池上と申します。もともとフリーランスのエンジニアとして、iOS、機械学習、Webフロントエンドなどのソフトウェア開発に取り組んでいました。エンジニアである一方で、デザイン分野にも強い関心を持っていて、フリーランスとしての活動の傍ら個人開発でデザインツールなどのプロダクトを作っていました。
Layermate開発者の池上 涼平さん
―― Layermateを作ることになったきっかけについて教えてください。
個人開発でデザイン系のツールを作っていた中で、Claudeなどの生成AIでもクオリティの高いUIデザインのアウトプットを出せるようになってきたことに気づいたことです。
Layermateでは簡単なプロンプトでFigma上にUIを生成可能
ClaudeなどのコーディングエージェントでUIを生成すると、ReactコンポーネントとしてUIが組み立てられていく様子がわかるのですが、この生成のアーティファクト（中間成果物）をFigmaの無限キャンバス上に配置して確認・編集ができるとより便利なのではないかと思いました。つまり、コーディングエージェントのFigma版みたいな感じです。
現在はプロンプトをベースに一つのデザインを生成する形で機能を提供していますが、着想時にはCursorの「Command + K」ショートカットの ようにデザインの一部をインタラクティブにAIで編集するようなユーザー体験も想定していました。
―― Layermateは非常に短期間で開発、リリースされたそうですが、そのプロセスについて詳しくお話しいただけますか？
Layermateは、いわゆる「バイブコーディング*」で作りました。
元々はAIコーディングエージェントには、既存のコードベースの部分的な編集を想定したものが多かったのですが、Windsurfが登場し、ゼロからのプロダクト開発にAIを活用しやすくなったことで、プロンプトによる指示でAIにコードを書かせていくワークフローを取り入れました。
コードを「書く」部分はAIに任せて、自分は全体設計やプロダクトのUIや体験設計に集中した形です。認証周りやデータベースのスキーマなどセキュリティ観点で重要な部分はコードの重点的なレビューとテスト駆動開発によって品質を担保しています。
* 一般的に「バイブコーディング」というと生成されたコードや実装を理解せずにプロダクトを作るというようなニュアンスが含まれることもありますが、ここではあくまでもAIによる実装内容を理解しながら開発を進めることができるエンジニアがAIと並走しながら行う開発 というような意味合いで使用しています。
―― バイブコーディングでプロダクトを作るとなると、Figmaなどで先にUIデザインの検討を行わずに、実装上でプロダクトの機能と同時にUIも作られていくわけですが、このようなプロセスについて、便利だった点や不便に感じた点はありましたか？
シンプルにFigmaでUIを作ってから実装するという二重のプロセスを踏まないことで、開発工数の大幅な削減にはつながりました。一方で、バイブコーディングだとUIの細かいブラッシュアップが行いにくいという課題も感じます。
―― このあたりは、LayermateのようなツールがあるとUIデザインの速度も上げながら微調整をした上で実装に繋げることができそうですね。
はい、Layermateを作るときにLayermateがあったらよかったなと思います（笑）
また、UX的な課題についてはプロンプトで簡単に解決できるイメージではなく、課題解決策の検討と実装の検討の2段階に分けて、それぞれAIと壁打ちをしながら進めています。
―― ダブルダイヤモンドの2ステップをそれぞれAIで壁打ちする感じですね。現在のLayermateのUIや体験設計はとてもクオリティが高いものとなっていると感じますが、このあたりはどのように工夫されたのでしょうか？
元々はshadcnをベースにUIを作らせることで一定のクオリティ担保を行っていました。最終的にはリリース後にUIデザインをデザイナーさんが手伝ってくれて、現在のLayermateのUIはAIによる生成ではなくデザイナーさんによるUIデザインを実装したものとなっています。
―― 開発してからUIデザインをしたとなると、これまでのプロダクトデザインのプロセスと逆になりますね。AIによって開発効率が格段に上がったことで、最終的なプロダクトのデザインは最後にデザイナーが作るようなプロセスが一般化していくかもしれないですね。
はい、現状のAIによる成果物を見る範囲だと、やはり最終的なデザインはプロのデザイナーが作ったものには敵わないと感じます。
AIは情報構造の把握が得意な一方、ビジュアルデザインのクオリティはまだまだ改善の余地がある
―― Layermateを作ったご経験 や利用するユーザーのユースケースを見て、AIによってプロダクトデザインのプロセスはどう変わっていくと思いますか？
グッドパッチ社内でのユースケースを見ると、ワイヤーフレームなどの叩き台を作るのに使うケースが多く、最終的なアウトプットというよりはモックアップ的な使い方をされることが多いです。
これには、情報構造の把握が得意であるというAIの特性に関係があると思っています。Layermate開発の初期段階でも感じたことですが、ビジュアルデザイン的な観点で、最終アウトプットとしてそのまま使えるデザインをAIで生成することには現状限界があると感じており、アウトプットに現れる「同質性」や「AIっぽさ」を改善していくことが求められると思っています。このあたりは、グッドパッチのデザイナーたちと共に取り組んでいきたい部分です。
―― 同質性という面では、別のツールでも同じプロンプトを渡すと似た結果が返ってくるようなケースはありそうですね。
裏側で使用しているAIモデルが同じだと、やはり単純なプロンプトに対しては似たような結果が返されることが多いです。逆に、AIに渡すプロンプトの量を増やせば増やすほど多様な生成結果を得ることができます。
―― なるほど。では、Layermateを使う上でのコツとしても、できるだけ詳細にプロンプトを書くと良さそうですね。AIでデザインを生成するプロダクトの開発には、これからも多くの企業が参入してきそうですが、最近リリースされた「Figma Make」とは、どのような違いがありますか？
Figma Makeはアウトプットをコードプロトタイプとして実装するため、生成に時間がかかるのと、デザインを編集するためには一度Figmaとして書き出す必要があるため、ワークフローが分断されてしまいます。
その点、Layermateではリアルタイムに生成結果がFigmaに表示される上、そのままユーザーがデザインの調整を行うことが可能です。この点がデザイナーをはじめとしたユーザーに評価されているポイントです。
―― グッドパッチと共に歩む今後の展望について、Layermateをどのように発展させていきたいとお考えですか？
前述したように、生成AI任せでは限界があるビジュアルデザインのクオリティや、UXデザインの課題解決にグッドパッチのデザイナーたちと取り組んでいきたいです。また、Layermateの今後としては、Figma Pluginという枠組みに限定せず、より幅広い文脈でAIによってプロダクト開発のプロセスを変えていけると良いなと思っています。
直近では、複数人で請求を一元管理できるチームプランをはじめとした企業ユーザーのニーズに応える機能をリリースして、ユーザーを増やしていければと思っています。そのほか、フィードバックとして多くいただくデザインシステムを使用した一貫したスタイルでのUI生成にも、グッドパッチが開発したデザインシステム「Sparkle Design」との連携などを通して実現していけたらと思っています。
個人開発からチーム体制に変わった後の開発プロセスも気になるところ
AIによるUI生成というプロダクトの機能自体の新しさもさることながら、その開発プロセスを紐解くと 、プロダクトをつくるプロセスや取り組み方の常識が大きく変わりつつあるということを強く感じました。
生成AIをフル活用した開発プロセスで生まれたLayermateですが、グッドパッチグループにジョインした今後は開発者を増やしてチーム体制で取り組んでいくとのこと。今回お伺いしたようなバイブコーディングをフル活用した開発プロセスを、チーム体制ではどのように取り組まれていくのか今後が楽しみです。
株式会社Layermateでは現在エンジニアを募集中で、これからもAIをフル活用して開発を進めていくとのこと。デザイナーに囲まれた環境でAIをフル活用しながら、プロダクトを作れるLayermateの開発プロセスに携わってみたいエンジニアの方は、挑戦してみても面白そうです。
フリーランスのデジタルプロダクトデザイナーです。UI/UXデザイナーおよびデザインコンサルタントとして、日本国内外のクライアントと共に仕事をしてきました。化粧品、ファッション、旅行、自動車メーカー、不動産、ECサイト、エンタメ、動画配信サービスなど、さまざまな業界での経験があります。
https://www.ozguozden.com/
