250804_Layermateの活用

Transcript

1. UI生成AIとFigmaを行き来する、 Layermate活用術 TORAJIRO Design Lead @ Gaudiy.Inc ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
4. ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
5. 最近のGaudiy Design TeamでのAI周りの取り組み みんなでAIに関するやってみたを書く「AI TIP」 ©️Gaudiy Inc. 毎週担当を変えてやる「AID会」 2025.08.04_AIエージェンティックコードプレイ
6. ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
7. このnoteの出発点 “v0等を使ってプロトタイピングしていると、6-7割くらいの完 成度から詳細を作っていくプロセスでディティールの修正をプ ロンプトするのはどうも面倒で、自分でパパッと直したいのに 「Figmaで調整できない」のがどうしてもネックになります。 とはいえ、せっかくAIが作ったUIをFigmaで作り直すのも二度 手間でコスパが悪い。” ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
8. 解決したい課題 解決したかった事① 解決したかった事② 解決したかった事③ ある程度でv0で土台はできてき た。ただ6-7割あたりからの細か い指摘と仕様を渡して、またレ ビューして...が大変 Figmaで作り直すなんて面倒。 もっと気楽に持って行かせて。 新しいプロジェクトが既存のWeb サービスの改修だったが、デザイ ンデータが何にも無かった。 AIとの微調整が面倒 「このマージンを8pxに...」 「フォントサイズをもう少し...」 ©️Gaudiy Inc. すぐにFigma移行出来ない 再度作るのコスパ悪すぎる... でももう手でやりたいんだよなー デザインデータが無かった まっさらからのスタート... 議論の土台はAIに任せておきたい 2025.08.04_AIエージェンティックコードプレイ
9. このnoteの出発点になった、解決したかった事 解決したかった事① Figmaに持っていけない 解決したかった事② AIとの微調整が面倒 きっと、皆が思っている... 解決したかった事③ デザインデータが無かった 「Figmaに気軽に持っていきたいんや！！」 Figmaで作り直すなんて言語道断。 もっと気楽に持って行かせて。 再度作るのコスパ悪すぎる... でももう手でやりたいんだよなー ©️Gaudiy Inc. ある程度でv0で土台はできてきた。 ただ6-7割あたりからの細かい指摘と仕様 を渡して、またレビューして...が大変 「このマージンを8pxに...」 「フォントサイズをもう少し...」 新しいプロジェクトが既存のWebサービ スの改修だったが、デザインデータが何に も無かった。 まっさらからのスタート... 議論の土台はAIに任せておきたい 2025.08.04_AIエージェンティックコードプレイ
10. やってみた解決策 「HTML to Design」で正確に持ち込む 見ての通り早く、安い。「v0をそのまま編集できればいい」であればHTML to Designに軍配が上がる UI生成 HTML to Design Figma v0をYAMLで書き出して「Layermate」でFigmaに持ち込む UI生成 ©️Gaudiy Inc. YAML GPT 構造化 プロンプト作成 Layermate Figma 2025.08.04_AIエージェンティックコードプレイ
11. ©️Gaudiy Inc. https://www.layermate.ai/ 2025.08.04_AIエージェンティックコードプレイ
12. ©️ Gaudiy Inc. https://www.layermate.ai/ 2025.08.04_AIエージェンティックコードプレイ
13. 2つのパターンの違い パターン1: HTML to Design パターン2: Layermate 適してる場面 • v0やWebサイトをそのまま、最短かつ正確に持っていきたい • v0（Web）で使用されたスタイルをそのまま定義したい 適してる場面 • THE v0なUIから再生成したい • 既存画面のレイアウトやカラーを参照して生成したい ✓ 無料・早い ✓ AutoLayout対応 ✓ シンプルな変換 ✓ 1日5回まで無料（課金プランは$20/月〜） ✓ AutoLayout対応 ✓ コンテキストを読める △ 再生成に時間がかかる Layermateの特徴 → 既存のUIを参照できる ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
14. 2つのパターンの違い パターン1: HTML to Design パターン2: Layermate 適してる場面 • v0やWebサイトをそのまま、最短かつ正確に持っていきたい • v0（Web）で使用されたスタイルをそのまま定義したい 適してる場面 • THE v0なUIから再生成したい • 既存画面のレイアウトやカラーを参照して生成したい ✓ 1日5回まで無料（課金プランは$20/月〜） ✓ AutoLayout対応 ✓ コンテキストを読める △ 再生成に時間がかかる ✓ 無料・早い ✓ AutoLayout対応 ✓ シンプルな変換 Layermateの の 特徴 → 既存 I . ©️ Gaudiy nc UIを参照できる 2025.08.04_AIエージェンティックコードプレイ
15. 大まかな流れ ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
16. 大まかな流れ ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
17. 実際の手順 1 要件整理・ワイヤー まずClaude等で基礎要件を整理してから、 それを元にFigJamでワイヤーフレーム作 成しました。 ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
18. 実際の手順 1 要件整理・ワイヤー 今回はサイト全体の情報設計を把握すると ころから始めたため、Cladueでサイト全体 の情報設計を取得して、FigJamの 『Visual Sitemap』を使ってIA作成を行 いました。 ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
19. 実際の手順デモ 1 要件整理・ワイヤー 結局情報量多すぎて見づらかったのでその ままは使いませんでしたが、理解するため の叩き台としては良かったです。 ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
20. 実際の手順 2 v0で画面を生成 作成したワイヤーフレームの.pngをv0に アップロードして画面を生成します。 情報量にもよりますが、情報量の多いWeb サイトを生成する場合、20回くらいのやり とりである程度の品質でインタラクション を含む画面を生成することができます。 ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
21. ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
22. 実際の手順 3 YAMLに変換 v0に以下のプロンプトをして、詳細な YAMLを出力します。 menu項目なども含まれているため、 ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
23. Layermateに正確な情報を渡すため、“正確に” 出力させましょう。 （初回はYAMLが雑で失敗しました） ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
24. 実際の手順 4 分割プロンプト作成 インプットする情報量が多すぎると、 Layermateでの画面生成がうまくいかな いケースがある。 段階的に画面生成が行われるようにYAML とプロンプトを分割します。 僕はClaudeに以下のプロンプトをして、 Layermate用の分割されたプロンプトを 作成しました。 ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
25. 実際の手順デモ 4 分割プロンプト作成 実際に生成されたプロンプトです ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
26. 実際の手順デモ 5 LayermateでFigmaに出力 いよいよLayermateを使って画面生成し ます。生成されたプロンプトを段階的にプ ロンプトしていきます。 ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
27. 時間がありそうだったら... 実際の生成物をお見せします ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
28. まとめ ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
29. 可能性を感じる部分と、期待したい部分 Layermateの可能性を感じる部分 プロトタイピングの高速化 デザインシステムの初速 スライド作成は結構いいぞ 従来の1/10の時間でプロトタイプ完成 既存のデザインシステムをコンテキストとして読み取 れる AIっぽいデザインはダサいけど、期待値は下がる 既存UIを元に、新しいアイデアを複数制作 するなどが一瞬でできる。 コンポーネントアセットの新規作成・拡張な どに使えるかも。 今回のスライドを作ってもらったけど、完成 まで2hくらいでいけた気がする Layermateに期待したい部分 UIデザインの脱AI感 既存のvariavle、スタイルの適用 スライドのフォーマット指定 モデルの進化で一気に解決 これが出来たらかなり大きい！ できるかもしれない 今はまだAI生成感が強い ©️Gaudiy Inc. スタイルの適用作業が大変 ベースレイアウトを指定 2025.08.04_AIエージェンティックコードプレイ
30. 中間言語としてのYAMLをうまく使う YAMLという構造化されたフォーマットに変換することで、 Layermateが理解しやすい情報にすることができ、橋渡しがシームレスになります。 YAML ✓ v0とLayermateの橋渡し ✓ 構造化されたフォーマット ✓ AIが理解しやすい ✓ 編集・修正が容易 Layermateの特徴 ✓ テキストベースでFigma構造を記述 ✓ 高精度な変換が可能 ✓ 実務での使いやすさ ✓ AutoLayout自動適用 html.to.design や Figma Raw のようなPluginと同じくコードからデザインへの変換を担うのと同じように、 YAMLが中間言語として機能することで、精度の高い変換ができるというわけです。 ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
31. 実際どれくらい実務で使ってる？ 散々話したけど... 残念ながら、実務での登場頻度は、まだまだ少ない!! 要件定義や開発フェーズではかなり導入が進んでいますが、 大半のデザインプロセスでは効率が倍以上になるアウトカムが得られてません。 特にC向けサービスにおいて、 筋がいい機能アイデアとその表層を表現する部分はまだ難しい。 ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
32. スライド作成はめっちゃ便利 スライド作成する機会があまりなかったので活用できてませんでしたが、 Layermateを使ったFigma Slideの生成はAuto Layoutされるので作業が超楽でした。実用度高い！ Claudeにnoteの内容を読ませてスライド構成を作成 Figma Slide上でLayermateを使ってスライドの叩き台を作成 Layermateの開発に関わるenくんのプロンプトを拝借しました 感謝 以下の内容でスライドを作成してください。 <Instractions> Contentの内容はそのままに構造化し、SlideSystemを使用した一貫したデザインのスライドを生成します <SlideSystem> (スライドのスタイルを指定) <Content> (スライド内容をYAMLやマークダウンで構造化) ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
33. Do it yourself 色々出てきて忙しいけど、一喜一憂するのもよし とりあえずやってみよう、というマインド ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ
34. FIN ©️Gaudiy Inc. 2025.08.04_AIエージェンティックコードプレイ