Onlook
ReactコードをFigmaのように視覚的に編集し、変更内容をソースコードに即座に反映するAIビジュアルエディタ
無料webdesktopオープンソースLLMベースマルチモーダル
公式サイトへonlook.com
GPT-6 Astra と比較Onlook の代替ツールを見る概要
Onlookは、デザイナーと開発者のためのオープンソースのAIビジュアルコードエディタです。ReactコンポーネントをFigmaのように視覚的に編集すると、変更内容が即座に.tsxファイルに反映されます。Tailwind CSSの視覚的編集、AIプロンプトに基づくコンポーネント生成、GitHub PRとの直接統合をサポートしており、「デザイナー向けのCursor」と呼ばれています。
差別化ポイント
- Onlookは「デザイナー向けのCursor」を掲げ、従来のノーコードツールやAIジェネレーターとは一線を画しています。Vercelのv0がプロンプトによる「コード生成」に注力し、Framerが独自ランタイムを持つ「ノーコードビルダー」であるのに対し、Onlookはユーザーのローカルソースコード（.tsx）を直接編集する「ビジュアルコードエディター」です。開発者が使用するコード構造を維持しながら、デザイナーになじみのあるFigma風のインターフェースを提供することで、デザインと開発間のハンドオフ（Handoff）工程を完全に省略できます。
主な機能
- DOMコードのリアルタイムマッピング — 視覚的編集が即座に.tsxファイルに反映
- Tailwind CSSビジュアルエディタ（ドラッグ＆ドロップによるレイアウト調整）
- AIプロンプトに基づくReactコンポーネントの生成
- GitHub Pull Requestとの直接統合
- Figmaスタイルのレイヤー構造およびインスペクタの提供
- オープンソース（GitHub） — セルフホスティングで無料利用可能
メリット・デメリット
ウェブ検索で収集したユーザーの声をまとめたものです
メリット
- 最大の利点は、デザインの変更が実際のReactコードへ即座に変換され、ローカルファイルに保存される点です。これにより「デザインとコードが別々に進む」状況を防げるほか、生成されるコードがTailwind CSSベースでクリーンかつ保守しやすいことから、専門家から高く評価されています。また、オープンソースとして運営されているため透明性が高く、Figmaに似たレイヤー構造を備えているので、コードの知識がないデザイナーでも容易に使い始められます。無料プランでも基本的なエディター機能を利用でき、個人プロジェクトでのコストパフォーマンスに優れています。
デメリット
- 現在はReactとTailwind CSS環境に最適化されているため、VueやSvelteなど、ほかのフレームワークのユーザーには選択肢が限られるという制約があります。まだアルファ／ベータ段階のツールであるため、外部エディターでファイルを同時に編集すると同期エラー（Desync）が発生したり、パフォーマンスが不安定になったりする事例も報告されています。また、ローカル環境を設定するにはBunやNPMなどの基本的な開発環境に関する理解が必要で、技術知識がまったくない初心者が単独で使用するには一定のハードルがあります。有料プラン（月額$25〜29）はやや高く感じられるという意見もあります。
料金
無料開始価格: 料金は問い合わせ
無料プランでは、1日5件のAIチャットと5件のプロジェクトを利用できます。Proプランは月額$25で、プロジェクト数は無制限、メッセージは月100件まで利用できますが、最近のポリシー変更により、新規ユーザーは別途問い合わせるか、デモを予約する必要がある場合があります。
情報確認日:
活用事例
- ReactコンポーネントをFigmaのように視覚的に直接修正
- AIを活用したWebサイトレイアウトの迅速なプロトタイピング
- デザインの変更内容をコードの直接修正なしにGitHub PRとして提出
- 既存のコードベースのデザインシステムを維持しながらUIを高度化
対象ユーザー
フロントエンド開発者UI/UXデザイナーフルスタック開発者スタートアップチーム
検証の根拠
会社・料金・機能の情報は、以下の一次情報と直近の検証記録に基づいて表示しています。出典が食い違う場合は、公式の一次情報と最新の検証結果を優先します。
最終検証 2026/09/02検証済み出典4件
代替ツール
この代わりに使えるツール
