最新バージョン | 5月中旬にリリースされたMagicPath 2.0は、人間とエージェントを共有ワークスペースに統合します |
主な機能 | Prompt-to-UI、キャンバス上の並列AIエージェント、および外部エージェント連携 |
料金 | - 無料: 120クレジット/月、および外部エージェント呼び出し125回/週 |
メリット & デメリット | 優れたエージェントワークフローと無料コードエクスポートが魅力。ただしクレジット消費が早く、生成は遅め。 |
代替ツール |
MagicPath AIとは？
MagicPathは、テキストプロンプトから無限のキャンバス上にフロントエンドUI画面やコンポーネントを生成できるAI搭載デザインツールです。AIと手動の両方で編集可能で、画像、Figma、コードとしてエクスポートできます。
MagicPath 2.0のリリース
2026年5月中旬にリリースされたMagicPath 2.0は、人間とAIエージェントがリアルタイムで共同作業するマルチプレイヤーキャンバスを備えたAI UIデザインツールとして生まれ変わりました。
従来のMagicPathが提供していた編集（手動およびAI）やエクスポート機能に加え、2.0ではAIコーディングエージェントやGitHubを追加して、より強力なデザインtoコードのワークフローを実現できます。
既存ユーザーはMagicPath 2.0アップデートで何か対応が必要ですか？
不要です。MagicPath 2.0はプラットフォーム全体のアップグレードであり、別製品ではありません。既存のアカウント、プロジェクト、プランは自動的に引き継がれます。
最新のMagicPath 2.0で料金の変更はありますか？
はい。無料プランは月30クレジットから120クレジットに増量。Proは月額$20（200クレジット）から、年払いで月額$21（600クレジット）へと変更されました。
ただし、クレジットの消費方法は異なります。以前は1コンポーネントあたり1クレジットでしたが、現在はエージェントの作業量に応じて消費されるため（Replit Pricingと同様）、場合によってはコストが高くなる可能性があります。
旧バージョンのMagicPath AIは引き続き使用できますか？
いいえ。フォールバックできるレガシーバージョンはありません。現在はMagicPath 2.0のみが提供されています。
以前のシンプルなキャンバスに慣れていた方でも、最新のAI UIエージェント駆動インターフェースなら直感的に操作できるはずです。
MagicPath 2.0 UIデザインの検証
サインインして作業を選択
MagicPathへのログインは非常にシンプルです。無料でクレジットカードは不要。ダッシュボードを開くと、UIライブラリとAI編集可能なアプリ設計アセットが表示され、その下に過去のプロジェクトやチュートリアルが並びます。
ゼロから新しいデザインを作成
MagicPath AIでのデザイン開始には3つの方法があります：
i) FigmaデザインをインポートしてAIで編集
ii) MagicPath拡張機能を使ってスクリーンショットを編集可能なUIに変換
iii) シンプルにテキストプロンプトを入力してUIを生成
また、新規プロジェクト開始方法として「code-to-design」も追加されました。これはAIコーディングエージェント（ClaudeやCodexなど）またはGitHubを接続して行います。
今回は、定番のテキストtoUI方法を選び、「Auto」モデルを使ってミニマリストなメモアプリ（Things 3 UI風）の作成を指示しました。
MagicPath 2.0での私のプロンプト
"3Dグラスのアイコン、プライマリーカラーにティール（青緑）とオレンジ、フォントにジオメトリック・サンセリフを採用した、Nottyというミニマリストなメモアプリをデザインして。下部にはダッシュボード、メモ追加、カレンダー、プロフィール/設定のアイコンを表示するナビゲーションバーを配置。
以下の2画面を生成して：
- 画面1 — すっきりしたサイドバーに「今日」「今度の予定」「いつでも」のセクションがあり、メインエリアにタスクリストが表示されているダッシュボード。
- 画面2 — タイトル、メモ入力欄、期日、タグが表示されるタスク詳細ビュー。"
MagicPath 2.0が生成したUIをレビュー
まず、MagicPath 2.0のUIエージェントの処理プロセスには嬉しい驚きがありました。最初にデザインシステムが構築され、続いて2つのエージェントが各画面を並行して作成。その間、思考ボックスの進捗テキストがリアルタイムで更新されます。
一見すると、出力されたUIは非常にきれいです。特に画面1（ダッシュボード）における「今日」「今度の予定」「いつでも」のタスクのスマートなスタッキングは優秀です。両画面とも要求したコンポーネントを含んでいました。しかし、細部を見ると課題が次々と見つかります。
画面1のスタックされた3つのアイコンは白地のため、ほぼ見えなくなっています。
「プライマリーカラーにティール」という指示を真に受けすぎたのか、画面全体がティール色一色になってしまいました。
3Dアイコンを求めたにもかかわらず、すべて普通の2Dアイコンになり、代わりに深いドロップシャドウの付いたフローティングアイコンが出力されました（画面2ヘッダーのメモ帳アイコンを参照）。
さらに残念だったのは、2つの画面で下部ナビゲーションバーのデザインが異なっていたことです。
そのため、デザインの仕上がりには複雑な心境ですが、今後の期待感はあります。
この2つの画面の生成で10クレジットを消費し、約2分かかりました。業界標準からするとやや高コストで、少し遅いと感じます。
AIを使ってUIを編集する
MagicPath 2.0では、キャンバス上でUIを編集する2つの方法があります：
i) クレジットを消費しないビジュアル（手動）編集
ii) エージェントの作業量に応じてクレジットを消費するAI編集
手動編集
ビジュアル編集モードに入ると、Figmaに似た操作画面が開きます。ここではテキストの編集、要素の移動、色の変更などが可能。非常に扱いやすく、クレジットを節約するのに便利です。
AI編集
AI編集では、見つかった最も目立つ問題を修正するよう指示しました。
“画面1の下部ナビゲーションバーを、画面2と同じデザインに統一して。”
ありがたいことに、今回は完璧に対応してくれました。ダッシュボードアイコンにハイライトを追加するなど、理にかなった修正です。しかし、この1回の編集で5クレジットも消費しました！
この時点で、MagicPath 2.0は寛容なデザイナーというより、厳格なPM（プロジェクトマネージャー）に近いと感じ始めました。
Freepik (現 Magnific) AIの検証記事 >
デザインの共有とエクスポート
MagicPath 2.0でのデザイン共有
i) デザインのプレビュー - 新しいウィンドウでワンクリックでプレビューできます。一部の要素をスクロールしてインタラクションを確認できるのが良好でした。
i) リンクで共有 - 非常にシンプルに使えます。デザインの閲覧とコピーに利用可能。Figmaのようにリアルタイムで直接共同編集するものではありません。
MagicPath 2.0でのデザインエクスポート
i) 画像としてエクスポート - ボード選択時に3点ドットのドロップダウンから選択できます。しかし、何回試してもうまく動作しませんでした。
ii) コードのエクスポート - ワンクリックでReact + TypeScript + Tailwindのプロジェクトとしてフロントエンドコードを閲覧・コピーできます。ダウンロード可能なコードベースも用意されています。さらに、MagicPath内からCursor、Codex、Claude Codeへ直接転送できるため、エージェントワークフローと好相性です。
コードのエクスポート自体はクレジットを消費しません。
iii) Figmaとしてエクスポート – デザインボードを選択した際に、上部バーの右側にはっきりと表示されます。クリックすると数秒でクリップボードにコピーされ、そのままFigmaにペーストして編集を継続できます。
このFigmaへのデザインエクスポートのワークフローは、他の多くのAIデザインツールよりもスムーズでした。
MagicPath 2.0の新機能
人間とエージェントのコラボレーション: 1つのプロンプトでプロジェクト全体が開始され、複数のエージェントが共通のデザインシステムを維持しながら並行してキャンバス上で稼働します。リアルタイムで一緒に画面を構築できます。
文脈としてのキャンバス: キャンバス上にあるデザイン、スクリーンショット、ムードボード、参照資料などのすべてがエージェントの参照情報になります。
サポート役としての外部エージェント: Claude Code、Codex、CursorなどをMagicPathプロジェクトに直接接続。デザインファイルを読み取り、コードベースを構築して同期を戻してくれます。
不在時でも動作: Chrome拡張機能やターミナルを介して、MagicPathがバックグラウンドで動作します。既存のWebサイトを編集可能なデザインとしてキャプチャ可能です。
デザインとコードの双方向同期: キャンバスのデザインをコンポーネントとして直接リポジトリにプッシュ。逆にコードベースからキャンバスに変更をプルすることも可能です。
最新のMagicPath料金体系
MagicPath 無料プラン
2026年現在、MagicPathはフリーミアムモデルを採用しています。無料プランは基本的に永久無料で、クレジットカードの登録も不要です。毎日20クレジット（最大月120クレジット）が付与されます。
主な機能
コンポーネントライブラリ、カスタムフォント、およびデザインシステムジェネレーター
スクリーンショットをUIに変換するChrome拡張機能
月5回までのFigmaインポート、月3回までのFigmaエクスポート
外部エージェント呼び出し125回/週
MagicPath 有料プラン
MagicPath 2.0には、ProとTeamsの2つの有料プランがあります。その名の通り、個人開発者やスタートアップ、制作代理店をターゲットにしています。
プラン | 価格 | クレジット | 主な特典 |
Pro | 年一括払いで月額$21。月払いの場合は月額$30。 | 600/月（推奨） | 無制限のFigmaインポート＆エクスポート、無制限のエージェント呼び出し、プレミアムサポート、月調整クレジットパックの購入権 |
Teams | カスタム | 1シートあたり1,000/月 | チームワークスペース、共有シート、SSO＆管理者権限、専任サポート |
※注：MagicPath PROプランでは、月間クレジット制限を最大3,000クレジット（月額$150）まで引き上げ可能です。
MagicPathのクレジット消費メカニズム
無料プランを含む全てのプランで、契約期間（月または年）有効な固定クレジットが付与されます。これは、AIの生成と編集に消費される独自通貨です。
公式料金ページおよび実機検証に基づく主なポイントは以下の通りです：
ゼロから2つの画面を生成するのに10クレジットを消費（エージェント1アクションあたり約5クレジット）。
AIによる部分編集1回（複数画面のナビゲーションバーの統一）で5クレジットを消費。
ビジュアル編集、コードエクスポート、共有は非消費（0クレジット）。
Figmaのインポートおよびエクスポートには独自の月間制限があり、クレジット残高は消費しません。
外部エージェント（Claude Code、Codex、Cursorなど）の呼び出しは、各エージェントのプロバイダー経由で課金され、MagicPathは課金しません。
余ったクレジットは繰り越せません。新しい請求サイクル開始時にリセットされます。
MagicPath 2.0のメリット・デメリット
良かった点 | 気になった点 |
並行エージェントが、共通のデザインシステムを保ちながら一度に複数の画面を構築できる。 | 生成に1回あたり約2分かかり、他のツールと比べて少し遅く感じられた。 |
手軽な修正に使えるビジュアル編集モードは無料で、操作感もFigmaによく似ている。 | AIによる編集コストが高い。シンプルなナビゲーションバーの修正だけで5クレジットを消費した。 |
生成を開始する前にデザインシステムが決定されるため、画面間の一貫性を維持しやすい。 | AIがプロンプトをあまりに真に受けすぎることがある。「ティール」と1回書いただけでほぼ全箇所がティール色になった。 |
コードエクスポートは無料で、Cursor、Codex、Claude Codeですぐ使えるきれいなReact、TypeScript、Tailwindコードを出力する。 | エクスポートの選択肢がReactのみ。プレーンなHTML/CSSでのエクスポートがない。 |
Figmaへのエクスポートが素早く、テストした中で最も快適に動作した。 | 画像エクスポートボタンはあるものの、検証中には正常に動作しなかった。 |
Claude、Codex、Cursorといった外部エージェントを、MagicPathのクレジットを消費せずに直接接続できる。 | 「Rune」や「Atlas」といった個別のエージェント名は主にブランディング目的。エージェントごとに特定のタスクを個別指定することはできない。 |
無料プランでも全機能が使え、有料プランは主に利用制限を引き上げる設計になっている。 | たった2つの画面に10クレジットは高価に思える。これだけで無料枠（月間）の約3分の1を消費してしまうことになる。 |
MagicPath AIの代替候補ツール
Banani: UI/AIの最良の代替ツール
Bananiは、テキストや画像プロンプトから無限キャンバス上で完全なUIフローを生成し、共有可能なプロトタイプリンクやFigmaへの直接コピペ機能を提供します。1クリックでクリーンなHTML/CSSコードを書き出し、MCP経由で各種コーディングエージェントと接続できる優れたデザインtoコードツールでもあります。
MagicPathよりBananiを選ぶ理由: Figmaへの出力を含め、クレジット制限を気にせず「デザイン優先」で成果物を作りたい場合。Bananiのクレジットシステムは「1クレジット＝1回生成/編集」と明確です。
Claude Design: 優れたデザインtoコードソフトウェア
Anthropicが開発したClaude Designは、UIデザインに留まりません。アプリのプロトタイプ、Pitch Deck、ウェブのペライチページなどを生成し、音声、3D、リッチエフェクトなどを施した体験を構築できます。デザインシステム統合やマルチプレイヤー共同編集、Claude Codeへのワンクリックハンドオフも可能です。
MagicPathよりClaude Designを選ぶ理由: 多彩なフォーマットを出力でき、既存のClaude Proサブスクリプションに含まれるため個別クレジットシステムが不要な点。
Lovable: UIデザイン対応のフルスタックAIアプリビルダー
Lovableは、非常に評価の高い最新のvibe-codingツールです。単なるUI画面の枠を超えて、プロンプトから実際に動作・デプロイ可能なフルスタックアプリを生成します。プロトタイプではなく、実用的な製品が欲しいデベロッパーやファウンダーに最適です。
MagicPathよりLovableを選ぶ理由: 単なるモックアップやデザインデータではなく、UIとコードを制御し、リリース可能な状態のMVPが必要な場合。
Penpot: コード連携可能なオープンソースUIデザインツール
Penpotは、CSSコード確認機能が組み込まれた、無料のオープンソースUIデザインツールです。ベンダーロックインがなく使えるのが特徴で、より細かい管理や大規模なチーム機能が必要な場合はエンタープライズプランも用意されています。
MagicPathよりPenpotを選ぶ理由: クレジットを気にせず、無料でコード出力可能なFigma風のデザイン環境が欲しい場合。
総評: MagicPath 2.0は選ぶべきか？
MagicPath 2.0は、AIデザインツールのエコシステムにおいて着実に進化しています。並行エージェント、共通デザインシステム、コードの双方向同期などは、デザインtoコードのワークフローに非常に強力です。しかし、クレジット消費が非常に早く、生成速度が遅い点、また名前付きエージェント（RuneやAtlasなど）の実態がデザイン的な演出に留まっており、スキルに応じた使い分けができない点は気になります。
そのため、製品引き渡しのためのプロトタイプを作成するファウンダーやPMへの結論として、MagicPath 2.0はまず無料プランで体験し、自分のプロジェクトニーズに合っているか判断することをお勧めします。
より高速な生成、わかりやすいクレジットシステム、綺麗なコード書き出しが可能なAIエージェント駆動デザイン環境を求めるなら、Bananiをおすすめします。
