Paper.design レビュー: MCP、機能、価格

Vlad Solomakha

2026/02/25

移動

タイトル

移動

タイトル

AIを使用してUIデザインとワイヤーフレームを生成

デザインを生成する

Paperは、コードとデザインツールを統合する最良の試みの一つです。それが何をするのか、あなたの{{agents}}にどのように接続するのか、そしてあなたのワークフローに適しているかどうかを学んでください。

Paper.designとは？

Paperはシンプルなアイデアに基づいています：視覚的にデザインしたものが実際のコードとなるのです。Figmaのような専用フォーマットではなく、Paperは本物のHTMLとCSSを基盤としています。

このツールはオープンアルファであり、最近デスクトップアプリや強力なMCPサーバーといったクールな追加機能を発表しました。これによりPaperは単なるデザインツールから、あらゆるAIエージェントが読み書きできる完全接続されたキャンバスになります。AI UI生成にも使用できます。

Paper.designの特徴

HTML/CSSキャンバス

Paperが最初から提供しているコア機能です。本物のウェブ要素を使用できる自由形式のFigma風のキャンバスです。作成したすべての要素はHTMLとCSSとしてレンダリングされ、変換ステップなしでデザインをコードとしてエクスポートできます。

本物のフレックスボックスレイアウト、本物のCSSプロパティー、実際のフォントレンダリングが得られます。

Paper MCPサーバー

Paper designを任意のAIコーディングエージェントに接続し、彼らが生成するフロントエンドを視覚的に確認する場所として使用できます。

複数のMCPツールがあり、エージェントがデザインファイルを細かいレベルで操作できます。フレームの作成、スタイルの更新、テキストコンテンツの設定、スクリーンショットの取得、さらには任意のノードのJSXやTailwindの出力を取得することができます。

読み書きの両方をサポートしているので、他の情報源からコンテキストを引き出してデザインに統合できます。ドキュメントには、Figmaからのトークン同期やNotionからのコンテンツ取り込みに関するガイドが含まれています！

Paperシェーダー

Paperの最も特長的な機能のひとつはそのシェーダーライブラリです。これらはアニメーション付き、GPUアクセラレートされた視覚効果を提供します。メッシュグラデーション、液体金属、ハーフトーンパターン、フルーテッドガラス、粒子テクスチャーなどがあります。キャンバス上の要素に直接適用できます。

画像生成

Paperには異なるモデルプロバイダーによるAI画像生成機能が内蔵されています。Flux 2を使用すれば、マルチリファレンスやフォトリアリズムをサポートできます。また、Nano Banana Pro（Gemini対応）、OpenAI Image Edit 1.5、およびSeedream 4.5も利用できます。画像を生成し、コンテキスト内で編集し、キャンバスに直接配置できます。

Paper.designの料金

Paper.designはフラットなProサブスクリプションを提供しており、無料プランとカスタムTeamsプランもあります。料金は月額$16または年額$144で、以下が含まれています：

1週間あたり100万MCPツールの呼び出し
1日あたりの画像生成量100倍
ビデオエクスポート、無制限のストレージ、優先フィードバック

無料プランはツールを真剣に探索するのに十分なほど寛大です。Proプランはその提供内容に対して競争力のある価格設定で、特にMCPツール呼び出しの上限を考えるとお得です。

Paper.designの代替品

Banani

BananiはテキストプロンプトからUIを生成し、キャンバスに整理します。ワンクリックでFigmaにエクスポートできるため、デザインの探索に最適です。Variants、完全なユーザーフロー生成など、内蔵AIツールが豊富にあります。

Paperと同様に、HTMLとCSSを直接使用して設計されており、最近ではMCPもリリースされ、コーディングエージェントを接続してデザインを読み書きできます。

このリストの他の選択肢と異なり、Claudeまたは別のAIエージェント用の別途サブスクリプションを必要とせず、生成機能が組み込まれており、製品のコア部分を構成していますので、セットアップは不要です。

Pencil.dev

PencilはキャンバスベースのUI生成ツールで、Claude Codeと統合されています。PaperのようにAIエージェントと作業するためのFigma風のインターフェースを提供します。主な違いは、PencilがClaudeの上にレイヤーされており、この記事を書いている時点で他のエージェントでは使用できないことです。

Subframe

プロダクションレディのReactコードを出力するもう一つのキャンバスコード設計ツールです。本物のコンポーネントで視覚的に設計し、エンジニアがCLI同期でコードベースに直接コードを取り込みます。MCPサーバーも備えており、CursorやClaude Codeに接続して、完全なコードベースコンテキストでIDEから新しいデザインを促進できます。

Variant.ai

Variantは単一のプロンプトからデザインのバリエーションを生成するフィードに焦点を当てています。Paperとは非常に異なるユースケースを持っています。素早いビジュアル探索が目標の場合、Variantは魅力的です。実際に出荷される設計を目指す場合は、Paperのコードネイティブアプローチがより適しています。

Figma Make

明確な比較対象。Figmaはより成熟しており、エコシステムも大きく、多くのデザインチームにとってデフォルトの選択です。しかし、Figmaのキャンバスは専用であり、AI機能はまだ追いつきつつあります。Paperは、コードネイティブなキャンバスがAIエージェントがワークフローの一部になるにつれてより重要になると考えています。