Onlook
Onlook · コーディング
Onlookはオープンソースのビジュアルエディタだ。デザイナーがキャンバス上で本物のReact・Next.jsコードを編集し、重い変更はAIが担う。コードは常に唯一の正となる。
Onlook について
What Is Onlook
Onlookはブラウザで動くビジュアルコードエディタだ。デザインを別のデザインファイルに書き出す代わりに、実際のReact・Next.jsプロジェクトを読み込み、コンポーネントを無限キャンバスに並べ、変更をそのままリポジトリへ書き戻す。コードが唯一の正なので、キャンバスに見えているものは製品そのものであり、その写真ではない。
このAIビジュアルコードエディタが狙うのは、Webチームの足を引っ張るあの分断だ。デザインからコードへのツールでありNext.jsエディタでもあるOnlookは、設計と開発の間の段差をならす。デザイナーはビジュアルな画面で作業し、エンジニアはいつもどおりのgitフローでその変更をリポジトリに取り込む。Onlookは設計トークン、タイポグラフィ、Storybookのコンポーネントを読み取り、それを適用する。だからAIが生成した変更も、チームが普段出しているものと揃う。コードを正とするからこそ、この流れが成り立つ。
オープンソースのデザインツールである点も効いてくる。エディタの中身を確かめ、自分たちの環境に合わせて調整できる。ブラックボックスを信じる必要はない。
最大の制約はスタックだ。OnlookはTailwind CSSでスタイルを当てたReact・Next.jsプロジェクトで動く。Vue、Svelte、素のHTMLを使うチームは現時点で使えない。ホスト版AIを多用すれば無料プランのメッセージ上限にも当たる。ほぼ毎日アシスタントに頼るなら、有料プランか自前のサーバーが要ることになる。
Getting Started
- onlook.comのホスト版でアカウントを作るか、オープンソースのリポジトリをクローンして自分で動かす。
- GitHubアカウントを連携し、既存のNext.js・Tailwind CSSプロジェクトを読み込む。エディタ内で新規に始めることもできる。
- 無限キャンバスで要素を選び、手作業で編集するか、チャットで変更内容を伝えてAIに書かせる。
- ライブプレビューとその下のコードを見比べ、確認してからgitでコミットまたはプッシュする。
- バージョン履歴で一手戻し、仕上がったら独自ドメインへ公開する。
AIツール情報
Onlookの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- フロントエンドチームと組むデザイナー：ずれていくデザインファイルではなく、本物のコンポーネント上でビジュアルなキャンバスを得られる。ただし先にNext.jsリポジトリを接続する必要がある。
- フロントエンド開発者：変更は本物のコード変更として届くので、そのままレビューできる。静的なモックから作り直す手間はない。
- スタートアップの小さなプロダクトチーム：1つのエディタで設計とコードへの受け渡しをまかなえる。専任のデザインエンジニアがいないチームに向く。
- ランディングページを試作する創業者：本物のNext.jsサイトをビジュアルに形づくりながら、生成されたコードも手元に残せる。
タスク
- キャンバス上でReactコンポーネントを直接編集する：本物の要素をドラッグ、リサイズ、スタイル変更する。描き直す必要はない。
- 見た目の調整をコードの変更に変える：チャットで編集内容を伝えると、Onlookがファイルに書き込む。
- ブランドを全ページで揃える：一元管理したトークンとタイポグラフィが、AIの生成する各コンポーネントに引き継がれる。
- 既存リポジトリを読み込む：Next.jsプロジェクトを持ち込み、作り直さずに編集を始める。
- ページを試作して方向を探る：メインブランチに載せる前に、キャンバスでレイアウトを下書きする。
シーン
- 公開前にマーケティングサイトを磨く：主要ブロックのスタイルをビジュアルに整え、差分をレビューに回す。
- 実物のプロダクトでレイアウト案を試す：実際の画面で余白やブレークポイントを調整する。切り離されたモックでは味わえない。
- デザイナーをReactプロジェクトに迎える：キャンバスにはチーム自身のコンポーネントが並ぶ。働きながら本物の仕組みを覚えられる。
主な機能
本物のコードへのビジュアル編集
Onlookの中核は、Tailwind CSSデザインツールとReactビジュアルエディタを同じ無限キャンバスに載せたものだ。描画されるのは本物のコンポーネントで、静止画ではない。要素を選んでドラッグ、リサイズ、並べ替え、スタイル変更ができる。編集は元のファイルに戻るので、画面で動かしたものが出荷されるものになる。デザイナーはデザインツールの自由を保ったまま、リポジトリとのつながりを失わない。
コンポーネントを編集するAI
OnlookのアシスタントはAIデザインアシスタントだ。あなたのコンポーネント、設計トークン、Storybookの設定を読み、チームの作法に沿った変更を提案する。要素は自分で編集してもいいし、チャットに任せてコードを書かせてもいい。チャットだけで完結する生成ツールと違い、AIが面倒な部分を担う間も、視覚的な主導権はこちらに残る。
リポジトリを読み込む
GitHub上の既存のNext.js・Tailwind CSSプロジェクトをOnlookに向ければ、すぐ編集を始められる。Onlook独自のファイル形式も、維持すべき二つ目のデザインシステムもない。持ち込んだプロジェクトが、そのまま出すプロジェクトになる。
デザインシステムへの準拠
エディタはブランドの書体、色、余白、コンポーネントの型を追い、生成時に適用する。新しい要素はどれも同じトークンを継承するので、ずれを手作業で拾い直さずともページはブランド内に収まる。厳格なデザインシステムを持つチームにとって、この一貫性は生成速度より重い。
リアルタイム共同編集とバージョン履歴
チームはプロジェクトを共有し、同じキャンバスで同時に作業できる。Figmaでの共同作業と同じ感覚だ。リビジョン履歴が変更を記録するので、誰でも前のバージョンに戻れる。この安全網があると、思い切ったレイアウトも失う怖さなく試せる。
描き込めるレイヤーとホットキー
Onlookでは、デザイン上でdivやテキストを直接なぞり、対応するコードをリアルタイムで生み出せる。よく使うホットキーは他のデザインツールから引き継がれるので、手が覚えた動きがそのまま使える。レイヤーは、コンポーネントツリーが密な区画でも入れ子の要素を正確に選ばせてくれる。
公開とセルフホスト
仕上がった成果はGitHub、リンク、独自ドメインのいずれかへ出せる。OnlookはApache 2.0ライセンスのオープンソースなので、無料でセルフホストし、デザインとコードの変更を自前の基盤に置くこともできる。ホスト版はブランチ、テーマ、SSOといったチーム機能を、個別見積もりの価格で加える。
メリットとデメリット
メリット
- コードが唯一の正なので、同期を取り続ける別のデザインファイルが要らない。
- Apache 2.0のオープンソースで、自前のサーバーで動かせる無料のセルフホストも選べる。
- AIは既存のコンポーネントとトークンに沿って編集するので、出力はチーム自身の仕事に見える。
- リアルタイム共同編集とバージョン履歴が、設計と開発の普段の協働になじむ。
デメリット
- Tailwind CSSでスタイルを当てたReact・Next.jsプロジェクトしか対応せず、他のフレームワークは今は使えない。
- 無料プランはAIメッセージを制限するので、有料プランなしではアシスタントにできることが限られる。
- ホスト版Teamsプランに公開価格がなく、コストを比べる前に営業への問い合わせが要る。
- セルフホストの立ち上げには、Webアプリを配備する程度の技術的な慣れが要る。
よくある質問
Onlookは、本物のReact・Next.jsコードを編集するビジュアルエディタだ。キャンバス上でWebインターフェースを作り、スタイルを当て、試作する。変更は独立したデザインファイルではなくリポジトリに入る。
関連コンテンツ
Onlookに関連するツール、スキル、記事を探す。
Onlookの代替ツール
Forefront
Forefront · コーディングForefrontはオープンソースAIで構築するためのウェブプラットフォームだ。主要なオープンソース言語モデルを自分のデータで微調整し、性能を評価し、API経由で実行したり、エクスポートして自分でホストしたりできる。クローズドなプラットフォームの手軽さを求めつつ、モデルとデータの所有権にはこだわる開発者が対象だ。
Startkit
StartKit.AI · コーディングStartkitは、AI SaaSとAIラッパー製品を作るためのボイラープレートだ。面倒な部分をあらかじめ配線済みにしたAIスタートアップボイラープレートと考えればいい。認証、StripeとLemon Squeezyの決済、利用制限、トランザクションメール、そしてOpenAI、Anthropic、Groq、Llamaと通信するAI APIスターターキットが含まれる。リポジトリをクローンして価格を設定し、ユーザーが実際にお金を払う部分に取りかかれる。ReactとTailwind上のNext.jsで作られているため、ボイラープレートコードの多くはすでに見慣れたものだ。
Testim
Tricentis · コーディングTestimは、Web・モバイル・Salesforceアプリ向けにエンドツーエンドテストを構築して実行するAIテスト自動化プラットフォームだ。機械学習を頼りに、インターフェースが変わってもテストを安定させ、チームが壊れたセレクターの修正に費やす時間を減らす。今日から使い始められる自動テストツールとしては悪くない。ブラウザで操作を録画してテストを作り、より細かい制御が必要なときはJavaScriptを足す。忙しいQAチームにとって堅実な選択肢である。