新デザインツール「Pencil」でUI開発ワークフローが変わる
こんにちは、箕浦です。
フロントエンド開発をしていると、「Figma でデザインを確認 → エディタに戻ってコード実装 → また Figma で確認…」という往復作業に時間を取られていませんか？
デザイナーとの連携では「デザインファイルのバージョン管理ができない」「最新版がどれかわからない」といった課題も、よく耳にします。
今回は、そんな開発者の悩みを根本から解決してくれる新しいデザインツール Pencil（pencil.dev）を紹介します。
Pencil とは
Pencil は "Design on canvas. Land in code."（キャンバスでデザインし、コードに着地する）をコンセプトに掲げるデザインツールです。
最大の特徴は、IDE の中で直接デザインができること。
VSCode や Cursor の拡張機能として統合されるほか、macOS / Linux / Windows 向けのデスクトップアプリも提供されており、デザインツールとエディタを行き来する必要がなくなります。
しかも 現在完全無料 で利用できます。
従来のデザインツールとの違い
「Figma や Sketch と何が違うの？」という疑問に、一覧表で答えます。
| 比較項目 | Figma / Sketch | Pencil |
|---|---|---|
| 動作環境 | 独立したアプリ / ブラウザ | IDE 内で直接動作 |
| ファイル形式 | 独自形式（Git 管理に不向き） | JSON ベースの .pen ファイル |
| バージョン管理 | 独自のバージョン履歴 | Git で完全管理（diff・マージ可能） |
| データ保存 | クラウド中心 | ローカルファースト |
| AI 連携 | プラグインで限定的 | MCP で AI エージェントと直接連携 |
| ターゲット | デザイナー中心 | エンジニア中心 |
Pencil はエンジニアの開発ワークフローに自然に溶け込むことを最優先に設計されています。
主な機能
1. IDE 統合デザインエディタ
Pencil は IDE の拡張機能、またはスタンドアロンのデスクトップアプリとして動作します。
無限キャンバス上でフレーム、テキスト、シェイプなどのベクター要素を自由に配置でき、Figma と同様のレイヤーパネルも備えています。
利用方法は以下の通りです。
| 方法 | 対応環境 |
|---|---|
| IDE 拡張機能 | VSCode、Cursor |
| デスクトップアプリ | macOS、Linux、Windows |
コードを書いている最中に、すぐ隣のタブでデザインを調整できるため、コンテキストスイッチのコストが大幅に削減されます。
2. Git ネイティブなファイル管理
Pencil のデザインファイルは .pen という拡張子の JSON ベースのテキストファイルです。
これにより、以下のことが当たり前にできます。
- git diff でデザインの変更差分を確認
- ブランチ を切ってデザインのバリエーションを試す
- プルリクエスト でデザインレビュー
- マージ でデザイン変更を統合
# デザインファイルの差分を確認
git diff design/dashboard.pen
# デザイン変更をコミット
git add design/dashboard.pen
git commit -m "ダッシュボードのサイドバーレイアウトを更新"
デザインファイルがコードと同じリポジトリで管理できるため、「デザインの最新版はどこ？」という問題が解消されます。
3. AI エージェント連携（MCP）
Pencil の最も革新的な機能が、MCP（Model Context Protocol） を通じた AI エージェントとの連携です。
対応する AI プラットフォームは以下の通りです（2026年2月時点）。
- Claude Code（CLI・IDE 版）
- Claude Desktop
- Cursor
- Windsurf IDE
- Codex CLI
- Antigravity IDE
- OpenCode CLI
自然言語でデザインの指示を出すだけで、AI が .pen ファイルを直接操作します。
> 「サイドバー付きのダッシュボード画面を作成して」
> 「このフォームにメールアドレスの入力フィールドを追加して」
> 「カラーテーマをダークモードに切り替えて」
全ての処理はローカルで実行されるため、デザインデータがクラウドに送信されることはありません。
4. コンポーネントシステムとデザイントークン
再利用可能なコンポーネントを作成でき、メインコンポーネントを変更すると全てのインスタンスに自動反映されます。
Figma のコンポーネント機能に馴染みがある方なら、直感的に使えるはずです。
また、バリアブル（変数）システム により、デザイントークンを一元管理できます。
CSS カスタムプロパティや Tailwind の設定値と連動させれば、デザインとコードの間でトークンが常に同期された状態を保てます。
5. プリビルトUIキット
ゼロからコンポーネントを作らなくても、すぐに使える UI キットが用意されています。
| UIキット | 特徴 |
|---|---|
| Shadcn UI | React で人気の高いコンポーネントライブラリ |
| Halo | モダンなデザインシステム |
| Lunaris | 汎用デザインシステム |
| Nitro | 軽量デザインシステム |
特に Shadcn UI キットは、Next.js + Tailwind CSS のプロジェクトとの相性が抜群です。
実践：開発ワークフローに組み込む
Pencil を日常の開発に取り入れると、ワークフローがどう変わるかを見てみましょう。
Before（従来）
- Figma でデザインを確認
- エディタに切り替えてコーディング
- ブラウザで動作確認
- Figma に戻ってデザイン調整
- デザイン変更をスクリーンショットで共有
- 以上を何度も繰り返す
After（Pencil 導入後）
- IDE 内で .pen ファイルを開いてデザインを確認・編集
- 同じ IDE でコーディング
- AI に「このコンポーネントのレイアウトを修正して」と指示
- 変更を
git commitでまとめて管理 - プルリクエストでデザイン・コード両方をレビュー
コンテキストスイッチが激減し、デザインとコードの整合性が自然に保たれるようになります。
実際に使ってみた
Pencilのデスクトップアプリをインストールして起動した画面がこちら。
Figmaを触ったことある人であれば、なじみある画面構成です。
デザインシステムとして最初からいくつか組み込まれています。
今回は「Shadcn」を使って、簡単なログインフォームを作成してみます。
画面左下にプロンプトを入力します。
AIが「Shadcn」を使ってログインフォームを作成してくれます。
作成されたログインフォームがこちら。
ここまでは正直Figmaでもできます。
Claude Code に移って、先ほど作成したフォームを選択した状態で、Reactのコードを作成してもらいます。
コードが作成されました。
テストコードも作成してくれています。
ブラウザで確認するとこちら。 忠実とまではいかないですが、だいたいこんな感じです。
まとめ
Pencil は「デザインとコードを一つの世界に統合する」という明確なビジョンを持ったツールです。
| ポイント | 内容 |
|---|---|
| IDE ネイティブ | 開発環境から離れずにデザイン作業が可能 |
| Git ネイティブ | テキストベースの .pen ファイルで完全なバージョン管理 |
| AI ファースト | MCP を通じた AI エージェントとの直接連携 |
| 無料 | 現時点で全機能が無料で利用可能 |
Figma がデザイナーのためのツールだとすれば、Pencil は明確にエンジニアのためのデザインツールです。
フロントエンド開発の効率化を考えている方は、ぜひ試してみてください。
公式サイト: https://pencil.dev