Onlookは、デザイナーがコードの上で直接UIをつくれるように設計された、無料でローカルファーストのビジュアルエディタです。公式サイトでは「The Developer Tool for Designers」を掲げ、デザインツールと同じ感覚で操作しながら、その編集が実際のコードに1対1で対応する点を打ち出しています。オープンソースとして開発が進められています。
主な機能
- 画面上の要素をドラッグ＆ドロップで並べ替えたり、拡大縮小したりできる直接編集
- 無限キャンバス上でAIと対話しながら、Webサイトやプロトタイプを作成・プレビュー・修正
- 「モバイルでレイアウトが崩れる」といったチャットでの指示に対し、AIが該当ファイルを読んでコードを修正
- カレンダー、ログインフォーム、グラフ、表などのコンポーネントを配置して画面を組み立てる機能
何が解決できるか
デザインツールで作った画面を実装に写すと、どうしても見た目と実物のズレが生まれます。Onlookは編集結果がそのままコードに反映されるため、デザインデータと実装を二重に管理する必要がありません。主な対象はReactとTailwind CSSで書かれたWebアプリです。
料金
エディタは無料で使えます。公式サイトからサインアップできるほか、デモの予約も受け付けています。
注意点
対象がReactとTailwind CSSの構成に限られるため、ほかの技術で作られたプロジェクトには向きません。開発途上のオープンソースなので、機能の変更や不具合が起きやすい点も前提にしておく必要があります。コードを全く触らない人だけで完結させるには一定の慣れが要り、エンジニアと一緒にUIを詰めたいデザイナーや、コードベースを保ったまま画面を素早く調整したい開発チームに合うツールです。
