「Figmaのデザインをコードに変換するのに、毎回何時間もかかる…」——ShiftBの受講生からこんな声をよく聞きます。デザインとコードの間にある「翻訳作業」は、個人開発者にとって最大のボトルネックの一つです。
2026年、この課題を根本から解決するツールが登場しました。それがPencil.devです。「Design on canvas. Land in code.」をキャッチコピーに掲げるPencilは、デザインをコードとしてGit管理し、AIエージェントと連携して自然言語だけでUIを生成できる、エンジニア向けの新世代デザインツールです。
僕自身、ShiftBのWebサイトやOGP画像の管理にPencilを導入し、デザイン→コード変換の工数を約70%削減できました。.penファイルをGitリポジトリに含めることで、デザインの変更履歴もPRレビューに載せられるようになりました。
この記事では、Pencil.devの概要から、インストール方法、実際の使い方、Figmaとの違い、料金プランまで、初心者でも迷わず始められるように1万5000字超で徹底解説します。
この記事を書いた人：立川修平（ぶべ）
Pencil.devは、VS CodeやCursorなどのIDE内で直接動作するベクターデザインツールです。従来のデザインツール（Figma、Sketch、Adobe XDなど）がブラウザやスタンドアロンアプリで動くのに対し、Pencilはコードエディタの中でデザインするという全く新しいアプローチを取っています。
2026年1月にリリースされて以来、GitHubで急速にスター数を伸ばし、2026年4月時点で世界中のエンジニアコミュニティで最も注目されるデザインツールの一つとなっています。開発元はPencil Labs（米国サンフランシスコ）で、「デザインとコードの壁を取り払う」ことをミッションに掲げています。
Pencilの最大の特徴は、デザインデータが.penという拡張子のテキストファイルとして保存される点です。中身はJSON形式のテキストデータで、以下のような構造になっています。
// example.pen（中身はJSON）
{
"type": "frame",
"name": "LoginPage",
"width": 1440,
"height": 900,
"children": [
{
"type": "frame",
"name": "LoginForm",
"layout": "vertical",
"gap": 16,
"children": [
{
"type": "text",
"content": "ログイン",
"fontSize": 24,
"fontWeight": "700"
},
{
"type": "input",
"placeholder": "メールアドレス"
}
]
}
]
}これが意味することは非常に大きいです。
Figmaのデザインデータがクラウド上のプロプライエタリ形式で保存されるのとは、根本的に異なる設計思想です。
なぜ今、Pencilがこれほど注目されているのか。3つの背景があります。
①AI駆動開発の普及——Claude CodeやCursorの普及により、コードはAIで書く時代になりました。しかし「デザイン→コード変換」は依然として手作業が多く、ボトルネックになっていました。PencilはMCP（Model Context Protocol）を通じてAIエージェントがキャンバスを直接操作できるため、このボトルネックを解消します。
②エンジニア主導のプロダクト開発——個人開発やスタートアップでは、エンジニア自身がデザインも担当するケースが増えています。しかしFigmaは元々デザイナー向けに設計されたツールで、エンジニアにとっては学習コストが高い。Pencilはエンジニアの既存ワークフロー（IDE + Git）に乗るため、新しいツールの学習がほぼ不要です。
③Design as Codeの潮流——インフラをコードで管理するIaC（Infrastructure as Code）が当たり前になったように、デザインもコードとして管理する「Design as Code」の流れが加速しています。Pencilはこの思想を最も純粋に体現するツールです。
前述の通り、Pencilのデザインデータは.pen形式のテキストファイルです。これにより、以下のワークフローが実現します。
git add → git commitでデザイン変更をコミット従来のFigmaベースのフローでは、「Figmaでデザイン変更→エンジニアに共有→手動でコードに反映→PRレビュー」と4ステップ必要でした。Pencilならデザイン変更がそのままPRになるため、ワークフローが大幅に短縮されます。
PencilにはAIチャットインターフェースが内蔵されており、自然言語でデザインを指示できます。
たとえば、以下のようなプロンプトを入力するだけでUIが生成されます。
| プロンプト例 | 生成されるUI |
|---|---|
| 「ログイン画面をTailwindで、ダークモードで」 | ダークテーマのログインフォーム |
| 「料金プランの比較カードを3カラムで」 | 3列のPricingカードコンポーネント |
| 「ヘッダーにロゴとナビゲーション、CTAボタンを配置」 | レスポンシブ対応のヘッダー |
| 「このフォームにバリデーションエラーの表示を追加」 | 既存UIへのエラーメッセージ追加 |
PencilはShadcn/UI、Tailwind CSSなどの人気コンポーネントライブラリを理解しており、これらのデザインシステムに準拠したUIを自動生成します。「デザインの知識がなくても、言葉で伝えればプロ品質のUIが作れる」というのは、個人開発者にとって革命的です。
PencilはMCPを活用し、キャンバス上の変更とコードを双方向にリアルタイム同期します。
この双方向同期はAST（抽象構文木）変換とHMR（Hot Module Replacement）の組み合わせで実現されており、遅延はほぼ感じません。実務では「キャンバスで大まかにレイアウトを決め、細かい調整はコードで行う」というワークフローが最も効率的です。
PencilはMCP（Model Context Protocol）サーバーを内蔵しており、Claude CodeやCursorから直接キャンバスを操作できます。
具体的には、Claude Codeから以下のような操作が可能です。
MCP連携が使えるAIツールは以下の通りです。
| AIツール | 連携方法 | 対応状況 |
|---|---|---|
| Claude Code | MCPサーバー自動接続 | ✅ 完全対応 |
| Cursor | Tools & MCP設定から有効化 | ✅ 完全対応 |
| Windsurf | MCP設定 | ✅ 対応 |
| GitHub Copilot | —— | ❌ 未対応 |
「すでにFigmaで大量のデザイン資産がある」という方も安心です。PencilはFigmaからのコピー&ペーストに対応しており、Figma上の要素を選択してコピーし、Pencilにペーストするだけでレイアウトやスタイルを維持したまま取り込めます。
ただし、いくつかの制限があります。
実務では「Figmaで作成した既存デザインをベースに、Pencilで新規開発を進める」というハイブリッド運用が現実的です。
AI時代のアプリ開発コース
ShiftBのAIシフトコースは、Claude Codeで本格的なWebアプリケーションを作りながらAI駆動開発を身につけるコースです。ただ作って終わりではなく、コードを読め、セキュリティに責任を持って提案でき、要件定義などの上流工程まで担えるところまで現役エンジニアがサポートします。
AIシフトコースを見る →PencilはVS Code拡張機能・Cursor拡張機能・デスクトップアプリの3つの形態で利用できます。いずれも無料で、5分以内にセットアップが完了します。
最もスムーズに始められるのが、VS Code拡張機能です。以下の手順でインストールします。
Step 1：拡張機能のインストール
Cmd + Shift + X）
Step 2：アカウント認証
Step 3：MCP接続の確認（Claude Codeユーザー向け）
Claude Codeを使っている場合、Pencilのインストール時にMCPサーバーが自動的にセットアップされます。以下のコマンドで接続を確認できます。
# Claude Codeのターミナルで実行
/mcp
# 以下が表示されればOK
# pencil ✔ connectedCursorの場合は、Settings → Tools & MCP で「pencil」が有効になっていることを確認してください。
IDE内ではなく、独立したアプリケーションとして使いたい場合はデスクトップアプリがおすすめです。公式のダウンロードページからOS別にインストーラーを取得できます。
| OS | インストール方法 | 備考 |
|---|---|---|
| macOS | .dmgをダウンロード→Applicationsにドラッグ | 推奨環境 |
| Linux | .debまたは.AppImageを使用 | X11環境が安定 |
| Windows | インストーラーをダウンロード | 対応済み |
デスクトップアプリでも、右上の「Export Code & MCP」ボタンからClaude CodeやCursorとのMCP接続を設定できます。アプリを起動すると自動的にMCPサーバーが立ち上がるため、特別な設定は不要です。
すでにNext.jsなどのプロジェクトがある場合、以下の手順でPencilを組み込めます。
.penファイルを作成.gitignoreに.penファイルを含めない（Git管理する）# プロジェクトルートで.penファイルを作成
touch design.pen
# VS Codeで開くとPencilのキャンバスが起動
code design.pen.penファイルをダブルクリック（またはVS Codeで開く）すると、自動的にPencilのキャンバスが起動します。
インストールが完了したら、実際にデザインを作成してみましょう。ここではシンプルなランディングページのヒーローセクションを例に、Pencilの基本的な使い方を解説します。所要時間は約10分です。
まず、プロジェクト内に.penファイルを作成します。
# ターミナルで実行
touch hero-section.penVS Code（またはCursor）でこのファイルを開くと、Pencilのキャンバスが自動的に起動します。中央に白いキャンバスが表示され、左側にレイヤーパネル、右側にプロパティパネルが配置されています。
インターフェースはFigmaに似ており、Figma経験者であれば直感的に操作できます。
キャンバス上の操作は、Figmaとほぼ同じです。
まず「F」キーでフレームツールを選択し、キャンバス上でドラッグして1440×900のフレームを作成します。これがページ全体のコンテナになります。
右側のプロパティパネルで、以下を設定します。
ここがPencil最大の魅力です。キャンバス右下のAIチャットアイコンをクリックし、以下のように入力します。
ヒーローセクションを作成してください。
- キャッチコピー「AIで、開発を10倍速く」
- サブテキスト「Claude CodeとPencilで実現する、新しい開発体験」
- CTAボタン2つ「無料で始める」「デモを見る」
- Tailwind CSSベース
- ダークモード対応数秒でAIがキャンバス上にUIを生成します。テキスト、ボタン、レイアウトがすべて自動配置され、Tailwind CSSのクラスが適用された状態で表示されます。
生成されたデザインが気に入らない場合は、追加の指示で修正できます。
# 修正の指示例
- CTAボタンをもっと大きくして
- 背景にグラデーションを追加して
- フォントサイズを見出し48px、サブテキスト20pxにAIが生成したUIをベースに、手動で微調整を行います。Pencilのキャンバスではドラッグ&ドロップで要素を移動でき、右側のプロパティパネルで以下を細かく設定できます。
ポイントは、プロパティパネルの設定項目がCSSのプロパティとほぼ1対1で対応している点です。CSSの知識があれば、迷うことなく操作できます。
デザインが完成したら、コードとしてエクスポートします。Pencilでは主に2つの方法があります。
方法A：Claude Code経由でコード生成
# Claude Codeで実行
「hero-section.penのデザインを読み取って、
React + Tailwind CSSのコンポーネントとして実装して」Claude CodeがPencilのMCPサーバーからデザインデータを読み取り、ピクセルパーフェクトなReactコンポーネントを自動生成します。
方法B：Pencilのエクスポート機能
キャンバス右上の「Export」ボタンから、HTML/CSS、React、またはSVGとしてエクスポートすることもできます。チーム開発ではClaude Code経由が推奨されますが、シンプルなコンポーネントならExport機能で十分です。
AI時代のアプリ開発コース
ShiftBのAIシフトコースは、Claude Codeで本格的なWebアプリケーションを作りながらAI駆動開発を身につけるコースです。ただ作って終わりではなく、コードを読め、セキュリティに責任を持って提案でき、要件定義などの上流工程まで担えるところまで現役エンジニアがサポートします。
AIシフトコースを見る →「PencilがあればFigmaは不要？」という質問をよく受けます。結論から言うと、両者は競合ではなく補完関係です。それぞれの強み・弱みを理解した上で使い分けるのがベストです。
| 比較項目 | Pencil.dev | Figma |
|---|---|---|
| 動作環境 | IDE内 / デスクトップアプリ | ブラウザ / デスクトップアプリ |
| データ形式 | .pen（JSON テキスト） | クラウド上のプロプライエタリ形式 |
| Git管理 | ✅ ネイティブ対応 | ❌ 非対応（プラグインで部分対応） |
| AI連携 | ✅ MCP経由でClaude Code等と連携 | △ Figma AIあり（限定的） |
| コード生成 | ✅ 双方向リアルタイム同期 | △ Dev Modeでの参照（手動変換） |
| 共同編集 | Git経由（非同期） | ✅ リアルタイム共同編集 |
| プロトタイピング | △ 基本機能あり | ✅ 高度なプロトタイプ機能 |
| プラグイン | MCP対応ツールと連携 | ✅ 数千のプラグイン |
| 学習コスト | 低い（エンジニア向け） | 中程度 |
| 料金 | 無料（2026年4月時点） | 無料プランあり / Pro $15/月 |
ShiftBでは以下のハイブリッド運用を推奨しています。
| フェーズ | 使うツール | 理由 |
|---|---|---|
| UXリサーチ・ワイヤーフレーム | Figma | プロトタイプ機能が強力 |
| UIデザイン確定 | Figma → Pencilにコピー | デザイナーの成果物を引き継ぎ |
| 実装・コーディング | Pencil + Claude Code | AI連携で爆速コード化 |
| デザイン修正・イテレーション | Pencil | Git管理で安全に変更 |
2026年4月時点で、Pencil.devは完全無料で利用できます。機能制限もなく、すべての機能にアクセス可能です。
公式サイトには以下のように記載されています。
"Pencil is currently free. In the future, we may introduce paid features or plans. If we do, we'll clearly describe the terms and pricing before you're charged."
将来的には有料プランが導入される可能性がありますが、事前に明確な説明があるとのことです。
Pencil自体は無料ですが、AI機能を利用するにはAIツール側のサブスクリプションが必要です。
| AIツール | 必要なプラン | 月額料金 |
|---|---|---|
| Claude Code | Max Plan以上 | $20〜/月 |
| Cursor | Pro Plan以上 | $20/月 |
| Windsurf | 有料プラン | $15〜/月 |
つまり、Pencilの実質コストは「利用するAIツールの月額料金」です。すでにClaude CodeやCursorを使っているなら、追加コストゼロでPencilを導入できます。
| ツール | 無料プラン | 有料プラン | AI機能 |
|---|---|---|---|
| Pencil.dev | ✅ 全機能無料 | （未定） | AIツール側の契約が必要 |
| Figma | ✅（3プロジェクトまで） | $15/月〜 | Figma AI（一部有料） |
| Sketch | ❌ | $12/月 | 限定的 |
| Adobe XD | ❌（販売終了） | —— | —— |
コスト面では、Pencilが最も有利です。すでにAIコーディングツールに課金している開発者にとっては、実質的に追加費用ゼロでプロフェッショナルなデザインツールを手に入れられます。
PencilはShadcn/UIやTailwind CSSなどの人気コンポーネントライブラリを理解しています。AIに「Shadcn/UIのCardコンポーネントを使って」と指示するだけで、デザインシステムに準拠したUIが生成されます。
良い指示の例：
Shadcn/UIのCardコンポーネントを使って、
ユーザープロフィールカードを作成してください。
アバター画像、名前、メールアドレス、
「プロフィールを編集」ボタンを含めてください。悪い指示の例：
プロフィールカードを作って具体的なコンポーネントライブラリ名と要件を指定することで、AIの生成精度が格段に上がります。
.penファイルはテキストベースですが、大規模なデザインになるとファイルサイズが大きくなることがあります。以下のルールを守ることで、Git運用がスムーズになります。
login.pen、dashboard.penのようにページごとに分割components/ディレクトリに配置PencilのAI機能を最大限に活用するためのプロンプトのコツです。
| 観点 | 良い例 | 悪い例 |
|---|---|---|
| 具体性 | 「1440px幅、3カラム、gap24pxのカードレイアウト」 | 「いい感じのカード」 |
| 技術スタック | 「Tailwind CSSで、Shadcn/UIのButtonを使って」 | 「ボタンを追加」 |
| コンテキスト | 「SaaS管理画面のダッシュボード。既存のヘッダーの下に」 | 「ダッシュボードを作って」 |
| トーン・スタイル | 「ミニマルなデザイン、余白多め、モノトーン基調」 | 「おしゃれにして」 |
Figmaから一気にPencilに移行するのではなく、以下の段階的アプローチをおすすめします。
この段階的アプローチにより、チーム全体のラーニングカーブを緩やかにできます。
Pencilはソロ開発者だけでなく、チーム開発でも威力を発揮します。
UIは英語ですが、日本語テキストのデザインは問題なく作成できます。AIへの指示も日本語で行えます（Claude CodeやCursorが日本語対応しているため）。フォントはローカル環境にインストールされているものが利用可能なので、Noto Sans JPなどの日本語フォントも使えます。
Figmaからのコピー&ペーストに対応しています。Figma上で要素を選択してコピー（Cmd+C）し、Pencilにペースト（Cmd+V）するだけで、レイアウトやスタイルが維持されたまま取り込めます。ただし、Figma固有の高度な機能（一部のAuto Layout設定、プラグイン依存のエフェクト等）は再調整が必要な場合があります。
はい、Pencil自体はオフラインで動作します。.penファイルはローカルに保存されるため、インターネット接続がなくてもデザインの閲覧・編集が可能です。ただし、AI機能（Claude Code連携など）を利用する場合はインターネット接続が必要です。
はい、Windows対応しています。デスクトップアプリとVS Code拡張機能の両方がWindowsで動作します。ただし、最も安定しているのはmacOS環境です。
公式は「将来的に有料プランを導入する可能性がある」と明言しています。ただし、「課金前に明確な説明を行う」とも述べているため、突然課金が発生することはありません。現時点では全機能を無料で利用できるため、今のうちに試しておくことをおすすめします。
はい、AIを活用すればデザインの知識がなくても十分に使えます。「ログイン画面を作って」のように自然言語で指示するだけでプロ品質のUIが生成されます。ShiftBの受講生でも、デザイン未経験からPencilを使って個人開発のUIを作っている方が多数います。
いいえ、すべてローカルに保存されます。.penファイルはプロジェクトディレクトリ内のテキストファイルとして保存され、クラウドには一切送信されません。機密性の高いプロジェクトでも安心して利用できます。
Pencil.devは「デザインとコードの壁」を壊す、エンジニアのための新世代デザインツールです。無料で始められる今のうちに、ぜひ一度試してみてください。
さらに詳しいMCP連携の方法はPencil × Claude CodeでUIデザインを自動生成する方法【MCP連携】で、Figmaとの詳細な比較はPencil vs Figma｜エンジニアが乗り換えるべき5つの理由で解説しています。
要約・疑問の解消に。記事のタイトル・URL・参照元を入れた質問文が自動で入力されます。
AUTHOR
RELATED ARTICLES
COURSE
ShiftBのAIシフトコースは、Claude Codeで本格的なWebアプリケーションを作りながら学ぶコースです。コードを読め、セキュリティに責任を持って提案でき、要件定義などの上流工程まで担える状態を目指します。まずは無料相談会でご相談ください。