Replitが「Design Mode」公開：Gemini 3連携で2分でUIプロトタイプを作成

頭の中にあるアイデアをWebサイトの形に落とし込もうとすると、デザインツールとコードエディタを行き来する面倒な作業に直面しがちです。

クラウド開発プラットフォームのReplitは、この溝を埋める新機能「Design Mode」を公開しました。Googleの最新モデル「Gemini 3」を採用し、自然言語の指示から2分足らずで洗練されたモックアップや静的Webサイトを生成できます。

プロンプトから2分で動くプロトタイプを作成

Replitはこれまで、フルスタック開発の環境としてエンジニアに広く使われてきました。しかし、手軽に見栄えの良いページを作りたいという要望に対しては、必ずしも最適なツールではありませんでした。

新設されたDesign Modeは、デザインの知識やプログラミング経験が浅い人でも扱えるように設計されています。プロンプトを入力するだけで、Gemini 3がレイアウトや配色、フォントの組み合わせ、視覚的な階層構造を解釈し、整ったUIを一気に組み立てます。

主な用途は2つあります。1つはClaude ArtifactsやMagic Patternsに対抗する画面試作です。エンジニアに実装を依頼することなく、クリックして触れるモックアップを数分で作成し、チーム内で共有できます。

もう1つは静的サイトの制作と公開です。ランディングページやポートフォリオなどを一般的なWebサイト作成サービスの約5倍の速さで構築し、独自ドメインを設定して直接公開できるとしています。

ワンクリックでバックエンド開発へ移行

この機能のユニークな点は、見た目だけのプロトタイプから本物のWebアプリケーションへスムーズに移行できる仕組みにあります。

Design Modeでログイン画面や決済フォーム、入力フォームなどを指示した場合、最初は機能しない「リアルな見た目」として画面上に配置されます。

デザインが固まった段階で「Convert to App」ボタンを押すと、その画面がそのままフルスタック開発環境へと変換されます。別の開発環境へコードをコピーすることなく、バックエンド処理やデータベースの接続作業へ直接進むことができます。

プロジェクトを率いたVaibhav Kumar氏やフロントエンドを担当したStanley Huang氏ら開発チームは、Agentの初期構築アーキテクチャやAIサーバーとの通信経路を刷新することで、この高速な生成体験を実現したと説明しています。

なぜ重要か

私たちは、Replitがデザインと本格的なアプリ開発の「境界線」を解消しにきた点を高く評価しています。

個人開発者や非エンジニアの創業者にとって、デザインツールのFigmaなどでモックアップを作り、それをコードへ移植する二度手間は大きな負担でした。Design Modeを使えば、アイデアを数分で動く形にし、検証したうえでそのまま本番アプリへ拡張できるため、検証のコストが大幅に下がります。

業界全体から見ると、これはClaude Artifactsのようなプロトタイピングツールと、WixなどのノーコードWebサイトビルダーの双方に対する直接的な挑戦です。Replitはすでにバックエンドのホスティング環境を自前で持っているため、見た目を作ったあとの「本番運用の壁」がない点で競合より有利な位置にいます。

懸念されるのは、アプリ変換時に生成されるコードの保守性です。画面を動かすための仮コードが乱雑なままだと、後からエンジニアが本格的な機能を実装する際にリファクタリングの手間が生じる可能性があります。それでも、最初の形を最短で作るツールとしては試す価値が十分にあるはずです。