DesignLayer は開発者向けのモーション React コンポーネントカタログに生まれ変わりました

2026年9月7日 · リリース

DesignLayer は、店舗向け AI サイト制作ツールから、Next.js / Tailwind でサイトを組む開発者向けのコンポーネントカタログへ移行しました。モーション付きセクションのライブプレビューと、Cursor / Claude へのソースコピーが中心の機能です。

何が変わったか

DesignLayer はこれまで、公式サイトがない店舗・飲食店向けに AI でサイトを生成するサービスとして運営してきました。2026年9月より、サービスの主軸を「開発者向けのモーション React コンポーネントカタログ」に切り替えました。

新しい DesignLayer では、人間が組んだ完成度の高いセクション（ヒーロー、機能紹介、料金、FAQ など）をブラウザ上で実際に動かして確認し、そのまま自分の Next.js プロジェクトに取り込めます。

・ライブプレビュー — すべてのコンポーネントを、実際の React として動く状態で確認できます。閲覧にアカウントもカードも不要です。

・Copy for Cursor / Claude — セクション本体の TSX と、エージェント向けの統合指示・依存パッケージ一覧をまとめてコピーできます。無料枠は日本時間で1日1回です。

・MCP 連携 — DesignLayer の MCP サーバーを Cursor に接続すると、サイトを開かずにカタログ検索とソース取得ができます。

・Templates（Pro） — ヒーローから FAQ まで構成が完成した1ページをまるごとコピーできます。

Free（0円）: コンポーネントの閲覧とライブプレビューは無制限。ソースのコピーは1日1回です。

Pro（月額2,980円・税込）: コンポーネントのコピーが無制限になり、完成1ページの Templates も利用できます。

旧サービスで月額プランをご契約中のお客様は、そのまま Pro としてご利用いただけます。

店舗向けの AI サイト制作フロー（ブリーフ・スタジオ）は、既存のご契約者向けの提供にとどめ、新規の機能拡充は行いません。

2026年9月以前のお知らせは旧サービスに関する記録として残しています。最新の使い方はドキュメント（/docs）をご覧ください。

同じモーション言語で1ページを生成する「Designengine」を開発中です。待ちリストへの登録はトップページから行えます。

まずはコンポーネントカタログ（/components）でセクションの動きをご確認ください。