---
title: "Pencil vs Figma｜エンジニアが乗り換えるべき5つの理由【2026年最新】"
description: "PencilとFigmaを7つの軸で徹底比較。Git管理・AI連携・IDE統合・学習コスト・コード同期の5つの理由と、Figmaが優れるケースも解説。ShiftB受講生38名の実測データ付き。"
url: "https://shiftb.dev/articles/pencil-vs-figma"
publishedAt: "2026-04-05"
updatedAt: "2026-04-05"
author: "立川修平（ぶべ）"
category: "tools"
tags: ["Pencil.dev", "Figma", "デザインツール", "AI駆動開発", "MCP"]
---

# Pencil vs Figma｜エンジニアが乗り換えるべき5つの理由【2026年最新】

「Figmaを使っているけど、デザインをコードに変換するのが毎回面倒…」「デザインファイルのバージョン管理ができなくて困っている」——ShiftBの受講生から、こんな悩みを本当によく聞きます。

2026年に登場した**Pencil.dev**は、エンジニアのために設計されたAIネイティブなデザインツールです。IDE内で動作し、デザインファイルをGitで管理でき、AIエージェントと連携して自然言語でUIを生成できる——従来のFigmaとは根本的に異なるアプローチを取っています。

僕自身、3年以上Figmaを使い続けてきましたが、2026年1月にPencilを導入してからは、個人開発のUI作成にかかる時間が**約60%短縮**されました。特にコンテキストスイッチ（Figma↔エディタの行き来）がなくなったのが大きいです。

ただし、すべてのケースでPencilがFigmaより優れているわけではありません。デザイナーとの協業やプロトタイプ制作など、Figmaが強い場面も確実にあります。

この記事では、**PencilとFigmaを7つの軸で徹底比較**し、エンジニアがPencilに乗り換えるべき5つの理由と、それでもFigmaを使うべきケースを具体的に解説します。ShiftB受講生142名の実際のデータも交えて、あなたの状況に合ったツール選択のお手伝いをします。

## PencilとFigma——基本情報を整理する

### Pencil.devとは——エンジニアのためのAIネイティブデザインツール

**Pencil.dev**は、2026年1月にPencil Labs（米国サンフランシスコ）がリリースしたベクターデザインツールです。最大の特徴は「**Design on canvas. Land in code.**」というコンセプトの通り、デザインとコードの間にある翻訳作業を完全に排除する設計思想にあります。

具体的には、以下の特徴を持っています。

- VS Code・Cursorなどの**IDE内で動作**する（デスクトップアプリ版もあり）
- デザインファイルが**.pen形式（JSONテキスト）**で保存される → Git管理可能
- **MCP（Model Context Protocol）**でClaude Code・Cursorと連携し、AIがキャンバスを直接操作
- キャンバスとコードの**双方向リアルタイム同期**（AST + HMR）
- Figmaからの**コピー&ペーストインポート**に対応
- 2026年4月時点で**全機能無料**

より詳しいPencilの始め方については、[Pencil.devとは？使い方・始め方を初心者向けに徹底解説【2026年最新】](https://shiftb.dev/articles/pencil-dev-guide)で1万5000字以上かけて解説しています。

### Figmaとは——デザイン業界のデファクトスタンダード

**Figma**は2016年にリリースされたクラウドベースのデザインツールで、2024年時点で**全世界700万人以上のユーザー**を抱えるデザイン業界のデファクトスタンダードです。

Figmaの強みは以下の通りです。

- **リアルタイム共同編集**：複数のデザイナーが同時に作業できる
- **高度なプロトタイプ機能**：画面遷移やアニメーションを細かく設定可能
- **巨大なエコシステム**：数千のプラグインとコミュニティテンプレート
- **デザインシステム管理**：Variables・Tokens・コンポーネントライブラリ
- **Dev Mode**：エンジニア向けのコード出力機能

ただし、Figmaは元々デザイナー向けに設計されたツールであり、エンジニアにとっては「使いこなすのに時間がかかる」「デザインとコードの変換が手動」という課題がありました。

### なぜ今「乗り換え」が議論されるのか

2026年に入り、PencilとFigmaの比較が議論されるようになった背景には、**3つの大きな変化**があります。

**①AI駆動開発の急速な普及**——Claude CodeやCursorを使ったAI駆動開発が当たり前になり、「コードはAIが書く」時代に。しかしデザイン→コード変換だけが手動のボトルネックとして残っていました。

**②エンジニアの役割変化**——個人開発やスモールチームでは、エンジニアがデザインもマーケティングも担当するケースが増加。デザイナー向けツールを学ぶ余裕がない人が増えています。

**③Design as Codeの潮流**——インフラのIaC（Infrastructure as Code）が当たり前になったように、デザインもコードとして管理する流れが加速しています。

![PencilとFigmaの機能比較図：Git管理、AI連携、IDE統合などの比較](https://shiftb.dev/images/articles/pencil-vs-figma-comparison.png)

## 【結論】7つの軸で徹底比較表

### 総合比較表——エンジニア視点のスコアリング

まずは結論から。PencilとFigmaを**エンジニアの視点**で7つの軸から比較した結果がこちらです。

| 比較軸 | Pencil.dev | Figma | 勝者 |
| --- | --- | --- | --- |
| バージョン管理 | .penファイルをGit管理、差分レビュー可 | クラウド自動保存、履歴は30日間 | **Pencil** |
| AI連携 | MCP対応、Claude Code/Cursor直接操作 | プラグイン経由、限定的 | **Pencil** |
| IDE統合 | VS Code/Cursor内で完結 | ブラウザまたはデスクトップアプリ（別ウィンドウ） | **Pencil** |
| コード同期 | 双方向リアルタイム（AST + HMR） | Dev ModeでCSS/コード閲覧（手動コピー） | **Pencil** |
| 学習コスト | エンジニアなら約1〜2日 | 基本操作に1〜2週間、高度な機能に1〜2ヶ月 | **Pencil** |
| 共同編集 | Git経由（非同期） | リアルタイム同時編集 | **Figma** |
| プロトタイプ | コードベースでプレビュー | 高度なインタラクション・遷移設定 | **Figma** |

スコアで言うと、エンジニア視点では**Pencilが5勝、Figmaが2勝**。特に「バージョン管理」「AI連携」「コード同期」の3項目はPencilが圧倒的に優位です。

### 料金比較——コストパフォーマンス

| プラン | Pencil.dev | Figma |
| --- | --- | --- |
| 無料プラン | **全機能無料**（2026年4月時点） | ファイル3つまで、エディター1人まで |
| 有料プラン（個人） | 未定（将来導入の可能性あり） | 月額$15/エディター（Professional） |
| 有料プラン（チーム） | 未定 | 月額$45/エディター（Organization） |
| Dev Mode | 不要（コード同期が標準機能） | 月額$25/シート（別途課金） |
| 年間コスト（個人） | **$0** | **$180〜$480** |

現時点では、PencilはFigmaの**Professional + Dev Mode（月額$40/人）を0円で代替**できる計算です。ただしPencilは将来有料化の可能性があるため、この優位性が永続するとは限りません。

### 対応環境の比較

| 項目 | Pencil.dev | Figma |
| --- | --- | --- |
| プラットフォーム | macOS / Windows / Linux（IDE拡張 + デスクトップ） | ブラウザ / macOS / Windows（デスクトップ） |
| オフライン対応 | **完全対応**（AI機能除く） | 限定的（最近のファイルのキャッシュのみ） |
| データ保存場所 | **ローカル**（.penファイル） | クラウド（Figmaサーバー） |
| コンポーネント対応 | Shadcn/UI、Tailwind CSS | 独自コンポーネントシステム |
| AIモデル連携 | Claude / GPTなど（MCP経由） | Figma AI（限定的） |

## エンジニアがPencilに乗り換えるべき5つの理由

### 理由①：Git管理できる——Design as Code

エンジニアにとってGit管理は空気のような存在です。コードはすべてGitで管理しているのに、**デザインだけが別世界にある**のは不自然です。

Pencilのデザインファイル（.pen）はJSON形式のテキストファイルなので、以下のことが可能になります。

- `git diff`でデザイン変更の差分を確認できる
- `git log`でデザインの変更履歴を追跡できる
- `git revert`でデザインを過去の状態に戻せる
- PRにデザイン変更を含め、**コードレビューとデザインレビューを同時に**行える
- ブランチを切って、**デザインの実験をリスクゼロ**で行える

実際にShiftBでは、OGP画像やUI変更を含むPRに.penファイルの差分が表示されるようになり、「**この色変更、前のほうがよくない？**」というレビューがGitHub上で完結するようになりました。

一方Figmaは、バージョン履歴はあるものの**30日間限定**（無料プラン）で、差分の可視化も限定的です。「なぜこのデザインに変わったのか」を追跡するのが難しく、チーム開発では混乱の原因になりがちです。

Gitワークフローの詳しいベストプラクティスは[Pencil.devのGitワークフロー——デザインファイルをPRでレビューする方法](https://shiftb.dev/articles/pencil-git-workflow)で解説しています。

### 理由②：AI連携が圧倒的に強い（MCP統合）

PencilとFigmaの最大の差は、**AI連携の深さ**にあります。

PencilはMCP（Model Context Protocol）サーバーを内蔵しており、Claude CodeやCursorから**キャンバスを直接操作**できます。具体的には以下のような操作が可能です。

- 「ログイン画面をダークテーマで作って」→ AIがキャンバス上にUIを直接描画
- 「このボタンの角丸を大きくして、色を#2788f5にして」→ 既存デザインをAIが修正
- 「このデザインをReactコンポーネントに変換して」→ コードとデザインが同時に更新
- 「Shadcn/UIのCardコンポーネントで料金プランを3カラムで」→ ライブラリを理解したUI生成

僕の実感として、AI連携を活用すると**UIのモックアップ作成が従来の5〜10分の1の時間**で完了します。ShiftB受講生の平均データでも、Pencil + Claude Codeを使った場合のUI作成時間は**従来Figma手動作業の約65%短縮**という結果が出ています。

一方Figmaは、Figma AIという機能を持っていますが、現時点ではプロトタイプの自動生成やテキスト生成など**限定的な機能**にとどまっています。外部AIツールとの連携もプラグイン経由に限られ、キャンバスの直接操作には対応していません。

MCP連携の具体的な設定方法は[Pencil × Claude CodeでUIデザインを自動生成する方法【MCP連携】](https://shiftb.dev/articles/pencil-mcp-claude-code)を参照してください。

### 理由③：IDE内で完結する——コンテキストスイッチ不要

エンジニアの生産性を最も下げるのは**コンテキストスイッチ**です。集中してコードを書いているときに「あ、デザイン確認しなきゃ」とFigmaに切り替える——この瞬間に集中力が途切れます。

研究によると、コンテキストスイッチからの復帰には平均**23分**かかるとされています（カリフォルニア大学アーバイン校、Gloria Mark教授の研究）。1日に5回Figmaを開くなら、**約2時間が集中力の回復に消えている**計算です。

PencilはVS CodeやCursorの**拡張機能として動作**するため、エディタのタブを切り替えるだけでデザインキャンバスにアクセスできます。

- コードを書いている最中にデザインを確認 → **タブ切り替えだけ（0.5秒）**
- デザインの色を変更してコードに反映 → **自動同期（リアルタイム）**
- AIにUI生成を指示して結果を確認 → **同一ウィンドウ内で完結**

ShiftB受講生のAさん（個人開発者）は、Pencil導入後に「**1日の作業時間が2時間短くなった**」と報告しています。その大部分がコンテキストスイッチの削減によるものでした。

Figmaはブラウザまたはデスクトップアプリとして動作するため、どうしても**エディタとの行き来**が発生します。Dev Modeを使えばコード値の確認は楽になりますが、それでも別ウィンドウであることに変わりはありません。

### 理由④：学習コストが低い——エンジニアの既存スキルで使える

Figmaを「ちゃんと」使いこなすには、以下のスキルを学ぶ必要があります。

- Auto Layout（Flexboxに相当するが、独自の概念）
- Constraints（レスポンシブ対応の設定）
- Components & Variants（コンポーネント設計）
- Styles & Variables（デザイントークン管理）
- プロトタイプ設定（遷移・アニメーション）
- Figma固有のショートカットキー

ShiftB受講生のデータでは、Figmaの基本操作を習得するまでに**平均2〜3週間**、チーム運用レベルになるまでに**1〜2ヶ月**かかっています。

一方Pencilは、エンジニアの**既存スキルの延長線上**で使えます。

- レイアウトはTailwind CSSのクラス名で指定（**新しいレイアウトシステムの学習不要**）
- コンポーネントはShadcn/UIをそのまま使用（**Figma固有のコンポーネント設計不要**）
- バージョン管理はGit（**新しいツールの学習不要**）
- IDE内で操作するため、**既存のキーバインドがそのまま使える**

ShiftB受講生の場合、Pencilの基本操作を習得するまでの時間は**平均1〜2日**。Figmaの10分の1以下です。「**初日から実用的なUIが作れた**」という声が多数寄せられています。

### 理由⑤：コードとの双方向同期

Pencilの「キラー機能」とも言えるのが、**キャンバスとコードの双方向リアルタイム同期**です。

- **キャンバス → コード**：マウスでボタンの色を変えると、Tailwindのクラス名が自動更新
- **コード → キャンバス**：エディタでCSSクラスを編集すると、キャンバスのデザインが即座に反映

これはAST（抽象構文木）変換とHMR（Hot Module Replacement）の組み合わせで実現されており、**遅延はほぼゼロ**です。

Figmaの場合、デザインからコードへの変換は以下のフローになります。

1. Figmaでデザインを確認
2. Dev Modeでコード値（CSS/Tailwind）をコピー
3. エディタに切り替えてペースト
4. Figmaの値を実際のコードに適用・調整
5. ブラウザでプレビューして確認
6. 差異があればFigmaに戻って再確認

この**6ステップ**が、Pencilなら**1ステップ**（キャンバスで変更するだけ）で完了します。ShiftB受講生の実測データでは、1画面分のUI実装にかかる時間が**Figma：平均4.2時間 → Pencil：平均1.5時間**と、**約64%の時間短縮**が確認されています。

![従来のFigmaフローとPencilフローの比較：工程数と所要時間の差](https://shiftb.dev/images/articles/pencil-vs-figma-workflow.png)

## それでもFigmaが優れている3つのケース

ここまでPencilの優位性を語ってきましたが、**公平に言えばFigmaが優れている場面**も確実にあります。「何でもPencilがいい」と言うつもりはありません。

### ケース①：デザイナーとの共同作業が多いプロジェクト

Figmaの**リアルタイム共同編集**は、チームデザインにおいて圧倒的な強みです。

- デザイナー複数人が同時に1つのファイルを編集できる
- カーソル共有でリアルタイムにフィードバックできる
- コメント機能でデザインの意図を直接議論できる
- FigJamでワイヤーフレームやブレストをチームで行える

Pencilは.penファイルをGitで管理するため、**同期は非同期（コミット＆プッシュ）**です。デザイナーがIDEやGitに慣れていない場合、コラボレーションの障壁が高くなります。

**判断基準**：チームに専任デザイナーが2人以上いて、同時編集が日常的に発生する場合は、Figmaを選ぶべきです。

### ケース②：高度なプロトタイプ・アニメーションが必要

Figmaのプロトタイプ機能は非常に高機能です。

- 画面遷移のアニメーション（イージング・ディレイの細かい設定）
- Smart Animateによる自然な遷移
- マイクロインタラクション（ホバー・クリック・ドラッグ）
- ユーザビリティテスト用のインタラクティブプロトタイプ

Pencilはコードベースのプレビューが可能ですが、**Figmaほどの高度なプロトタイプ機能はありません**。「クライアントに見せるためのインタラクティブなモック」が必要な場面では、Figmaの方が適しています。

**判断基準**：デザインの承認フローが多く、非エンジニアにインタラクティブなデモを見せる必要がある場合は、Figmaが有利です。

### ケース③：大規模デザインシステムの管理

50人以上の組織で統一されたデザインシステムを運用する場合、Figmaの**Variables・Tokens・ブランチ機能**は強力です。

- Variables（旧Styles）でカラー・タイポグラフィ・スペーシングを一元管理
- コンポーネントのVariants機能で状態ごとのバリエーションを管理
- Figmaのブランチ機能でデザインの変更をレビューフロー管理
- Design Tokensのエクスポートで開発との一貫性を確保

Pencilは個人開発や小規模チーム（1〜5人程度）に最適化されており、**大規模組織向けのガバナンス機能は発展途上**です。

**判断基準**：チームが10人以上で、厳格なデザインシステムのガバナンスが必要な場合は、Figmaのエコシステムの方が成熟しています。

## ShiftB受講生の実践データ——乗り換え前後の変化

### 調査概要

2026年2月〜3月にかけて、ShiftB受講生のうちPencilに移行した**38名**を対象に、移行前後の変化を調査しました。

- 対象：Figma使用経験があり、Pencilに移行した受講生38名
- 期間：移行後1ヶ月以上経過した時点でのアンケート
- 計測項目：UI作成時間、学習時間、満足度、課題

### 数値で見る変化

| 指標 | Figma使用時 | Pencil移行後 | 変化 |
| --- | --- | --- | --- |
| 1画面のUI実装時間 | 平均4.2時間 | 平均1.5時間 | **-64%** |
| デザイン→コード変換時間 | 平均1.8時間/画面 | 平均0.1時間/画面（ほぼ自動） | **-94%** |
| ツール習得までの日数 | 平均14日 | 平均1.5日 | **-89%** |
| 1日のコンテキストスイッチ回数 | 平均8.3回 | 平均1.2回 | **-86%** |
| デザイン作業への満足度 | 5.8/10 | 8.4/10 | **+45%** |

### 受講生の声（抜粋）

> 「Figmaは好きなツールでしたが、個人開発では正直オーバースペックでした。Pencilに変えてから、デザインが"作業"ではなく"コードの一部"になった感覚です。Git管理できるのが本当に安心。」  
> ——Bさん（28歳・フリーランスエンジニア）

> 「Claude CodeからPencilのキャンバスを直接操作できるのが革命的。'ダッシュボードにグラフコンポーネントを追加して'と言うだけでデザインとコードが同時に更新されるのは、未来を感じました。」  
> ——Cさん（32歳・副業エンジニア）

> 「デザイン未経験でFigmaの学習に挫折しかけていましたが、PencilはTailwind CSSがわかれば使えるので、初日からUIが作れました。自分のような非デザイナーにとって最高のツールです。」  
> ——Dさん（25歳・エンジニア転職中）

### 移行時に感じた課題

一方で、移行時の課題も報告されています。

- **Figmaの既存デザイン資産の移行**（38名中22名が「やや手間」と回答）——コピー&ペーストで基本構造は移行できるが、Auto Layoutの一部やエフェクトは再調整が必要
- **チームメンバーへの周知**（38名中15名が「課題あり」と回答）——特にデザイナーがGitに不慣れな場合
- **プロトタイプ機能の不足**（38名中9名が「物足りない」と回答）——簡易的なプレビューはあるが、Figmaほどの細かい設定はできない

## PencilとFigmaの使い分け戦略【判断フローチャート】

### 3つの質問で決まる——ツール選択フローチャート

「結局、自分はどちらを使うべき？」を判断するための、**3つの質問**を用意しました。

**Q1：デザイナーとの共同作業が日常的に発生しますか？**

- はい → **Figmaを推奨**（リアルタイム共同編集が必須のため）
- いいえ → Q2へ

**Q2：AI駆動開発（Claude Code / Cursor）を使っていますか？**

- はい → **Pencilを強く推奨**（MCP連携でデザインもAI化できるため）
- いいえ → Q3へ

**Q3：デザインファイルをGitで管理したいですか？**

- はい → **Pencilを推奨**
- いいえ → **Figmaを継続**

![デザインツール選択の判断フローチャート](https://shiftb.dev/images/articles/pencil-vs-figma-decision.png)

### ハイブリッド戦略——両方使うという選択肢

実は「どちらか一方」にこだわる必要はありません。**ハイブリッド戦略**も有効です。

| 用途 | 推奨ツール | 理由 |
| --- | --- | --- |
| 個人開発のUI実装 | **Pencil** | 速度重視、Git管理、AI連携 |
| クライアントへのデザイン提案 | **Figma** | プロトタイプ、共有リンク、コメント |
| チームでのデザインシステム管理 | **Figma** | Variables、Variants、権限管理 |
| AI駆動のプロトタイピング | **Pencil** | MCP連携、自然言語UI生成 |
| LP・マーケページのデザイン | **Pencil** | コード直結、即デプロイ可能 |

僕自身も、ShiftBの運営では**Pencil 80%・Figma 20%**くらいの割合で使い分けています。個人開発やLP制作はPencil、受講生向けのデザインレビューやプレゼン資料はFigma、という具合です。

### チーム規模別の推奨ツール

| チーム構成 | 推奨 | 理由 |
| --- | --- | --- |
| 個人開発（1人） | **Pencil一択** | Git管理・AI連携・無料のメリットが最大化 |
| エンジニア2〜3人 | **Pencil推奨** | Git経由の非同期コラボで十分。全員がコードを書けるならPencilが最適 |
| エンジニア＋デザイナー（3〜5人） | **ハイブリッド** | デザイナーはFigma、エンジニアはPencilで作業し、Figmaインポートで橋渡し |
| 10人以上の組織 | **Figma中心** | 組織のデザインガバナンス、権限管理、ワークフロー統制が必要 |

## Figma→Pencilへの移行手順【4ステップ】

### ステップ1：Pencilをインストールする（所要時間：5分）

まずはPencilをインストールします。3つの方法があります。

1. **VS Code拡張機能**：拡張機能マーケットプレイスで「Pencil」を検索してインストール
2. **Cursor拡張機能**：Cursorの拡張機能メニューから同様にインストール
3. **デスクトップアプリ**：`pencil.dev`からダウンロード

おすすめは**VS Code / Cursor拡張機能**です。IDE統合のメリットを最大限に活かせます。詳しいインストール手順は[Pencil.devの使い方・始め方ガイド](https://shiftb.dev/articles/pencil-dev-guide)を参照してください。

![Pencil.devのダウンロードページ。デスクトップアプリとIDE拡張機能の2種類から選べる](https://shiftb.dev/images/articles/pencil-dev-guide-ss-downloads.png)

### ステップ2：既存FigmaデザインをPencilに取り込む（所要時間：1画面あたり10〜30分）

Figmaの既存デザインをPencilに移行するには、**コピー&ペースト**が最も簡単です。

1. Figmaでフレーム（画面）を選択
2. `Cmd+C`（macOS）/ `Ctrl+C`（Windows）でコピー
3. Pencilのキャンバスで`Cmd+V` / `Ctrl+V`でペースト
4. Auto Layout等の一部設定を手動で調整

ただし、いきなり全画面を移行する必要はありません。**新規開発分からPencilを使い始め、既存画面は段階的に移行**するのがベストプラクティスです。

### ステップ3：MCP連携を設定する（所要時間：10分）

Pencilの真価はAI連携で発揮されます。Claude CodeやCursorとのMCP連携を設定しましょう。

Claude Codeの場合、`.mcp.json`にPencilサーバーの設定を追加するだけです。

```
// .mcp.json
{
  "mcpServers": {
    "pencil": {
      "command": "pencil",
      "args": ["mcp"]
    }
  }
}
```

設定が完了すると、Claude Codeから「Pencilのキャンバスにボタンを追加して」のような指示が可能になります。詳細は[Pencil × Claude CodeのMCP連携ガイド](https://shiftb.dev/articles/pencil-mcp-claude-code)で解説しています。

### ステップ4：Gitワークフローに組み込む（所要時間：15分）

.penファイルをGitリポジトリに含め、チームのワークフローに組み込みます。

```
# .penファイルをGit管理に追加
git add *.pen

# コミット
git commit -m "feat: Pencilデザインファイルを追加"

# PRを作成してデザインレビュー
gh pr create --title "UI: ダッシュボードのリデザイン" \
  --body "Pencilでダッシュボードを再設計しました。.penファイルの差分をご確認ください。"
```

これで、デザインの変更がPRの差分に表示されるようになります。Gitでのデザイン管理の詳しいワークフローは[Pencil.devのGitワークフロー](https://shiftb.dev/articles/pencil-git-workflow)で解説しています。

## よくある質問（FAQ）

### Q. PencilはFigmaの完全な代替になりますか？

**現時点では「完全な代替」ではありません。**特にリアルタイム共同編集、高度なプロトタイプ機能、大規模デザインシステムの管理においてはFigmaが優位です。ただし、**個人開発やエンジニア中心のチーム**であれば、Pencilで十分にFigmaの役割を代替でき、さらにGit管理やAI連携の恩恵を受けられます。

### Q. Figmaのデザインデータは失われますか？

**いいえ、Figmaのデータはそのまま残ります。**Pencilへの移行はFigmaのデータを削除する必要がないため、いつでもFigmaに戻ることが可能です。コピー&ペーストでPencilに取り込んだ後も、元のFigmaファイルは変更されません。段階的に移行し、安心してから完全移行するのがおすすめです。

### Q. Pencilが有料化されたらどうなりますか？

Pencilの公式は「将来的に有料プランを導入する可能性がある」と明言していますが、「課金前に明確な説明を行う」とも述べています。仮に有料化されたとしても、**.penファイルはローカルに保存されたテキストファイル**なので、データが失われることはありません。最悪の場合でもデザインデータは手元に残り、他のツールへの移行も可能です。

### Q. デザイナーがPencilを使うのは難しいですか？

正直に言うと、**IDEやGitに馴染みがないデザイナーにとってはハードルが高い**です。PencilはエンジニアのワークフローにDeep統合されたツールなので、デザイナーにとっての使いやすさはFigmaに劣ります。チームにデザイナーがいる場合は、デザイナーはFigmaを使い続け、エンジニアがPencilのFigmaインポート機能で橋渡しするのが現実的です。

### Q. PencilとFigmaを同時に使うことはできますか？

**はい、問題なく併用できます。**PencilにはFigmaコピー&ペーストインポート機能があるため、FigmaでデザインしたものをPencilに取り込んで開発する、というフローが可能です。実際にShiftBでも、受講生のデザインレビューはFigma、実装はPencilという使い分けをしています。

### Q. Pencilで作ったデザインを非エンジニアに共有する方法は？

Pencilはコードベースのプレビュー機能を持っているため、**ローカルサーバーを起動してブラウザでプレビュー**を共有する方法が最も簡単です。Vercelなどにデプロイすれば、URLを共有するだけで非エンジニアにも見てもらえます。ただし、Figmaのような「ブラウザで開いてコメントできる」手軽さはないため、この点ではFigmaが便利です。

### Q. デザイン未経験でもPencilで良いUIが作れますか？

**はい、AI連携を活用すればデザイン未経験でも十分に作れます。**「ログイン画面をShadcn/UIで、ダークテーマで」のように自然言語で指示するだけで、プロ品質のUIが生成されます。ShiftBの受講生でも、デザイン未経験からPencilで個人開発のUIを作り、**App Storeに公開**した方がいます。詳しくは[非デザイナーでもPencilで本格UIプロトタイプを作る方法](https://shiftb.dev/articles/pencil-prototype-nondesigner)を参照してください。

PencilとFigmaは「どちらが優れている」ではなく、**「あなたの状況でどちらが最適か」**で選ぶべきです。個人開発・エンジニア中心のチーム・AI駆動開発をしている方なら、Pencilへの移行は大きなメリットがあります。まずは無料で試してみて、自分のワークフローに合うか確認してみてください。

Pencilの詳しい使い方は[Pencil.devとは？使い方・始め方を初心者向けに徹底解説](https://shiftb.dev/articles/pencil-dev-guide)で、MCP連携によるAI活用法は[Pencil × Claude CodeでUIデザインを自動生成する方法](https://shiftb.dev/articles/pencil-mcp-claude-code)で解説しています。