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

使い方

1. アカウント作成とアプリのダウンロード

   公式サイトでアカウントを作成し、対応するデスクトップアプリ（Mac/Windows）をダウンロードします。

2. 新規プロジェクトの作成または既存プロジェクトのインポート

   Onlook上で新しいReactプロジェクトを作成するか、既存のTailwind CSS対応のReactプロジェクトをインポートします。

3. ビジュアルエディタでの編集

   Figmaのようなインターフェースで、UIコンポーネントの配置、スタイル調整、テキスト編集などを直感的に行います。

4. AIアシスタントの活用

   チャット形式でAIに指示を出し、コンポーネントの生成やスタイルの変更、インタラクションの追加などを行います。

5. リアルタイムプレビューとインタラクティブモードの利用

   編集内容を即座にプレビューし、ユーザーインタラクションやアニメーションの動作確認を行います。

6. コードのエクスポートとバージョン管理

   編集した内容は即座にコードに反映され、ローカル環境に保存されます。バージョン管理やロールバックも可能です。

---

機能

• ビジュアルコードエディタ

  Figma風のUIで、Reactコンポーネントを視覚的に編集可能。

• AIアシスタント（チャット形式）

  自然言語での指示により、UIの生成やスタイル変更、インタラクションの追加が可能。

• リアルタイムプレビュー

  編集内容を即座にプレビューし、UIの挙動を確認可能。

• インタラクティブモード

  ユーザーインタラクションやアニメーションの動作確認が可能。

• Tailwind CSS対応

  Tailwind CSSを使用したスタイリングが可能。

• ローカル環境での保存

  編集内容やコードはローカル環境に保存され、外部に送信されることはありません。

• バージョン管理とロールバック

  編集履歴の管理や、任意のバージョンへのロールバックが可能。

• オープンソース

  GitHub上でソースコードが公開されており、自由にカスタマイズや拡張が可能。

---

料金