注意: 本記事はドキュメント・公開情報をもとにした評価記事です。コード例はシミュレーションです。

3行要約

  • AIとのやり取りがチャット履歴に埋もれ、コンテキストが断片化する問題を「共有キャンバス」で解決する。
  • 従来のIDEやチャットツールと異なり、要件定義・設計図・コードを一つの視覚的空間でAIと共有できる。
  • FlutterFlowユーザーや、複数エージェントを使い分ける中級以上のエンジニアには「買い」だが、単なるコード補完が欲しいだけの人には過剰。

📦 この記事に関連する商品（楽天メインで価格確認）

MacBook Pro M3 32GB

Campusの重厚なキャンバスUIとAI推論をブラウザで快適に回すための最低ライン

楽天で価格を見る Amazonでも確認

※アフィリエイトリンクを含みます

結論から: このツールは「買い」か

結論から言うと、プロジェクトの全体像をAIに把握させつつ、設計段階から実装までを一貫して高速化したいなら「買い」です。 評価は★4.5。 特に、CursorやClaude Artifactsを使っていて「もっと広い視野でプロジェクトを管理したい」「AIに複数のファイルをまたいで指示を出すのが面倒」と感じている人には、これ以上ない回答になります。

一方で、1ファイル完結のスクリプト作成や、単純なデバッグ作業にしかAIを使わない人には、この多機能さは逆にノイズになるでしょう。 「AIを部下として雇う」のではなく「AIをプロジェクトメンバーとして同じデスクに座らせる」感覚に近いツールです。 現状、FlutterFlowのエコシステムと深く紐付いていますが、汎用的な開発における「AIとの協調OS」として非常に高い完成度を誇っています。

このツールが解決する問題

これまでのAI開発における最大の問題は「文脈の断片化」でした。 ChatGPTで要件を詰め、Cursorでコードを書き、Slackで仕様を相談し、ドキュメントはNotionに置く。 このバラバラな状態では、AIに「前話したあの仕様に基づいて、ここのロジックを修正して」と指示しても、適切なコンテキストを渡すだけで一苦労です。

Campusは、この「情報の置き場所」そのものをAIエージェントと共有する空間に変えることで問題を解決します。 キャンバス上にドキュメント、UIのワイヤーフレーム、コードベースをタイル状に配置し、それらすべてをAIが常時参照できる状態で作業を進められます。 これはRAG（検索拡張生成）を人間が視覚的にコントロールしている状態と言えます。

また、従来のエージェントツールにありがちだった「ブラックボックス化」も防いでいます。 AIが何を考え、どのファイルを参照し、どういうステップで思考したかがキャンバス上に可視化されるため、エンジニアが途中で介入して修正を入れるのが容易です。 「AIに丸投げして失敗する」パターンを、人間との密なコミュニケーションによって回避する構造になっています。

実際の使い方

インストール

Campusは基本的にWebベースのプラットフォームですが、ローカル環境のコードベースと同期させるためにはCLIツールの導入が推奨されます。 Node.js環境（v18以上）が必要です。

npm install -g @campus-labs/cli
campus login
campus init

このコマンドでプロジェクトディレクトリに .campus 設定ファイルが生成され、クラウド上のプロジェクトスペースとローカルファイルが紐付けられます。

基本的な使用例

Campusの真骨頂は、エージェントに対して「このキャンバスにあるすべてのリソースを使って」という指示ができる点です。 以下は、プロジェクト内の要件定義ドキュメントを読み込ませ、APIクライアントを自動生成させる際の内部的なエージェント定義のイメージです。

# campus_agent_config.py
# ※CampusのSDK（シミュレーション）を用いたエージェント定義例

from campus_sdk import Agent, Canvas

# キャンバス上の特定のコンテキストを取得
project_canvas = Canvas.get_current()
spec_doc = project_canvas.find_element(type="document", name="api_requirements.md")

# エージェントの作成
developer_agent = Agent(
    role="Backend Engineer",
    tools=["file_writer", "terminal_exec"],
    context=[spec_doc] # 要件定義をコンテキストに注入
)

# 指示の実行
instruction = "ドキュメントの仕様に従って、PythonのFastAPIを使ったクライアントクラスを生成してください。"
developer_agent.run(instruction)

このコードを実行すると、キャンバス上に「生成されたコード」のタイルが出現し、同時にローカルの指定パスにもファイルが書き込まれます。 エンジニアはキャンバス上でそのコードを確認し、気になった箇所をチャットで指摘するだけで修正が反映されます。

応用: 実務で使うなら

実務では、UIコンポーネントのプロトタイプ作成からロジック実装までの「一気通貫」に使うのが最も効果的です。 例えば、キャンバス上にFigmaのデザインURLを貼り付け、Campusのエージェントに「このデザインをReactコンポーネントに変換し、既存のAPIエンドポイントと繋ぎ込んでください」と命じます。

この際、Campusは単にコードを出すだけでなく、必要なライブラリのインストール（npm install）や、環境変数の設定提案までをキャンバス上の「タスクリスト」として提示します。 私は実際に、小規模なダッシュボード機能をこのフローで作成しましたが、手動で書いたのは全体の2割程度で、残りはAIが提案したコードのレビューと微調整だけで済みました。 レスポンス速度も、Claude 3.5 Sonnetをバックエンドに選択した場合、1つのコンポーネント生成に5〜8秒程度と実用的です。

強みと弱み

強み:

  • 圧倒的な視覚的コンテキスト管理。プロジェクトの全体像（設計、タスク、コード）を1画面で把握できる。
  • マルチエージェントの連動がスムーズ。デザイナー役、プログラマー役、テスター役のエージェントをキャンバス上で並列に動かせる。
  • FlutterFlowとの親和性。ローコードで枠組みを作り、Campusでロジックを詰め切るというハイブリッド開発が強力。

弱み:

  • ラーニングコスト。キャンバスという概念とエージェントへの権限付与の感覚を掴むまで、数時間は試行錯誤が必要。
  • ブラウザの負荷。大量のタイルやコードを表示すると、メモリを1〜2GB程度消費するため、低スペックなPCでは動作が重くなる。
  • 日本語情報の少なさ。UIは英語メインであり、ドキュメントも詳細な部分は英語を読み解く必要がある。

代替ツールとの比較

項目CampusCursorReplit Agent
主な用途プロジェクト全体の協調設計コードの実装・補完アプリのゼロからの自動生成
UI形式無限キャンバスIDEベース（VS Code）Web IDE
強み設計とコードの同期既存コードの理解力デプロイまでの自動化
対象層チーム・中規模開発個人エンジニア初心者・プロトタイピング

Cursorが「最強の筆記用具」だとしたら、Campusは「AIが参加するホワイトボード」です。 コードを書く効率だけを求めるならCursorの方が上ですが、仕様を考えながら実装を進めるならCampusに軍配が上がります。

料金・必要スペック・導入前の注意点

Campusは現在、FlutterFlowのプランの一部、または単体でのサブスクリプションとして提供されています。 無料枠でも基本的なキャンバス機能は使えますが、高度なマルチエージェント機能を利用するには月額$20〜程度の有料プランが必要です。

ハードウェア面では、ローカルLLMを動かすわけではないため、VRAM 24GBのRTX 4090は必須ではありません。 しかし、複数のブラウザタブでリッチなUIを動かすため、メモリは最低でも16GB、できれば32GB積んでいるPCを推奨します。 特にMacBook ProのM2/M3チップ搭載モデルであれば、ブラウザ上の動作も非常に軽快です。 モニターも、キャンバスを広く使うために27インチ以上の4K解像度があるのが理想的です。

注意点として、AIエージェントにローカルファイルの操作権限を与える際、誤って重要なファイルを上書きされないよう、Gitでのバージョン管理は必須となります。 「一度にすべてをAIに任せない」という運用ルールを決めてから導入すべきです。

私の評価

私の評価は★4.5です。 正直に言って、最初は「また新しいガワネイティブなAIツールか」と冷ややかな目で見ていました。 しかし、実際にキャンバス上で「仕様書」と「コード」を並べ、エージェントがそれらを相互に参照しながら開発を進める様子を見て、考えが変わりました。

これは、従来の「人間がAIに指示を出す」一方通行のインターフェースから、「人間とAIが同じ成果物を見ながら議論する」双方向のインターフェースへの進化です。 RTX 4090を2枚挿してローカルLLMをいじくり回しているようなギークな私から見ても、この「体験の設計」は見事というほかありません。

ただし、VS Codeのショートカットが体に染み付いているエンジニアにとっては、ブラウザベースの編集作業に多少のストレスを感じる場面もあります。 そのため、Campusで全体の骨組みとロジックのコアを作り、細かいリファクタリングはCursorで行うという「二刀流」が、現時点での最適解だと確信しています。

よくある質問

Q1: 既存のGitHubリポジトリをCampusに取り込むことはできますか？

はい、CLIツールを使用してローカルディレクトリを同期させるか、GitHub連携機能を使ってリポジトリ全体をキャンバス上の「コンテキスト」として読み込ませることが可能です。

Q2: 独自のAPIキー（OpenAIやAnthropic）を使用できますか？

はい、Bring Your Own Key (BYOK) に対応しています。自分のAPIキーを設定することで、モデルの選択肢を広げたり、トークン費用を直接管理したりすることができます。

Q3: チームで同じキャンバスを共有して同時に作業できますか？

可能です。Figmaのように複数人が同時にキャンバスに入り、AIエージェントに対してそれぞれが指示を出したり、AIが生成した内容をリアルタイムで共同編集したりできます。