Onlookは、ReactやNext.jsで作られたWebアプリを、デザインツールのような画面操作で直接編集できるオープンソースのツールである。「Cursor for Designers（デザイナーのためのCursor）」を掲げ、デザインカンプを別途作ってから実装に落とし込むのではなく、動いている本物のコードベースそのものを画面上で触って直していく点が特徴になっている。要素をクリックして色や余白を変えれば、その変更はそのままソースコードに反映される。米国発で2025年に公開され、GitHub上ではApache 2.0ライセンスで開発が進み、2万6千を超えるスターを集めている。
主な特徴
- 本物のコードベースを直接ビジュアル編集: ブラウザ上のプレビューで要素を選び、テキスト・色・余白・レイアウトをドラッグやパネル操作で変更できる。変更は下敷きのReactコンポーネントとTailwind CSSのクラスに書き戻されるため、デザインとコードがずれない
- AIチャットによる生成と修正: 「このセクションをカード型に変えて」といった自然言語の指示でコンポーネントの生成・修正ができる。画像を参照として渡したり、MCP（Model Context Protocol）で外部ツールと連携する機能も備える
- コードへの往復が自然: 画面上の要素から右クリックで該当のソースコードにたどり着ける。ビジュアル編集で大枠を作り、細かい部分はコードで直す、という行き来がしやすい
- チームでのリアルタイム共同編集: 同じプロジェクトを複数人で同時に編集でき、コメントを残せる。ブランチやチェックポイント（版の保存）による履歴管理、デプロイまでを一つの流れで扱える
- ブランドの一貫性を保つテーマ管理: 色・タイポグラフィ・スタイルをプロジェクト全体の設定として持ち、個々の画面がばらばらにならないよう揃えられる
- オープンソースで自己ホスト可能: Apache 2.0ライセンスで公開されており、GitHubから取得して自分の環境で無料で動かせる。Next.js・Vite・shadcn/ui・Storybookなどの構成に対応する
料金
| プラン | 料金 | 主な内容 |
|---|---|---|
| セルフホスト（オープンソース版） | 無料 | GitHubから取得して自分の環境で実行。Apache 2.0ライセンス |
| クラウド版（ホスティング版） | 要問い合わせ | 現在クローズドベータ。ウェイトリスト登録またはデモ予約から利用申請する |
| チーム向け | 要問い合わせ | プロジェクトテンプレート、ブランチとバージョン管理、テーマ・ブランディング、SSO・監査ログなどの高度なセキュリティ |
料金は2026年8月時点の情報です。公式サイトには公開の月額プラン表がなく、クラウド版・チーム向けはいずれも問い合わせベースとなっています。最新の料金は公式サイトをご確認ください。
メリット・デメリット
✅ メリット
- デザインとコードの二重管理がなくなる。カンプを作り直してから実装に渡す、という往復の手間が省ける
- 非エンジニアのデザイナーでも、動いているアプリの見た目を自分の手で調整できる
- オープンソースなので、無料で試せるうえ、コードの中身を確認して自社環境で運用できる
- ブランチ・チェックポイント・コメントなど、チーム作業を前提とした仕組みが最初から入っている
- AIチャットとビジュアル編集を、目的に応じて使い分けられる
⚠️ デメリット
- クラウド版はクローズドベータで、申請してすぐ使えるとは限らない
- 公開された料金表がないため、有料利用の費用感を事前に把握しづらい
- 対象がReact・Next.js系に限られる。他のフレームワークやCMSベースのサイトには使えない
- セルフホストで動かす場合、DockerやBunなどの実行環境を自分で用意する必要があり、非エンジニアには敷居が高い
- 比較的新しいプロダクトのため、仕様や機能が変わりやすい
類似サービスとの比較
| 比較項目 | Onlook | v0 | Lovable | Builder.io |
|---|---|---|---|---|
| 主な用途 | 既存コードベースのビジュアル編集 | プロンプトからUI生成 | プロンプトからアプリ生成 | ビジュアル編集とCMS |
| 対象ユーザー | デザイナー・開発チーム | 開発者 | 非エンジニア〜開発者 | マーケター・開発者 |
| 対応技術 | React / Next.js / Tailwind | React / Next.js | React系 | 複数フレームワーク対応 |
| オープンソース | Apache 2.0 | 非公開 | 非公開 | 一部公開 |
| 料金体系 | セルフホスト無料／クラウドは問い合わせ | 無料枠あり・有料プラン | 無料枠あり・有料プラン | 無料枠あり・有料プラン |
こんな人におすすめ
- ReactやNext.jsで作られた自社プロダクトを持ち、デザイナーが実装を待たずに見た目を調整したいチーム
- デザインツールと実装コードの二重管理をやめたい制作現場
- AIに大枠を作らせつつ、細部は自分の手とコードで詰めたいフロントエンド開発者
- オープンソースを自社環境で運用したい、セキュリティ要件の厳しい組織
- デザイナーとエンジニアの受け渡しコストを下げたいスタートアップ
まとめ
Onlookは、「デザインを作ってから実装する」という順番そのものを見直し、動いているコードを直接デザインする道具である。React・Next.js系のプロジェクトに対象は絞られるが、その範囲ではデザインと実装の距離を大きく縮めてくれる。クラウド版はまだクローズドベータで料金も公開されていないため、まずはGitHubのオープンソース版を自分の環境で動かし、手触りを確かめるところから始めるのがよい。