概要
https://goodpatch.com/blog/2025-11-layermate
詳細内容
## AIデザインツール「Layermate」の特長とGoodpatchデザイナーによる活用事例
https://goodpatch.com/blog/2025-11-layermate
AIデザインツール「Layermate」は、Figma上でUIデザインを自動生成し、プロトタイピングの速度と精度を向上させることで、プロジェクトの認識齟齬を解消します。
**Content Type**: ⚙️ Tools
**Language**: ja
**Scores**: Signal:4/5 | Depth:3/5 | Unique:3/5 | Practical:4/5 | Anti-Hype:3/5
**Main Journal**: 97/100 | **Annex Potential**: 90/100 | **Overall**: 68/100
**Topics**: [[AIデザインツール, UI自動生成, Figma連携, プロンプトエンジニアリング, デザインワークフロー]]
株式会社グッドパッチが子会社化したAIデザインツール「Layermate」は、AIとの対話を通じてFigma上にUIデザインを自動生成するツールです。本記事では、グッドパッチのUIUXデザイナーがユーザーイベントで紹介したLayermateの活用事例と主要な4つの特徴を解説しています。
著者は、プロダクト開発において言葉や文字だけのコミュニケーションで生じる認識のズレを解消するため、Layermateを活用した「ユーザーシナリオ（物語）を基に、一連のUI（絵）を一気に生成し、1000の会議で滞るプロジェクトを1つのプロトタイプで突破する」アプローチを提唱しています。Layermateは、競合ツールがUI生成に3分程度要する中、約30秒で編集可能なFigmaデザインファイルを出力できるため、プロジェクト初期のアイデア出しや関係者間の目線合わせを迅速に行える点が強みです。具体的なデモンストレーションとして、「夢占いアプリ」のユーザーシナリオをプロンプトとして入力し、一連のUI画面がFigma上に瞬時に生成される様子が紹介されました。より詳細なインタラクションシナリオやプロダクト要求仕様書（PRD）をインプットすることで、生成されるUIの精度が向上すると筆者は述べています。
Layermateの主な特徴は以下の4点です。
1. **オートレイアウト形式での出力**: 生成されたUIはFigmaのオートレイアウトが適用されており、要素の順序変更や削除といった微調整が簡単です。
2. **画面・パーツ単位でのデザインパターン発散**: 画面全体だけでなく、特定のパーツに対して複数のデザインパターンを生成でき、既存デザインのリニューアルにも活用できます。
3. **UI Stackの生成**: データがない状態（Empty State）や読み込み中（Loading State）など、一つの画面に対する複数の状態を簡単に作り出すことができ、滑らかなユーザー体験の設計に貢献します。
4. **トンマナの反映**: 画像、Figmaファイル、JSONデータなど様々な形式で参照すべきトーン＆マナーをインプットし、デザインに反映させることが可能です。
著者は、Layermateがデザイナーが持つ「ステークホルダーの考えを素早く”かたち”にし、複数案を提示することで、意思決定の速度と精度を上げる」という価値を最大限に引き出し、下支えする強力なパートナーであると結論付けています。