【プロンプト公開】AIデザインツール「Layermate」の特長を紹介 Goodpatchデザイナーによる活用事例も
こんにちは！グッドパッチ UIUXデザイナーの梅下です。
先日、グッドパッチはAIデザインツール「Layermate」を開発する株式会社Layermateを子会社化し、デザイン×AI領域の事業基盤を強化することを発表しました。
今後はグッドパッチのメンバーも加わる形で、Layermateをより多くのデザイナーに使っていただけるよう進化させていけたらと考えています。さっそくユーザーの皆さまの声を聞くべく、2025年10月17日に初めてのユーザーイベント「Layermate ユーザーミートアップ vol.1〜デザイン×AIの未来をユーザーと共に描く〜」を開催しました。
本記事では、当イベントにて、私が紹介したLayermateの活用事例をサマライズしてお届けします。
自社開発、クライアントワーク問わず、プロダクト開発の現場におけるLayermateの効果的な活用方法をはじめ、Layermateの特徴を分かりやすく紹介していますので、ぜひ最後までご覧ください。
目次
登壇：「1000の会議で滞るプロジェクトを1つのプロトタイプで突破する」
Layermateとは
Layermateとは、AIとの対話を通じてFigma上でUIデザインを自動生成できるツールです。
作りたいUIのイメージをテキストで伝えるだけで、Figmaのキャンバス上に直接デザインを生成してくれます。また、既存のデザインや参照したい画像をインプットに、トンマナを維持したデザインを生成することも可能です。
生成されたデザインは全てFigmaのレイヤーとして出力されるため、手動で微調整を行えることはもちろんのこと、そのまま直接テキストで対話的に調整を行えます。これにより、Figmaの操作を習熟していない方も、直感的にデザインのブラッシュアップができるのです。
活用事例：ユーザーシナリオ（物語）を基に、一連のUI（絵）を一気に素早く生成
ちなみに、当日の登壇スライドも全てLayermateで作成しました
プロダクト開発の現場では、立場や職種の異なるメンバーが同じゴールを目指しますが、言葉や文字だけのコミュニケーションでは、どうしても関係者それぞれが頭の中に描くイメージが微妙に異なってしまい、認識のズレが生じてしまう。その結果、プロジェクトが滞ってしまうといった経験はありませんか？こうした課題を解決するために、
Layermateを用いた「ユーザーシナリオ（物語）を基に、一連のUI（絵）を一気に生成し、1000の会議で滞るプロジェクトを1つのプロトタイプで突破する。」というアプローチを紹介しました。
百聞は一見に如かず。言葉を尽くして議論を重ねるよりも、「かたち」を基に議論する方が、関係者の目線は一瞬でそろいます。
Layermateは、プロンプトをベースに単一の画面を生成できるだけでなく、複数の画面を素早く・一気に生成できるのです。
この「一気に生成できる」スピードが、特にプロジェクトの初期段階であるディスカバリーフェーズにおいて生命線となります。幅広いアイデア出しが求められるこのフェーズでは、競合のAIツールがデザインの生成に3分ほど要するケースもある中、Layermateは約30秒で生成可能です。
また、多くのツールが操作感を確認するための「プロトタイプ」ベースで出力するのに対し、Layermateは編集可能な「デザインファイル」として出力する点も大きな違いです。これにより、画面全体の一覧性が担保されるため、議論をスムーズに行いやすくなります。
実演：架空の「夢占いアプリ」のUI生成デモ
セッションでは、架空の「夢占いアプリ」の簡単なユーザーシナリオを基に、リアルタイムで一連のUIを生成するデモンストレーションを行いました。
当日、入力した簡単なプロンプトは以下です。
以下のユーザーストーリーを参照して、夢占いアプリの一連の画面を生成してください。
#ユーザーストーリー
##アカウント・初期設定
– メールアドレスまたはSNSアカウント（Google, Appleなど）を使って、簡単に会員登録ができる。
– プロフィール（ニックネーム、生年月日など）を登録する。
– 夢の記録を習慣化するために、好きな時間にリマインダー（プッシュ通知）を設定できる。##夢の記録
– その日に見た夢の内容を、思い出すままにテキストや音声で自由に入力して記録できる。
– 夢を見た日付をカレンダーから選択して記録する。
– 夢の印象（例：楽しい、怖い、不思議、悲しい）をアイコンやタグで直感的に記録できる。##夢占い
– 記録した夢の診断結果と、それに基づく心理状態や未来に関するアドバイスを確認できる。##記録の管理・閲覧
– これまでに記録した夢と占いの結果を、時系列のリスト形式の一覧で振り返ることができる。
このシナリオをLayermateにインプットすると、あっという間に一連の画面がFigma上に生成されました。
今回は簡易的なシナリオでしたが、より詳細なインタラクションシナリオや、PRD（プロダクト要求仕様書）のように「誰のどんな課題を解決するのか」「プロダクトの目的は何か」といった情報も合わせてインプットすることで、生成されるUIの精度は格段に向上するので、ぜひ試してみてください。
Layermateのここがスゴイ 4つの特徴をご紹介
ここからはセッションでも取り上げた、私が思うLayermateの特徴、推しポイントを4つご紹介できればと思います。
特徴1：オートレイアウト形式で、微調整が簡単
AIが生成したデザインファイルは、後から修正するのが大変そう……と思っていませんか？
Layermateは、Figmaのオートレイアウトを適用した形式でUIを出力してくれます。そのため、要素の順番を入れ替えたり、削除したりするといった微調整が、驚くほど簡単に行えます。
特徴2：画面単位・パーツ単位で、デザインパターンを発散できる
Layermateでは、画面単位だけでなく、特定のパーツに対する別のデザインパターンを発散することも可能です。デモでは「リスト形式のビュー」を「カレンダー形式のビュー」に一瞬で変換してみました。
ちなみに、人の手で作られたデザインファイルに対しても、全体のトンマナやレイアウトを維持したまま、新しいUIの可能性を試すことができるので、Layermateは、ゼロからデザインを作る時だけでなく、既存デザインに対してリニューアルを行うフェーズでも大活躍します。
特徴3：UI Stackを生成できる
UIを作成する際には、より滑らかな体験を提供するために、データがまだ無い状態やエラーが発生した状態などといった、あらゆる状況を考慮し、1つの画面に対する複数の状態をUI Stackとして作成するのですが、これらは意外と作成に手間がかかります。
Layermateを使えば「データが何もない時の画面（Empty State）」や「読み込み中の画面（Loading State）」などをはじめとするUI Stackを、簡単な指示でサッと作り出すことができます。
特徴4：参照すべきトンマナを画像・Figma・JSONから反映できる
プロダクトの世界観を守る上で欠かせないトーン＆マナー。Layermateは、参照すべきトンマナをさまざまな形式でインプットして、デザインに反映できます。
今回のイベントでは、画像を参照して、デザインを反映させるデモを行いました。
コミュニティにぜひご参加ください！
いかがでしょうか？既にLayermateをお使いの方には新たな活用法のヒントとして、まだ使ったことがない方にはその可能性を感じるきっかけとして、本記事が何か一つでも新しい発見につながれば幸いです。
私は、プロダクト開発におけるデザイナーの強みの一つとして「ステークホルダーの考えや想いを素早く”かたち”にし、複数案を提示することで、意思決定の速度と精度を上げること」だと考えています。
Layermateは、まさにそのデザイナーが持つ価値を、AIの力で最大限に引き出し、下支えしてくれる強力なパートナーです。この記事で紹介したような活用法を参考に、ぜひLayermateを試してみてください！
また先日、Layermateの公式Discordコミュニティが設立されました！
このコミュニティは、今回のような活用事例のシェアのほか、ユーザーの皆さんが情報交換をしたり、開発チームに直接フィードバックを送ったりできる場として立ち上げました。皆さんと一緒にLayermateをより良いものにしていくための場所にしていきたいので、ぜひ、初期メンバーとしてご参加ください！