Question 1

Onlookとは何ですか？

Accepted Answer

**Onlook – Cursor for Designers**は、ReactやNext.jsのウェブサイトをリアルタイムで編集し、コードに直接反映できる次世代のビジュアルコードエディターです。デザイナーやプロダクトマネージャーがAIを活用して、効率よくウェブ体験を作り上げられます。コードとデザインの境界をなくし、直感的にサイトを作りながら即座にコードを書き出せるのが特徴です。

Question 2

Onlookの特徴は何ですか？

Accepted Answer

* **リアルタイム編集**: デザインを変更すると即座にコードに反映。  
* **AIサポート**: AIがデザインの提案やコードの修正を手助け。  
* **コードがソースオブトゥルース**: デザインはコードと完全に同期し、常に最新の状態を保つ。  
* **ドラッグ＆ドロップ操作**: 直感的に要素を配置・調整可能。  
* **既存コードのインポート**: ReactやNext.js、Tailwindのコードベースをそのまま取り込める。  
* **Figmaからのインポート**: デザインを実際の動くプロダクトに変換。  
* **バージョン管理**: 変更履歴を保存し、いつでも元に戻せる。  
* **オープンソース**: 開発の透明性が高く、コミュニティと共に成長。  
* **レスポンシブ対応**: モバイルや様々な画面サイズに最適化。

Question 3

Onlookの使用例は何ですか？

Accepted Answer

* ウェブサイトのプロトタイピングとアイデア出し。  
* 既存のReact/Next.jsサイトのデザイン編集。  
* デザイナーと開発者の共同作業の効率化。  
* AIを活用したデザインの高速反復。  
* プレゼンテーションやモックアップ作成。  
* ブランドカラーやフォントの統一管理。

Question 4

Onlookの使い方は？

Accepted Answer

* 大きな画面でOnlookを開き、プロジェクトを新規作成または既存のコードをインポート。  
* ドラッグ＆ドロップで要素を配置し、スタイルを調整。  
* AIチャット機能でデザインの相談やコード修正を依頼。  
* 変更はリアルタイムでコードに反映されるため、すぐに動作を確認可能。  
* 完成したらカスタムドメインを設定して公開。

Question 5

Onlookでどんなものがデザインできますか？

Accepted Answer

ウェブサイトのプロトタイプやアイデア出し、スクラッチからのサイト作成まで幅広く対応しています。

Question 6

なぜOnlookを使うべきですか？

Accepted Answer

Onlookは実際のプロダクトのコードを直接編集できる唯一のツールで、デザインとコードが常に同期しています。

Question 7

Onlookで作ったコードの所有権はどうなりますか？

Accepted Answer

作成したコードはすべてあなたのもので、ローカルに直接保存されます。外部にホストされることはありません。

Question 8

他のデザインツールと何が違いますか？

Accepted Answer

Onlookはコードをソースオブトゥルースとして扱い、制限なく自由にデザインできます。Figmaのような単なるデザインツールではありません。

Question 9

なぜOnlookはオープンソースなのですか？

Accepted Answer

デザイナーと開発者の壁をなくし、開発者が主役になれる環境を作るためです。透明性を持ってコミュニティと共に成長しています。