Magic Patterns(マジックパターンズ)は、プロダクトのUIをAIで設計するためのワークスペースです。開発元は米North Park Labsで、公式サイトのフッター表記もこの社名になっています。公式トップの見出しは「The AI-native workspace for designing your product」で、既存のプロダクトとデザインシステムを出発の材料にして、企画、比較、設計、そしてコードへの受け渡しまでを1枚のキャンバスに載せる、という位置づけです。料金はFree、Starter、Business、Enterpriseの4段で、Starterが月20ドル、Businessが月100ドルという数字を第三者の集計で確認しました(2026年11月6日確認の公開情報ベース)。この記事は実際の操作を行わず、公開情報だけを材料にした整理です。生成されるUIの見た目や、自社のデザインシステムをどこまで正確に再現するかは未検証です。
結論を先に六つ
- 2026年10月13日にMagicOSへ刷新。チャット欄に指示を書く形から、キャンバス上で複数案を並べる形へ移った
- 核は「完成品を作る道具」ではなく「実装に渡す設計図を作る道具」という立ち位置。受け渡し先はCursorやClaude Codeなどのコーディングエージェント
- 料金はFree 0ドル、Starter月20ドル、Business月100ドル、Enterpriseは見積り。年払いにすると15パーセント安くなる
- Figmaとの違いは、画面の絵ではなくUIのコードを出力すること。v0やLovableとの違いは、デプロイまで担わず手元の設計に留まること
- 向くのは、デザインシステムを持つプロダクトチーム。向かないのは、非エンジニアが数時間でサービスを出す用途
- SOC 2とISO 27001の取得は公式の記載。取引先への説明材料にはなるが、日本語UIの品質は未検証
Magic Patternsとは何か。2026年10月のMagicOS刷新で何が変わったか
Magic Patternsは、AIでUIを作る道具として2023年ごろから知られてきた製品です。当初の姿は、チャット欄に「ログイン画面を作って」と書くと、右側にUIの候補が出る形でした。2026年11月6日に公式トップを開くと、その説明が別の言葉に置き換わっています。見出しは「The AI-native workspace for designing your product」で、副題には「Start from your existing product & design system. Plan, explore & design variants quickly, hand off to code.」とあります。既存のプロダクトとデザインシステムから始め、企画し、案を並べ、コードへ渡す、という一連の流れを1つの場所に集めた、という主張です。
この刷新の名前がMagicOSです。公式はキャンバスを「From idea to handoff, on one canvas」と説明し、PRD、リポジトリ、参考資料を持ち込み、案を横に並べて比べ、勝った案をコーディングエージェントに渡す、と書いています(2026年11月6日確認)。従来のチャット型のエディタは消えたわけではありません。キャンバスの中の部品として残り、指示を書く場所と、案を並べる場所が同じ画面に同居する形になりました。
| 項目 | 公式ページの表記(2026年11月6日) | 読み取れること |
|---|---|---|
| 位置づけ | The AI-native workspace for designing your product | 単体のUI生成ではなく作業スペースとして売っている |
| 作業の出発の材料 | Start from your existing product & design system | 白紙からではなく既存の画面と規則から始める |
| キャンバス | From idea to handoff, on one canvas | 企画から受け渡しまでを1画面に載せる |
| 持ち込む素材 | PRD、repo、referencesを並べる | 仕様書とリポジトリが前提の道具 |
| 受け渡し先 | Hand off the winner to your coding agent | 生成物の行き先はデプロイではなくコーディングエージェント |
| 協働 | Edit, share, and iterate on designs live | 複数人での同時編集 |
| 認証 | SOC 2 and ISO 27001 certified | 企業導入を想定した認証 |
この表を並べると、製品の重心がどこにあるかが見えてきます。「PRDとリポジトリを持ち込む」という前提は、利用者としてエンジニアか、少なくとも自社のコードベースに触れるプロダクトマネージャーを想定している、と読めます。キャンバスに並べるのが「案」であることも重要です。1つの正解を作るのではなく、方向の違う複数の案を並べて比べる作業が中心に置かれている。この2つが、後で触れるFigmaやv0との違いにつながります。
公開情報として、公式トップには利用規模の表示もあります。「Over 1 million designs created by our community」「Join 500K+ others building their ideas」という文言が並びます(いずれも公式ページ上の表示)。数字の定義は公開されていないため、そのまま市場規模として読むのは避けるべきです。ただ、少なくとも公式が「個人の試用」ではなく「チームの利用」を前提にした訴求に切り替えていることは分かります。2026年11月上旬のMagic Patternsは、UI生成の試作ツールから、プロダクトチームの設計環境へと名乗りを変えた段階にある、と整理できます。
刷新の日付は2026年10月13日とされています。この記事で扱う情報は、その約3週間後に取得した公式ページが中心です。刷新直後は画面の構成がまだ動いている可能性があり、この記事の記述と実際の画面が食い違う場合があります。契約や導入の判断をする前に、公式サイトで最新の画面を確認してください。
Magic Patternsの料金はいくらか。何で金額が決まるのか
料金の話は、取得できた範囲を先に断っておきます。2026年11月6日に公式の料金ページを取得しましたが、金額はクライアント側の描画で表示される作りになっており、HTMLの中に数字が入っていませんでした。そのため公式の料金表から直接の数字は取れていません。代わりに、第三者による集計2件(TechPilotの2026年10月16日確認分、vp0.comの2026年版)が同じ数字を載せていたため、その一致した数字を採用しています。将来の改定で変わる可能性があることは、前提として置いてください。
| プラン | 月払い | 年払い(月あたり) | 月のクレジット | 向く使い方 |
|---|---|---|---|---|
| Free | 0ドル | 0ドル | 非公開 | 画面を見て、操作感を確かめる |
| Starter | 月20ドル | 月17ドル | 1,000 | 1人で週に数画面を設計する |
| Business | 月100ドル | 月85ドル | 5,000 | チームで同時に案を回す |
| Enterprise | 見積り | 見積り | 要相談 | 認証や契約条件の調整が必要な組織 |
| 超過分 | 1クレジット0.02ドル | 同左 | — | 月末に足りなくなったときの追加 |
表の数字は、第三者の集計2件が一致した範囲です。Freeの0ドル、Starterの月20ドルと年払いの月17ドル、Businessの月100ドルと年払いの月85ドル、超過分の1クレジット0.02ドルが該当します。年払いに切り替えると15パーセント安くなる計算で、月20ドルと月17ドルの差もそれに合います。公式トップのFAQにも「Starter $20/seat/month, Business $100/seat/month, and Enterprise custom」という記載があり、月払いの額については公式の文言とも一致します。クレジット数の1,000と5,000は公式ページからは確認できていないため、第三者集計に基づく数字として扱ってください。
料金の構造で見ておきたいのは、席単位の課金とクレジットの二段構えになっていることです。月額は「何人で使うか」に、クレジットは「どれだけ案を生成するか」に紐づきます。チームの人数が増えると月額が上がり、案の生成が増えるとクレジットが減る。同じ金額でも、人数の多いチームと生成の多いチームでは、どちらが先に上限へ当たるかが変わります。表示は地域・支払い周期・為替で変わるため、契約前に公式サイトの料金表を確認してください。
月額は人数で決まり、クレジットは案の数で減る
判断の分かれ目は、1か月に何案を並べるかです。キャンバス上で方向の違う案を10通り出し、2つに絞って作り込み、1つをコーディングエージェントに渡す。この流れを1機能ぶん回すと、生成の回数は案の数だけ増えます。MagicOSの使い方は「案をたくさん出して比べる」ことが前提なので、クレジットの消費は旧来のチャット型より速くなると考えられます。1人で月に画面を5つ作る程度ならStarterの月1,000クレジットで足りる見込みですが、チームで同じ画面を並行して磨くなら足りなくなる可能性があります。この線は実際に触らないと測れないため、無料枠で1機能ぶんの流れを1回通してから判断するのが安全です。
MagicOSのキャンバスで、実際に何ができるのか
公式トップの機能説明は7つの短文に分かれています。「Iterate Faster」「Design System」「Team Collaboration」の3つが上段、その下に「Bring in your context」「Match your existing designs」「Design & engineering, together」が並びます。文言はいずれも短く、具体的な操作手順までは書かれていません。読み取れるのは、どの作業を製品の中心に置いているか、という配分です。
- 指示から高忠実度のUIへ。「Turn a prompt, requirement, or feature idea into high-fidelity UI in minutes」とある。要件の文から画面の候補を作る工程が入口
- デザインシステムの持ち込み。既存のコンポーネントと規則を取り込み、案が自社の見た目で出るようにする
- 同時編集。デザインとエンジニアリングが同じ案を触れる。権限は表示上「Can edit」と「Owner」の2段
- PRDとリポジトリの読み込み。MagicOSの説明で挙げられている持ち込み素材
- 案の比較。「compare directions side by side」とある通り、横に並べて比べる作業が前提
- コーディングエージェントへの受け渡し。勝った案をそのまま実装の入口にする
この並びで目を引くのは、案を「比べる」ことが機能として明示されていることです。UI生成の道具の多くは、1つの指示に対して1つの結果を返す形を取ります。気に入らなければ書き直す。MagicOSは、方向の違う案を先に複数出して、横に並べて選ばせる。この違いは、作業の順序を変えます。指示を磨いて1つの正解に近づけるのではなく、選択肢を広げてから絞る。「正解を作る道具」ではなく「選択肢を並べる道具」として設計されていることが、MagicOSの一番の特徴だと読めます。
もう一つ、見落としやすいのが権限の表示です。トップの画面には「Patty Owner」「Sarah Can edit」という2人の表示と、「Acme workspace only」という注記が並びます。これは操作画面の見本ですが、ワークスペース単位でメンバーを管理する設計だと分かります。1つの組織の中に複数のワークスペースを置き、外には出さない、という形です。社外の制作会社と一緒に案を作る場面では、この区切りが効きます。
公式が掲載する利用者の声も、性格を裏づけています。デザインシステムの教育者、スタートアップの創業者、プロダクトリードの声が並び、「顧客との打ち合わせから数時間で高忠実度の試作まで行けた」といった内容が含まれます。これらは公式が選んで掲載した声なので、そのまま評価の根拠にはできません。ただ、想定している利用者が「デザインシステムを持つ組織」であることは伝わってきます。
評価できるところ。設計図を実装に渡せることの価値
- 出力の行き先が実装になる。案をコードの形でコーディングエージェントに渡せるため、絵からコードへの作り直しが減る
- 既存のデザインシステムを出発の材料にできる。白紙から作る道具ではないので、社内の見た目から外れにくい
- 案を並べて比べる作業が中心にある。1案を磨くのではなく、方向を選ぶ判断がしやすい
- SOC 2とISO 27001を取得している。企業の情報システム部門に出す資料として使える
- 同時編集がある。デザイナーとエンジニアが同じ画面を見ながら話せる
- 無料枠がある。金額を確かめる前でも、画面の操作感だけは触れる
- 年払いにすると15パーセント安くなる。継続が決まっているなら差は小さくない
一番の見どころは、成果物の行き先が決まっていることです。UI生成の道具は、作った画面をどこに持っていくかで価値が変わります。画像として書き出す道具は、その先で誰かがコードに直す必要があります。その「直す」工程で、余白の数値やフォントの指定がずれる。Magic Patternsは、案の段階からコードとして持てるため、このずれが起きにくい設計です。モックアップの精度を上げるのではなく、モックアップを経由しない方向に寄せているのが、この製品の狙いだと読めます。
二つ目は、社内の見た目から外れにくいことです。既存のコンポーネントを取り込めるなら、案の段階で自社のボタン、入力欄、余白の規則が反映されます。この差は、案を見せる相手が増えるほど効きます。経営会議に出す案が自社の見た目と違うと、議論が「デザインの好み」に流れます。見た目が揃っていれば、議論は機能と優先順位に戻ります。
三つ目は、比較の作法です。案を横に並べる作業は、判断を早めます。1案だけ見せられると、人は良し悪しではなく好き嫌いで判断します。3案並ぶと、「どれが一番安く実装できるか」「どれが一番先方の要望に近いか」という基準が自然に立ちます。道具の側がこの並べ方を前提にしていることは、チームの議論の質に効きます。
四つ目は、認証の表示です。公式は「SOC 2 and ISO 27001 certified for enterprise」と書き、企業向けの位置づけを明示しています。社内の画面や未公開の機能をAIに読ませる場面では、情報の扱いが審査の対象になります。認証の有無は、その審査の入口を通過する材料になります。ただし、認証が何を保証するかは契約と監査報告の範囲で決まります。公式の記載だけで判断せず、必要なら報告書の提示を求めてください。
五つ目は、料金の組み立ての分かりやすさです。席単位の月額と、クレジットの消費が分かれているため、費用の見通しを立てやすい。人数を増やすときの上がり方と、生成を増やすときの減り方を別々に見積もれます。1つの残高に全部をまとめる設計に比べて、どこに費用がかかっているかが見える形です。
気になるところ。金額の取得と、刷新直後の不安定さ
- 公式の料金ページから金額を取得できなかった。採用した数字は第三者の集計2件に基づく
- 刷新から日が浅い。2026年10月13日のMagicOS移行から1か月足らずで、画面の構成が変わる可能性がある
- クレジット数の1,000と5,000は公式で未確認。案を並べる使い方では消費が速い見込み
- PRDとリポジトリの持ち込みが前提なので、非エンジニアには入口が高い
- 日本語のUIと、日本語での生成品質は未検証
一番の引っかかりは、金額を公式で確かめられなかったことです。料金ページは読み込まれても、金額の数字がHTMLに含まれていない作りでした。この記事では第三者の集計2件が一致した数字を採用していますが、これは公式の表示を直接読んだ数字ではありません。改定の時期や、地域ごとの差は反映されていない可能性があります。契約の直前には、必ずログイン後の画面で金額を確認してください。
二つ目は、刷新からの日数の短さです。2026年10月13日にMagicOSへ移り、この記事の情報確認は11月6日です。製品の名前、画面の構成、料金の段数がいずれも動いている時期にあたります。実際に触ると、この記事の記述と違う画面が出るかもしれません。レビュー記事を読む側も、書かれた日付を先に確かめるべき製品です。
三つ目は、入口の高さです。「PRDとリポジトリを持ち込む」という前提は、道具を使う人に自社のコードベースへの理解を求めます。Figmaのように、デザイナーだけで完結する道具とは違います。デザインの担当者がエンジニアと会話できない組織では、持ち込む素材が揃わず、機能の半分が使えない可能性があります。
どんなチームに向き、どこで止まるか
向くのは、既存のプロダクトを持ち、デザインシステムを整備しているチームです。新しい機能の案を、実装前の段階で素早く形にして、エンジニアと検討したい場面。複数の方向性を並べて、経営や顧客の判断を仰ぎたい場面。この2つが定期的に発生する組織なら、相性はいいと考えられます。向かないのは、非エンジニアが数時間でサービスを公開したい人、デザインの担当者が1人しかいないチーム、そして画面を作るより先に文章や構成を考えたい人です。向き不向きを分けるのは、ツールの操作力ではなく、自社のコードベースを案の材料にできるかどうかです。
Figmaやv0、Lovableとの違いは?比較の軸を3つに絞る
比較の前提として、生成されるUIの品質の優劣は書けません。同じ要件を同じ条件で流した検証をしていないためです(未検証)。公開情報で並べられるのは、道具の性格の違いまでです。軸は3つに絞れます。成果物の形、終わりの位置、そして前提とする利用者です。
| 比較の軸 | Magic Patterns | Figma系のデザイン道具 | v0やLovableなどの生成ツール |
|---|---|---|---|
| 成果物の形 | UIのコードと案の束 | 画面のデータ(絵) | 動くアプリとそのコード |
| 終わりの位置 | コーディングエージェントへの受け渡し | デザインの共有と確認 | URLでの公開 |
| 出発の材料 | 既存のプロダクトとデザインシステム | 白紙または社内のライブラリ | プロンプト |
| 想定する利用者 | プロダクトチーム(デザインと開発の境界) | デザイナー中心 | 非エンジニアから開発者まで |
| 料金の形 | 席単位の月額とクレジット | 席単位の月額 | クレジットか月額 |
Figmaとの違いを一言で書くなら「絵を出すか、コードを出すか」です。Figma AIは、画面の設計図をチームで作る道具として定着しています。書き出したデータは、基本的にコードへ変換する工程を経ます。Magic Patternsは、案の段階からコードとして持つため、変換の工程を短くできます。どちらが上かではなく、受け渡しの相手が人間かエージェントかで選ぶのが正しい。実装を外部に出す案件ならFigmaのデータが合いやすく、自社のエンジニアに渡すならコードのほうが早い。
v0やLovable、Replitとの違いは、終わりの位置です。これらは公開までを視野に入れた生成ツールで、指示から動くアプリまでを作ります。Magic Patternsは、公開ではなく引き渡しで終わります。この違いは、作ったものの置き場所を変えます。公開型は「とりあえず出して反応を見る」、受け渡し型は「実装の前に方向を固める」。同じ「AIでUIを作る」でも、仕事の位置が違います。
他の候補も同じ軸で並べられます。Cursorはコードを書く道具で、Magic Patternsの受け渡し先になります。Onlookはコードを直接キャンバスで触る方向で、受け渡しの工程そのものをなくす道具です。BubbleやSoftr、WeWebは、ノーコードでアプリを組む方向。UizardはUIの案を手早く作る方向、Canva AIは資料や広告の中に画面を置く方向です。用途が「社内ツールを早く出したい」なら、ノーコードの側が近道になる場合もあります。
3つの軸で自分のチームを置いてみる
成果物の形、終わりの位置、前提とする利用者。この3つに自社の状況を置くと、候補は2つほどに絞れます。迷ったら、直近3か月に作った画面のうち、実装まで至ったものが何割だったかを思い出してください。案の段階で止まった画面が多いなら、方向を並べて比べる道具が向きます。逆に、ほぼすべてが実装まで進むなら、公開まで担う生成ツールのほうが手数が少ない。案で止まる割合が高いチームほど、Magic Patternsの長所を受け取れると考えられます。
導入前に決めること。小さく試す順序
最初に決めるのは、どの機能の案を作るかです。新規の画面を作るのか、既存画面の改修案を作るのか。前者はデザインシステムの持ち込みが効きにくく、後者は効きやすい。既存画面の改修案から試すと、自社のコンポーネントがどこまで再現されるかを早く確かめられます。
試す順序は4段です。デザインシステムのうち、使う頻度の高い10個のコンポーネントを選ぶ。そのコンポーネントだけで作れる画面の要件を3つ書く。無料枠で案を出し、自社の見た目にどこまで寄るかを記録する。その記録を見て、有料プランの段を決める。先に作るのは画面ではなく、要件の短文と使う部品の一覧です。この2つがないまま触り始めると、案の良し悪しを判断する基準が残りません。
記録する項目は3つに絞ります。案を何通り出したか。そのうち自社のコンポーネントで再現できたのは何割か。そして、エンジニアがそのまま使えると判断したかどうか。この3つが揃えば、受け渡し先の道具との相性も同じ物差しで測れます。「使いやすかった」という感想は、翌週には薄れます。再現できた割合だけが残ります。
データの扱いも確認項目に入れてください。PRDには未公開の機能名が、リポジトリには社内のロジックが含まれます。持ち込んだ素材がどこに保存され、誰が読めるのかは、規約とセキュリティの文書で確認する必要があります。SOC 2とISO 27001の記載は材料になりますが、自社の条件で許容できるかは別の話です。審査の担当者が原文を読む工程を、計画の最初に置いてください。
最初の1か月に揃える3つの記録
初月の目標は、継続の判断材料を3つ集めることです。案の再現率、受け渡しの成功率、そしてクレジットの残り具合。この3つが揃えば、段を上げるか下げるかの判断は、印象ではなく記録の話になります。2026年11月の料金構成を前提にしても、判断の材料は自社の記録でしか取れません。クレジットの残りは、月中に一度だけ確認すれば足ります。
よくある質問
Q. Magic Patternsは無料で使えますか?
A. Freeのプランがあり、月0ドルで使えると第三者の集計に書かれています。ただし月のクレジット数は公開されておらず、どこまで生成できるかは不明です。操作感を確かめる用途には十分ですが、案を並べる使い方を続けるには有料プランが要ると考えられます。
Q. 料金はいくらですか?
A. Starter月20ドル(年払い月17ドル)、Business月100ドル(年払い月85ドル)という数字を第三者の集計2件から採用しています。公式トップのFAQにも同じ月額の記載があります。年払いにすると15パーセント安くなり、超過分は1クレジット0.02ドルです。表示は地域・支払い周期・為替で変わるため、契約前に公式サイトの料金表を確認してください。
Q. Figmaの代わりになりますか?
A. 置き換えにはなりません。Figmaは画面の設計図をチームで作る道具、Magic PatternsはUIのコードと案を出す道具です。実装を外部に出すならFigmaのデータが合いやすく、自社のエンジニアに渡すならMagic Patternsのほうが工程を短くできます。併用する形が現実的だと考えます。
Q. v0やLovableとの違いは何ですか?
A. 終わりの位置が違います。v0やLovableは公開までを視野に入れた生成ツールで、Magic Patternsは実装前の引き渡しで終わります。とりあえず出して反応を見たいなら生成ツール、実装の前に方向を固めたいならMagic Patternsが向きます。受け渡し先としてCursorなどのコーディングエージェントを想定していることも特徴です。
Q. MagicOSに刷新されて、何が変わりましたか?
A. チャット欄に指示を書く形から、キャンバス上でPRDやリポジトリを持ち込み、案を横に並べて比べる形へ移りました。従来のチャット型のエディタは、キャンバスの中の部品として残っています。刷新は2026年10月13日とされ、この記事の情報確認はその約3週間後です。
Q. 導入でつまずきやすいのはどこですか?
A. 料金の確認と、クレジットの消費の速さです。公式の料金ページは金額が描画で表示される作りで、取得できませんでした。また、案を並べて比べる使い方では生成の回数が増えるため、クレジットの減りが想定より速くなる可能性があります。無料枠で1機能ぶんの流れを1回通し、消費の見当をつけてから段を決めてください。
まとめ
結論は「Magic Patternsは、デザインシステムを持つプロダクトチームの設計環境として評価するのが正しい」です。2026年10月13日のMagicOS刷新で、UI生成の道具から、案を並べて実装に渡すワークスペースへと名乗りを変えました(2026年11月6日確認の公開情報)。料金はStarter月20ドル、Business月100ドル、年払いで15パーセント安くなり、超過は1クレジット0.02ドル。強みは成果物の行き先が実装になることと、既存の部品から案が出ること。弱みは金額を公式で確かめられないことと、使い方によってクレジットの消費が速いことです。実務的な進め方は、既存画面の改修案を3つ、使う部品を10個に絞って無料枠で流し、エンジニアがそのまま使える割合を記録してから段を決めるという順序です。完成品を作る道具として入れると期待外れになり、設計の前段に置くと効きます。それがこの道具の正しい置き場所だと考えます。
主な参照元:Magic Patterns公式サイト「AI-Native Workspace for Designing Your Product | Magic Patterns」(2026年11月6日確認。MagicOSの説明、キャンバスの使い方、デザインシステムの持ち込み、同時編集、SOC 2・ISO 27001の記載、利用規模の表示、Starter 20ドル・Business 100ドルのFAQ表記はここによります)。料金の詳細(年払い月17ドルと月85ドル、月1,000と月5,000クレジット、年払いで15パーセント引き、超過1クレジット0.02ドル)は、公式料金ページがクライアント側描画で金額を取得できなかったため、第三者の集計2件が一致した数字を採用しました。出典:TechPilot「Magic Patterns: MagicOS, Pricing & Review」(2026年10月16日確認)。出典:vp0.com「Magic Patterns 料金プランと機能の解説(2026年版)」。UIの生成品質、デザインシステムの再現率、日本語UIの使い勝手は未検証です。実機検証は未実施です。
最新のAI情報をメールで受け取る
新着のAIツール比較・ランキング・ニュースを、まとめてお届けします。
ご登録後、確認メールをお送りします。配信停止はいつでも可能です。
