はじめに
Onlookは「デザイナー向けのCursor」と呼ばれているビジュアルファーストのコードエディタですね。
GitHubで23,500スター以上を獲得していて、Apache 2.0ライセンスで公開されています。個人的には、これまでのノーコードツールとは一線を画すアプローチだと感じています。
正直なところ、最初は「またFigma風のノーコードツールか」と思っていたんですよ。でも実際に触ってみたら、かなり違いました。コードが「ソース・オブ・トゥルース」として扱われていて、デザインの変更が直接コードに反映される。これ、エンジニアとしてはかなり安心感があります。
Onlookとは
Onlookは「The Cursor for Designers」を掲げるオープンソースのビジュアルエディタです。Next.jsとTailwindCSSをベースにしたプロジェクトで、AIを活用しながらWebアプリケーションを視覚的に構築・編集できます。
特筆すべきは「Code as source of truth」という考え方。Figmaやその他のデザインツールとは違って、実際のプロダクションコードを直接編集する。だからデザインとコードの乖離が起きない。これ、意外と画期的なんですよ。
特徴・メリット
1. Figma風UIで直感的に編集できる
レイヤーパネル、プロパティパネル、ドラッグ&ドロップ...Figmaに慣れている人ならすぐに使いこなせる。でも裏では実際のReactコードが動いているという。
デザイナーにとっては馴染みのあるUIで、エンジニアにとっては実コードが生成される。この両立ができているのは素直にすごいと思います。
2. AIチャットでリアルタイム編集
AIに「このボタンを青くして」とか「フォームを追加して」と指示すると、リアルタイムで変更が反映されます。Cursorがコードエディタを革新したように、OnlookはビジュアルエディタにAIを持ち込んだ。
テキストや画像からアプリを数秒で生成できるので、プロトタイピングがめちゃくちゃ速くなりますね。
3. オープンソースでセルフホスト可能
SaaSに依存せず、自前のサーバーで動かせる。これ、企業で使う場合にはかなり重要なポイントですよね。機密性の高いプロジェクトでも安心して使える。
技術スタックもモダンで、Next.js、TailwindCSS、tRPC、Supabase、Drizzle ORM...個人的にはこの構成、かなり好みです。
4. バージョン管理・チームコラボレーション
チェックポイントからの復元ができるので、「あ、さっきの状態に戻したい」がすぐにできる。リアルタイムでチームコラボレーションもできるので、デザイナーとエンジニアが同じ画面を見ながら作業できます。
5. デプロイまでワンストップ
作ったものをそのまま共有可能なリンクとして発行できる。カスタムドメインの設定もできるので、プロトタイプを関係者に見せるのが楽になります。
インストール方法
クラウド版を使う場合
公式サイト（https://onlook.com）からデモを申し込むか、チームに問い合わせる形になります。
セルフホストする場合
GitHubからクローンしてきて自分で動かすこともできます。
# リポジトリのクローン
git clone https://github.com/onlook-dev/onlook.git
cd onlook
# Bunを使用している場合
bun install
# 開発サーバーの起動
bun dev
技術スタックを見ると、Bun、Docker、Next.jsあたりが使われているので、それなりの環境構築は必要ですね。
料金体系
- Basic: 無料（AIメッセージに日次制限あり）
- Pro: $20/月（無制限メッセージ、カスタムドメイン1つ）
- Launch: $50/月
- Scale: $100/月
オープンソース版は完全無料でセルフホストできるので、コスパ的にはそちらを検討するのもありかなと思います。
基本的な使い方
1. プロジェクトの作成
Onlookを起動すると、新規プロジェクトを作成するか、既存のNext.js + TailwindCSSプロジェクトをインポートするか選べます。
// 既存のNext.jsプロジェクトをインポートする場合
// Onlookがプロジェクトを解析して、コンポーネントを検出します
テンプレートから始めることもできるので、最初はそちらがおすすめですね。
2. ビジュアル編集
Figmaのようにレイヤーパネルから要素を選択して、プロパティを変更できます。
// 例: Onlookで編集すると、このようなTailwindコードが生成される
export function Button({ children }: { children: React.ReactNode }) {
return (
<button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
{children}
</button>
);
}
ドラッグ&ドロップでレイアウトを調整すると、対応するCSSクラスが自動で更新される。これが地味に便利。
3. AIチャットでの編集
AIに自然言語で指示を出せます。
「ヘッダーにナビゲーションメニューを追加して」
「このカードをグリッドレイアウトで3列に配置して」
「フォームにバリデーションを追加して」
AIがコードを生成して、リアルタイムでプレビューに反映されます。
4. コードの確認・編集
ビジュアル編集だけでなく、生成されたコードを直接編集することもできます。リアルタイムでプレビューと同期するので、コードを書きながらデザインを確認できる。
実践的なユースケース
プロトタイピングの高速化
クライアントへの提案用に、動くプロトタイプをサクッと作りたい場面。Onlookなら数時間で動くものが作れる。しかも実際のコードベースなので、そのまま本番開発に移行できる。
デザイナーとエンジニアの協業
「デザイン確認お願いします」→「ここ3px左に寄せて」みたいなやり取り、無限にありますよね。Onlookならデザイナーが直接コードを触れるので、このラウンドトリップが減る。
既存プロジェクトのリファクタリング
Next.js + TailwindCSSで作られた既存プロジェクトをインポートして、ビジュアルに確認しながらリファクタリングできる。CSSの調整とか、目で見ながらできるのは時短になります。
ランディングページの量産
テンプレートをベースに、AIで微調整しながらLPを作る。A/Bテスト用に複数パターン作るのも楽になりそうです。
類似ツールとの比較
vs Figma
Figmaはデザインツール、Onlookはコードエディタ。根本的に違います。Figmaで作ったデザインをエンジニアがコードに落とす、という工程がOnlookでは不要になる。
vs Framer
Framerも似たコンセプトですが、Onlookはオープンソースで、既存のNext.jsプロジェクトをそのまま扱える。ロックインされにくいのが強み。
vs Cursor
Cursorはテキストベースのコードエディタ、Onlookはビジュアルベース。用途が違うので、むしろ補完関係にあると思います。
まとめ
Onlookは「デザイナーのためのCursor」という触れ込み通り、ビジュアル編集とAIを組み合わせた新しいアプローチのツールですね。
個人的には、以下のような人におすすめです。
- デザイナーだけど、コードの世界にも興味がある人
- プロトタイピングを高速化したいエンジニア
- デザイナーとエンジニアの協業に課題を感じているチーム
- Next.js + TailwindCSSのプロジェクトを運用している人
オープンソースでセルフホストできるので、まずは触ってみるのがいいと思います。SaaSに依存せず、自分たちでコントロールできるのは、30代になって特に重視するようになったポイントですね。
フロントエンド開発のワークフローを変える可能性を秘めたツールだと思います。興味がある方はGitHubリポジトリをチェックしてみてください。