オンルック
Onlook
の使い方・機能・解決する業務課題

Onlookとは

Onlook（オンルック）は、ReactなどのWebアプリを、Figmaのようにビジュアル操作で編集し、その変更を実際のコードに反映できるデザイン・開発ツールです。「デザイナーのためのCursor」を掲げ、要素をドラッグやクリックで直接いじると、対応するコードが書き換わります。近年はプロンプトからアプリを生成・編集するAI機能も備え、オープンソース（Apache 2.0）版と、ブラウザで使うホスト型（onlook.com）のハイブリッドで提供されています。GitHubのスターは2.6万を超えます。

出典: Onlook（GitHub）

デザインの操作が、そのままコードになる

Onlookの特徴は、生成物がブラックボックスにならず、実際のコードベースを直接編集できることです。ブラウザ上の要素をドラッグ・リサイズしたり、Tailwindのスタイルを調整したりすると、その変更がコードに反映されます。プロンプトからアプリを生成する「バイブコーディング」型のツールとは違い、ビジュアル編集と実コードの両立を狙っています。

機能

使い方

1. OSS版かホスト版を選ぶ

   無料で今すぐ試すならGitHubのオープンソース版をセルフホスト、手軽に使うならホスト版（アーリーアクセス）を利用します。

2. プロジェクトを開く／生成する

   既存のReact／Next.jsプロジェクトを開くか、プロンプトから新規に生成します。

3. ビジュアルとAIで編集する

   要素を直接操作したり、AIチャットで指示したりして作り込みます。

4. 公開・書き出しする

   カスタムドメインで公開したり、GitHubにコードを書き出したりします。

料金

オープンソース版はApache 2.0ライセンスで無料（セルフホスト）です。ブラウザで使うホスト版は現在アーリーアクセス（クローズドβ）で、個人向けの具体的な料金は公開されておらず、チーム向けは要問い合わせです（2026年8月時点）。

他のUI生成・開発ツールとの違い

この分野には、プロンプトからアプリを生成するツールが増えています。Onlookはオープンソースで、ビジュアル編集と実コードの直接編集を両立する点が特徴です。

プロンプトからの生成が中心ならv0やbolt.new、GoogleのUI生成Stitch、ノーコードのWebデザインならSTUDIO AIが比較対象になります。Figmaのようなビジュアル編集を、実コードを保ったまま行いたいデザイナー・開発者にとって、Onlookが有力な選択肢です。

本ページの情報は2026年8月時点で公式サイト・GitHubに公開されている内容にもとづきます。ホスト版の提供状況・料金は変わることがあるため、最新の情報は公式サイトをご確認ください。