Claude Codeでコードは書けます。
ブログも書けます。
でもデザインだけは毎回Figmaを手動で組んでいました。
LPのアイキャッチ、ブログ記事のOGP画像、UIモックアップ。
コードは30分で終わるのに、画像素材で2時間かかる。
この非対称がずっとモヤモヤしていました。
そこで試したのが、Pencil MCPです。
Claude Codeのターミナルからテキスト指示を出すだけで、Pencilのキャンバスにデザインが生成されます。
今回はClaude Code vs Codexの比較記事でも触れたClaude Codeの拡張性を、デザイン領域で試した体験ログです。
コーディングは速くなったのに、デザインだけ毎回ゼロから
フリーランスで制作を回していると、全工程を一人でやります。
コード、文章、デザイン、SEO。
Claude Codeを導入してからコードと文章は劇的に速くなりました。
でもデザインだけが取り残されていました。
Figmaを開いて、フレームを作って、要素を並べて、色を決めて。この「白紙からの立ち上げ」が毎回重い。
アイキャッチ1枚に45分かかることもあります。
コードが5分で書ける時代に、画像で45分。さすがにおかしいと感じていました。
Pencilとは何か？── Figmaとの違いを30秒で
Pencilは、AIネイティブなデザインツールです。
独自の`.pen`ファイル形式を使い、テキスト指示からデザインを生成できます。
Figmaとの最大の違いは「出発点」です。
Figmaは白紙のキャンバスから手で組む。
Pencilはテキスト指示から叩き台が出てくる。
つまり代替ではなく、補完の関係にあります。
Claude Codeとの接続はMCP（Model Context Protocol）経由です。
Claude Codeの`~/.claude.json`にPencilのMCPサーバー設定を追加するだけ。
セットアップは5分で終わりました。
実際にやってみた：アイソメトリック画像6枚を一気に生成
ブログ記事用のセクション画像が6枚必要でした。
テーマは「アイソメトリックなテック系イラスト」。
Claude Codeのターミナルで指示を出します。
「ブログ記事のセクション画像を6枚作ってほしい。
アイソメトリックスタイルで、テック系のネイビーブルーとコーラルの配色で」。
数十秒待つと、Pencilのキャンバスに6枚の画像が並びました。
正直、ここまでできるとは思っていませんでした。
「AIデザインツール」と聞くと、使えないクオリティのものが出てくるイメージがあったからです。
実際には、そのまま叩き台として十分使えるレベルでした。
失敗談：タイムアウトとPencil未起動エラー
ただし、スムーズにいった話だけではありません。
最初の試行では6枚同時生成でタイムアウトしました。
Pencil側の処理が追いつかなかったようです。
3枚ずつ2回に分けたら通りました。
もうひとつ。
Pencilアプリを起動し忘れていて、MCP接続エラーが出ました。
ぶっちゃけ、これは恥ずかしいミスです。
でもMCPツールあるあるで、バイブコーディングの限界を痛感した体験談でも書いたように、AIツールは万能ではありません。
事前にアプリが起動しているか確認する、という基本が大事です。
テキスト指示から画像生成までの所要時間
- セットアップ（MCP設定）：約5分
- 1回のテキスト指示 → 画像生成：約30〜60秒
- 6枚の画像生成（3枚×2回）：約3分
- 微調整の指示（色変更、要素追加）：1回あたり約20秒
合計で15分程度です。
Figmaでゼロから組むと最低でも1時間はかかる作業でした。
白紙の時間が消える── これは画像生成ではなく、フローの変革
ここが一番の気づきです。
AIデザインツールは「一発で完璧なものを出す」装置ではありません。
自分の体験では、一気に生成できるツールほど微調整が難しい傾向がありました。
出力が気に入らなければ、最初からやり直しになりがちです。
Claude Code × Pencilの連携が違うのは、対話的に微調整ができる点です。
Pencil MCPの`batch_design`にはUpdate操作があり、個別のノードを指定して変更できます。
「この要素の色をコーラルに変えて」「左側のアイコンをもう少し大きく」。
そういう指示がターミナルから通ります。
これは「一発生成」と「手作業」の隙間を埋めるフローです。
白紙のキャンバスの前で「何から始めよう」と悩む時間。
あの時間が消えました。
叩き台が30秒で出るから、「ここをこう変えたい」という具体的な思考からスタートできます。
案出しが怖くなくなります。
Pencil → Figmaエクスポートの実際
「Pencilで作ったものをFigmaに持っていけるの？」という疑問があると思います。
答えはイエスです。FigmaコミュニティにPencil to Figma プラグインが公開されています。
Pencil公式のFigma連携ガイドにも詳しい手順が載っています。
フローとしては、Pencilで叩き台を作り、Figmaにエクスポートして、コンポーネント設計やピクセル単位の微調整はFigmaで行う。
Figmaコンポーネント設計の実践ガイドで書いたようなコンポーネント設計のノウハウは、そのまま活かせます。
Pencilが「初速」、Figmaが「仕上げ」。
この役割分担がしっくりきました。
余白やレイアウトの具体的なpx値についてはWebデザインの余白、何pxが正解？で詳しく解説しています。
どんな人に向いているか？
すべての制作者に合うわけではありません。
使い分けの基準を整理します。
向いている人：
- フリーランスで制作全工程を一人で回している
- Claude Codeをすでに使っている
- デザインの「ゼロからの立ち上げ」に時間がかかっている
- 叩き台があれば微調整できるスキルがある
向いていない人：
- Figmaのワークフローに満足している
- デザインの精度がピクセル単位で求められる案件が中心
- チームでデザインレビューのプロセスが確立されている
迷ったら、まず1枚だけ試してみるのが早いです。
Claude Codeを活用した知識管理の仕組みを作っているような、個人で制作フローを最適化している人には特に刺さるツールだと思います。
まとめ：制作フローにAIを組み込む、という発想の転換
「AIでデザインを作る」と「制作フローにAIを組み込む」は、似ているようで全然違います。
前者は「AIが完成品を出す」ことを期待します。
後者は「白紙の時間をなくして、人間は判断と微調整に集中する」という設計です。
Claude Code × Pencil × Figmaの連携は、後者の考え方に近い。
AI時代のデザイナー生き残り戦略でも書きましたが、AIツールとの向き合い方は「全部任せる」か「全部自分でやる」の二択ではありません。
間にある「叩き台はAI、仕上げは人間」という選択肢が、いま一番現実的です。
AIが出した叩き台を80点から90点に引き上げるための具体的なチェック方法は、Figma AIのデザインが80点止まりなら — 5軸チェックで90点にする方法で体系的にまとめています。
まずはPencilをインストールして、Claude Codeから最初の1フレームを作ってみてください。
白紙の時間が消える感覚は、一度体験するとわかります。
参考になれば幸いです。
このシリーズの他の記事
「AIデザインの隙間を埋める」シリーズでは、AIデザインの判断基準を8つの切り口で解説しています。
- Figma AIの使い方 — 操作より先に知るべき判断基準
- AIデザインツール4つを実際に使って比較した
- Figma AIが「使えない」と感じたら — 問題はツールじゃなくて評価基準だった
- Figma AIのデザインが80点止まりなら — 5軸チェックで90点にする方法
- AI画像生成プロンプトのコツ — 50枚の実践ログ
- Webデザインの余白、何pxが正解？
- デザイン初心者が何から始めるべきか？
- AIデザインの隙間を埋める — 判断基準ガイド（まとめ）
