Inspector

Inspector: ブラウザをIDEに変える革新的なビジュアルエディター

Inspectorは、フロントエンド開発の常識を覆す新しい開発ツールです。従来のコーディング作業に「視覚的な編集」という強力なレイヤーを追加し、Inspectorを使用することで、エンジニアやデザイナーはコードを一行ずつ書き換えることなく、ブラウザ上で直接デザインやテキストを調整できるようになります。

What's Inspector? (Inspectorとは)

Inspectorは、コーディングエージェント（Claude Code、Codex、Cursorなど）をブラウザに直接接続し、視覚的な操作でフロントエンドを編集できるようにするツールです。Inspectorは単なるブラウザではなく、ブラウザそのものがIDE（統合開発環境）として機能します。

Inspectorの最大の特徴は、ローカルのコードベースに直接接続する点にあります。ブラウザ上で要素をドラッグして移動させたり、テキストを書き換えたりすると、その変更がリアルタイムでソースコードに反映されます。現在はMacOS向けに提供されており、開発のスピードを加速させるための「視覚的なレイヤー」として機能します。

Features (Inspectorの主な特徴)

Inspectorには、フロントエンド開発を効率化するための多彩な機能が搭載されています。

1. ビジュアルエディター (Visual Editor)

Inspectorのビジュアルエディターを使えば、要素を視覚的に移動したり、テキストを編集したり、変更のためのコメントを残したりすることができます。直感的な操作でUIの調整が可能です。

2. コーディングエージェントとの連携

Inspectorは、お気に入りのAIコーディングエージェントと連携します。

• Claude Code
• Codex
• Cursor これらのアカウントをInspectorに接続することで、AIの力を借りながら視覚的な開発を進められます。

3. 完全ローカル動作で高いプライバシー

Inspectorは、あらゆるローカルコードベースに接続します。データはすべてローカルに保存され、独自のコードが学習に利用されることはありません。チャット履歴もすべてデバイス内に保持されるため、セキュリティ面でも安心です。

4. 視覚的コンテキストの提供

Inspectorで要素をクリックすると、その要素がコード内のどの行に対応しているかを正確に特定します。これにより、コードの特定と修正にかかる時間を大幅に短縮できます。

5. ページアウェア・スクリーンショット

ページ内の特定の要素にスナップするスクリーンショット機能が搭載されており、開発中の確認や共有に便利です。

6. GitHub連携とデプロイ

InspectorはGitHubと直接接続しているため、ブランチの作成、変更のコミット、プルリクエストの送信まで、すべてInspectorのインターフェース上から完結できます。

Use Case (Inspectorの活用シーン)

Inspectorは、以下のような様々なシーンでその真価を発揮します。

• 高速なUI調整: デザインの細かな微調整を、コードを直接触ることなくブラウザ上でサクサク行いたい場合。
• vibe-codingツールからの移行: Lovable、Figma Make、Boltなどのツールで作成したプロジェクトをダウンロードし、Inspectorで開き直して開発を継続する。
• デザイナーによる直接編集: デザイナーが本番環境のコードベースに対して、直接ビジュアル面での修正をプッシュする。
• Reactアプリの開発: InspectorはReactアプリと最高の相性を誇り、視覚的要素を直接Reactコードにリンクさせることができます。

How to Use (Inspectorの使い方)

Inspectorを使い始めるのは非常に簡単です。セットアップの手間はほとんどありません。

1. ダウンロード: 公式サイトからMacOS用のInspector（Apple SiliconまたはIntel）をダウンロードします。
2. プロジェクトの読み込み: 自身のローカルコードベースを選択するか、テンプレートから開始します。
3. エージェントの接続: Claude、Codex、Cursorなどのアカウントを連携させます。
4. 編集の開始: ブラウザ上で要素を選択・移動し、「Apply」を押して変更をコードに保存します。
5. 公開: GitHubを通じてプルリクエストを作成し、変更を反映させます。

FAQ (よくある質問)

Q: セットアップは必要ですか？ A: いいえ、セットアップは不要です。Inspectorをダウンロードし、コードベースを選択するかテンプレートから開始するだけですぐに使えます。

Q: これはブラウザですか、それともIDEですか？ A: Inspectorにおいては、ブラウザがあなたのIDEになります。要素を選択して視覚的に動かし、「Apply」を押すだけで、Inspectorがコードベースを直接編集します。

Q: Windowsはサポートされていますか？ A: 現時点ではサポートされていません。Windows版のウェイティングリストに登録してアップデートをお待ちください。

Q: データとプライバシーはどうなっていますか？ A: すべてのデータはローカルに保存されます。独自のコードで学習を行うことはなく、チャット履歴もデバイスにのみ保存されます。

Q: デザイナーでも使えますか？ A: はい。多くのデザイナーがInspectorを使用して、本番のコードベースに変更を反映させています。

Q: どのフロントエンドフレームワークでも動作しますか？ A: InspectorはReactアプリで最高のパフォーマンスを発揮し、視覚的要素を直接Reactコードにリンクできます。他のフレームワークでも利用可能ですが、ビジュアルコンテキストエンジンの一部機能は制限される場合があります。

Inspectorを今すぐ試して、フロントエンド開発のスピードを次のレベルへ引き上げましょう。