生成AIとデザインツールの融合で生まれた新しいプラグイン
生成AIアプリケーションを開発・運用できるオープンソースプラットフォーム「Dify」と、UI/UXデザインの定番ツール「Figma」。この2つを組み合わせ、ユーザーインプットからワイヤーフレームを自動生成するFigmaプラグインを開発しました。
開発の背景
近年、Relumeをはじめとする生成AIワイヤーフレームツールが登場し、海外ではすでに一般的に利用されています。しかし、これらのツールは海外仕様のレイアウトが中心で、日本特有のLPデザインや企業サイトの構成には対応しきれませんでした。（私の使い方が下手だったのかもしれない・・・）
「自分が本当に欲しいレイアウトを自動で生成できる仕組みがあれば…」
そんな思いから、日本のWeb制作現場にフィットするツールとして、このプラグインの開発をスタートしました。
要件定義とシステム構成
今回のプラグインは以下の2つの技術を組み合わせています。
- Dify：要件設定、RAG（Retrieval-Augmented Generation）、コード生成
- Figma：生成したワイヤーフレームをビジュアル化するフロントエンド
Difyを採用した理由は、低コストかつ簡単に生成AIアプリを構築できる点にあります。さらに、RAGを活用することで、過去の制作ナレッジを活かしながら精度の高い出力を実現しました。
詳細設計
仕組みはシンプルです。
- Difyに入力：業界、サイト種別、キャッチコピー、サブコピーなどをユーザーが入力
- AIがRAGを参照しコード生成：入力内容をもとにJSONコードを自動生成
- Figmaプラグインで描画：生成されたコードをプラグインUIに読み込み、ワイヤーフレームをFigma上に作成
さらに、Figma UIにはUnsplash APIを組み込み、画像が必要な部分にはワンクリックでフリー素材を挿入できるようにしました。
実際の成果
この仕組みにより、
- LPのような単一ページ
- 5ページ程度のコーポレートサイト
といった幅広いパターンのワイヤーフレームを自動生成できるようになりました。
しかも、APIは無料枠で十分使え、Difyもオンプレ環境に構築したためコストはほぼゼロ。実用性とコストパフォーマンスの両立に成功しました。
今後の展開
今後はさらに進化させる予定です。
- 必要なセクションをクリックで選択し、ボタン一つでワイヤーフレーム生成
- 全てのページのレスポンシブページを作成
- 画像だけでなく、細かいデザインパーツも自動生成
- 将来的にはFigmaから直接本番環境にデプロイ
このプラグインを使えば、ワイヤーフレームの作成から公開まで、Webサイト制作のワークフローを大幅に効率化できる未来が見えてきます。
プロトタイプ気になる方はお問い合わせください。