最近GitHubを見ていると、興味深いプロジェクトを見つけた——Onlook。自称「デザイナーのためのCursor」、オープンソースのAI優先デザインツールだ。この名前は巧妙で、Cursorが確かにプログラマーのコード書き方を変えたように、Onlookもデザイナーに同じことをしようとしているようだ。

Onlookとは？

簡単に言えば、Onlookはデザイナーが実行中のReactアプリケーションを直接視覚的に編集できるツールだ。コードを書く必要はない、CSSの優先度を理解する必要もない、Figmaとコードの間を行き来する必要もない。

その中核となる能力には以下が含まれる：

  • 視覚的編集：ページ上の任意の要素を選択し、スタイル、レイアウト、コンテンツを直接調整
  • AIアシスト：自然言語で望む変更を説明すると、AIが対応するコードを生成
  • コード同期：すべての変更がソースコードに直接書き戻され、デザインと実装の一貫性を保持
  • リアルタイムプレビュー：実際の実行環境で効果を確認し、「デザインは良いが実装がイマイチ」を克服

技術スタックとオープンソース

Onlookは完全にオープンソース（Apache 2.0ライセンス）で、技術スタックも現代的だ：

  • フロントエンド：React + TypeScript + TailwindCSS
  • バックエンド：Supabaseがデータベースと認証を提供
  • エディタ：ブラウザベースの視覚的編集エンジン
  • AI統合：複数のLLMモデルをサポート

現在GitHubには25k starsがあり、2024年中頃に作成されたプロジェクトとしては、この成長速度はかなり注目に値する。

Vibe Codingのもう一つの側面

AI支援開発と言えば、最近「vibe coding」という言葉が流行っている。簡単に言えば：AIにコードを書かせ、人間は方向性と審美性をコントロールする。

Onlookはこの概念をデザイン領域に拡張した。これまではデザイナーと開発者の間に大きな溝があった：

デザイナー（Figma）→ スライス/注釈 → 開発者（コード）→ 効果のずれ → 繰り返し修正

Onlookはこの溝を埋めようとしている：

デザイナー（アプリを直接編集）→ 自動コード生成 → 開発者がレビュー・マージ

これは開発者を取代するものではなく、デザイナーの能力境界をこれまで開発者だけが触れられた領域まで拡張するものだ。

実際の体験はどう？

プロジェクトのデモ動画やコミュニティのフィードバックから見ると、Onlookは以下のシナリオで良いパフォーマンスを発揮している：

  1. 高速プロトタイピング：既存コンポーネントを使ってページを素早く構築・調整
  2. デザイン微調整：既にリリースされているページで小さなスタイル変更
  3. A/Bテスト：複数のデザイン案を素早く生成

ただし、複雑なインタラクションロジックやカスタムコンポーネント開発などのシナリオでは、依然として開発者の介入が必要だ。

フロントエンド開発についての考察

フロントエンド開発者として、このようなツールを見ると複雑な気持ちになる。

一方面、確かに効率を上げられる。デザイナーが単純な変更を自分で済ませられるようになり、往復コミュニケーションのコストが減る。另一方面、伝統的な役割境界が曖昧になっている。

でも過度に心配する必要はないと思う。ツールはあくまでツールで、本当に価値があるのは：

  • システム設計能力：コンポーネント、状態、APIをどう組織化するか
  • パフォーマンス最適化：読み込み速度、レンダリング性能、bundleサイズ
  • エンジニアリングプラクティス：CI/CD、テスト、監視、保守性

これらは現在のAIやデザインツールではまだ代替しがたい領域だ。

まとめ

Onlookは一つのトレンドを表している：AIがデジタル製品を作るハードルを下げている。業界にとってこれは良いこと——より多くの人が自分のアイデアを現実にできるようになる。

フロントエンド開発者にとって、取代されることを心配するよりも、これらのツールをどう受け入れ、エネルギーをより価値のあることに注ぐかを考えるべきだ。

もしこのプロジェクトに興味があれば、GitHubを見に行くか、公式サイトでオンラインDemoを体験してみてほしい。

P.S. もう一つ注目すべきプロジェクトはOmni Tools——自ホスティング可能なWebツール集合で、9k+ starsを獲得。画像処理、PDF操作、動画変換などの実用的な機能を網羅している。プライベートデプロイが必要なツールシーンには、このプロジェクトは非常に実用的だ。