Onlook

デザイナー向けビジュアルコードエディタ — 視覚的にプロダクションコードを編集。

UI/UX・プロトタイプデザインコーディング生産性Trial

Onlookはデザイナーやプロダクトマネージャー向けのビジュアルコードエディタです。Cursorのようなものですが、デザイン向けのものです。本物のコードを下層で記述しながら、視覚的にウェブ体験を構築、編集、リリースできます。生産用のReactコンポーネントを直接編集し、リアルタイムで変更を確認し、コンテキスト切り替えなしで生産環境にプッシュできます。

公式サイトへ

更新日

2026-06-12

対応プラットフォーム

Web

お試し

無料トライアルが利用可能です。高度な機能、より高い制限、または商用利用には有料サブスクリプションが必要となる場合があります。

* 料金は参考情報です。最新の料金は公式サイトをご確認ください

onlook.com

主な機能

ビジュアル React エディタ
生産アプリ内の任意のReactコンポーネントをクリックして、視覚的に編集できます。スタイル、コンテンツ、レイアウトの変更は即座に反映されます。
AI デザインからコード
自然言語で欲しいものを記述するだけで、Onlookが対応するUIコードを生成し、既存のコンポーネント構造に自動的に統合します。
ライブ編集
ライブウェブアプリで直接変更を加えます — コードエディタを開いたりファイルを漁ったりせずに、テキスト、色、間隔、レイアウトを編集できます。
リアルタイムプレビュー
変更を加えるたびに、その都度すぐに結果を確認できます。エディタとブラウザの切り替えをせずに作業をチェックできます。
レスポンシブデザイン
視覚ブレイクポイントコントロールを使用して、すべての画面サイズに合わせてデザインを調整します。デスクトップ、タブレット、モバイル端末でピクセルパーフェクトのレイアウトを確保します。
生産に渡す
コードを書いたりプルリクエストを作成したりせずに、ビジュアル編集を本番環境にプッシュ。オンザスクリーンは裏で実際のコード変更をコミットします。