---
title: "Pencil.devとは？使い方・始め方を初心者向けに徹底解説【2026年最新】"
description: "Pencil.devの特徴・インストール方法・使い方・Figmaとの違い・料金プランを徹底解説。AIでUIデザインを自動生成できる新世代ツールの始め方ガイド。"
url: "https://shiftb.dev/articles/pencil-dev-guide"
publishedAt: "2026-04-05"
updatedAt: "2026-04-05"
author: "立川修平（ぶべ）"
category: "tools"
tags: ["Pencil.dev", "デザインツール", "AI駆動開発", "MCP", "Figma"]
---

# Pencil.devとは？使い方・始め方を初心者向けに徹底解説【2026年最新】

「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とは？——デザインとコードの壁を壊す新ツール

### 定義：IDEに統合されたAIネイティブのデザインツール

Pencil.devは、VS CodeやCursorなどの**IDE内で直接動作するベクターデザインツール**です。従来のデザインツール（Figma、Sketch、Adobe XDなど）がブラウザやスタンドアロンアプリで動くのに対し、Pencilは**コードエディタの中でデザインする**という全く新しいアプローチを取っています。

2026年1月にリリースされて以来、GitHubで急速にスター数を伸ばし、2026年4月時点で**世界中のエンジニアコミュニティで最も注目されるデザインツール**の一つとなっています。開発元はPencil Labs（米国サンフランシスコ）で、「デザインとコードの壁を取り払う」ことをミッションに掲げています。

![Pencil.dev公式サイトのトップページ。「Dream on canvas. Land in code.」のキャッチコピーが特徴的](https://shiftb.dev/images/articles/pencil-dev-guide-ss-homepage.png)

### .penファイルの正体——デザインがJSONテキストになる

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": "メールアドレス"
        }
      ]
    }
  ]
}
```

これが意味することは非常に大きいです。

- **Gitで差分管理**：デザインの変更が「コードの差分」として可視化される
- **PRレビューに含められる**：デザイン変更もコードレビューの対象にできる
- **git revertでデザインも巻き戻し**：「3日前のデザインに戻したい」がコマンド一つで可能
- **ブランチ運用**：feature/redesign-topのようなブランチでデザイン変更を分離できる

Figmaのデザインデータがクラウド上のプロプライエタリ形式で保存されるのとは、根本的に異なる設計思想です。

### Pencil.devが注目される3つの背景

なぜ今、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.devの全体像：IDE統合・AIデザイン生成・Git管理の3つの柱](https://shiftb.dev/images/articles/pencil-dev-guide-overview.png)

## Pencil.devの主要機能【5つの特徴を徹底解説】

### ① Design as Code——GitでデザインをPR管理

前述の通り、Pencilのデザインデータは.pen形式のテキストファイルです。これにより、以下のワークフローが実現します。

1. デザイン変更をPencilのキャンバスで行う
2. .penファイルの差分が自動で生成される
3. `git add` → `git commit`でデザイン変更をコミット
4. PRを作成し、デザイン変更をチームでレビュー
5. マージ後、デザインとコードが同時にデプロイ

**従来のFigmaベースのフロー**では、「Figmaでデザイン変更→エンジニアに共有→手動でコードに反映→PRレビュー」と4ステップ必要でした。Pencilなら**デザイン変更がそのままPRになる**ため、ワークフローが大幅に短縮されます。

### ② AI Vibe Design——自然言語でUIを生成

Pencilには**AIチャットインターフェース**が内蔵されており、自然言語でデザインを指示できます。

たとえば、以下のようなプロンプトを入力するだけでUIが生成されます。

| プロンプト例 | 生成されるUI |
| --- | --- |
| 「ログイン画面をTailwindで、ダークモードで」 | ダークテーマのログインフォーム |
| 「料金プランの比較カードを3カラムで」 | 3列のPricingカードコンポーネント |
| 「ヘッダーにロゴとナビゲーション、CTAボタンを配置」 | レスポンシブ対応のヘッダー |
| 「このフォームにバリデーションエラーの表示を追加」 | 既存UIへのエラーメッセージ追加 |

Pencilは**Shadcn/UI、Tailwind CSS**などの人気コンポーネントライブラリを理解しており、これらのデザインシステムに準拠したUIを自動生成します。「デザインの知識がなくても、言葉で伝えればプロ品質のUIが作れる」というのは、個人開発者にとって革命的です。

### ③ 双方向リアルタイム同期

PencilはMCPを活用し、**キャンバス上の変更とコードを双方向にリアルタイム同期**します。

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

この双方向同期はAST（抽象構文木）変換とHMR（Hot Module Replacement）の組み合わせで実現されており、遅延はほぼ感じません。実務では「キャンバスで大まかにレイアウトを決め、細かい調整はコードで行う」というワークフローが最も効率的です。

### ④ MCP連携——Claude Code・Cursorとシームレスに接続

PencilはMCP（Model Context Protocol）サーバーを内蔵しており、Claude CodeやCursorから直接キャンバスを操作できます。

具体的には、Claude Codeから以下のような操作が可能です。

- キャンバス上のデザインを読み取り、コードに変換
- プロンプトで指定したUIをキャンバスに直接描画
- 既存デザインの一部を修正・更新
- コンポーネントの追加・削除・並び替え

**MCP連携が使えるAIツール**は以下の通りです。

| AIツール | 連携方法 | 対応状況 |
| --- | --- | --- |
| Claude Code | MCPサーバー自動接続 | ✅ 完全対応 |
| Cursor | Tools & MCP設定から有効化 | ✅ 完全対応 |
| Windsurf | MCP設定 | ✅ 対応 |
| GitHub Copilot | —— | ❌ 未対応 |

### ⑤ Figmaインポート——既存資産をそのまま活用

「すでにFigmaで大量のデザイン資産がある」という方も安心です。Pencilは**Figmaからのコピー&ペーストに対応**しており、Figma上の要素を選択してコピーし、Pencilにペーストするだけでレイアウトやスタイルを維持したまま取り込めます。

ただし、いくつかの制限があります。

- FigmaのAuto Layoutは一部再解釈が必要
- プラグインで生成された特殊なエフェクトは反映されない場合がある
- フォントはローカル環境に依存する

実務では「Figmaで作成した既存デザインをベースに、Pencilで新規開発を進める」というハイブリッド運用が現実的です。

## Pencil.devのインストール方法【3つのパターン】

Pencilは**VS Code拡張機能・Cursor拡張機能・デスクトップアプリ**の3つの形態で利用できます。いずれも無料で、5分以内にセットアップが完了します。

### パターン①：VS Code / Cursor拡張機能（推奨）

**最もスムーズに始められるのが、VS Code拡張機能**です。以下の手順でインストールします。

**Step 1：拡張機能のインストール**

1. VS Code（またはCursor）を開く
2. 拡張機能パネルを開く（`Cmd + Shift + X`）
3. 「Pencil」と検索
4. 「Install」をクリック

![VS Code MarketplaceでのPencil拡張機能。Installボタンをクリックするだけで導入できる](https://shiftb.dev/images/articles/pencil-dev-guide-ss-vscode-ext.png)

**Step 2：アカウント認証**

1. インストール後、サイドバーにPencilアイコンが表示される
2. アイコンをクリックし、メールアドレスを入力
3. メールに届いた認証コード（6桁）を入力
4. 認証完了——すぐに使い始められる

**Step 3：MCP接続の確認（Claude Codeユーザー向け）**

Claude Codeを使っている場合、Pencilのインストール時にMCPサーバーが**自動的にセットアップ**されます。以下のコマンドで接続を確認できます。

```
# Claude Codeのターミナルで実行
/mcp

# 以下が表示されればOK
# pencil ✔ connected
```

Cursorの場合は、Settings → Tools & MCP で「pencil」が有効になっていることを確認してください。

### パターン②：デスクトップアプリ

IDE内ではなく、**独立したアプリケーションとして使いたい場合**はデスクトップアプリがおすすめです。公式のダウンロードページからOS別にインストーラーを取得できます。

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

| OS | インストール方法 | 備考 |
| --- | --- | --- |
| macOS | .dmgをダウンロード→Applicationsにドラッグ | 推奨環境 |
| Linux | .debまたは.AppImageを使用 | X11環境が安定 |
| Windows | インストーラーをダウンロード | 対応済み |

デスクトップアプリでも、右上の「Export Code & MCP」ボタンからClaude CodeやCursorとのMCP接続を設定できます。アプリを起動すると自動的にMCPサーバーが立ち上がるため、特別な設定は不要です。

### パターン③：既存プロジェクトへの導入

すでにNext.jsなどのプロジェクトがある場合、以下の手順でPencilを組み込めます。

1. VS Code / Cursorに拡張機能をインストール（パターン①と同じ）
2. プロジェクトのルートディレクトリで`.pen`ファイルを作成
3. `.gitignore`に.penファイルを**含めない**（Git管理する）

```
# プロジェクトルートで.penファイルを作成
touch design.pen

# VS Codeで開くとPencilのキャンバスが起動
code design.pen
```

.penファイルをダブルクリック（またはVS Codeで開く）すると、自動的にPencilのキャンバスが起動します。

![Pencil.devのインストール手順：VS Code拡張機能→認証→MCP接続の3ステップフロー](https://shiftb.dev/images/articles/pencil-dev-guide-setup.png)

## Pencil.devの使い方【初めてのデザイン作成ステップ】

インストールが完了したら、実際にデザインを作成してみましょう。ここでは**シンプルなランディングページのヒーローセクション**を例に、Pencilの基本的な使い方を解説します。所要時間は約10分です。

### Step 1：.penファイルを作成してキャンバスを開く（1分）

まず、プロジェクト内に.penファイルを作成します。

```
# ターミナルで実行
touch hero-section.pen
```

VS Code（またはCursor）でこのファイルを開くと、Pencilのキャンバスが自動的に起動します。中央に白いキャンバスが表示され、左側にレイヤーパネル、右側にプロパティパネルが配置されています。

インターフェースはFigmaに似ており、Figma経験者であれば直感的に操作できます。

### Step 2：フレームを配置する（2分）

キャンバス上の操作は、Figmaとほぼ同じです。

- **フレーム（F）**：レイアウトの枠組みを作成（Figmaの「Frame」に相当）
- **テキスト（T）**：テキスト要素を追加
- **矩形（R）**：四角形の図形を追加

まず「F」キーでフレームツールを選択し、キャンバス上でドラッグして1440×900のフレームを作成します。これがページ全体のコンテナになります。

右側のプロパティパネルで、以下を設定します。

- Layout: Vertical（縦方向のレイアウト）
- Alignment: Center
- Gap: 24
- Padding: 80

### Step 3：AIチャットでUIを生成する（3分）

ここがPencil最大の魅力です。キャンバス右下のAIチャットアイコンをクリックし、以下のように入力します。

```
ヒーローセクションを作成してください。
- キャッチコピー「AIで、開発を10倍速く」
- サブテキスト「Claude CodeとPencilで実現する、新しい開発体験」
- CTAボタン2つ「無料で始める」「デモを見る」
- Tailwind CSSベース
- ダークモード対応
```

数秒でAIがキャンバス上にUIを生成します。テキスト、ボタン、レイアウトがすべて自動配置され、Tailwind CSSのクラスが適用された状態で表示されます。

生成されたデザインが気に入らない場合は、追加の指示で修正できます。

```
# 修正の指示例
- CTAボタンをもっと大きくして
- 背景にグラデーションを追加して
- フォントサイズを見出し48px、サブテキスト20pxに
```

### Step 4：手動で微調整する（2分）

AIが生成したUIをベースに、手動で微調整を行います。Pencilのキャンバスでは**ドラッグ&ドロップで要素を移動**でき、右側のプロパティパネルで以下を細かく設定できます。

- フォント、サイズ、ウェイト、行間
- 色（カラーピッカー / HEX / Tailwindカラー）
- 余白（padding / margin / gap）
- 角丸（border-radius）
- シャドウ、グラデーション

ポイントは、プロパティパネルの設定項目が**CSSのプロパティとほぼ1対1で対応**している点です。CSSの知識があれば、迷うことなく操作できます。

### Step 5：コードとしてエクスポートする（2分）

デザインが完成したら、コードとしてエクスポートします。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機能で十分です。

## Pencil.dev vs Figma——どちらを選ぶべきか

「PencilがあればFigmaは不要？」という質問をよく受けます。結論から言うと、**両者は競合ではなく補完関係**です。それぞれの強み・弱みを理解した上で使い分けるのがベストです。

### 機能比較表

| 比較項目 | Pencil.dev | Figma |
| --- | --- | --- |
| 動作環境 | IDE内 / デスクトップアプリ | ブラウザ / デスクトップアプリ |
| データ形式 | .pen（JSON テキスト） | クラウド上のプロプライエタリ形式 |
| Git管理 | ✅ ネイティブ対応 | ❌ 非対応（プラグインで部分対応） |
| AI連携 | ✅ MCP経由でClaude Code等と連携 | △ Figma AIあり（限定的） |
| コード生成 | ✅ 双方向リアルタイム同期 | △ Dev Modeでの参照（手動変換） |
| 共同編集 | Git経由（非同期） | ✅ リアルタイム共同編集 |
| プロトタイピング | △ 基本機能あり | ✅ 高度なプロトタイプ機能 |
| プラグイン | MCP対応ツールと連携 | ✅ 数千のプラグイン |
| 学習コスト | 低い（エンジニア向け） | 中程度 |
| 料金 | 無料（2026年4月時点） | 無料プランあり / Pro $15/月 |

### Pencil.devが向いている人

- **個人開発者**：デザイナーがいないチームで、自分でUIをサクッと作りたい
- **AI駆動開発をしている人**：Claude CodeやCursorメインで開発している
- **デザインをGit管理したい人**：PRレビューにデザイン変更を含めたい
- **Figmaの学習コストを避けたい人**：IDE内で完結したい

### Figmaが向いている人

- **デザイナーとの協業が多い人**：デザイナーはFigmaを使っていることが多い
- **高度なプロトタイプが必要な人**：インタラクション、アニメーション、ユーザーテスト
- **大規模チーム**：リアルタイム共同編集が必要
- **既存のFigma資産が多い人**：移行コストが高い場合

### 両方使う「ハイブリッド運用」のすすめ

ShiftBでは以下のハイブリッド運用を推奨しています。

| フェーズ | 使うツール | 理由 |
| --- | --- | --- |
| UXリサーチ・ワイヤーフレーム | Figma | プロトタイプ機能が強力 |
| UIデザイン確定 | Figma → Pencilにコピー | デザイナーの成果物を引き継ぎ |
| 実装・コーディング | Pencil + Claude Code | AI連携で爆速コード化 |
| デザイン修正・イテレーション | Pencil | Git管理で安全に変更 |

## Pencil.devの料金プラン【2026年最新】

### 現在の料金体系——完全無料

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.devの料金ページ。「Pencil is currently free」と明記されている](https://shiftb.dev/images/articles/pencil-dev-guide-ss-pricing.png)

### AI機能利用時の追加コスト

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.devを使いこなすためのTips 5選

### ① コンポーネントライブラリを活用する

PencilはShadcn/UIやTailwind CSSなどの人気コンポーネントライブラリを理解しています。AIに「Shadcn/UIのCardコンポーネントを使って」と指示するだけで、デザインシステムに準拠したUIが生成されます。

**良い指示の例：**

```
Shadcn/UIのCardコンポーネントを使って、
ユーザープロフィールカードを作成してください。
アバター画像、名前、メールアドレス、
「プロフィールを編集」ボタンを含めてください。
```

**悪い指示の例：**

```
プロフィールカードを作って
```

具体的なコンポーネントライブラリ名と要件を指定することで、AIの生成精度が格段に上がります。

### ② .penファイルのGit運用ベストプラクティス

.penファイルはテキストベースですが、大規模なデザインになるとファイルサイズが大きくなることがあります。以下のルールを守ることで、Git運用がスムーズになります。

- **1ページ1ファイル**：`login.pen`、`dashboard.pen`のようにページごとに分割
- **コンポーネントは別ファイル**：共通コンポーネントは`components/`ディレクトリに配置
- **コミットメッセージにデザイン変更内容を明記**：「design: ログインページのCTA配色を変更」のようにprefixをつける

### ③ AIプロンプトのコツ——「何を」「どのように」を明確に

PencilのAI機能を最大限に活用するためのプロンプトのコツです。

| 観点 | 良い例 | 悪い例 |
| --- | --- | --- |
| 具体性 | 「1440px幅、3カラム、gap24pxのカードレイアウト」 | 「いい感じのカード」 |
| 技術スタック | 「Tailwind CSSで、Shadcn/UIのButtonを使って」 | 「ボタンを追加」 |
| コンテキスト | 「SaaS管理画面のダッシュボード。既存のヘッダーの下に」 | 「ダッシュボードを作って」 |
| トーン・スタイル | 「ミニマルなデザイン、余白多め、モノトーン基調」 | 「おしゃれにして」 |

### ④ Figmaからの移行は段階的に

Figmaから一気にPencilに移行するのではなく、以下の段階的アプローチをおすすめします。

1. **Week 1**：新規の小さなコンポーネント（ボタン、カード）をPencilで作成
2. **Week 2〜3**：新規ページのデザインをPencilで行い、既存ページはFigmaを継続
3. **Week 4以降**：既存FigmaデザインをPencilに徐々に移行

この段階的アプローチにより、チーム全体のラーニングカーブを緩やかにできます。

### ⑤ チーム開発での活用法

Pencilはソロ開発者だけでなく、チーム開発でも威力を発揮します。

- **デザインレビュー**：PRにデザイン変更を含めることで、コードレビューと同時にデザインレビューが可能
- **デザインの履歴管理**：「なぜこのデザインになったのか」がコミット履歴で追跡可能
- **コンフリクト解消**：.penファイルはテキストベースなので、Gitのマージコンフリクトをテキストエディタで解消可能
- **CI/CDとの統合**：デザイン変更時に自動でスクリーンショットを生成するなど、パイプラインに組み込む活用も可能

![Pencil.devの開発ワークフロー：デザイン→Git管理→AI連携→コード生成の流れ](https://shiftb.dev/images/articles/pencil-dev-guide-workflow.png)

## よくある質問（FAQ）

### Q. Pencil.devは日本語対応していますか？

UIは英語ですが、**日本語テキストのデザインは問題なく作成**できます。AIへの指示も日本語で行えます（Claude CodeやCursorが日本語対応しているため）。フォントはローカル環境にインストールされているものが利用可能なので、Noto Sans JPなどの日本語フォントも使えます。

### Q. Figmaのデザインはそのまま読み込めますか？

**Figmaからのコピー&ペーストに対応**しています。Figma上で要素を選択してコピー（Cmd+C）し、Pencilにペースト（Cmd+V）するだけで、レイアウトやスタイルが維持されたまま取り込めます。ただし、Figma固有の高度な機能（一部のAuto Layout設定、プラグイン依存のエフェクト等）は再調整が必要な場合があります。

### Q. オフラインでも使えますか？

**はい、Pencil自体はオフラインで動作します。**.penファイルはローカルに保存されるため、インターネット接続がなくてもデザインの閲覧・編集が可能です。ただし、AI機能（Claude Code連携など）を利用する場合はインターネット接続が必要です。

### Q. Windowsでも使えますか？

**はい、Windows対応しています。**デスクトップアプリとVS Code拡張機能の両方がWindowsで動作します。ただし、最も安定しているのはmacOS環境です。

### Q. 将来有料化される可能性はありますか？

公式は「将来的に有料プランを導入する可能性がある」と明言しています。ただし、「課金前に明確な説明を行う」とも述べているため、突然課金が発生することはありません。現時点では**全機能を無料で利用**できるため、今のうちに試しておくことをおすすめします。

### Q. デザインの知識がなくても使えますか？

**はい、AIを活用すればデザインの知識がなくても十分に使えます。**「ログイン画面を作って」のように自然言語で指示するだけでプロ品質のUIが生成されます。ShiftBの受講生でも、デザイン未経験からPencilを使って個人開発のUIを作っている方が多数います。

### Q. データはクラウドに保存されますか？

**いいえ、すべてローカルに保存されます。**.penファイルはプロジェクトディレクトリ内のテキストファイルとして保存され、クラウドには一切送信されません。機密性の高いプロジェクトでも安心して利用できます。

Pencil.devは「デザインとコードの壁」を壊す、エンジニアのための新世代デザインツールです。無料で始められる今のうちに、ぜひ一度試してみてください。

さらに詳しいMCP連携の方法は[Pencil × Claude CodeでUIデザインを自動生成する方法【MCP連携】](https://shiftb.dev/articles/pencil-mcp-claude-code)で、Figmaとの詳細な比較は[Pencil vs Figma｜エンジニアが乗り換えるべき5つの理由](https://shiftb.dev/articles/pencil-vs-figma)で解説しています。