✍️
普段Drawioで画面設計を作ってる非デザイナーがPencilを触ってみた

kima
2026/05/12に公開
Claude Code
Pencil
tech
 はじめにレバテック開発部の今井です。普段は社内向け業務システムを開発しています。

普段はDrawioなどで画面設計をしているのですが、もっとAIフレンドリーなツールを試してみたいと思いました。

そこで、少し前に話題になってたPencilを今更ながら触ってみました。
この記事は、非デザイナー目線でPencilで触ってみたのでその感想を共有するものです。
!この記事はすべて2026年5月時点の情報です。

 なぜDrawioで画面設計を作るのか私のチームは、社内向けシステムであることからデザインの優先度が高くなく、Figmaのような専用ツールは導入されていません。そのため、デザイナーではない人が画面設計も担当しています。
私達のチームでは開発者たち以外も参照するため、様々な注記がある画面設計を残す方針としています。そのため最終的なコードがあればそれでいいということにはならないです[1]。
このような背景から、誰でも簡単に操作できるDrawioなどで画面設計をしています。

 PencilとはなにかPencil は、AI を前提として作られた新しいデザインツールです。ざっくり特徴を挙げると：

.pen というファイル形式でデザインを保存します。実体は暗号化されたバイナリで、AI（やプラグイン）からは MCP 経由でしか読み書きできません

MCP サーバ経由で AI と直接やり取りできます。Claude Code / Cursor などから「ボタン追加して」「色を primary に変えて」と話しかけると、AI が図形を編集してくれます

コード生成も AI で実施しやすいです。「ボタン押したら React 出力」ではなく、.pen を AI が読んで自分でコードを書く方式となっています

コードエディタ拡張機能 があり、.pen ファイルを VSCode 上でそのまま開いて編集できます
つまり「人間が手で作って、後で AI に読ませる」という従来の流れではなく、最初から AI と一緒に作る前提のデザインツールです。

 Pencilの導入と試したこと
 私が試した構成Pencil はさまざまなAIモデルやコードエディタに対応しています。

今回の記事では、VSCode + Claude Codeの構成で行っています。
それ以外の構成でも特に問題なくこの記事で試したことは可能かと思います。

 インストール公式のセットアップガイド に手順が載っています。
大雑把な流れは以下のとおりです。
Pencil の VSCode 拡張機能をインストールします
Pencil のアカウントを登録します（このときに Pencil の MCP も登録できます）

 MCPのツールについてPencil の AI 連携の中心は、Pencil が提供する MCP サーバです。Claude Code などの AI クライアントからこの MCP サーバ経由で .pen を読み書きします。例えば以下の様なツールがあります。

get_editor_state: 今開いている .pen の現在の状態（選択中のノード、利用可能な再利用可能コンポーネントの一覧など）を取得します。AI が最初に呼ぶ「自己紹介」のようなツールです。

batch_design: ノードの追加・更新・削除などをまとめて実行する、書き込み系のメインツールです。独自の DSL で複数の操作を 1 コールに集約できます。

get_screenshot: 指定したノードのスクリーンショットを返します。AI が「自分が描いたものを目視で確認する」ために使います。

get_guidelines: 公式のガイドラインを取得します。「コード生成」「テーブル」「Web App」などタスク別のガイドを引いてきて、AI が正しい流儀で作業するための拠り所になります。
それ以外にもツールはたくさんあります。ツールの詳細仕様は Pencil の公式ドキュメント を参照してください。

 試したこと今回私が試したことは次のとおりです。
新規の .pen ファイルを作成
デザインシステムを導入
AIで管理画面のサンプルを作成
AIでその画面をコードにしてもらう

 1. 新規の.penファイルを作成とりあえず VSCode 上で sample.pen という新規ファイルを作成しました。

VSCode の Pencil 拡張機能を導入していると、VSCode 上で .pen 拡張子ファイルが Pencil で操作できるようになります。

 2. デザインシステムを導入Pencil は標準で OSS のデザインシステムを簡単にインストールできるようになっています。
使えるものは、AI に調べさせることもできます。Claude Code に「使えるデザインシステム一覧出して」と聞くと、教えてくれます。
今回は試しに shadcn/ui を入れてみました。shadcn/ui は Tailwind CSS ベースのコンポーネント集で、Web フロントエンドでよく採用されるもののひとつです。今回は「動作確認のサンプルとして使ってみた」だけで、実務では自社のデザインシステムや別のライブラリを使うことになるかと思います。

 3. AIで管理画面のサンプルを作成最初に投げたプロンプトはこんな感じです：
sample.penに対して、とりあえずよくありがちな管理画面的なサンプルを作ってみてください。学習用なのでシンプルにしてください。
更にこの画面に対して次のことができます。
出来上がった画面を GUI でそのまま手調整できます
Figma 等の専用ツールに習熟してない私にとっても、操作は直感的ですぐに慣れました

「ボタンの位置だけ変えたい」みたいな細かい修正も、Claude Code に話しかければやってくれます

 検索画面と詳細画面も追加してみる「検索画面と詳細画面も作って」と頼んだら、同じ shadcn のトークンとコンポーネントを使い回して以下を出してきました。
検索画面（顧客検索）:
詳細画面（顧客詳細）:
同じデザインシステムを使い回しているので、3 画面で見た目が完全に揃うのがよかったです。Drawioで見た目をちゃんと揃えるのは工夫が必要なので助かります。

 インタラクション導入の試行画面もできたということでボタンを押したら開くモーダルを導入しようとしました。ここでつまずきました。

「Delete ボタンを押すとモーダルが開く」みたいなインタラクションを表現する機能をつけようとしましたが、Pencil にはそれを決定論的に表現する手段がありません。
これを表現するには、context ノードに自然文で仕様を書く必要がありました。context ノードとはAI向けのメモです。

ここに挙動や実装上の注意などを書いておきます。すると、AI が読み取る前提のメモとして機能します。

 4. AIでその画面をコードにしてもらう3 で作った画面をフロントエンドのコードにしてもらいました。今回はReact + Tailwind です。
ここで一つ大事なポイント：Pencil でのデザインからコードへの変換は、決定論的なエクスポート機能ではなく、AI が .pen を読み取って自分でコードを書く形式です。

「ボタン押下 → モーダル」みたいな動的な挙動を実現するには、context ノードによる自然言語の指示も必要です。
今回作ったのは管理画面のサンプル程度の規模ですが、生成されたコードはそのまま動かせるレベルでした。

 所感
 よかったところ
立ち上がりがとにかく早い。AI と話すだけで、さくさく画面が作れてよかったです。この画面に対して人が直接編集できるのもありがたかったです。機能が多くないため非デザイナーとしてはとっつきやすかったのもメリットに感じました。

デザインシステムの恩恵をそのまま受けられる。ビジュアルデザインが実際のものと同じものが簡単に作れるのがうれしいです。実務では自分たちのデザインシステムを作る必要がありますが、Drawioでこれを再現するよりは遥かによいでしょう。

デザインファイルをClaudeCodeが直接触れる。普段と同じようにCLIでの Claude Code でデザインを触れるのが良かったです。今回は試してませんが、Skillsなどを整備すれば自分たちのシステムの特殊な箇所にも適用できそうです。

 気になったところ
コストが読みにくい。現在は無料ですが将来的に有償になりそうです。そのため、現時点で実際の開発に組み込むことは躊躇われます。

同時編集ができない。ブラウザ上で共同編集のようなことはできないです。

画面設計の共有方法が悩ましい。Git diff は実質取れませんし、URL でこれ見てと渡すこともできません。スクショや PDF でエクスポートして共有、などといったワークフローになりそうです。

 結論社内向け業務システムを作る非デザイナーにとっては、「デザインシステムをまるごと取り込んで、AI と会話&人の手で修正しながら画面を作り、概ねそのままフロントエンドのコードに展開できる」ことがメリットに感じました。実務への適用はまだ検討すべきところはありますが、今後に期待したいツールでした。

脚注
注記がある画面設計を残す必要があるため、HTMLで管理となる Claude Design は今回の検討から対象外にしました。 ↩︎