「ボタンの位置を3px右にずらしてほしい」「このカードに影を付けたい」——フロントエンド開発で最も多い修正は、コードを読まなくても画面を見れば分かる種類のものだ。にもかかわらず、現状のAIコーディングツール（Cursor・Claude Code・GitHub Copilot）はIDE側＝コード側に立っているため、デザイナーや非エンジニアが直接触るには敷居が高い。Frontmanはこの構図を逆転させる。Webアプリのブラウザ上で要素をクリックし、自然言語で修正を指示すると、ソースコードが書き換わってホットリロードされる——「ブラウザがIDEになる」AI Coding OSSだ。Apache-2.0/AGPL-3.0のデュアルライセンス、★364、最新版v0.15.0（2026年4月）。Next.js・Astro・Viteに対応する。
この記事ではブラウザ統合型AIコーディングツールFrontmanを解説します。Vibe Coding全体の流れと位置付けはVibe Coding完全ガイド：AI協働コーディングの新潮流2026年版をご覧ください。
この記事のポイント
- Frontmanはブラウザのレンダリング結果から要素をクリックして指示するAI Coding OSS（Apache-2.0/AGPL-3.0、★364）
- 開発サーバー側のミドルウェアとして動作し、DOM・コンポーネントツリー・CSS・サーバーログを直接読む
- Claude／ChatGPT／OpenRouter（100+モデル）のBYOK方式。Frontmanへの月額課金は不要
- Next.js・Astro・Viteに対応、本番ビルドからは自動的に除去される
Frontmanとは：ブラウザ統合型のAI Coding Agent
Frontmanは「ブラウザこそ最強のIDEになるべきだ」という発想に立つOSSだ。具体的には次の機能を提供する。
- クリック編集：ブラウザ上の任意の要素をクリックして「ここを変えて」と言うだけ
- ライブDOM参照：実際にレンダリングされた状態をAIが見て、そこから推論
- ソースマップ解決：ブラウザの要素から元のソースコードファイル・行を逆引き
- ホットリロード連携：編集が即座に反映され、修正のフィードバックが速い
- サーバーログの読み取り：エラー発生時はバックエンドのログも参照して修正提案
「コードを書く」ことを起点とせず、「動いている結果を見て直す」発想はClaude Code vs Cursor比較2026年版：開発者が選ぶべきAIコーディングツールで論じたCLI/IDE型ツールとは対極にある。共存する関係であり、置き換えではなく役割分担として機能する。
設計思想：「Cursorはコードを書く人のため、Frontmanは結果を直す人のため」と棲み分けると分かりやすい。デザイナーがCSSを微調整したり、PMがコピーを直したりする最後の1マイルにFrontmanが効く。
アーキテクチャ：開発サーバーミドルウェアとMCP連携
Frontmanは独立したサービスとして動くのではなく、開発サーバー（Next.js dev / Astro dev / Vite dev）にミドルウェアとして注入される。これが他のAIツールと最も違う点だ。
(Next.js / Astro / Vite app)"] -->|"Click + 指示"| B["Frontman UI Overlay"] B --> C["Frontman Middleware
(開発サーバー内に注入)"] C --> D["DOM / Component Tree
/ CSS / Source Map"] C --> E["Server Logs / Routes"] C --> F["MCP Server"] F --> G{"AI Provider (BYOK)"} G --> H["Anthropic Claude"] G --> I["OpenAI ChatGPT"] G --> J["OpenRouter (100+)"] G --> C C --> K["ソースファイル編集"] K --> L["ホットリロード"] L --> A
開発サーバーの内側にいるため、Cursor/Claude Codeのような外部CLI型ツールにはない情報——実際のレンダリング結果、計算済みCSS、Hydration状態、ルーティング、サーバーログ——を直接参照できる。MCP（Model Context Protocol）サーバーとして動作するため、Claude Code等のMCPクライアントからも利用可能だ。
対応フレームワーク：Next.js／Astro／Vite
Frontmanは現時点で3つの主要フレームワークをサポートする。
| フレームワーク | サポート状況 | 想定UI言語 |
|---|---|---|
| Next.js | App Router & Pages Router、Turbopack互換 | React |
| Astro | Islands、Content Collections、SSR/Hybrid | React/Vue/Svelte/Solid |
| Vite | React・Vue・Svelte・SvelteKit | 各種 |
「Reactしか対応しない」のではなく、フレームワークごとに必要なミドルウェア仕様を満たすラッパーが用意されている。Astro Islandsのような部分Hydration環境でも、コンポーネント単位で要素を識別できる。
クイックスタート：3つのフレームワークでの導入
Next.js
# Frontman をインストール（既存プロジェクトに対して）
npx @frontman-ai/nextjs install
# 開発サーバー起動
npm run dev
next.config.jsにミドルウェアの登録が自動で追記され、.frontman/ディレクトリが生成される。http://localhost:3000で開発サーバーを開くと、画面右下にFrontmanの起動ボタンが表示される。
Astro
# Astro Integration として追加
astro add @frontman-ai/astro
# 開発サーバー起動
astro dev
astro.config.mjsに@frontman-ai/astroがintegrationsとして追加される。Astro IslandsやMDXコンテンツにも対応する。
Vite
# Vite plugin としてインストール
npx @frontman-ai/vite install
# 開発サーバー起動
npm run dev
vite.config.tsにplugin追記が自動で行われる。React・Vue・Svelte・SvelteKitすべてのVite系プロジェクトで利用可能。
本番ビルドでの自動除去
Frontmanは本番ビルド時に自動的にバンドルから除去される。production buildではprocess.env.NODE_ENV === 'production'を判定してミドルウェアの初期化をスキップする実装になっており、本番性能・セキュリティへの影響が一切ない。これは社内利用での重要なポイントだ。
AIモデル：BYOK方式で月額課金ゼロ
Frontmanの料金体系はシンプルで、Frontman自体への月額課金はなく、ユーザーが好きなAIプロバイダのAPIキーを持ち込む形式だ。
| プロバイダ | 連携方法 | 強み |
|---|---|---|
| Anthropic Claude | 直接API or OAuth | コーディング精度トップクラス |
| OpenAI ChatGPT | 直接API or OAuth | 汎用性、エコシステム |
| OpenRouter | API経由 | 100+モデルから選択（DeepSeek、Llama等含む） |
社内の標準モデル（例：Claude Opus）を使う場合は、ユーザーのAPIキーを登録するだけ。コスト最適化したい場合はOpenRouter経由でDeepSeek系モデルに切り替えるなど自由度が高い。Cursorや他のSaaSのように「Frontman独自の月額」を払う必要がない。
ライセンスのデュアル構造：Apache 2.0 / AGPL-3.0
ライセンスは少し変わっており、クライアントライブラリ（Apache 2.0）とサーバー（AGPL-3.0）で分かれている。
| コンポーネント | ライセンス | 意味 |
|---|---|---|
@frontman-ai/nextjs等 |
Apache 2.0 | 自社プロダクトに自由に組み込み可 |
| Frontman Server | AGPL-3.0 | SaaSとして第三者に提供する場合は改変ソース公開義務 |
社内開発で使う限り、AGPL-3.0が問題になることはない。ただし自社サービスに組み込んでホスティングサービス的に提供する場合は、AGPL-3.0の条項に従いソース公開が必要になる点を確認してほしい。
競合ツールとの比較：Cursor／v0／Claude Designとの違い
AI×フロントエンド開発の文脈では複数の選択肢があり、Frontmanの位置を理解するには比較が分かりやすい。
| ツール | 形態 | 対象 | 強み | 弱み |
|---|---|---|---|---|
| Frontman | OSS、ブラウザOverlay | 既存アプリの修正 | ライブDOM＋自然言語＋無料 | 新規生成は得意でない |
| Cursor | デスクトップIDE | コード書き起こし全般 | 強力な補完、エージェント | ブラウザの状態は見えない |
| Claude Code | CLI | コード作業全般 | 自律性、ターミナル統合 | UI修正は不慣れ |
| v0 (Vercel) | Web SaaS | UI生成 | プロトタイプ即生成 | 既存アプリの修正は不向き |
| Claude Design | Anthropic製 | デザイン生成 | プロトタイプ・スライド生成 | 実コードベース修正は不可 |
| GitHub Copilot | IDE plugin | 補完 | 普及度 | UI修正には弱い |
「既存の動いているアプリのUIを直す」という用途では、Frontmanの直接の競合は実質ほぼない。CursorとClaude Designの中間を埋めるニッチを取りにいっているOSSだ。AIによるUIプロトタイプ作成についてはClaude Design使い方ガイドも併せて参照すると、生成系・修正系の使い分けが見えてくる。
内部実装：ReScript＋Elixirという珍しい構成
GitHubの言語統計を見ると、FrontmanはReScript（46.7%）＋Elixir（24.1%）＋Astro（10.8%）という珍しい構成になっている。これはOSSとしてもかなり個性的だ。
| 言語／領域 | 役割 |
|---|---|
| ReScript | クライアントUI Overlay、型安全なJS生成 |
| Elixir | サーバー側のリアルタイム処理（Phoenix LiveView系の知見） |
| Astro | 公式サイト・ドキュメント |
| TypeScript | 各フレームワーク向けplugin |
ReScriptは型安全なOCaml系言語で、ReactコンポーネントをコンパイルしてJSにする。FrontmanのUI Overlayがホストアプリのバンドルと衝突しない設計はReScriptの厳格な型と純粋関数性に由来する。Elixirはチャネル管理とプロセス分離が得意で、複数の編集セッションを並列に捌くサーバー側に向いている。ホットリロードと相性のいい技術選定とも言える。
編集ワークフロー：1セッションの中身
Frontmanで1つの修正が完了するまでの流れを図にすると次のようになる。
1セッションの平均時間は単純な修正で30秒〜1分。「diffプレビュー→承認」のステップが入っているため、AIが暴走しても確認できる安全弁が効いている。
想定ユースケース：誰がFrontmanで救われるか
1. デザイナーがCSS微調整を直接コミット
「デザイナーがFigmaで決めた→エンジニアが実装→違うので戻す」のループはフロントエンド開発の慢性病だ。Frontmanがあれば、デザイナー自身が動いているアプリを開いてCSSを直すことができる。リポジトリのPR作成までデザイナーが完結することも可能。
2. PMがコピーライティングを直接修正
「ボタンのテキスト直しといて」をPMが自分でやれる。コードを触れない人でも自然言語で文言を直せる。コピー変更のためだけにエンジニアの時間を使う組織的な無駄がなくなる。
3. オンボーディング期のジュニア開発者
「どのファイルを直せばいいか分からない」段階でも、ブラウザでクリックしてFrontmanにファイルパスを教えてもらえる。コードベースの地図がない状態でも修正に着手できる学習加速効果がある。
4. アクセシビリティ・国際化対応の一括修正
「すべてのbuttonにaria-labelを付けて」のような横断修正でも、Frontmanがソースを横断してリファクタしてくれる。リアルなレンダリング結果と照らし合わせながら作業できるので精度が高い。
注意点とベストプラクティス
セキュリティ・運用上の注意
- 本番ビルドからは自動除去されるが、開発サーバーをインターネットに公開すると別問題。Frontmanミドルウェアにアクセスされるとファイル書き換えが可能になるため、
localhostバインドが原則 - APIキーはローカル設定：BYOKでもキー自体はローカルファイルに保存される。
.gitignoreでリポジトリ外に置くこと - AGPL-3.0サーバーの再配布制限：自社サービス組み込みでホスティング配信する場合は弁護士確認推奨
効果的に使うコツ
- 大きすぎる修正はAIが迷子になりやすい。1セッション1コンポーネントを目安に
- TailwindやCSS-in-JSなどスタイル方針が一貫している方が出力精度が高い
- 重要な修正は必ずGit diffを確認してからコミット
- AIが提示するファイル変更内容を毎回精読する習慣を維持する
実践プロンプト集：Frontmanで効くフレーズ
ブラウザで要素を選択した後にFrontmanへ投げる指示は、自然言語であっても書き方で精度が大きく変わる。実際に高精度な結果を引き出しやすい指示パターンを整理した。
1. CSS微調整パターン
# 良い例
このボタンのpadding-topを8pxにして、hoverで色を1段階暗くして
# 悪い例（あいまい）
ボタンをいい感じにして
2. レイアウト変更パターン
# 良い例
このカードをFlexboxからCSS Gridに変えて、3列レイアウトに。
1024px未満では2列、640px未満では1列にして
# 悪い例（指示が断片的）
カードを3列にして
3. アクセシビリティ対応
# 良い例
このボタンにaria-label="メニューを開く"を追加し、
キーボード操作（Enter/Space）でも反応するようにして
# 悪い例
アクセシビリティ良くして
4. リファクタリング系
# 良い例
このコンポーネントから繰り返している3つのCard宣言を
配列にしてmapで描画する形にリファクタして
5. 国際化（i18n）対応
# 良い例
このページに使われている日本語文字列を全部抽出して、
locales/ja/common.jsonに移動してt('key')に置き換えて
明確なインプット・期待アウトプット・スコープ（このコンポーネント/このページ）を含めると精度が安定する。Vibe Codingにおけるプロンプトエンジニアリングの基本はAnthropicの本番運用Vibe Coding解説も参考になる。
まとめ：「ブラウザをIDEにする」逆方向のAI Coding
CursorやClaude Codeが「IDE側からアプリへ」のアプローチで成功している一方、Frontmanは「アプリ側からIDEへ」と発想を反転させる。これは既存ツールの置き換えではなく、役割分担を再定義する位置づけだ。デザイナー・PM・ジュニア開発者がコードに直接アクセスできるようになることで、フロントエンド開発の協業構造そのものが変わる可能性がある。Apache-2.0/AGPL-3.0のデュアルライセンス、BYOK、3フレームワーク対応、本番自動除去という現代的な作りで、まずは試してみる価値が高い。
最初の一歩はnpx @frontman-ai/nextjs installだけ。10分で起動し、自分の開発環境のブラウザ右下に新しいアシスタントが現れる体験を試してみてほしい。AIコーディングが「コードを書く人だけのもの」から「動いている結果を見る人のもの」へと拡張される最前線が、ここにある。
参照ソース
- frontman-ai/frontman (GitHub) - 本体リポジトリ
- Frontman Official Site - 公式サイト
- Frontman Demo Video (YouTube) - 機能デモ動画
- Frontman Releases - 最新リリース内容
- Frontman Discord - コミュニティ
- Model Context Protocol - MCP仕様の一次情報
