AIでAIデザインツールを作った 1年間の実践

https://cross-rel.connpass.com/event/377013/
「さようなら2025 〜AI・エンジニアリング・デザインの忘年会〜」での発表です

Transcript

1. AIでAIデザインツールを作った 1年間の実践 2025年ふりかえり Ryohei Ikegami Dec 16, 2025 さようなら2025！AI・エンジニアリング・デザインの総決算
2. 池上 涼平 Ryohei Ikegami @seanchas_t フリーランスエンジニア (Web/iOS) → 2025/5 AIデザインツール「Layermate」を個人開発 → 2025/10 株式会社グッドパッチに譲渡/ジョイン 株式会社グッドパッチ / 株式会社Layermate プロダクトエンジニア
3. チャット形式でデザインをAI生成する Figmaプラグイン https://www.layermate.ai Layermate
4. データ学習オプトアウト 入力されたデザインデータや指示が AIの学習データとして利用されないように 請求一元化 法人利用に必須な「請求担当者・管理者ロール」 によるチーム管理の一元化・請求の一括化 法人の皆様向けのチームプランをリリースしました！
5. 1 Layermateでの「AI駆動開発」 2 AIデザイン生成の現在と未来
6. 1 Layermateでの「AI駆動開発」
 直接コードを書かずに
 AIデザインツールを作る
7. 2024/12 2025/05 2025/10 プロトタイプ実装・開発開始 リリース グッドパッチへ事業譲渡
 (ここまで一人で開発) リリースまでの実工数は約1人月。手書きコード: (ほぼ)0行 コード入力は全てAIに任せ、指示監督に徹する Layermate開発のタイムライン
8. 従来のフロー vs LayermateのAI駆動開発 よくある従来のフロー 要求定義 → 要件定義 → デザイン → 実装 実装後の手戻りが発生しやすい LayermateのAI駆動開発 要求定義 (人) → 要件定義 → 仮デザイン → 実装 (AI) → 仕様調整/デザイン磨き上げ (人) 人間は最初と最後だけ。 AIが仮デザインと実装を爆速で作る
9. AIで作りやすいモダンでコンパクトな構成 フロントエンド バックエンド AI Next.js, Tailwind, shadcn/ui Vercel, Supabase, Stripe, Resend 各種LLM API モダンでコンパクトな構成 = AIの学習データが豊富 AIへの指示が通りやすく、実装もスムーズ
10. 具体例1: 苦手分野の克服（SQL） SQLを一切書くことなく、データ設計のみで実装完了 AI活用 「こういうデータ構造にしたい」とスキーマと要件だけを指示 → 実際のSQLクエリはAIが全て生成・実行 課題 複雑なSQLの記述に自信がない...
11. 具体例2: 複雑な機能の実装（チームプラン） 1 2 3 4 5 要求定義を記述してAIに共有 AIがDB設計・API設計を提案 人間は設計をレビューし、実装指示を出す AIが全てのコードを記述 (Claude Code） 人間が仕様確認・デザインのブラッシュアップ 要件定義から実装まで一貫してAIが担当。人間は「監督」と「レビュー」
12. AIによるテスト駆動開発で品質担保 人間がコードを書かない分、動作保証の仕組みが必要 特にClaude Code登場以降、AIにテストを書かせることを徹底 AI自身に実装修正ループを回させる 網羅力 圧倒的な速度 エッジケースのテストケースを漏らさず列挙 面倒なテストコード記述も一瞬で完了 AIの強み
13. デザインのラストワンマイルは「人」 ベースの実装はAI × shadcn/ui で高速に構築 最終的なUIブラッシュアップはデザイナーが担当 AIが生成したUIは動くけど微妙にダサい 役割分担 AI 人間 ロジック構築、機能実装、テスト網羅 見た目の感性、最終的な仕様・品質判断
14. 2 AIデザイン生成の現在と未来
15. AIデザインの3つの軸 文字ベース 画像ベース つなぐ仕組み
16. 文字ベース（LLMによるコード生成） HTML/CSSなどを使って、ソースコードとしてデザインを生成 ロジックや機能性を含んだ「動くデザイン」を一括生成できる 一方で視覚的な「野暮ったさ」はまだ残る? GPT-4 → Claude 3.5 → Gemini 3 デザインの審美性は向上している Layermateもこの方式
17. 画像ベース（ラスター生成） 画像のラスターデータをそのまま生成
 視覚的な表現力は高いが 構造化データとしての編集・再利用・実装への橋渡しは難しい ここ最近の進化 (Nano Banana Pro 等) 文字生成の精度向上 一貫性の維持 追従性 日本語も崩れず正確に出力可能に 参照画像のスタイルを忠実に維持 プロンプトの指示に対する理解度が向上
18. 「つなぐ仕組み」が次のフロンティア? ベクトル化 マルチモーダルAI 画像から編集可能なデータへの変換 データを画像として理解し、修正する この両輪が進化することで 「美しく実用的なデザイン」が AIだけで完成するようになるかも
19. 個人開発で「AI駆動開発」はパワフル 苦手分野はAIに任せ、動くプロダクトを効率的に作れる
 皆さんもチャンスです！ AIデザインの未来はマルチモーダル? 文字と画像、コードとデザインがシームレスにつながる世界になる
21. Layermate 直近はチームプラン (管理/支払い系の機能)を開発していましたが
 今後更なる生成機能の強化を予定しています！